update pwd

src/Components/Password/Operation.jsx

@@ -4,9 +4,14 @@ import { Edit as EditIcon, Send as SendIcon } from '@mui/icons-material'
 import {
     Button, Dialog, DialogActions, DialogContent, DialogTitle,
     FormControlLabel, Checkbox,
-    Autocomplete, TextField, Stack,
+    TextField, Stack,
+    //Autocomplete
 } from '@mui/material'
 
+import toast, { Toaster } from 'react-hot-toast';
+
+
+
 import * as Yup from 'yup';
 
 import { useQuery } from 'react-query'
@@ -18,6 +23,16 @@ import { useFormik, Form, FormikProvider } from 'formik';
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
+// function getNombrePuesto(id_plaz, puestos){
+//     let nombre = "";
+//     puestos.forEach(( p) => {
+//         if(p.id === id_plaz){
+//             nombre = p.nombrepuesto;
+//         }
+//     })
+//     return nombre;
+// }
+//
 
 export function Operation(props) {
 
@@ -56,16 +71,24 @@ function ModalEdit(props) {
     }
 
     let { data: result } = useQuery('contra', getPassword);
-    console.log('DATA:',result)
+
+    // 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 })) : []
+
 
     let initialValues = {
         id: result?.data?.id,
         pwd: result?.data?.pwd,
         deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
         state: result?.data?.state,
-        dateToActived: 
-        result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
-        plaza_id: result?.data?.plaza_id,
+        dateToActived:
+            result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
+        // plaza_id: [{ id:result?.data?.plaza_id, }]
     }
 
     return (
@@ -79,67 +102,60 @@ function ModalEdit(props) {
                 {pwd}
             </DialogTitle>
             <DialogContent>
-                <ModalForm initialValues={initialValues} />
+                <ModalForm
+                    initialValues={initialValues}
+                    handleOpen={handleOpen}
+                />
             </DialogContent>
-            <DialogActions>
-                <Button onClick={() => handleOpen(false)} autoFocus>
-                    Salir
-                </Button>
-                <Button onClick={() => handleOpen(false)}>Guardar</Button>
-            </DialogActions>
         </Dialog>
     )
 }
 
 function ModalForm(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(),
-        pwd: Yup.string().required(),
-        deadpwd: Yup.date(),
-        state: Yup.number().required(),
-        dateToActived: Yup.date().required(),
-        plaza_id: Yup.number().required()
+        pwd: Yup.string().required("Escoge un nombre valido"),
+        deadpwd: Yup.date().required("Escoge una fecha valida"),
+        state: Yup.number(),
+        dateToActived: Yup.date('Escoge una fecha valida').required("Escoge una fecha valida"),
+        // plaza_id: Yup.array().required("Escoge una plaza valida")
     })
 
 
     const formik = useFormik({
         initialValues: {
-            state:1,
-            ...props.initialValues,
+            state: 1,
+            pwd:"",
+            deadpwd:"",
+            dateToActived:"",
+            // plaza_id:[]
         },
         onSubmit: (fields) => {
             console.log('campos> ', fields)
+            toast.success("Contraseña Actualizada")
+            setTimeout(()=>{
+                props.handleOpen(false)
+            },1000)
         },
         validationSchema: pwdSchema,
     })
 
     const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
-    React.useEffect(() =>{
-        setValues({ ...props.initialValues})
-    },[props, setValues] )
+    React.useEffect(() => {
+        setValues({ ...props.initialValues })
+    }, [props, setValues])
 
     return (
         <FormikProvider value={formik}>
-            <Form style={{ padding: 15, maxWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
+            <Form style={{ padding: 20, maxWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={4}>
 
-                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
                         <TextField
-                            focused
                             fullWidth
                             type="text"
                             label="Contraseña"
@@ -151,13 +167,14 @@ function ModalForm(props) {
                         <FormControlLabel
                             control={
                                 <Checkbox
-                                checked={values.state  === 1 }
-                                onChange={(event)=>{
-                                    let check = event.target.checked;
-                                    setValues({
-                                        state : check ? 1:0
-                                    })
-                                }}
+                                    checked={values.state === 1}
+                                    onChange={(event) => {
+                                        let check = event.target.checked;
+                                        setValues({
+                                            ...values,
+                                            state: check ? 1 : 0
+                                        })
+                                    }}
                                 />
                             }
                             label="Activa"
@@ -172,12 +189,11 @@ function ModalForm(props) {
                             label="Fecha de Activación"
                             fullWidth
                             inputFormat="dd/MM/yyyy"
-                            {...getFieldProps('dateToActived')}
                             value={values.dateToActived}
-                            onChange={(val) => setValues({ ...values, dateToActived: new Date(val) })
-                            }
+                            onChange={(val) => setValues({ ...values, dateToActived: val }) }
                             renderInput={(params) =>
                                 <TextField
+                                    {...getFieldProps('dateToActived')}
                                     error={Boolean(touched.dateToActived && errors.dateToActived)}
                                     helperText={touched.dateToActived && errors.dateToActived}
                                     disabled={true}
@@ -210,14 +226,24 @@ function ModalForm(props) {
                         />
                     </LocalizationProvider>
 
-                    
+
+                        {/*
                     <Autocomplete
                         id="combo-box-demo"
-                        options={puestos}
-                        isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
+                        options={props.puestos}
+                        isOptionEqualToValue={
+                            (option, value) => option.nombrepuesto === value.nombrepuesto
+                        }
                         getOptionLabel={(option) => {
                             return option.nombrepuesto
                         }}
+                        onChange={(_e, newValue) => {
+                            console.log('CHANGE',newValue);
+                            setValues({
+                                ...values,
+                                plaza_id:newValue
+                            })
+                        }}
                         renderInput={(params) =>
                             <TextField
                                 {...params}
@@ -225,10 +251,24 @@ function ModalForm(props) {
                             />
                         }
                     />
-
+*/}
+
+                    <DialogActions>
+                        <Button onClick={() => props.handleOpen(false)}>
+                            Cerrar
+                        </Button>
+                        <Button
+                            type="submit"
+                            className="registerBtn"
+                            style={{ color: 'white' }}
+                            >
+                            Guardar
+                        </Button>
+                    </DialogActions>
 
                 </Stack>
             </Form>
+            <Toaster position="bottom-right" />
         </FormikProvider >
     )