|
|
@@ -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>
|
amenpunk