Added steps content and send simulation

rafbarhid · Mar 7, 2021 · 51c0502 · 51c0502
1 parent 3258139
commit 51c0502
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 39 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./App.css";
 import { Provider } from "react-redux";
-import { createStore, Reducer, Action } from "redux";
+import { createStore, Reducer } from "redux";
 import GlobalState, { initialState } from "./state/globalState";
 import Header from "./styledComponents/Header";
 import Central from "./styledComponents/Central";

diff --git a/src/components/Central.tsx b/src/components/Central.tsx
@@ -4,8 +4,14 @@ import Step from "@material-ui/core/Step";
 import StepLabel from "@material-ui/core/StepLabel";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
-import { FormControl, Grid, InputLabel, MenuItem, Select } from "@material-ui/core";
-
+import {
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+} from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
 /*
 function Central(props: any) {
   return (
@@ -168,22 +174,19 @@ interface Form {
   oficina?: string;
   area?: string;
 
-    nie?: string;
-    nombre?: string;
-    apellidos?: string;
-    email?: string;
-
-
-    rnie?: string;
-    rnombre?: string;
-    rapellidos?: string;
-    remail?: string;
-
+  nie?: string;
+  nombre?: string;
+  apellidos?: string;
+  email?: string;
 
-    telefono?: number;
-    expediente?: string;
-    matricula?: string;
+  rnie?: string;
+  rnombre?: string;
+  rapellidos?: string;
+  remail?: string;
 
+  telefono?: number;
+  expediente?: string;
+  matricula?: string;
 }
 
 interface ICentralProps {
@@ -192,7 +195,7 @@ interface ICentralProps {
 }
 
 interface ICentralState {
-  formulario: Form
+  formulario: Form;
 }
 
 class Centrals extends React.Component<ICentralProps, ICentralState> {
@@ -203,30 +206,45 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
     "Datos del representante",
     "Otros datos",
   ];
-  oficinas = [{id: 0, name:'Alicante'},{id: 1, name:'Sevilla'},{id: 2, name:'Madrid'},{id: 3, name:'Constantina'}]
-  areas = ['Conductores', 'Vehículos', 'Sanciones', 'Otros']
+  oficinas = [
+    { id: 0, name: "Alicante" },
+    { id: 1, name: "Sevilla" },
+    { id: 2, name: "Madrid" },
+    { id: 3, name: "Constantina" },
+  ];
+  areas = [
+    { id: 0, name: "Conductores" },
+    { id: 1, name: "Vehículos" },
+    { id: 2, name: "Sanciones" },
+    { id: 3, name: "Otros" },
+  ];
 
   constructor(props: ICentralProps) {
     super(props);
     this.state = { formulario: {} as Form };
   }
 
   onValueChange = (event: React.ChangeEvent<any>) => {
-    const key = event.target.name
-    const val = event.target.value
+    const key = event.target.name;
+    const val = event.target.value;
     const formGroup = { ...this.state.formulario };
     formGroup[key] = val;
     this.setState({ formulario: formGroup });
-    console.log(this.state)
-  }
+    console.log(this.state);
+  };
 
   isStepOptional(step: number) {
     return step === 3;
   }
 
   handleNext = () => {
     console.log(this.props);
-    this.props.setActiveStep(this.props.current + 1);
+    if(this.props.current < this.steps.length-1){
+      this.props.setActiveStep(this.props.current + 1);
+    }else{
+      alert("Formulario enviado")
+    }
+
     console.log(this.props.current);
   };
 
@@ -239,15 +257,13 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
         return (
           <Grid container direction="row" justify="center">
             <FormControl>
-              <InputLabel style={{ width: '100%' }}>
-                Oficina
-              </InputLabel>
+              <InputLabel style={{ width: "100%" }}>Oficina</InputLabel>
               <Select
                 name="oficina"
-                value={this.state.formulario.oficina || ''}
+                value={this.state.formulario.oficina || ""}
                 onChange={this.onValueChange}
               >
-                {this.oficinas.map(oficina => (
+                {this.oficinas.map((oficina) => (
                   <MenuItem key={oficina.id} value={oficina.id}>
                     {oficina.name}
                   </MenuItem>
@@ -257,13 +273,139 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
           </Grid>
         );
       case 1:
-        return "What is an ad group anyways?";
+        return (
+          <Grid container direction="row" justify="center">
+            <FormControl>
+              <InputLabel style={{ width: "100%" }}>Area</InputLabel>
+              <Select
+                name="area"
+                value={this.state.formulario.area || ""}
+                onChange={this.onValueChange}
+              >
+                {this.areas.map((area) => (
+                  <MenuItem key={area.id} value={area.id}>
+                    {area.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        );
       case 2:
-        return "This is the bit I really care about!";
+        return (
+          <Grid container direction="column" justify="center">
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="nie"
+                  label="NIE/NIF"
+                  value={this.state.formulario.nie || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+              <FormControl>
+                <TextField
+                  name="email"
+                  label="Email"
+                  value={this.state.formulario.email || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="nombre"
+                  label="Nombre"
+                  value={this.state.formulario.nombre || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+              <FormControl>
+                <TextField
+                  name="apellidos"
+                  label="Apellidos"
+                  value={this.state.formulario.apellidos || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+          </Grid>
+        );
       case 3:
-        return "3!";
+        return (
+          <Grid container direction="column" justify="center">
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="rnie"
+                  label="NIE/NIF"
+                  value={this.state.formulario.rnie || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+              <FormControl>
+                <TextField
+                  name="remail"
+                  label="Email"
+                  value={this.state.formulario.remail || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="rnombre"
+                  label="Nombre"
+                  value={this.state.formulario.rnombre || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+              <FormControl>
+                <TextField
+                  name="rapellidos"
+                  label="Apellidos"
+                  value={this.state.formulario.rapellidos || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+          </Grid>
+        );
       case 4:
-        return "4!";
+        return (
+          <Grid container direction="column" justify="center">
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="telefono"
+                  label="Teléfono"
+                  value={this.state.formulario.telefono || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+              <FormControl>
+                <TextField
+                  name="expediente"
+                  label="Expediente"
+                  value={this.state.formulario.expediente || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+            <Grid container direction="row" justify="center">
+              <FormControl>
+                <TextField
+                  name="matricula"
+                  label="Matrícula"
+                  value={this.state.formulario.matricula || ""}
+                  onChange={this.onValueChange}
+                ></TextField>
+              </FormControl>
+            </Grid>
+          </Grid>
+        );
       default:
         return "Unknown step";
     }
@@ -277,7 +419,9 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
             const labelProps: { optional?: React.ReactNode } = {};
             if (this.isStepOptional(index)) {
               labelProps.optional = (
-                <Typography component={'span'} variant="caption">Opcional</Typography>
+                <Typography component={"span"} variant="caption">
+                  Opcional
+                </Typography>
               );
             }
             return (
@@ -290,11 +434,15 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
         <div>
           {this.props.current === this.steps.length ? (
             <div>
-              <Typography component={'span'}>Has completado todos los pasos</Typography>
+              <Typography component={"span"}>
+                Has completado todos los pasos
+              </Typography>
             </div>
           ) : (
             <div>
-              <Typography component={'span'}>{this.getStepContent(this.props.current)}</Typography>
+              <Typography component={"span"}>
+                {this.getStepContent(this.props.current)}
+              </Typography>
               <div>
                 <Button
                   disabled={this.props.current === 0}
@@ -308,8 +456,8 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
                   onClick={this.handleNext}
                 >
                   {this.props.current === this.steps.length - 1
-                    ? "Finish"
-                    : "Next"}
+                    ? "Enviar"
+                    : "Siguiente"}
                 </Button>
               </div>
             </div>