|
|
@@ -1,105 +1,118 @@
|
|
1
|
|
-import React, { useEffect, memo } from 'react';
|
|
|
1
|
+import React, { memo, useCallback, useMemo, useEffect } from 'react';
|
|
2
|
2
|
import * as Yup from 'yup';
|
|
3
|
3
|
import { useFormik, Form, FormikProvider } from 'formik';
|
|
4
|
4
|
import { Modal } from 'react-bootstrap'
|
|
5
|
5
|
|
|
6
|
6
|
import DateFnsUtils from '@date-io/date-fns';
|
|
7
|
|
-import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
|
|
|
7
|
+import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
|
|
8
|
8
|
|
|
9
|
|
-import {
|
|
10
|
|
- Button, Stack, TextField, MenuItem,FormControl, InputLabel, Select,
|
|
|
9
|
+import {
|
|
|
10
|
+ Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
|
|
11
|
11
|
Backdrop, CircularProgress
|
|
12
|
12
|
} from '@mui/material';
|
|
13
|
13
|
|
|
14
|
14
|
import { Service } from '../../Utils/HTTP';
|
|
15
|
|
-import useAuth from '../../Auth/useAuth';
|
|
|
15
|
+import useAuth from '../../Auth/useAuth';
|
|
|
16
|
+import { useQuery, useMutation, useQueryClient } from 'react-query'
|
|
|
17
|
+
|
|
|
18
|
+const NewPlazaSchema = Yup.object().shape({
|
|
|
19
|
+ id: Yup.number(),
|
|
|
20
|
+ nombrepuesto:
|
|
|
21
|
+ Yup.string().required('El nombre es requerido')
|
|
|
22
|
+ .min(5, "El nombre del puesto debe ser mayor a 5 caracteres")
|
|
|
23
|
+ .max(100),
|
|
|
24
|
+ puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
|
|
|
25
|
+ aredepto: Yup.number().required('Escoge alguna área'),
|
|
|
26
|
+ fecha: Yup.date("Ingresa una fecha válida"),
|
|
|
27
|
+ notas: Yup.string("Ingresa una nota válida").min(5).max(150),
|
|
|
28
|
+})
|
|
|
29
|
+
|
|
|
30
|
+
|
|
16
|
31
|
|
|
17
|
32
|
function Edit(props) {
|
|
18
|
33
|
|
|
19
|
|
- const NewPlazaSchema = Yup.object().shape({
|
|
20
|
|
- id: Yup.number(),
|
|
21
|
|
- nombrepuesto :
|
|
22
|
|
- Yup.string().required('El nombre es requerido')
|
|
23
|
|
- .min(5, "El nombre del puesto debe ser mayor a 5 caracteres")
|
|
24
|
|
- .max(100),
|
|
25
|
|
- puestosuperior : Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
|
|
26
|
|
- aredepto : Yup.number().required('Escoge alguna área'),
|
|
27
|
|
- fecha : Yup.date("Ingresa una fecha válida"),
|
|
28
|
|
- notas : Yup.string("Ingresa una nota válida").min(5).max(150),
|
|
29
|
|
- })
|
|
30
|
|
-
|
|
|
34
|
+ const now = useMemo(() => new Date(), [])
|
|
|
35
|
+ const auth = useAuth();
|
|
|
36
|
+ const token = auth.getToken();
|
|
|
37
|
+ const queryClient = useQueryClient()
|
|
|
38
|
+ let { visible, toggle, puesto } = props
|
|
|
39
|
+
|
|
31
|
40
|
const [departamento, setDepartamento] = React.useState('');
|
|
32
|
|
- const [open, setOpen] = React.useState(false);
|
|
33
|
|
- const handleClose = () => false
|
|
|
41
|
+ // const [open, setOpen] = React.useState(false);
|
|
34
|
42
|
|
|
35
|
|
- const changeDepartamento = (event) => {
|
|
|
43
|
+ const changeDepartamento = useCallback((event) => {
|
|
36
|
44
|
setDepartamento(event.target.value);
|
|
37
|
|
- };
|
|
|
45
|
+ }, []);
|
|
38
|
46
|
|
|
|
47
|
+ const [date, setDate] = React.useState(now);
|
|
|
48
|
+
|
|
|
49
|
+ const getCategories = async () => {
|
|
|
50
|
+ let rest = new Service("/categoria/getAll")
|
|
|
51
|
+ return await rest.getQuery(token)
|
|
|
52
|
+ }
|
|
|
53
|
+
|
|
|
54
|
+ const updatePuesto = async (fields) => {
|
|
|
55
|
+ let rest = new Service('/plaza/edit');
|
|
|
56
|
+ return rest.putQuery(fields, token)
|
|
|
57
|
+ }
|
|
|
58
|
+
|
|
|
59
|
+ const puestoMutation = useMutation(updatePuesto)
|
|
|
60
|
+
|
|
|
61
|
+ const close = () => toggle("EDIT");
|
|
|
62
|
+
|
|
|
63
|
+ const { data } = useQuery('categories', getCategories);
|
|
39
|
64
|
|
|
40
|
|
- const [date, setDate] = React.useState(new Date());
|
|
41
|
|
- const auth = useAuth();
|
|
42
|
|
- const token = auth.getToken();
|
|
43
|
65
|
|
|
44
|
|
- let {onClose, puesto : { data }, Complete, visible, categorias } = props
|
|
45
|
|
-
|
|
46
|
66
|
const formik = useFormik({
|
|
47
|
67
|
initialValues: {
|
|
48
|
|
- id: data ? data.id :"",
|
|
49
|
|
- nombrepuesto: data ? data.nombrepuesto :"",
|
|
50
|
|
- puestosuperior:data ?data.puestosuperior :"",
|
|
|
68
|
+ id: 1,
|
|
|
69
|
+ nombrepuesto: "",
|
|
|
70
|
+ puestosuperior: 1,
|
|
51
|
71
|
aredepto: 1,
|
|
52
|
|
- fecha: date,
|
|
53
|
|
- notas:data? data.notas :"",
|
|
|
72
|
+ fecha: now,
|
|
|
73
|
+ notas: ""
|
|
54
|
74
|
},
|
|
55
|
|
- onSubmit: ( fields, { resetForm } ) => {
|
|
56
|
|
- setOpen(true)
|
|
57
|
|
- fields['fecha'] = new Date(fields.fecha).toISOString();
|
|
58
|
|
-
|
|
59
|
|
- let Rest = new Service('/plaza/edit');
|
|
60
|
|
- Rest
|
|
61
|
|
- .put( fields, token )
|
|
62
|
|
- .then( _ => {
|
|
63
|
|
- resetForm();
|
|
64
|
|
- Complete(true,"Puesto actualizado exitosamente");
|
|
65
|
|
- onClose();
|
|
66
|
|
- setOpen(false)
|
|
67
|
|
- })
|
|
68
|
|
- .catch(err => {
|
|
69
|
|
- console.error(err)
|
|
70
|
|
- Complete(false,"Ocurrio un error, intentalo nuevamente");
|
|
71
|
|
- setOpen(false)
|
|
|
75
|
+ onSubmit: (fields, { resetForm }) => {
|
|
|
76
|
+ fields['fecha'] = new Date(fields.fecha).toISOString();
|
|
|
77
|
+
|
|
|
78
|
+ puestoMutation.mutate(fields, {
|
|
|
79
|
+ onSuccess: () => {
|
|
|
80
|
+ close();
|
|
|
81
|
+ queryClient.invalidateQueries('puestos')
|
|
|
82
|
+ }
|
|
72
|
83
|
})
|
|
73
|
84
|
|
|
|
85
|
+ resetForm();
|
|
74
|
86
|
},
|
|
75
|
87
|
validationSchema: NewPlazaSchema,
|
|
76
|
88
|
});
|
|
77
|
89
|
|
|
78
|
|
- const { errors, touched, handleSubmit, getFieldProps, setValues} = formik;
|
|
79
|
|
-
|
|
80
|
|
- useEffect(() => {
|
|
81
|
|
- setValues({
|
|
82
|
|
- id: data? data.id:"",
|
|
83
|
|
- nombrepuesto: data? data.nombrepuesto:"",
|
|
84
|
|
- notas:data?data.notas:"",
|
|
85
|
|
- puestosuperior:data ?data.puestosuperior :"",
|
|
86
|
|
- aredepto: 1,
|
|
87
|
|
- fecha:data?new Date(data.create_day): new Date(),
|
|
88
|
|
- })
|
|
89
|
|
-
|
|
90
|
|
- },[data,setValues])
|
|
|
90
|
+ const { errors, touched, handleSubmit, getFieldProps, setValues } = formik;
|
|
91
|
91
|
|
|
|
92
|
+ useEffect(() => {
|
|
|
93
|
+ console.log("PUESTO :: ", puesto)
|
|
|
94
|
+ if (puesto) {
|
|
|
95
|
+ setValues({
|
|
|
96
|
+ id: puesto.id,
|
|
|
97
|
+ nombrepuesto: puesto.nombrepuesto,
|
|
|
98
|
+ puestosuperior: puesto.puestosuperior,
|
|
|
99
|
+ aredepto: puesto.areadeptoplz_id,
|
|
|
100
|
+ fecha: new Date(puesto.create_day),
|
|
|
101
|
+ notas: puesto.notas
|
|
|
102
|
+ })
|
|
|
103
|
+ }
|
|
|
104
|
+ }, [puesto, now, setValues])
|
|
92
|
105
|
|
|
93
|
106
|
return (
|
|
94
|
107
|
|
|
95
|
|
- <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={onClose}>
|
|
|
108
|
+ <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
|
|
96
|
109
|
<Modal.Header>
|
|
97
|
|
- <button onClick={onClose} type="button" className="close" data-dismiss="modal">×</button>
|
|
98
|
|
- <h4 className="modal-title" style={{color : '#252525'}}>Agregar plaza</h4>
|
|
|
110
|
+ <button onClick={close} type="button" className="close" data-dismiss="modal">×</button>
|
|
|
111
|
+ <h4 className="modal-title" style={{ color: '#252525' }}>Editar puesto</h4>
|
|
99
|
112
|
</Modal.Header>
|
|
100
|
113
|
<Modal.Body className="modal-body">
|
|
101
|
114
|
|
|
102
|
|
- <FormikProvider style={{ padding : 25 }} value={formik}>
|
|
|
115
|
+ <FormikProvider style={{ padding: 25 }} value={formik}>
|
|
103
|
116
|
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
|
|
104
|
117
|
<Stack spacing={3}>
|
|
105
|
118
|
|
|
|
@@ -133,33 +146,34 @@ function Edit(props) {
|
|
133
|
146
|
{...getFieldProps('aredepto')}
|
|
134
|
147
|
error={Boolean(touched.aredepto && errors.aredepto)} >
|
|
135
|
148
|
{
|
|
136
|
|
- categorias ?
|
|
137
|
|
- categorias.map( cate => {
|
|
138
|
|
- return (
|
|
139
|
|
- <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
|
|
140
|
|
- )
|
|
141
|
|
- })
|
|
142
|
|
- : <MenuItem>Null</MenuItem>
|
|
|
149
|
+ data ?
|
|
|
150
|
+ data.data.map(cate => {
|
|
|
151
|
+ return (
|
|
|
152
|
+ <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
|
|
|
153
|
+ )
|
|
|
154
|
+ })
|
|
|
155
|
+ : <MenuItem>Null</MenuItem>
|
|
143
|
156
|
}
|
|
144
|
157
|
</Select>
|
|
145
|
158
|
</FormControl>
|
|
146
|
159
|
|
|
147
|
160
|
|
|
148
|
|
- <LocalizationProvider
|
|
|
161
|
+ <LocalizationProvider
|
|
149
|
162
|
dateAdapter={DateFnsUtils}>
|
|
150
|
163
|
<DesktopDatePicker
|
|
151
|
164
|
label="Fecha Creación"
|
|
152
|
165
|
fullWidth
|
|
153
|
166
|
inputFormat="dd/MM/yyyy"
|
|
154
|
167
|
{...getFieldProps('fecha')}
|
|
|
168
|
+ xd
|
|
155
|
169
|
value={date}
|
|
156
|
170
|
onChange={setDate}
|
|
157
|
|
- renderInput={(params) =>
|
|
158
|
|
- <TextField
|
|
|
171
|
+ renderInput={(params) =>
|
|
|
172
|
+ <TextField
|
|
159
|
173
|
disabled={true}
|
|
160
|
174
|
label="Fecha Creación"
|
|
161
|
175
|
fullWidth
|
|
162
|
|
- {...params}
|
|
|
176
|
+ {...params}
|
|
163
|
177
|
/>}
|
|
164
|
178
|
/>
|
|
165
|
179
|
</LocalizationProvider>
|
|
|
@@ -171,7 +185,6 @@ function Edit(props) {
|
|
171
|
185
|
id="filled-multiline-static"
|
|
172
|
186
|
multiline
|
|
173
|
187
|
rows={4}
|
|
174
|
|
- defaultValue="Default Value"
|
|
175
|
188
|
variant="filled"
|
|
176
|
189
|
label="Notas"
|
|
177
|
190
|
fullWidth
|
|
|
@@ -179,7 +192,7 @@ function Edit(props) {
|
|
179
|
192
|
{...getFieldProps('notas')}
|
|
180
|
193
|
error={Boolean(touched.notas && errors.notas)}
|
|
181
|
194
|
helperText={touched.notas && errors.notas}
|
|
182
|
|
- />
|
|
|
195
|
+ />
|
|
183
|
196
|
</Stack>
|
|
184
|
197
|
</Stack>
|
|
185
|
198
|
|
|
|
@@ -187,7 +200,7 @@ function Edit(props) {
|
|
187
|
200
|
<Modal.Footer>
|
|
188
|
201
|
<Button
|
|
189
|
202
|
type="submit"
|
|
190
|
|
- className="registerBtn"
|
|
|
203
|
+ className="registerBtn"
|
|
191
|
204
|
variant="contained"
|
|
192
|
205
|
sx={{ mt: 1, mr: 1 }} >
|
|
193
|
206
|
{'Actualizar'}
|
|
|
@@ -198,10 +211,11 @@ function Edit(props) {
|
|
198
|
211
|
</FormikProvider>
|
|
199
|
212
|
</Modal.Body>
|
|
200
|
213
|
<Backdrop
|
|
201
|
|
- sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
202
|
|
- open={open}
|
|
203
|
|
- onClick={handleClose} >
|
|
204
|
|
- <CircularProgress color="inherit" />
|
|
|
214
|
+ // sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
|
215
|
+ // open={open}
|
|
|
216
|
+ // onClick={() => console.log('backdrop')} >
|
|
|
217
|
+ >
|
|
|
218
|
+ <CircularProgress color="inherit" />
|
|
205
|
219
|
</Backdrop>
|
|
206
|
220
|
|
|
207
|
221
|
</Modal>
|
amenpunk