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
Show 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';
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import Section from "./Section";
import Category from "./Category";
import SubCategory from "./SubCategory";
const useStyles = makeStyles(theme => ({
root: {
......@@ -45,10 +47,10 @@ function App() {
const [state, setState] = useState({
sections: [],
toUpdate: "",
name: ""
}
);
});
const [sectionsCreated, setSectionsCreated] = useState(0);
const [url, setURL] = useState({ url: "", requesting: false });
useEffect(() => {
......@@ -97,20 +99,99 @@ function App() {
}
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 => () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?"))
setState({ sections: state.sections.filter((s, ind) => ind !== i) })
const indexesOf = id => {
const ids = id.split(",");
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);
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({
...state,
sections: sections
name: state.name,
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,7 +207,7 @@ function App() {
<Grid item xs={12}>
<AppBar position="static">
<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
</Button>
</Toolbar>
......@@ -159,16 +240,44 @@ function App() {
<Grid item xs={12}>
<Grid container spacing={2}>
{state.sections.map((section, i) =>
{state.sections.map(section =>
<Grid
item
xs={12}
key={"s" + i}>
key={section.id}>
<Section
section={section}
deleteSection={deleteSection(i)}
setSection={setSection(i)}
/>
toUpdaet={state.toUpdate}
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>
......
src/Category.jsx
View file @ 6baacdcb
import React from "react";
import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles"
import Grid from "@material-ui/core/Grid";
......@@ -11,7 +11,6 @@ import Button from "@material-ui/core/Button";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons";
import SubCategory from "./SubCategory";
const useStyles = makeStyles(theme => ({
heading: {
......@@ -20,21 +19,39 @@ const useStyles = makeStyles(theme => ({
},
}));
export default function Category(props) {
function Category(props) {
const classes = useStyles();
const { category, setCategory } = props;
const { category, setCoefficient, deleteElement, setElement } = props;
const [subCategoriesCreated, setSubCategoriesCreated] = useState(0);
const handleChange = e => {
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
setCategory({ ...category, [e.target.id]: parseInt(e.target.value) })
setCoefficient(
{
id: category.id,
coeff: parseInt(e.target.value)
});
}
const addSubCategory = () => {
setCategory({
...category, subCategories: [...category.subCategories,
setElement({
id: category.id,
update: {
...category,
totalCoeff: category.totalCoeff + 1,
subCategories: [
...category.subCategories,
{
id: category.id + "," + subCategoriesCreated,
name: "Nouvelle sous catégorie",
coeff: 1,
required: true,
......@@ -43,18 +60,17 @@ export default function Category(props) {
lower: "Nul"
}
]
})
}
});
const deleteSubCategory = i => () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette sous catégorie ?"))
setCategory({ ...category, subCategories: category.subCategories.filter((s, ind) => ind !== i) })
setSubCategoriesCreated(subCategoriesCreated + 1);
}
const setSubCategory = i => update => {
let subCategories = Object.assign(category.subCategories);
subCategories[i] = update;
setCategory({ ...category, subCategories });
const deleteCategory = () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?")) {
setCoefficient({ id: category.id, coeff: 0 })
deleteElement(category.id);
}
}
return (
......@@ -66,7 +82,7 @@ export default function Category(props) {
aria-controls="panel1a-content"
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>
<ExpansionPanelDetails>
<Grid container spacing={2}>
......@@ -98,14 +114,7 @@ export default function Category(props) {
</Grid>
<Grid item xs={12} md={10}>
{category.subCategories.map((sc, i) =>
<SubCategory
key={"sc" + i}
subCategory={sc}
setSubCategory={setSubCategory(i)}
deleteSubCategory={deleteSubCategory(i)}
/>)
}
{props.children}
</Grid>
<Grid item xs={12} md={10}>
......@@ -121,7 +130,7 @@ export default function Category(props) {
size="small"
variant="contained"
color="primary"
onClick={props.deleteCategory}
onClick={deleteCategory}
>
Supprimer la catégorie
</Danger>
......@@ -133,3 +142,7 @@ export default function Category(props) {
</Grid>
)
}
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 Grid from '@material-ui/core/Grid';
......@@ -12,7 +12,6 @@ import TextField from "@material-ui/core/TextField";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons";
import Category from "./Category";
const useStyles = makeStyles(theme => ({
root: {
......@@ -24,30 +23,53 @@ const useStyles = makeStyles(theme => ({
},
}));
export default function SimpleExpansionPanel(props) {
function Section(props) {
const classes = useStyles();
const { setSection, section } = props;
const {
section,
setElement,
deleteElement
} = props;
const [categoriesCreated, setCategoriesCreated] = useState(0);
useEffect(() => {
}, [])
const handleChange = e => {
setSection({ ...section, [e.target.id]: e.target.value })
const handleChange = e =>
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: [] }] })
setElement({
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,
}
const deleteCategory = i => () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette catégorie ?"))
setSection({ ...section, categories: section.categories.filter((s, ind) => ind !== i) })
]
}
});
setCategoriesCreated(categoriesCreated + 1);
}
const setCategory = i => update => {
let categories = Object.assign(section.categories);
categories[i] = update;
setSection({ ...section, categories });
const deleteSection = () => {
if (window.confirm("Êtes vous sûr de vouloir supprimer cette section ?"))
deleteElement(section.id);
}
return (
......@@ -58,7 +80,7 @@ export default function SimpleExpansionPanel(props) {
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>{props.section.name}</Typography>
<Typography className={classes.heading}>{props.section.name} - {section.id}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={2}>
......@@ -76,13 +98,7 @@ export default function SimpleExpansionPanel(props) {
</Grid>
<Grid item xs={12}>
{section.categories.map((category, i) =>
<Category
key={"c" + i}
category={category}
deleteCategory={deleteCategory(i)}
setCategory={setCategory(i)}
/>)}
{props.children}
</Grid>
<Grid item xs={12}>
......@@ -98,7 +114,7 @@ export default function SimpleExpansionPanel(props) {
size="medium"
variant="contained"
color="primary"
onClick={props.deleteSection}
onClick={deleteSection}
>
Supprimer la section
</Danger>
......@@ -109,3 +125,7 @@ export default function SimpleExpansionPanel(props) {
</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 => ({
}
}));
export default function SubCategory(props) {
function SubCategory(props) {
const classes = useStyles();
const { setSubCategory, subCategory } = props;
const {
subCategory,
setCoefficient,
setElement,
deleteElement,
} = props;
const handleChange = e => {
let update = null;
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)
setSubCategory({ ...subCategory, [e.target.id]: parseInt(e.target.value) })
setCoefficient({ id: subCategory.id, coeff: parseInt(e.target.value) });
else if (e.target.type === "checkbox")
if (e.target.id === "type")
setSubCategory({ ...subCategory, type: (e.target.checked ? "text" : "") })
update = { ...subCategory, type: (e.target.checked ? "text" : "") };
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 (
......@@ -49,14 +65,15 @@ export default function SubCategory(props) {
aria-controls="panel1a-content"
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>
<ExpansionPanelDetails>
<Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
<Grid item xs={12} md={10}>
<TextField
id="name"
label="Nom de la categorie"
label="Nom de la sous categorie"
value={subCategory.name}
onChange={handleChange}
className={classes.textField}
......@@ -144,7 +161,7 @@ export default function SubCategory(props) {
size="small"
variant="contained"
color="primary"
onClick={props.deleteSubCategory}
onClick={deleteSubCategory}
>
Supprimer la sous catégorie
</Danger>
......@@ -156,3 +173,7 @@ export default function SubCategory(props) {
</Grid>
);
}
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