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 { saveAs } from "file-saver";
import './App.css';
......@@ -40,17 +42,30 @@ function App() {
const classes = useStyles();
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" });
saveAs(blob, "config.json");
saveAs(blob, name + ".json");
}
const generate = () => {
}
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 })
}
......@@ -95,8 +110,11 @@ function App() {
<Grid item xs={12} md={6} lg={4}>
<TextField
id="outlined-name"
name="name"
label="Nom du questionnaire"
className={classes.textField}
value={state.name}
onChange={handleChange}
margin="normal"
variant="outlined"
fullWidth
......@@ -129,6 +147,14 @@ function App() {
>
Ajouter une section
</Button>
<Button
size="medium"
variant="contained"
color="primary"
onClick={save}
>
Sauvegarder la configuration
</Button>
<Button
size="medium"
variant="contained"
......
src/Category.jsx
View file @ 3aab3e6d
......@@ -2,10 +2,13 @@ import React from "react";
import { makeStyles } from "@material-ui/core/styles"
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 TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons";
import SubCategory from "./SubCategory";
......@@ -54,52 +57,61 @@ export default function Category(props) {
return (
<Grid container spacing={2} justify="flex-end">
<Grid item xs={12} md={10}>
<Divider />
<Typography variant="h6" component="h5">
{category.name}
</Typography>
</Grid>
<Grid item xs={12} md={10}>
<TextField
id="name"
label="Nom de la categorie"
value={category.name}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>{category.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container>
<Grid item xs={12} md={10}>
<TextField
id="name"
label="Nom de la categorie"
value={category.name}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={10}>
{category.subCategories.map((sc, i) =>
<SubCategory
key={"sc" + i}
subCategory={sc}
setSubCategory={setSubCategory(i)}
deleteSubCategory={deleteSubCategory(i)}
/>)
}
</Grid>
<Grid item xs={12} md={10}>
{category.subCategories.map((sc, i) =>
<SubCategory
key={"sc" + i}
subCategory={sc}
setSubCategory={setSubCategory(i)}
deleteSubCategory={deleteSubCategory(i)}
/>)
}
</Grid>
<Grid item xs={12} md={10}>
<Button
size="small"
variant="contained"
color="primary"
onClick={addSubCategory}
>
Ajouter une sous catégorie
<Grid item xs={12} md={10}>
<Button
size="small"
variant="contained"
color="primary"
onClick={addSubCategory}
>
Ajouter une sous catégorie
</Button>
<Danger
size="small"
variant="contained"
color="primary"
onClick={props.deleteCategory}
>
Supprimer la catégorie
<Danger
size="small"
variant="contained"
color="primary"
onClick={props.deleteCategory}
>
Supprimer la catégorie
</Danger>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</Grid>
)
......
src/SubCategory.jsx
View file @ 3aab3e6d
......@@ -2,12 +2,17 @@ import React from "react";
import { makeStyles } from "@material-ui/core/styles";
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 Checkbox from "@material-ui/core/Checkbox";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Danger } from "./Buttons";
const useStyles = makeStyles(theme => ({
......@@ -37,104 +42,119 @@ export default function SubCategory(props) {
}
return (
<Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
<Grid item xs={12} md={10}>
<Divider />
<Typography variant="h6" component="h5">
{subCategory.name}
</Typography>
</Grid>
<Grid container spacing={2} justify="flex-end">
<Grid item xs={12} md={10}>
<TextField
id="name"
label="Nom de la categorie"
value={subCategory.name}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={4}>
<TextField
id="coeff"
label="Coefficient"
value={subCategory.coeff}
onChange={handleChange}
type="number"
InputLabelProps={{
shrink: true,
}}
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>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>{subCategory.name}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container justify="flex-end" alignItems="center" className={classes.root} spacing={2}>
<Grid item xs={12} md={10}>
<Divider />
<Typography variant="h6" component="h5">
{subCategory.name}
</Typography>
</Grid>
<Grid item xs={12} md={10}>
<TextField
id="name"
label="Nom de la categorie"
value={subCategory.name}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={4}>
<TextField
id="coeff"
label="Coefficient"
value={subCategory.coeff}
onChange={handleChange}
type="number"
InputLabelProps={{
shrink: true,
}}
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}>
<FormControlLabel
value="top"
control={
<Checkbox
color="primary"
id="required"
onChange={handleChange}
checked={subCategory.required}
/>
}
label="Requis"
labelPlacement="top"
/>
</Grid>
<Grid item xs={12} md={5}>
<TextField
id="upper"
label="Label valeur haute"
value={subCategory.upper}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={5}>
<TextField
id="lower"
label="Label valeur basse"
value={subCategory.lower}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={3}>
<FormControlLabel
value="top"
control={
<Checkbox
color="primary"
id="required"
onChange={handleChange}
checked={subCategory.required}
/>
}
label="Requis"
labelPlacement="top"
/>
</Grid>
<Grid item xs={12} md={5}>
<TextField
id="upper"
label="Label valeur haute"
value={subCategory.upper}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={5}>
<TextField
id="lower"
label="Label valeur basse"
value={subCategory.lower}
onChange={handleChange}
className={classes.textField}
margin="normal"
variant="outlined"
fullWidth
/>
</Grid>
<Grid item xs={12} md={10}>
<Danger
size="small"
variant="contained"
color="primary"
onClick={props.deleteSubCategory}
>
Supprimer la sous catégorie
<Grid item xs={12} md={10}>
<Danger
size="small"
variant="contained"
color="primary"
onClick={props.deleteSubCategory}
>
Supprimer la sous catégorie
</Danger>
</Grid>
</Grid >
</ExpansionPanelDetails>
</ExpansionPanel>
</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