Skip to content

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

first commit

parent 8e80e4f3
Pipeline #5 failed with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 830 additions and 22 deletions
      package-lock.json
      View file @ 5e9a081e
      This diff is collapsed.
      package.json
      View file @ 5e9a081e
      ......@@ -3,6 +3,8 @@
      "version": "0.1.0",
      "private": true,
      "dependencies": {
      "@material-ui/core": "^4.2.0",
      "@material-ui/icons": "^4.2.1",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.1"
      ......
      public/index.html
      View file @ 5e9a081e
      ......@@ -19,9 +19,9 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
      -->
      <title>React App</title>
      <title>Générateur de questionnaires</title>
      </head>
      <body>
      <body style="background-color: #f5f5f5">
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <!--
      ......
      src/App.js
      View file @ 5e9a081e
      import React from 'react';
      import logo from './logo.svg';
      import React, { useState } from 'react';
      import './App.css';
      import { makeStyles } from '@material-ui/core/styles';
      import Paper from "@material-ui/core/Paper";
      import TextField from "@material-ui/core/TextField";
      import Divider from "@material-ui/core/Divider";
      import Grid from "@material-ui/core/Grid";
      import AppBar from "@material-ui/core/AppBar";
      import Toolbar from '@material-ui/core/Toolbar';
      import Typography from '@material-ui/core/Typography';
      import Button from "@material-ui/core/Button";
      import Section from "./Section";
      const useStyles = makeStyles(theme => ({
      root: {
      flexGrow: 1
      },
      paper: {
      padding: theme.spacing(2, 3)
      },
      menuButton: {
      marginRight: theme.spacing(2),
      },
      title: {
      flexGrow: 1,
      },
      margin: {
      margin: theme.spacing(4)
      },
      button: {
      margin: theme.spacing(1),
      },
      }));
      function App() {
      return (
      <div className="App">
      <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
      Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
      >
      Learn React
      </a>
      </header>
      </div>
      );
      const classes = useStyles();
      const [state, setState] = useState({
      sections: [{
      name: "Première section",
      categories: [
      {
      name: "Première catégorie",
      subCategories: [
      {
      name: "Première sous catégorie",
      coeff: 1,
      required: true,
      type: "",
      upper: "Excellent",
      lower: "Nul"
      }
      ]
      }
      ]
      }]
      }
      );
      const generate = () => {
      console.log(JSON.stringify(state))
      }
      const addSection = () => {
      setState({ sections: [...state.sections, { name: "Nouvelle section", categories: [] }] });
      }
      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 setSection = i => update => {
      let sections = Object.assign(state.sections);
      sections[i] = update;
      setState({
      sections: sections
      });
      }
      return (
      <div className={classes.root}>
      <AppBar position="static">
      <Toolbar>
      </Toolbar></AppBar>
      <Grid container justify="center" className={classes.margin}>
      <Grid item xs={12} md={10} lg={8}>
      <Paper className={classes.paper}>
      <Grid container spacing={2}>
      <Grid item xs={12}>
      <Typography variant="h5" component="h3">
      Générateur de questionnaires
      </Typography>
      <Divider />
      </Grid>
      <Grid item xs={12} md={6} lg={4}>
      <TextField
      id="outlined-name"
      label="Nom du questionnaire"
      className={classes.textField}
      margin="normal"
      variant="outlined"
      fullWidth
      />
      </Grid>
      <Grid item xs={12}>
      <Grid container spacing={2}>
      {state.sections.map((section, i) =>
      <Grid
      item
      xs={12}
      key={"s" + i}>
      <Section
      section={section}
      deleteSection={deleteSection(i)}
      setSection={setSection(i)}
      />
      </Grid>
      )}
      </Grid>
      </Grid>
      <Grid item xs={12}>
      <Button
      size="medium"
      variant="contained"
      color="primary"
      onClick={addSection}
      >
      Ajouter une section
      </Button>
      <Button
      size="medium"
      variant="contained"
      color="primary"
      onClick={generate}
      >
      Générer le formulaire
      </Button>
      </Grid>
      </Grid>
      </Paper>
      </Grid>
      </Grid>
      </div>
      );
      }
      export default App;
      src/Buttons.jsx 0 → 100644
      View file @ 5e9a081e
      import React from 'react';
      import Button from '@material-ui/core/Button';
      const CreateButton = (color, background) => {
      if (background)
      return props => <Button {...props} style={{ backgroundColor: color }}></Button>
      else
      return props => <Button {...props} style={{ color: color }}></Button>
      }
      export const Danger = CreateButton("#f44336", true)
      export const Success = CreateButton("#4caf50", true)
      export const Warning = CreateButton("#ff9800", true)
      export const DangerSimple = CreateButton("#f44336", false)
      export const SuccessSimple = CreateButton("#4caf50", false)
      export const WarningSimple = CreateButton("#ff9800", false)
      \ No newline at end of file
      src/Category.jsx 0 → 100644
      View file @ 5e9a081e
      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 Typography from "@material-ui/core/Typography";
      import TextField from "@material-ui/core/TextField";
      import Button from "@material-ui/core/Button";
      import { Danger } from "./Buttons";
      import SubCategory from "./SubCategory";
      const useStyles = makeStyles(theme => ({
      heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular,
      },
      }));
      export default function Category(props) {
      const classes = useStyles();
      const { category, setCategory } = props;
      const handleChange = e => {
      setCategory({ ...category, [e.target.id]: e.target.value })
      }
      const addSubCategory = () => {
      setCategory({
      ...category, subCategories: [...category.subCategories,
      {
      name: "Nouvelle sous catégorie",
      coeff: 1,
      required: true,
      type: "",
      upper: "Excellent",
      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) })
      }
      const setSubCategory = i => update => {
      let subCategories = Object.assign(category.subCategories);
      subCategories[i] = update;
      setCategory({ ...category, subCategories });
      }
      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>
      <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
      </Button>
      <Danger
      size="small"
      variant="contained"
      color="primary"
      onClick={props.deleteCategory}
      >
      Supprimer la catégorie
      </Danger>
      </Grid>
      </Grid>
      )
      }
      \ No newline at end of file
      src/Section.jsx 0 → 100644
      View file @ 5e9a081e
      import React, { useEffect } 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 Typography from '@material-ui/core/Typography';
      import Button from '@material-ui/core/Button';
      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: {
      width: '100%',
      },
      heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular,
      },
      }));
      export default function SimpleExpansionPanel(props) {
      const classes = useStyles();
      const { setSection, section } = props;
      useEffect(() => {
      }, [])
      const handleChange = e => {
      setSection({ ...section, [e.target.id]: e.target.value })
      }
      const addCategory = () => {
      setSection({ ...section, categories: [...section.categories, { name: "Nouvelle catégorie", subCategories: [] }] })
      }
      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) })
      }
      const setCategory = i => update => {
      let categories = Object.assign(section.categories);
      categories[i] = update;
      setSection({ ...section, categories });
      }
      return (
      <div className={classes.root}>
      <ExpansionPanel>
      <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      id="panel1a-header"
      >
      <Typography className={classes.heading}>{props.section.name}</Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
      <Grid container spacing={2}>
      <Grid item xs={12}>
      <TextField
      id="name"
      label="Nom de la section"
      value={section.name}
      onChange={handleChange}
      className={classes.textField}
      margin="normal"
      variant="outlined"
      fullWidth
      />
      </Grid>
      <Grid item xs={12}>
      {section.categories.map((category, i) =>
      <Category
      key={"c" + i}
      category={category}
      deleteCategory={deleteCategory(i)}
      setCategory={setCategory(i)}
      />)}
      </Grid>
      <Grid item xs={12}>
      <Button
      size="medium"
      variant="contained"
      color="primary"
      onClick={addCategory}
      >
      Ajouter une catégorie
      </Button>
      <Danger
      size="medium"
      variant="contained"
      color="primary"
      onClick={props.deleteSection}
      >
      Supprimer la section
      </Danger>
      </Grid>
      </Grid>
      </ExpansionPanelDetails>
      </ExpansionPanel>
      </div>
      );
      }
      src/SubCategory.jsx 0 → 100644
      View file @ 5e9a081e
      import React from "react";
      import { makeStyles } from "@material-ui/core/styles";
      import Grid from "@material-ui/core/Grid";
      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 { Danger } from "./Buttons";
      const useStyles = makeStyles(theme => ({
      heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular,
      },
      root: {
      marginBottom: theme.spacing(3)
      }
      }));
      export default function SubCategory(props) {
      const classes = useStyles();
      const { setSubCategory, subCategory } = props;
      const handleChange = e => {
      if (e.target.type === "text")
      setSubCategory({ ...subCategory, [e.target.id]: e.target.value })
      else if (e.target.type === "number" && parseInt(e.target.value) >= 1)
      setSubCategory({ ...subCategory, [e.target.id]: e.target.value })
      else if (e.target.type === "checkbox")
      if (e.target.id === "type")
      setSubCategory({ ...subCategory, type: (e.target.checked ? "text" : "") })
      else
      setSubCategory({ ...subCategory, [e.target.id]: e.target.checked })
      }
      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 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={10}>
      <Danger
      size="small"
      variant="contained"
      color="primary"
      onClick={props.deleteSubCategory}
      >
      Supprimer la sous catégorie
      </Danger>
      </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