props values

src/Components/Password/Operation.jsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 
 import { Edit as EditIcon, Send as SendIcon } from '@mui/icons-material'
 import {
-    Button, Dialog, DialogActions, DialogContent,
-    DialogContentText, DialogTitle
+    Button, Dialog, DialogActions, DialogContent, DialogTitle,
+    FormControlLabel, Checkbox,
+    Autocomplete, TextField, Stack,
 } from '@mui/material'
 
 import * as Yup from 'yup';
@@ -14,8 +15,6 @@ import useAuth from '../../Auth/useAuth.js';
 
 import { useFormik, Form, FormikProvider } from 'formik';
 
-import { Stack, TextField } from '@mui/material';
-
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
@@ -47,6 +46,7 @@ export function Operation(props) {
 function ModalEdit(props) {
 
     let { password, open, handleOpen } = props
+    const now = React.useRef(new Date());
     let { pwd, plz } = password
     const auth = useAuth();
     const token = React.useRef(auth.getToken());
@@ -60,9 +60,10 @@ function ModalEdit(props) {
     let initialValues = {
         id: result?.data?.id,
         pwd: result?.data?.pwd,
-        deadpwd: result?.data?.deadpwd,
+        deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
         state: result?.data?.state,
-        dateToActived: result?.data?.dateToActived,
+        dateToActived: 
+        result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
         plaza_id: result?.data?.plaza_id,
     }
 
@@ -77,9 +78,7 @@ function ModalEdit(props) {
                 {pwd}
             </DialogTitle>
             <DialogContent>
-                <DialogContentText id="alert-dialog-description">
-                    <ModalForm initialValues={initialValues} />
-                </DialogContentText>
+                <ModalForm initialValues={initialValues} />
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => handleOpen(false)} autoFocus>
@@ -92,7 +91,18 @@ function ModalEdit(props) {
 }
 
 function ModalForm(props) {
-    console.log("PROPS >> ", props)
+
+    const auth = useAuth();
+    const token = auth.getToken();
+
+    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 }) => ({ nombrepuesto, id })) : []
+    // console.log('puestos: ', puestos)
 
     const pwdSchema = Yup.object().shape({
         id: Yup.number(),
@@ -113,93 +123,107 @@ function ModalForm(props) {
     })
 
     const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
-    console.log('formik values >> ', values )
+
+    React.useEffect(() =>{
+        setValues({ ...props.initialValues})
+    },[props, setValues] )
 
     return (
-        <FormikProvider  value={formik}>
-            <Form style={{padding : 15,minWidth:450}} autoComplete="off" noValidate onSubmit={handleSubmit}>
+        <FormikProvider value={formik}>
+            <Form style={{ padding: 15, minWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={4}>
 
-                    <TextField
-                        fullWidth
-                        type="text"
-                        label="Nombre o identificador"
-                        {...getFieldProps('pwd')}
-                        error={Boolean(touched.pwd && errors.pwd)}
-                        helperText={touched.pwd && errors.pwd}
-                    />
-                    
-
-                    <TextField
-                        fullWidth
-                        type="text"
-                        label="Nombre o identificador"
-                        {...getFieldProps('pwd')}
-                        error={Boolean(touched.pwd && errors.pwd)}
-                        helperText={touched.pwd && errors.pwd}
-                    />
-
-                    <TextField
-                        fullWidth
-                        type="text"
-                        label="Nombre o identificador"
-                        {...getFieldProps('pwd')}
-                        error={Boolean(touched.pwd && errors.pwd)}
-                        helperText={touched.pwd && errors.pwd}
-                    />
-                    
-                    <TextField
-                        fullWidth
-                        type="text"
-                        label="Nombre o identificador"
-                        {...getFieldProps('pwd')}
-                        error={Boolean(touched.pwd && errors.pwd)}
-                        helperText={touched.pwd && errors.pwd}
-                    />
-
-                        <LocalizationProvider
-                            dateAdapter={DateFnsUtils}>
-                            <DesktopDatePicker
-                                label="Fecha de Activación"
-                                fullWidth
-                                inputFormat="dd/MM/yyyy"
-                                {...getFieldProps('dateToActived')}
-                                value={values.dateToActived}
-                                onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })
-                                }
-                                renderInput={(params) =>
-                                    <TextField
-                                        error={Boolean(touched.dateToActived && errors.dateToActived)}
-                                        helperText={touched.dateToActived && errors.dateToActived}
-                                        disabled={true}
-                                        label="Fecha de Activación"
-                                        fullWidth
-                                        {...params}
-                                        />}
-                                />
-                        </LocalizationProvider>
-
-                        <LocalizationProvider
-                            dateAdapter={DateFnsUtils}>
-                            <DesktopDatePicker
-                                label="Fecha de Vencimiento"
-                                fullWidth
-                                inputFormat="dd/MM/yyyy"
-                                {...getFieldProps('deadpwd')}
-                                value={values.deadpwd}
-                                onChange={(val) => setValues({ ...values, deadpwd: new Date(val) })
-                                }
-                                renderInput={(params) =>
-                                    <TextField
-                                        error={Boolean(touched.deadpwd && errors.deadpwd)}
-                                        helperText={touched.deadpwd && errors.deadpwd}
-                                        disabled={true}
-                                        label="Fecha de Vencimiento"
-                                        fullWidth
-                                        {...params}
-                                        />}
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                        <TextField
+                            focused
+                            fullWidth
+                            type="text"
+                            label="Contraseña"
+                            {...getFieldProps('pwd')}
+                            error={Boolean(touched.pwd && errors.pwd)}
+                            helperText={touched.pwd && errors.pwd}
+                        />
+
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                checked={values.state  === 1 }
+                                onChange={(event)=>{
+                                    let check = event.target.checked;
+                                    setValues({
+                                        state : check ? 1:0
+                                    })
+                                }}
                                 />
-                        </LocalizationProvider>
+                            }
+                            label="Activa"
+                        />
+
+                    </Stack>
+
+
+                    <LocalizationProvider
+                        dateAdapter={DateFnsUtils}>
+                        <DesktopDatePicker
+                            label="Fecha de Activación"
+                            fullWidth
+                            inputFormat="dd/MM/yyyy"
+                            {...getFieldProps('dateToActived')}
+                            value={values.dateToActived}
+                            onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })
+                            }
+                            renderInput={(params) =>
+                                <TextField
+                                    error={Boolean(touched.dateToActived && errors.dateToActived)}
+                                    helperText={touched.dateToActived && errors.dateToActived}
+                                    disabled={true}
+                                    label="Fecha de Activación"
+                                    fullWidth
+                                    {...params}
+                                />}
+                        />
+                    </LocalizationProvider>
+
+                    <LocalizationProvider
+                        dateAdapter={DateFnsUtils}>
+                        <DesktopDatePicker
+                            label="Fecha de Vencimiento"
+                            fullWidth
+                            inputFormat="dd/MM/yyyy"
+                            {...getFieldProps('deadpwd')}
+                            value={values.deadpwd}
+                            onChange={(val) => setValues({ ...values, deadpwd: new Date(val) })
+                            }
+                            renderInput={(params) =>
+                                <TextField
+                                    error={Boolean(touched.deadpwd && errors.deadpwd)}
+                                    helperText={touched.deadpwd && errors.deadpwd}
+                                    disabled={true}
+                                    label="Fecha de Vencimiento"
+                                    fullWidth
+                                    {...params}
+                                />}
+                        />
+                    </LocalizationProvider>
+
+                    <Autocomplete
+                        error={Boolean(touched.plaza_id && errors.plaza_id)}
+                        helperText={touched.plaza_id && errors.plaza_id}
+                        autoHighlight={true}
+                        id="combo-box-demo"
+                        options={puestos}
+                        isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
+                        getOptionLabel={(option) => {
+                            return option.nombrepuesto
+                        }}
+                        renderInput={(params) =>
+                            <TextField
+                                {...params}
+                                label="Puesto"
+                                {...getFieldProps('plaza_id')}
+                            />
+                        }
+                    />
 
 
                 </Stack>