first two steeps in pwd

src/Components/Modal/PasswordModal.jsx

@@ -1,17 +1,16 @@
 import { Modal } from 'react-bootstrap'
 import * as React from 'react';
 
-import { 
+import {
     Box, Stepper, Step,
-    StepLabel, Button , Typography
+    StepLabel, Button, Typography
 } from '@mui/material'
 
-import { StepOne } from '../Password/Steps/one'
-import { StepTwo } from '../Password/Steps/two'
-import { StepTree } from '../Password/Steps/tree'
+import { Puesto } from '../Password/Steps/puesto'
+import { Password } from '../Password/Steps/password'
 import { StepFour } from '../Password/Steps/four'
 
-export function HelpModal (props) {
+export function HelpModal(props) {
 
     let { visible, handleClose } = props
 
@@ -52,54 +51,54 @@ export function HelpModal (props) {
 
     const steps = [
         {
-            label : 'Información del candidato',
-            operation: 
-                <StepOne 
-                    handleNext={handleNext} 
-                    handleBack={handleBack} 
-                    password={password} 
-                    setPassword={setPassword} 
+            label: 'Selecciona un Puesto',
+            operation:
+                <Puesto
+                    handleNext={handleNext}
+                    handleBack={handleBack}
+                    password={password}
+                    setPassword={setPassword}
                 />
         },
         {
-            label : 'Seleccionar plaza',
+            label: 'Contraseña',
             operation:
-                <StepTwo 
-                    handleNext={handleNext} 
-                    handleBack={handleBack} 
-                    password={password} 
-                    setPassword={setPassword} 
+                <Password
+                    handleNext={handleNext}
+                    handleBack={handleBack}
+                    password={password}
+                    setPassword={setPassword}
                 />
         },
         {
-            label : 'Seleccionar pruebas',
+            label: 'Seleccionar pruebas',
             operation:
-                <StepTree
-                    handleNext={handleNext} 
-                    handleBack={handleBack} 
-                    password={password} 
-                    setPassword={setPassword} 
+                <Puesto
+                    handleNext={handleNext}
+                    handleBack={handleBack}
+                    password={password}
+                    setPassword={setPassword}
                 />
         },
         {
-            label : 'Confirmar',
-            operation: 
+            label: 'Confirmar',
+            operation:
                 <StepFour
-                    handleNext={handleNext} 
-                    handleBack={handleBack} 
-                    password={password} 
-                    setPassword={setPassword} 
+                    handleNext={handleNext}
+                    handleBack={handleBack}
+                    password={password}
+                    setPassword={setPassword}
                 />
         },
     ];
 
 
     return (
-        <Modal size="lg" 
-            aria-labelledby="contained-modal-title-vcenter" 
-            centered show={visible} 
+        <Modal size="lg"
+            aria-labelledby="contained-modal-title-vcenter"
+            centered show={visible}
             onHide={handleClose}
-        > 
+        >
             <Modal.Header>
                 <button type="button" className="close" onClick={handleClose}>&times;</button>
                 <h4 className="modal-title">Crear Contraseña</h4>
@@ -107,7 +106,11 @@ export function HelpModal (props) {
             <Modal.Body className="modal-body">
 
                 <Box sx={{ width: '100%' }}>
-                    <Stepper activeStep={activeStep}>
+                    <Stepper 
+                        sx={{
+                            flexWrap :'wrap'
+                        }}
+                        activeStep={activeStep}>
                         {steps.map((step, index) => {
                             const stepProps = {};
                             const labelProps = {};
@@ -116,7 +119,9 @@ export function HelpModal (props) {
                             }
                             return (
                                 <Step key={step.label} {...stepProps}>
-                                    <StepLabel {...labelProps}>{step.label}</StepLabel>
+                                    <StepLabel 
+                                        sx={{ margin:1}}
+                                        {...labelProps}>{step.label}</StepLabel>
                                 </Step>
                             );
                         })}
@@ -132,14 +137,14 @@ export function HelpModal (props) {
                             </Box>
                         </React.Fragment>
                     ) : (
-                            <React.Fragment>
+                        <React.Fragment>
 
-                                <Box style={{ padding : 25, marginTop : 25}}>
-                                    {steps[activeStep].operation}
-                                </Box>
+                            <Box style={{ padding: 25, marginTop: 25 }}>
+                                {steps[activeStep].operation}
+                            </Box>
 
-                            </React.Fragment>
-                        )}
+                        </React.Fragment>
+                    )}
                 </Box>
 
             </Modal.Body>

src/Components/Password/CustomToolbar.jsx

@@ -15,7 +15,6 @@ export default class CustomToolbar extends React.Component {
         }
     }
 
-
     setVisible = () => this.setState({ visible : false});
 
     handleClick = () => {

src/Components/Password/Steps/one.js

@@ -11,7 +11,8 @@ import {
 
 import { niveles_educativos } from '../Rows'
 
-export function StepOne(props) {
+
+export function Candidato(props) {
 
     const [educativo, setEducativo] = useState('');
 

src/Components/Password/Steps/password.jsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import * as Yup from 'yup';
+import { useState } from 'react';
+import { useFormik, Form, FormikProvider } from 'formik';
+
+import {  
+    Box, Button,
+    Stack, TextField, 
+    InputLabel,MenuItem,FormControl,Select
+} from '@mui/material';
+
+import DateFnsUtils from '@date-io/date-fns';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+
+import { niveles_educativos } from '../Rows'
+
+export function Password(props) {
+
+    const [educativo, setEducativo] = useState('');
+
+    const changeNivelEducativo = (event) => {
+        setEducativo(event.target.value);
+    };
+
+    const PasswordSchema = Yup.object().shape({
+        pwd: 
+        Yup
+        .string()
+        .required('Ingresa un nivel educativo válido')
+        .min(5,"Ingresa un identificador válido")
+        .max(50,"identificador demasiado largo"),
+        fecha_start: Yup.date("Ingresa una fecha válida"),
+        fecha_end: Yup.date("Ingresa una fecha válida"),
+    });
+
+    let {  handleNext, handleBack, password, setPassword } = props
+
+    const formik = useFormik({
+        initialValues: {
+            pwd: "",
+            fecha_start: new Date(),
+            fecha_end: new Date(),
+        },
+        onSubmit: (fields) => {
+            console.log(fields)
+            handleNext()
+        },
+        validationSchema: PasswordSchema,
+    });
+
+    const {errors, touched, handleSubmit, getFieldProps } = formik;
+
+    return (
+        <FormikProvider style={{ padding : 25, paddingTop : 5 }} value={formik}>
+            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                <Stack spacing={3}>
+
+                    <TextField
+                        fullWidth
+                        type="text"
+                        label="Nombre o identificador"
+                        {...getFieldProps('pwd')}
+                        error={Boolean(touched.pwd && errors.pwd)}
+                        helperText={touched.pwd && errors.pwd}
+                        />
+
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                        <LocalizationProvider
+                            dateAdapter={DateFnsUtils}>
+                            <DesktopDatePicker
+                                label="Fecha de Activación"
+                                fullWidth
+                                inputFormat="dd/MM/yyyy"
+                                {...getFieldProps('fecha_start')}
+                                value={new Date()}
+                                onChange={() => console.log('fecha creacion')}
+                                renderInput={(params) =>
+                                    <TextField
+                                        disabled={true}
+                                        label="Fecha de Activación"
+                                        fullWidth
+                                        {...params}
+                                        />}
+                                />
+                        </LocalizationProvider>
+
+                        <LocalizationProvider
+                            dateAdapter={DateFnsUtils}>
+                            <DesktopDatePicker
+                                label="Fecha de caducidad"
+                                fullWidth
+                                inputFormat="dd/MM/yyyy"
+                                {...getFieldProps('fecha_end')}
+                                value={new Date()}
+                                onChange={() => console.log('fecha creacion')}
+                                renderInput={(params) =>
+                                    <TextField
+                                        disabled={true}
+                                        label="Fecha de caducidad"
+                                        fullWidth
+                                        {...params}
+                                        />}
+                                />
+                        </LocalizationProvider>
+                    </Stack>
+
+                    <Box sx={{ mb: 2 }}>
+                        <div style={{ paddingTop  : 15}}>
+                            <Button
+                                type="submit"
+                                className="registerBtn" 
+                                variant="contained"
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {'Siguiente'}
+                            </Button>
+                            <Button
+                                disabled={false}
+                                onClick={handleBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
+
+                </Stack>
+            </Form>
+        </FormikProvider>
+    );
+}

src/Components/Password/Steps/tree.js

@@ -13,18 +13,35 @@ import {
     CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon
 } from '@mui/icons-material';
 
+import { useQuery } from 'react-query';
+import { Service } from '../../../Utils/HTTP.js'
+import useAuth from '../../../Auth/useAuth'
+
 const delete_icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
 const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 
-export function StepTree(props) {
+
+export function Puesto(props) {
+
+    const auth = useAuth();
+    const token = auth.getToken();
 
     const PlazaScheme = Yup.object().shape({
         puesto: 
         Yup.array()
         .required('Escoge un puesto valido')
-        .min(1,"Debes escoger por lo menos una prueba")
+        .min(1,"Debes escoger por lo menos un puesto")
+        .max(1,"Debes escoger un solo puesto")
     });
+    
+    const getPuestos = async () => {
+        let rest = new Service('/plaza/getall')
+        return rest.getQuery(token);
+    }
+
+    let { data } = useQuery('puestos', getPuestos)
+    let puestos = data ? data.data.map( ({ nombrepuesto, id  }) => ({ label : nombrepuesto, id } )) : []
 
     let {  handleNext, handleBack, password, setPassword } = props
 
@@ -60,7 +77,7 @@ export function StepTree(props) {
                         isOptionEqualToValue={(option, value) => option.label === value.label}
                         multiple
                         id="checkboxes-tags-demo"
-                        options={top100Films}
+                        options={puestos}
                         disableCloseOnSelect
                         getOptionLabel={(option) => { 
                             return option.label 
@@ -82,8 +99,8 @@ export function StepTree(props) {
                                 error={Boolean(touched.puesto && errors.puesto)}
                                 helperText={touched.puesto && errors.puesto}
                                 {...params} 
-                                label="Escribe el nombre de la prueba" 
-                                placeholder="Prueba" 
+                                label="Escribe el nombre del puesto" 
+                                placeholder="Puesto" 
                             />
                         )}
                     />

src/Components/Password/Steps/two.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import * as Yup from 'yup';
-// import { useState, useEffect } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
 
 import {
@@ -8,7 +7,15 @@ import {
     FormControl,MenuItem,InputLabel
 } from '@mui/material';
 
-export function StepTwo(props) {
+import { useQuery } from 'react-query';
+import { Service } from '../../../Utils/HTTP.js'
+import useAuth from '../../../Auth/useAuth'
+
+
+export function Puesto(props) {
+    
+    const auth = useAuth();
+    const token = auth.getToken();
 
     const PlazaScheme = Yup.object().shape({
         puesto_id: 
@@ -17,6 +24,15 @@ export function StepTwo(props) {
         .required('Escoge un puesto válido')
     });
 
+
+    const getPuestos = async () => {
+        let rest = new Service('/plaza/getall')
+        return rest.getQuery(token);
+    }
+
+    let { data } = useQuery('puetos', getPuestos)
+    console.log("puestos >>", data )
+
     let {  handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({