Added first Step

rafbarhid · Mar 7, 2021 · 3258139 · 3258139
1 parent 1619b3c
commit 3258139
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 10 deletions.
diff --git a/src/components/Central.tsx b/src/components/Central.tsx
@@ -4,6 +4,7 @@ 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";
 
 /*
 function Central(props: any) {
@@ -163,13 +164,36 @@ function Central(props: any) {
 }
 
 */
-/** CONTAINER **/
+interface Form {
+  oficina?: string;
+  area?: string;
+
+    nie?: string;
+    nombre?: string;
+    apellidos?: string;
+    email?: string;
+
+
+    rnie?: string;
+    rnombre?: string;
+    rapellidos?: string;
+    remail?: string;
+
+
+    telefono?: number;
+    expediente?: string;
+    matricula?: string;
+
+}
+
 interface ICentralProps {
   current: number;
   setActiveStep: (arg0: number) => void;
 }
 
-interface ICentralState {}
+interface ICentralState {
+  formulario: Form
+}
 
 class Centrals extends React.Component<ICentralProps, ICentralState> {
   steps = [
@@ -179,9 +203,21 @@ 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']
 
   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 formGroup = { ...this.state.formulario };
+    formGroup[key] = val;
+    this.setState({ formulario: formGroup });
+    console.log(this.state)
   }
 
   isStepOptional(step: number) {
@@ -200,7 +236,26 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
   getStepContent(step: number) {
     switch (step) {
       case 0:
-        return "Select campaign settings...";
+        return (
+          <Grid container direction="row" justify="center">
+            <FormControl>
+              <InputLabel style={{ width: '100%' }}>
+                Oficina
+              </InputLabel>
+              <Select
+                name="oficina"
+                value={this.state.formulario.oficina || ''}
+                onChange={this.onValueChange}
+              >
+                {this.oficinas.map(oficina => (
+                  <MenuItem key={oficina.id} value={oficina.id}>
+                    {oficina.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+        );
       case 1:
         return "What is an ad group anyways?";
       case 2:
@@ -222,7 +277,7 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
             const labelProps: { optional?: React.ReactNode } = {};
             if (this.isStepOptional(index)) {
               labelProps.optional = (
-                <Typography variant="caption">Opcional</Typography>
+                <Typography component={'span'} variant="caption">Opcional</Typography>
               );
             }
             return (
@@ -235,11 +290,11 @@ class Centrals extends React.Component<ICentralProps, ICentralState> {
         <div>
           {this.props.current === this.steps.length ? (
             <div>
-              <Typography>Has completado todos los pasos</Typography>
+              <Typography component={'span'}>Has completado todos los pasos</Typography>
             </div>
           ) : (
             <div>
-              <Typography>{this.getStepContent(this.props.current)}</Typography>
+              <Typography component={'span'}>{this.getStepContent(this.props.current)}</Typography>
               <div>
                 <Button
                   disabled={this.props.current === 0}

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,9 +5,7 @@ import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <App />,
   document.getElementById("root")
 );
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "suppressImplicitAnyIndexErrors": true,
   },
   "include": [
     "src"