-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
532 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| // import { useSearchParams } from "react-router-dom"; | ||
| import Card from "@mui/material/Card"; | ||
| import { makeStyles } from "tss-react/mui"; | ||
| import TreeView from "@mui/lab/TreeView"; | ||
| import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; | ||
| import ChevronRightIcon from "@mui/icons-material/ChevronRight"; | ||
| import TreeItem from "@mui/lab/TreeItem"; | ||
| import Autocomplete from "@mui/material/Autocomplete"; | ||
| import TextField from "@mui/material/TextField"; | ||
| import Box from "@mui/material/Box"; | ||
| import { top100Films } from "./top100films"; | ||
|
|
||
| const useStyles = makeStyles()((theme) => { | ||
| return { | ||
| box: { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| height: "100%", | ||
| minWidth: 50, | ||
| }, | ||
| card: { | ||
| boxShadow: theme.shadows[4], | ||
| marginLeft: theme.spacing(1), | ||
| marginRight: theme.spacing(1), | ||
| [theme.breakpoints.up("xs")]: { | ||
| paddingTop: theme.spacing(1), | ||
| paddingBottom: theme.spacing(1), | ||
| paddingLeft: theme.spacing(1), | ||
| paddingRight: theme.spacing(1), | ||
| }, | ||
| [theme.breakpoints.up("sm")]: { | ||
| paddingTop: theme.spacing(2), | ||
| paddingBottom: theme.spacing(2), | ||
| paddingLeft: theme.spacing(2), | ||
| paddingRight: theme.spacing(2), | ||
| }, | ||
| [theme.breakpoints.up("md")]: { | ||
| paddingTop: theme.spacing(3), | ||
| paddingBottom: theme.spacing(3), | ||
| paddingLeft: theme.spacing(3), | ||
| paddingRight: theme.spacing(3), | ||
| }, | ||
| [theme.breakpoints.up("lg")]: { | ||
| paddingTop: theme.spacing(4), | ||
| paddingBottom: theme.spacing(4), | ||
| paddingLeft: theme.spacing(4), | ||
| paddingRight: theme.spacing(4), | ||
| }, | ||
| maxWidth: 1280, | ||
| width: "100%", | ||
| }, | ||
| autocomplete: { | ||
| paddingBottom: theme.spacing(1), | ||
| minWidth: theme.spacing(10), | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| const BlocFilter = () => { | ||
| // const [search, setSearch] = useSearchParams(); | ||
| const [value, setValue] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| console.log(value); | ||
| }, [value]); | ||
|
|
||
| const { classes } = useStyles(); | ||
| return ( | ||
| <Box className={classes.box}> | ||
| <Card className={classes.card}> | ||
| <Autocomplete | ||
| multiple | ||
| className={classes.autocomplete} | ||
| id="tags-standard" | ||
| options={top100Films} | ||
| getOptionLabel={(option) => option.title} | ||
| renderInput={(params) => ( | ||
| <TextField | ||
| {...params} | ||
| variant="outlined" | ||
| label="Produits, SGBPM, Jalons ..." | ||
| /> | ||
| )} | ||
| value={value} | ||
| onChange={(event, newValue) => { | ||
| setValue(newValue.title); | ||
| }} | ||
| /> | ||
| <TreeView | ||
| aria-label="services navigator" | ||
| defaultCollapseIcon={<ExpandMoreIcon />} | ||
| defaultExpandIcon={<ChevronRightIcon />} | ||
| > | ||
| <TreeItem nodeId="1" label="GSBPM"> | ||
| <TreeItem nodeId="1.1" label="Qualite" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="2" label="Jalon"> | ||
| <TreeItem nodeId="2.1" label="Jalon 1" /> | ||
| <TreeItem nodeId="2.2" label="Jalon 2" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="3" label="Outils"> | ||
| <TreeItem nodeId="3.1" label="Pogues" /> | ||
| <TreeItem nodeId="3.2" label="Eno" /> | ||
| <TreeItem nodeId="3.3" label="Lunatic" /> | ||
| <TreeItem nodeId="3.4" label="Stromae" /> | ||
| </TreeItem> | ||
| <TreeItem nodeId="4" label="Produits"> | ||
| <TreeItem nodeId="4.1" label="Produit 1" /> | ||
| <TreeItem nodeId="4.2" label="Produit 2" /> | ||
| </TreeItem> | ||
| </TreeView> | ||
| </Card> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default BlocFilter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,128 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import dataFunctions from "utils/mockData/functions"; | ||
| // import dataProducts from "utils/mockData/products"; | ||
| import React from "react"; | ||
| import { makeStyles } from "tss-react/mui"; | ||
| import Footer from "components/shared/footer/component"; | ||
| import Box from "@mui/material/Box"; | ||
| import Grid from "@mui/material/Grid"; | ||
| import Card from "@mui/material/Card"; | ||
| import atelierConception from "img/atelierConception.png"; | ||
| import BlocFilter from "./BlocFilter"; | ||
|
|
||
| // import { useAPI } from "utils/hooks"; | ||
| const useStyles = makeStyles()((theme) => { | ||
| return { | ||
| wrapper: { | ||
| background: theme.palette.grey["100"], | ||
| position: "relative", | ||
| paddingBottom: theme.spacing(2), | ||
| paddingTop: `${theme.spacing(4)} !important`, | ||
| [theme.breakpoints.down("md")]: { | ||
| paddingTop: `${theme.spacing(4)} !important`, | ||
| }, | ||
| [theme.breakpoints.down("sm")]: { | ||
| paddingTop: `${theme.spacing(4)} !important`, | ||
| }, | ||
| [theme.breakpoints.down("xs")]: { | ||
| paddingTop: `${theme.spacing(4)} !important`, | ||
| }, | ||
| }, | ||
| container: { | ||
| width: "100%", | ||
| paddingRight: theme.spacing(4), | ||
| paddingLeft: theme.spacing(4), | ||
| marginRight: "auto", | ||
| marginLeft: "auto", | ||
| minWidth: 500, | ||
| marginTop: theme.spacing(6), | ||
| marginBottom: theme.spacing(12), | ||
| [theme.breakpoints.down("md")]: { | ||
| marginBottom: theme.spacing(9), | ||
| }, | ||
| [theme.breakpoints.down("sm")]: { | ||
| marginBottom: theme.spacing(6), | ||
| }, | ||
| [theme.breakpoints.down("sm")]: { | ||
| marginBottom: theme.spacing(3), | ||
| }, | ||
| }, | ||
| row: { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| marginRight: -theme.spacing(2), | ||
| marginLeft: -theme.spacing(2), | ||
| }, | ||
| card: { | ||
| boxShadow: theme.shadows[4], | ||
| marginLeft: theme.spacing(1), | ||
| marginRight: theme.spacing(1), | ||
| [theme.breakpoints.up("xs")]: { | ||
| paddingTop: theme.spacing(1), | ||
| paddingBottom: theme.spacing(1), | ||
| paddingLeft: theme.spacing(1), | ||
| paddingRight: theme.spacing(1), | ||
| }, | ||
| [theme.breakpoints.up("sm")]: { | ||
| paddingTop: theme.spacing(2), | ||
| paddingBottom: theme.spacing(2), | ||
| paddingLeft: theme.spacing(2), | ||
| paddingRight: theme.spacing(2), | ||
| }, | ||
| [theme.breakpoints.up("md")]: { | ||
| paddingTop: theme.spacing(3), | ||
| paddingBottom: theme.spacing(3), | ||
| paddingLeft: theme.spacing(3), | ||
| paddingRight: theme.spacing(3), | ||
| }, | ||
| [theme.breakpoints.up("lg")]: { | ||
| paddingTop: theme.spacing(4), | ||
| paddingBottom: theme.spacing(4), | ||
| paddingLeft: theme.spacing(4), | ||
| paddingRight: theme.spacing(4), | ||
| }, | ||
| maxWidth: 1280, | ||
| width: "100%", | ||
| }, | ||
| image: { | ||
| maxWidth: "100%", | ||
| verticalAlign: "middle", | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| const Service = () => { | ||
| const [functions, setFunctions] = useState([]); | ||
| const OffreDeService = () => { | ||
| const { classes, theme } = useStyles(); | ||
|
|
||
| useEffect(() => { | ||
| setFunctions(dataFunctions); | ||
| }, []); | ||
| // const [functions, setFunctions] = useState([]); | ||
|
|
||
| return <div>Les Services : {JSON.stringify(functions)}</div>; | ||
| // useEffect(() => { | ||
| // setFunctions(dataFunctions); | ||
| // }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={classes.wrapper}> | ||
| <div className={classes.container}> | ||
| <Box className={classes.row} display="flex" justifyContent="center"> | ||
| <Grid container spacing={2}> | ||
| <Grid item md={4} xs={12}> | ||
| <BlocFilter /> | ||
| </Grid> | ||
| <Grid item md={8} xs={12}> | ||
| <Box display="flex" flexDirection="column" height="100%"> | ||
| <Card className={classes.card}> | ||
| <img | ||
| alt={"Exemple pdf"} | ||
| src={atelierConception} | ||
| className={classes.image} | ||
| /> | ||
| </Card> | ||
| </Box> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
| </div> | ||
| </div> | ||
| <Footer upperColor={theme.palette.grey["100"]} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Service; | ||
| export default OffreDeService; |
Oops, something went wrong.