Skip to content

F
Form Generator
Commit 6baacdcb authored by Théophile BORNON's avatar Théophile BORNON
Browse files
Options

more things handled on root

parent e8068ef7
Hide whitespace changes
Inline Side-by-side
Showing with 254 additions and 91 deletions
src/App.js
View file @ 6baacdcb
...@@ -13,6 +13,8 @@ import Typography from '@material-ui/core/Typography'; ...@@ -13,6 +13,8 @@ import Typography from '@material-ui/core/Typography';
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@material-ui/core/CircularProgress";
import Section from "./Section"; import Section from "./Section";
import Category from "./Category";
import SubCategory from "./SubCategory";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
root: { root: {
...@@ -45,15 +47,15 @@ function App() { ...@@ -45,15 +47,15 @@ function App() {
const [state, setState] = useState({ const [state, setState] = useState({
sections: [], sections: [],
toUpdate: "",
name: "" name: ""
} });
); const [sectionsCreated, setSectionsCreated] = useState(0);
const [url, setURL] = useState({ url: "", requesting: false }); const [url, setURL] = useState({ url: "", requesting: false });
useEffect(() => { useEffect(() => {
setURL({ ...url, url: localStorage.getItem("url") || "" }) setURL({ ...url, url: localStorage.getItem("url") || "" })
// eslint-disable-next-line // eslint-disable-next-line
}, []) }, [])
const save = () => { const save = () => {
...@@ -97,20 +99,99 @@ function App() { ...@@ -97,20 +99,99 @@ function App() {
} }
const addSection = () => { const addSection = () => {
setState({ ...state, sections: [...state.sections, { name: "Nouvelle section", categories: [] }] }); setState({
...state,
sections: [
...state.sections,
{
id: sectionsCreated.toString(),
name: "Nouvelle section",
categories: [],
totalCoeff: 0
}
]
});
setSectionsCreated(sectionsCreated + 1);
} }
const deleteSection = i => () => { const indexesOf = id => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?")) const ids = id.split(",");
setState({ sections: state.sections.filter((s, ind) => ind !== i) }) let indexes = [];
indexes[0] = state.sections.findIndex(s => s.id === ids[0]);
if (ids.length >= 2)
indexes[1] = state.sections[indexes[0]].categories.findIndex(c => c.id === [ids[0], ids[1]].join(','));
if (ids.length >= 3)
indexes[2] = state.sections[indexes[0]].categories[indexes[1]].subCategories.findIndex(sc => sc.id === ids.join(','));
return indexes;
} }
const setSection = i => update => { const setElement = data => {
const { id, update } = data;
const ids = indexesOf(id);
console.log(id, ids);
let sections = Object.assign(state.sections); let sections = Object.assign(state.sections);
sections[i] = update; if (ids.length === 1)
sections[ids[0]] = update;
if (ids.length === 2)
sections[ids[0]].categories[ids[1]] = update;
else if (ids.length === 3)
sections[ids[0]].categories[ids[1]].subCategories[ids[2]] = update;
setState({ setState({
...state, name: state.name,
sections: sections toUpdate: id,
sections
});
}
const deleteElement = id => {
const ids = indexesOf(id);
let sections = Object.assign(state.sections);
if (ids.length === 1)
sections = sections.filter(s => s.id !== id);
if (ids.length === 2)
sections[ids[0]].categories = sections[ids[0]].categories.filter(c => c.id !== id);
else if (ids.length === 3)
sections[ids[0]].categories[ids[1]].subCategories = sections[ids[0]].categories[ids[1]].subCategories.filter(sc => sc.id !== id);
console.log(sections);
setState({
name: state.name,
toUpdate: "",
sections
})
}
const setCoefficient = data => {
const { id, coeff } = data;
const ids = indexesOf(id);
let totalCoeff;
let sections = Object.assign(state.sections);
let section = sections[ids[0]];
let category = section.categories[ids[1]];
if (ids.length === 2) {
category.coeff = coeff;
totalCoeff = section.categories.reduce((acc, val) => acc + val.coeff, 0);
section.totalCoeff = totalCoeff;
} else if (ids.length === 3) {
let subCategory = category.subCategories[ids[2]];
subCategory.coeff = coeff;
totalCoeff = category.subCategories.reduce((acc, val) => acc + val.coeff, 0);
category.totalCoeff = totalCoeff;
}
setState({
name: state.name,
toUpdate: id,
sections
}); });
} }
...@@ -126,8 +207,8 @@ function App() { ...@@ -126,8 +207,8 @@ function App() {
<Grid item xs={12}> <Grid item xs={12}>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<Button color="inherit" style={{marginLeft: 'auto'}}> <Button color="inherit" style={{ marginLeft: 'auto' }}>
Créé par Théophile BORNON pour<br />le Pole Universitaire Léonard de Vinci Créé par Théophile BORNON pour<br />le Pole Universitaire Léonard de Vinci
</Button> </Button>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
...@@ -159,16 +240,44 @@ function App() { ...@@ -159,16 +240,44 @@ function App() {
<Grid item xs={12}> <Grid item xs={12}>
<Grid container spacing={2}> <Grid container spacing={2}>
{state.sections.map((section, i) => {state.sections.map(section =>
<Grid <Grid
item item
xs={12} xs={12}
key={"s" + i}> key={section.id}>
<Section <Section
section={section} section={section}
deleteSection={deleteSection(i)} toUpdaet={state.toUpdate}
setSection={setSection(i)} setCoefficient={setCoefficient}
/> setElement={setElement}
deleteElement={deleteElement}
>
{
section.categories.map(category =>
<Category
key={category.id}
category={category}
totalCoeff={section.totalCoeff}
toUpdaet={state.toUpdate}
setCoefficient={setCoefficient}
setElement={setElement}
deleteElement={deleteElement}
>
{category.subCategories.map(subCategory =>
<SubCategory
key={subCategory.id}
subCategory={subCategory}
totalCoeff={category.totalCoeff}
toUpdaet={state.toUpdate}
setCoefficient={setCoefficient}
setElement={setElement}
deleteElement={deleteElement}
/>)
}
</Category>
)
}
</Section>
</Grid> </Grid>
)} )}
</Grid> </Grid>
......
src/Category.jsx
View file @ 6baacdcb
import React from "react"; import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles" import { makeStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
...@@ -11,7 +11,6 @@ import Button from "@material-ui/core/Button"; ...@@ -11,7 +11,6 @@ import Button from "@material-ui/core/Button";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons"; import { Danger } from "./Buttons";
import SubCategory from "./SubCategory";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
heading: { heading: {
...@@ -20,41 +19,58 @@ const useStyles = makeStyles(theme => ({ ...@@ -20,41 +19,58 @@ const useStyles = makeStyles(theme => ({
}, },
})); }));
export default function Category(props) { function Category(props) {
const classes = useStyles(); const classes = useStyles();
const { category, setCategory } = props; const { category, setCoefficient, deleteElement, setElement } = props;
const [subCategoriesCreated, setSubCategoriesCreated] = useState(0);
const handleChange = e => { const handleChange = e => {
if (e.target.id !== "coeff") if (e.target.id !== "coeff")
setCategory({ ...category, [e.target.id]: e.target.value }) setElement({
id: category.id,
update: {
...category,
[e.target.id]: e.target.value
}
});
else else
setCategory({ ...category, [e.target.id]: parseInt(e.target.value) }) setCoefficient(
{
id: category.id,
coeff: parseInt(e.target.value)
});
} }
const addSubCategory = () => { const addSubCategory = () => {
setCategory({ setElement({
...category, subCategories: [...category.subCategories, id: category.id,
{ update: {
name: "Nouvelle sous catégorie", ...category,
coeff: 1, totalCoeff: category.totalCoeff + 1,
required: true, subCategories: [
type: "", ...category.subCategories,
upper: "Excellent", {
lower: "Nul" id: category.id + "," + subCategoriesCreated,
name: "Nouvelle sous catégorie",
coeff: 1,
required: true,
type: "",
upper: "Excellent",
lower: "Nul"
}
]
} }
] });
})
}
const deleteSubCategory = i => () => { setSubCategoriesCreated(subCategoriesCreated + 1);
if (window.confirm("Êtes vous sûr de vouloir supprimer cette sous catégorie ?"))
setCategory({ ...category, subCategories: category.subCategories.filter((s, ind) => ind !== i) })
} }
const setSubCategory = i => update => { const deleteCategory = () => {
let subCategories = Object.assign(category.subCategories); if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?")) {
subCategories[i] = update; setCoefficient({ id: category.id, coeff: 0 })
setCategory({ ...category, subCategories }); deleteElement(category.id);
}
} }
return ( return (
...@@ -66,7 +82,7 @@ export default function Category(props) { ...@@ -66,7 +82,7 @@ export default function Category(props) {
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header" id="panel1a-header"
> >
<Typography className={classes.heading}>{category.name}</Typography> <Typography className={classes.heading}>{category.name} ({Math.round(category.coeff / props.totalCoeff * 10000) / 100}%) - {category.id}</Typography>
</ExpansionPanelSummary> </ExpansionPanelSummary>
<ExpansionPanelDetails> <ExpansionPanelDetails>
<Grid container spacing={2}> <Grid container spacing={2}>
...@@ -98,14 +114,7 @@ export default function Category(props) { ...@@ -98,14 +114,7 @@ export default function Category(props) {
</Grid> </Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
{category.subCategories.map((sc, i) => {props.children}
<SubCategory
key={"sc" + i}
subCategory={sc}
setSubCategory={setSubCategory(i)}
deleteSubCategory={deleteSubCategory(i)}
/>)
}
</Grid> </Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
...@@ -121,7 +130,7 @@ export default function Category(props) { ...@@ -121,7 +130,7 @@ export default function Category(props) {
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={props.deleteCategory} onClick={deleteCategory}
> >
Supprimer la catégorie Supprimer la catégorie
</Danger> </Danger>
...@@ -132,4 +141,8 @@ export default function Category(props) { ...@@ -132,4 +141,8 @@ export default function Category(props) {
</Grid> </Grid>
</Grid> </Grid>
) )
} }
\ No newline at end of file
const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.category.id;
export default React.memo(Category, shouldUpdate);
src/Section.jsx
View file @ 6baacdcb
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
...@@ -12,7 +12,6 @@ import TextField from "@material-ui/core/TextField"; ...@@ -12,7 +12,6 @@ import TextField from "@material-ui/core/TextField";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons"; import { Danger } from "./Buttons";
import Category from "./Category";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
root: { root: {
...@@ -24,30 +23,53 @@ const useStyles = makeStyles(theme => ({ ...@@ -24,30 +23,53 @@ const useStyles = makeStyles(theme => ({
}, },
})); }));
export default function SimpleExpansionPanel(props) { function Section(props) {
const classes = useStyles(); const classes = useStyles();
const { setSection, section } = props; const {
section,
setElement,
deleteElement
} = props;
const [categoriesCreated, setCategoriesCreated] = useState(0);
useEffect(() => { useEffect(() => {
}, []) }, [])
const handleChange = e => { const handleChange = e =>
setSection({ ...section, [e.target.id]: e.target.value }) setElement({
} id: section.id,
update: {
...section,
[e.target.id]: e.target.value
}
});
const addCategory = () => {
setSection({ ...section, categories: [...section.categories, { name: "Nouvelle catégorie", coeff: 1, subCategories: [] }] })
}
const deleteCategory = i => () => { const addCategory = () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?")) setElement({
setSection({ ...section, categories: section.categories.filter((s, ind) => ind !== i) }) id: section.id,
update: {
...section,
totalCoeff: section.totalCoeff + 1,
categories: [
...section.categories,
{
id: section.id + "," + categoriesCreated,
name: "Nouvelle catégorie",
coeff: 1,
subCategories: [],
totalCoeff: 0,
}
]
}
});
setCategoriesCreated(categoriesCreated + 1);
} }
const setCategory = i => update => { const deleteSection = () => {
let categories = Object.assign(section.categories); if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?"))
categories[i] = update; deleteElement(section.id);
setSection({ ...section, categories });
} }
return ( return (
...@@ -58,7 +80,7 @@ export default function SimpleExpansionPanel(props) { ...@@ -58,7 +80,7 @@ export default function SimpleExpansionPanel(props) {
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header" id="panel1a-header"
> >
<Typography className={classes.heading}>{props.section.name}</Typography> <Typography className={classes.heading}>{props.section.name} - {section.id}</Typography>
</ExpansionPanelSummary> </ExpansionPanelSummary>
<ExpansionPanelDetails> <ExpansionPanelDetails>
<Grid container spacing={2}> <Grid container spacing={2}>
...@@ -76,13 +98,7 @@ export default function SimpleExpansionPanel(props) { ...@@ -76,13 +98,7 @@ export default function SimpleExpansionPanel(props) {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
{section.categories.map((category, i) => {props.children}
<Category
key={"c" + i}
category={category}
deleteCategory={deleteCategory(i)}
setCategory={setCategory(i)}
/>)}
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
...@@ -98,7 +114,7 @@ export default function SimpleExpansionPanel(props) { ...@@ -98,7 +114,7 @@ export default function SimpleExpansionPanel(props) {
size="medium" size="medium"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={props.deleteSection} onClick={deleteSection}
> >
Supprimer la section Supprimer la section
</Danger> </Danger>
...@@ -109,3 +125,7 @@ export default function SimpleExpansionPanel(props) { ...@@ -109,3 +125,7 @@ export default function SimpleExpansionPanel(props) {
</div> </div>
); );
} }
const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.section.id;
export default React.memo(Section, shouldUpdate)
src/SubCategory.jsx
View file @ 6baacdcb
...@@ -24,20 +24,36 @@ const useStyles = makeStyles(theme => ({ ...@@ -24,20 +24,36 @@ const useStyles = makeStyles(theme => ({
} }
})); }));
export default function SubCategory(props) { function SubCategory(props) {
const classes = useStyles(); const classes = useStyles();
const { setSubCategory, subCategory } = props; const {
subCategory,
setCoefficient,
setElement,
deleteElement,
} = props;
const handleChange = e => { const handleChange = e => {
let update = null;
if (e.target.type === "text") if (e.target.type === "text")
setSubCategory({ ...subCategory, [e.target.id]: e.target.value }) update = { ...subCategory, [e.target.id]: e.target.value };
else if (e.target.type === "number" && parseInt(e.target.value) >= 1) else if (e.target.type === "number" && parseInt(e.target.value) >= 1)
setSubCategory({ ...subCategory, [e.target.id]: parseInt(e.target.value) }) setCoefficient({ id: subCategory.id, coeff: parseInt(e.target.value) });
else if (e.target.type === "checkbox") else if (e.target.type === "checkbox")
if (e.target.id === "type") if (e.target.id === "type")
setSubCategory({ ...subCategory, type: (e.target.checked ? "text" : "") }) update = { ...subCategory, type: (e.target.checked ? "text" : "") };
else else
setSubCategory({ ...subCategory, [e.target.id]: e.target.checked }) update = { ...subCategory, [e.target.id]: e.target.checked };
if (update !== null)
setElement({ id: subCategory.id, update });
}
const deleteSubCategory = () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette sous catégorie ?")) {
setCoefficient({id: subCategory.id, coeff: 0})
deleteElement(subCategory.id)
}
} }
return ( return (
...@@ -49,14 +65,15 @@ export default function SubCategory(props) { ...@@ -49,14 +65,15 @@ export default function SubCategory(props) {
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header" id="panel1a-header"
> >
<Typography className={classes.heading}>{subCategory.name}</Typography> <Typography className={classes.heading}>{subCategory.name} ({Math.round(subCategory.coeff / props.totalCoeff * 10000) / 100}%) - {subCategory.id}</Typography>
</ExpansionPanelSummary> </ExpansionPanelSummary>
<ExpansionPanelDetails> <ExpansionPanelDetails>
<Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}> <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
<TextField <TextField
id="name" id="name"
label="Nom de la categorie" label="Nom de la sous categorie"
value={subCategory.name} value={subCategory.name}
onChange={handleChange} onChange={handleChange}
className={classes.textField} className={classes.textField}
...@@ -144,7 +161,7 @@ export default function SubCategory(props) { ...@@ -144,7 +161,7 @@ export default function SubCategory(props) {
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={props.deleteSubCategory} onClick={deleteSubCategory}
> >
Supprimer la sous catégorie Supprimer la sous catégorie
</Danger> </Danger>
...@@ -155,4 +172,8 @@ export default function SubCategory(props) { ...@@ -155,4 +172,8 @@ export default function SubCategory(props) {
</Grid> </Grid>
</Grid> </Grid>
); );
} }
\ No newline at end of file
const shouldUpdate = (prevProp, nextProp) => nextProp.toUpdate === nextProp.subCategory.id;
export default React.memo(SubCategory, shouldUpdate);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment