Skip to content

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

file name + panel for each category / subcategory

parent cc3b7bbf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 141 deletions
package-lock.json
View file @ 3aab3e6d
This diff is collapsed.
src/App.js
View file @ 3aab3e6d
/*global google */
import React, { useState } from 'react'; import React, { useState } from 'react';
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import './App.css'; import './App.css';
...@@ -40,17 +42,30 @@ function App() { ...@@ -40,17 +42,30 @@ function App() {
const classes = useStyles(); const classes = useStyles();
const [state, setState] = useState({ const [state, setState] = useState({
sections: [] sections: [],
name: ""
} }
); );
const generate = () => { const save = () => {
let name = prompt("Nom du fichier");
let blob = new Blob([JSON.stringify(state)], { type: "application/json" }); let blob = new Blob([JSON.stringify(state)], { type: "application/json" });
saveAs(blob, "config.json"); saveAs(blob, name + ".json");
}
const generate = () => {
} }
const loadConfig = () => { const loadConfig = () => {
let config = JSON.parse(state.config) let config;
try {
config = JSON.parse(state.config)
} catch (e) {
alert("Impossible de charger cette configuration")
console.error(e);
return;
}
setState({ ...config }) setState({ ...config })
} }
...@@ -95,8 +110,11 @@ function App() { ...@@ -95,8 +110,11 @@ function App() {
<Grid item xs={12} md={6} lg={4}> <Grid item xs={12} md={6} lg={4}>
<TextField <TextField
id="outlined-name" id="outlined-name"
name="name"
label="Nom du questionnaire" label="Nom du questionnaire"
className={classes.textField} className={classes.textField}
value={state.name}
onChange={handleChange}
margin="normal" margin="normal"
variant="outlined" variant="outlined"
fullWidth fullWidth
...@@ -129,6 +147,14 @@ function App() { ...@@ -129,6 +147,14 @@ function App() {
> >
Ajouter une section Ajouter une section
</Button> </Button>
<Button
size="medium"
variant="contained"
color="primary"
onClick={save}
>
Sauvegarder la configuration
</Button>
<Button <Button
size="medium" size="medium"
variant="contained" variant="contained"
......
src/Category.jsx
View file @ 3aab3e6d
...@@ -2,10 +2,13 @@ import React from "react"; ...@@ -2,10 +2,13 @@ import React 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";
import Divider from "@material-ui/core/Divider"; import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons"; import { Danger } from "./Buttons";
import SubCategory from "./SubCategory"; import SubCategory from "./SubCategory";
...@@ -54,52 +57,61 @@ export default function Category(props) { ...@@ -54,52 +57,61 @@ export default function Category(props) {
return ( return (
<Grid container spacing={2} justify="flex-end"> <Grid container spacing={2} justify="flex-end">
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
<Divider /> <ExpansionPanel>
<Typography variant="h6" component="h5"> <ExpansionPanelSummary
{category.name} expandIcon={<ExpandMoreIcon />}
</Typography> aria-controls="panel1a-content"
</Grid> id="panel1a-header"
<Grid item xs={12} md={10}> >
<TextField <Typography className={classes.heading}>{category.name}</Typography>
id="name" </ExpansionPanelSummary>
label="Nom de la categorie" <ExpansionPanelDetails>
value={category.name} <Grid container>
onChange={handleChange} <Grid item xs={12} md={10}>
className={classes.textField} <TextField
margin="normal" id="name"
variant="outlined" label="Nom de la categorie"
fullWidth value={category.name}
/> onChange={handleChange}
</Grid> className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
{category.subCategories.map((sc, i) => {category.subCategories.map((sc, i) =>
<SubCategory <SubCategory
key={"sc" + i} key={"sc" + i}
subCategory={sc} subCategory={sc}
setSubCategory={setSubCategory(i)} setSubCategory={setSubCategory(i)}
deleteSubCategory={deleteSubCategory(i)} deleteSubCategory={deleteSubCategory(i)}
/>) />)
} }
</Grid> </Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
<Button <Button
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={addSubCategory} onClick={addSubCategory}
> >
Ajouter une sous catégorie Ajouter une sous catégorie
</Button> </Button>
<Danger <Danger
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={props.deleteCategory} onClick={props.deleteCategory}
> >
Supprimer la catégorie Supprimer la catégorie
</Danger> </Danger>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid> </Grid>
</Grid> </Grid>
) )
......
src/SubCategory.jsx
View file @ 3aab3e6d
...@@ -2,12 +2,17 @@ import React from "react"; ...@@ -2,12 +2,17 @@ import React 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";
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import FormControlLabel from "@material-ui/core/FormControlLabel"; import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox"; import Checkbox from "@material-ui/core/Checkbox";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons"; import { Danger } from "./Buttons";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
...@@ -37,104 +42,119 @@ export default function SubCategory(props) { ...@@ -37,104 +42,119 @@ export default function SubCategory(props) {
} }
return ( return (
<Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}> <Grid container spacing={2} justify="flex-end">
<Grid item xs={12} md={10}>
<Divider />
<Typography variant="h6" component="h5">
{subCategory.name}
</Typography>
</Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
<TextField <ExpansionPanel>
id="name" <ExpansionPanelSummary
label="Nom de la categorie" expandIcon={<ExpandMoreIcon />}
value={subCategory.name} aria-controls="panel1a-content"
onChange={handleChange} id="panel1a-header"
className={classes.textField} >
margin="normal" <Typography className={classes.heading}>{subCategory.name}</Typography>
variant="outlined" </ExpansionPanelSummary>
fullWidth <ExpansionPanelDetails>
/> <Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
</Grid> <Grid item xs={12} md={10}>
<Grid item xs={12} md={4}> <Divider />
<TextField <Typography variant="h6" component="h5">
id="coeff" {subCategory.name}
label="Coefficient" </Typography>
value={subCategory.coeff} </Grid>
onChange={handleChange} <Grid item xs={12} md={10}>
type="number" <TextField
InputLabelProps={{ id="name"
shrink: true, label="Nom de la categorie"
}} value={subCategory.name}
margin="normal" onChange={handleChange}
variant="outlined" className={classes.textField}
/> margin="normal"
</Grid> variant="outlined"
<Grid item xs={12} md={3}> fullWidth
<FormControlLabel />
value="top" </Grid>
control={ <Grid item xs={12} md={4}>
<Checkbox <TextField
color="primary" id="coeff"
id="type" label="Coefficient"
onChange={handleChange} value={subCategory.coeff}
checked={subCategory.type === "text"} /> onChange={handleChange}
} type="number"
label="Texte" InputLabelProps={{
labelPlacement="top" shrink: true,
/> }}
</Grid> margin="normal"
variant="outlined"
/>
</Grid>
<Grid item xs={12} md={3}>
<FormControlLabel
value="top"
control={
<Checkbox
color="primary"
id="type"
onChange={handleChange}
checked={subCategory.type === "text"} />
}
label="Texte"
labelPlacement="top"
/>
</Grid>
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<FormControlLabel <FormControlLabel
value="top" value="top"
control={ control={
<Checkbox <Checkbox
color="primary" color="primary"
id="required" id="required"
onChange={handleChange} onChange={handleChange}
checked={subCategory.required} checked={subCategory.required}
/> />
} }
label="Requis" label="Requis"
labelPlacement="top" labelPlacement="top"
/> />
</Grid> </Grid>
<Grid item xs={12} md={5}> <Grid item xs={12} md={5}>
<TextField <TextField
id="upper" id="upper"
label="Label valeur haute" label="Label valeur haute"
value={subCategory.upper} value={subCategory.upper}
onChange={handleChange} onChange={handleChange}
className={classes.textField} className={classes.textField}
margin="normal" margin="normal"
variant="outlined" variant="outlined"
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={12} md={5}> <Grid item xs={12} md={5}>
<TextField <TextField
id="lower" id="lower"
label="Label valeur basse" label="Label valeur basse"
value={subCategory.lower} value={subCategory.lower}
onChange={handleChange} onChange={handleChange}
className={classes.textField} className={classes.textField}
margin="normal" margin="normal"
variant="outlined" variant="outlined"
fullWidth fullWidth
/> />
</Grid> </Grid>
<Grid item xs={12} md={10}> <Grid item xs={12} md={10}>
<Danger <Danger
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={props.deleteSubCategory} onClick={props.deleteSubCategory}
> >
Supprimer la sous catégorie Supprimer la sous catégorie
</Danger> </Danger>
</Grid>
</Grid >
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid> </Grid>
</Grid > </Grid>
); );
} }
\ 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