Skip to content
Snippets Groups Projects
Commit 9382e9e5 authored by Loïc Poullain's avatar Loïc Poullain
Browse files

Make menu btns a parameter of SimulationPage

parent 7b411d24
No related branches found
No related tags found
1 merge request!36Ajouter la page de dotations avec ses articles
Show whitespace changes
Inline Side-by-side
Showing
with 234 additions and 149 deletions
components/simulation-menu/simulation-menubar-component.jsx → components/simulation-menu/SimulationMenuBar.tsx
+ 115
− 0
View file @ 9382e9e5
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/core/styles";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import PropTypes from "prop-types";
import { PureComponent } from "react";
import { Button } from "./button";
import { Legende } from "./legende";
import SimulationButton5 from "./simulation-button-5";
import SimulationButton60 from "./simulation-button-60";
const styles = () => ({
container: {
......@@ -21,14 +17,34 @@ const styles = () => ({
},
});
class SimulationMenuBar extends PureComponent {
interface Props {
classes: any;
isMobileView: boolean;
montrerPLF: boolean;
primaryButtons: {
onClick: () => void;
icon?: JSX.Element;
caption: string;
mobileCaption: string;
mobileIcon?: JSX.Element;
}[],
secondaryButtons: {
onClick: () => void;
icon?: JSX.Element;
caption: string;
mobileCaption: string;
mobileIcon?: JSX.Element;
}[],
}
class SimulationMenuBar extends PureComponent<Props> {
render() {
const {
classes,
isMobileView,
isUserLogged,
montrerPLF,
showAddCasTypesPopin,
primaryButtons,
secondaryButtons,
} = this.props;
return (
<Grid
......@@ -46,27 +62,47 @@ class SimulationMenuBar extends PureComponent {
alignItems="center"
spacing={8}>
<Grid item>
<Grid
container
alignItems="center"
spacing={8}>
{
secondaryButtons.map((button, index) => (
// eslint-disable-next-line react/no-array-index-key
<Grid key={index} item>
<Button
caption="Ajouter un cas type"
caption={button.caption}
icon={button.icon}
isMobileView={isMobileView}
mobileCaption="Cas type"
mobileIcon={<AddCircleOutlineIcon />}
mobileCaption={button.mobileCaption}
mobileIcon={button.mobileIcon}
type="secondary"
onClick={showAddCasTypesPopin} />
onClick={button.onClick} />
</Grid>
))
}
</Grid>
</Grid>
<Grid item>
<Grid
container
alignItems="center"
spacing={8}>
<Grid item>
<SimulationButton5 classes={classes} />
</Grid>
{isUserLogged && (
<Grid item>
<SimulationButton60 classes={classes} />
{
primaryButtons.map((button, index) => (
// eslint-disable-next-line react/no-array-index-key
<Grid key={index} item>
<Button
caption={button.caption}
icon={button.icon}
isMobileView={isMobileView}
mobileCaption={button.mobileCaption}
mobileIcon={button.mobileIcon}
type="primary"
onClick={button.onClick} />
</Grid>
)}
))
}
</Grid>
</Grid>
</Grid>
......@@ -76,12 +112,4 @@ class SimulationMenuBar extends PureComponent {
}
}
SimulationMenuBar.propTypes = {
classes: PropTypes.shape().isRequired,
isMobileView: PropTypes.bool.isRequired,
isUserLogged: PropTypes.bool.isRequired,
montrerPLF: PropTypes.bool.isRequired,
showAddCasTypesPopin: PropTypes.func.isRequired,
};
export default withStyles(styles)(SimulationMenuBar);
components/simulation-menu/index.js
+ 3
− 14
View file @ 9382e9e5
......@@ -2,29 +2,18 @@ import withWidth from "@material-ui/core/withWidth";
import { connect } from "react-redux";
import { compose } from "redux";
import { showAddCasTypesPopin } from "../../redux/actions";
import SimulationMenuBarComponent from "./simulation-menubar-component";
import SimulationMenuBarComponent from "./SimulationMenuBar";
const mapStateToProps = ({ reformePLF, token }, { width }) => {
const isUserLogged = Boolean(token);
const mapStateToProps = ({ reformePLF }, { width }) => {
const isMobileView = width === "xs" || width === "sm" || width === "md";
const montrerPLF = !!reformePLF;
return {
isMobileView,
isUserLogged,
montrerPLF,
};
};
const mapDispatchToProps = dispatch => ({
showAddCasTypesPopin: () => dispatch(showAddCasTypesPopin()),
});
export default compose(
withWidth(),
connect(
mapStateToProps,
mapDispatchToProps,
),
connect(mapStateToProps),
)(SimulationMenuBarComponent);
components/simulation-menu/legende/Legende.jsx → components/simulation-menu/legende/Legende.tsx
+ 1
− 8
View file @ 9382e9e5
import OpenInNewIcon from "@material-ui/icons/OpenInNew";
import PropTypes from "prop-types";
import styles from "./Legende.module.scss";
function Legende({ montrerPLF }) {
export function Legende({ montrerPLF }: { montrerPLF: boolean }) {
return (
<div>
<div className={styles.legend}>
......@@ -24,9 +23,3 @@ function Legende({ montrerPLF }) {
</div>
);
}
Legende.propTypes = {
montrerPLF: PropTypes.bool.isRequired,
};
export default Legende;
components/simulation-menu/legende/index.js
+ 1
− 1
View file @ 9382e9e5
export { default as Legende } from "./Legende";
export { Legende } from "./Legende";
components/simulation-menu/simulation-button-5/index.js deleted 100644 → 0
+ 0
− 30
View file @ 7b411d24
import withWidth from "@material-ui/core/withWidth";
import { connect } from "react-redux";
import { compose } from "redux";
import { disabledEtat, simulateCasTypes } from "../../../redux/actions";
import SimulationButton5Component from "./simulation-button-5-component";
function useSimulatioButtonAsMobile(width) {
return width === "xs" || width === "sm" || width === "md";
}
const mapStateToProps = (state, { width }) => {
const showSimulatioButtonAsMobile = useSimulatioButtonAsMobile(width);
return { showSimulatioButtonAsMobile };
};
const mapDispatchToProps = dispatch => ({
handleSimulationClick: () => {
dispatch(simulateCasTypes());
dispatch(disabledEtat());
},
});
export default compose(
withWidth(),
connect(
mapStateToProps,
mapDispatchToProps,
),
)(SimulationButton5Component);
components/simulation-menu/simulation-button-5/simulation-button-5-component.jsx deleted 100644 → 0
+ 0
− 25
View file @ 7b411d24
import FaceIcon from "@material-ui/icons/Face";
import PropTypes from "prop-types";
import { Button } from "../button";
const SimulationButton5Component = ({
handleSimulationClick,
showSimulatioButtonAsMobile,
}) => (
<Button
caption="ESTIMER ~5''"
icon={<FaceIcon tag="cas type" />}
isMobileView={showSimulatioButtonAsMobile}
mobileCaption="ESTIMER"
mobileIcon={<FaceIcon tag="cas type" />}
type="primary"
onClick={handleSimulationClick} />
);
SimulationButton5Component.propTypes = {
handleSimulationClick: PropTypes.func.isRequired,
showSimulatioButtonAsMobile: PropTypes.bool.isRequired,
};
export default SimulationButton5Component;
components/simulation-menu/simulation-button-60/index.js deleted 100644 → 0
+ 0
− 30
View file @ 7b411d24
import withWidth from "@material-ui/core/withWidth";
import { connect } from "react-redux";
import { compose } from "redux";
import { fetchSimPop, simulateCasTypes } from "../../../redux/actions";
import SimulationButton60Component from "./simulation-button-60-component";
function useSimulatioButtonAsMobile(width) {
return width === "xs" || width === "sm" || width === "md";
}
const mapStateToProps = (state, { width }) => {
const showSimulatioButtonAsMobile = useSimulatioButtonAsMobile(width);
return { showSimulatioButtonAsMobile };
};
const mapDispatchToProps = dispatch => ({
handleSimulationClick: () => {
dispatch(fetchSimPop());
dispatch(simulateCasTypes());
},
});
export default compose(
withWidth(),
connect(
mapStateToProps,
mapDispatchToProps,
),
)(SimulationButton60Component);
components/simulation-menu/simulation-button-60/simulation-button-60-component.jsx deleted 100644 → 0
+ 0
− 37
View file @ 7b411d24
import AccountBalanceIcon from "@material-ui/icons/AccountBalance";
import FaceIcon from "@material-ui/icons/Face";
import PropTypes from "prop-types";
import { Fragment } from "react";
import { Button } from "../button";
const SimulationButton60Component = ({
handleSimulationClick,
showSimulatioButtonAsMobile,
}) => (
<Button
caption="ESTIMER ~60''"
icon={(
<Fragment>
<AccountBalanceIcon tag="macro" />
<FaceIcon tag="cas type" />
</Fragment>
)}
isMobileView={showSimulatioButtonAsMobile}
mobileCaption="ESTIMER"
mobileIcon={(
<Fragment>
<AccountBalanceIcon tag="macro" />
<FaceIcon tag="cas type" />
</Fragment>
)}
type="primary"
onClick={handleSimulationClick} />
);
SimulationButton60Component.propTypes = {
handleSimulationClick: PropTypes.func.isRequired,
showSimulatioButtonAsMobile: PropTypes.bool.isRequired,
};
export default SimulationButton60Component;
components/simulation-page/SimulationPage.tsx
+ 27
− 4
View file @ 9382e9e5
......@@ -17,6 +17,20 @@ interface Props {
subTitle2: string;
parameters: JSX.Element;
results: JSX.Element;
primaryButtons: {
onClick: () => void;
icon?: JSX.Element;
caption: string;
mobileCaption: string;
mobileIcon?: JSX.Element;
}[];
secondaryButtons?: {
onClick: () => void;
icon?: JSX.Element;
caption: string;
mobileCaption: string;
mobileIcon?: JSX.Element;
}[];
}
interface State {
......@@ -39,14 +53,19 @@ export class SimulationPage extends PureComponent<Props, State> {
};
renderDesktopView = () => {
const { parameters, results } = this.props;
const {
parameters, primaryButtons, results, secondaryButtons,
} = this.props;
return (
<div className={styles.container}>
<Paper square className={styles.parameters}>
{parameters}
</Paper>
<div className={styles.results}>
<SimulationMenuBar />
<SimulationMenuBar
primaryButtons={primaryButtons}
secondaryButtons={secondaryButtons}
/>
{results}
</div>
</div>
......@@ -55,7 +74,9 @@ export class SimulationPage extends PureComponent<Props, State> {
renderMobileView = () => {
const { indextab } = this.state;
const { parameters, results } = this.props;
const {
parameters, primaryButtons, results, secondaryButtons,
} = this.props;
return (
<div>
<AppBar color="default" position="static">
......@@ -79,7 +100,9 @@ export class SimulationPage extends PureComponent<Props, State> {
</Paper>
</div>
<div style={{ padding: 24 }}>
<SimulationMenuBar />
<SimulationMenuBar
primaryButtons={primaryButtons}
secondaryButtons={secondaryButtons} />
{results}
</div>
</SwipeableViews>
......
pages/dotations.jsx
+ 11
− 0
View file @ 9382e9e5
import HomeIcon from "@material-ui/icons/Home";
import { flow } from "lodash";
import Head from "next/head";
import { withRouter } from "next/router";
......@@ -18,6 +19,16 @@ class IndexPage extends PureComponent {
</Head>
<SimulationPage
parameters={<Articles />}
primaryButtons={[
{
caption: "Estimer",
icon: <HomeIcon />,
mobileCaption: "Estimer",
mobileIcon: <HomeIcon />,
onClick: () => {},
},
]}
secondaryButtons={[]}
subTitle1="Dotations"
subTitle2="Communes"
title="DSR"
......
pages/index.jsx
+ 76
− 0
View file @ 9382e9e5
import AccountBalanceIcon from "@material-ui/icons/AccountBalance";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import FaceIcon from "@material-ui/icons/Face";
import { flow } from "lodash";
import Head from "next/head";
import { withRouter } from "next/router";
import PropTypes from "prop-types";
import { Fragment, PureComponent } from "react";
import { connect } from "react-redux";
import Articles from "../components/articles";
import ImpactCards from "../components/cartes-impact";
import PopinManager from "../components/PopinManager";
import SimulationPage from "../components/simulation-page";
import withRoot from "../lib/withRoot";
import {
disabledEtat, fetchSimPop, showAddCasTypesPopin, simulateCasTypes,
} from "../redux/actions";
import "../styles/index.scss";
const mapStateToProps = ({ token }) => ({
isUserLogged: !!token,
});
const mapDispatchToProps = dispatch => ({
showAddCasTypesPopin: () => dispatch(showAddCasTypesPopin()),
simulateCasTypes: () => {
dispatch(simulateCasTypes());
dispatch(disabledEtat());
},
simulatePopulation: () => {
dispatch(fetchSimPop());
dispatch(simulateCasTypes());
},
});
const populationIcon = (
<Fragment>
<AccountBalanceIcon tag="macro" />
<FaceIcon tag="cas type" />
</Fragment>
);
const casTypesIcon = <FaceIcon tag="cas type" />;
class IndexPage extends PureComponent {
render() {
const {
isUserLogged, showAddCasTypesPopin, simulateCasTypes, simulatePopulation,
} = this.props;
const primaryButtons = [
{
caption: "ESTIMER ~5''",
icon: casTypesIcon,
mobileCaption: "ESTIMER",
mobileIcon: casTypesIcon,
onClick: simulateCasTypes,
},
];
if (isUserLogged) {
primaryButtons.push({
caption: "ESTIMER ~60''",
icon: populationIcon,
mobileCaption: "ESTIMER",
mobileIcon: populationIcon,
onClick: simulatePopulation,
});
}
return (
<Fragment>
<Head>
......@@ -19,7 +76,16 @@ class IndexPage extends PureComponent {
</Head>
<SimulationPage
parameters={<Articles />}
primaryButtons={primaryButtons}
results={<ImpactCards />}
secondaryButtons={[
{
caption: "Ajouter un cas type",
mobileCaption: "Cas type",
mobileIcon: <AddCircleOutlineIcon />,
onClick: showAddCasTypesPopin,
},
]}
subTitle1="IMPÔT SUR"
subTitle2="LE REVENU"
title="IR"
......@@ -30,7 +96,17 @@ class IndexPage extends PureComponent {
}
}
IndexPage.propTypes = {
showAddCasTypesPopin: PropTypes.func.isRequired,
simulateCasTypes: PropTypes.func.isRequired,
simulatePopulation: PropTypes.func.isRequired,
};
export default flow(
withRouter,
withRoot,
connect(
mapStateToProps,
mapDispatchToProps,
),
)(IndexPage);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment