|
|
@@ -1,24 +1,26 @@
|
|
1
|
|
-import React, { memo, useCallback, useMemo, useEffect } from 'react';
|
|
2
|
|
-import * as Yup from 'yup';
|
|
3
|
|
-import { useFormik, Form, FormikProvider } from 'formik';
|
|
|
1
|
+import React, { memo, useMemo, useEffect } from 'react';
|
|
4
|
2
|
import { Modal } from 'react-bootstrap'
|
|
5
|
|
-import toast, { Toaster } from 'react-hot-toast';
|
|
|
3
|
+import { useForm, Controller } from "react-hook-form";
|
|
|
4
|
+import { yupResolver } from '@hookform/resolvers/yup';
|
|
|
5
|
+import * as Yup from 'yup';
|
|
6
|
6
|
|
|
7
|
7
|
import DateFnsUtils from '@date-io/date-fns';
|
|
8
|
8
|
import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
|
|
9
|
9
|
import { TabPanel } from './TabPanel'
|
|
10
|
10
|
|
|
11
|
11
|
import {
|
|
12
|
|
- Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
|
|
13
|
|
- Backdrop, CircularProgress,
|
|
14
|
|
- Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
|
|
|
12
|
+ Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
|
|
|
13
|
+ Backdrop, CircularProgress,
|
|
|
14
|
+ Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
|
|
15
|
15
|
} from '@mui/material';
|
|
16
|
16
|
|
|
|
17
|
+import toast, { Toaster } from 'react-hot-toast';
|
|
|
18
|
+
|
|
17
|
19
|
import { Service } from '../../Utils/HTTP';
|
|
18
|
20
|
import { useSelector } from 'react-redux'
|
|
19
|
21
|
import { useQuery, useMutation, useQueryClient } from 'react-query'
|
|
20
|
22
|
|
|
21
|
|
-const NewPlazaSchema = Yup.object().shape({
|
|
|
23
|
+const plazeSchema = Yup.object({
|
|
22
|
24
|
id: Yup.number(),
|
|
23
|
25
|
nombrepuesto:
|
|
24
|
26
|
Yup.string().required('El nombre es requerido')
|
|
|
@@ -29,30 +31,38 @@ const NewPlazaSchema = Yup.object().shape({
|
|
29
|
31
|
fecha: Yup.date("Ingresa una fecha válida"),
|
|
30
|
32
|
notas: Yup.string("Ingresa una nota válida").min(5).max(150),
|
|
31
|
33
|
tests: Yup.array()
|
|
32
|
|
-})
|
|
33
|
|
-
|
|
|
34
|
+}).required();
|
|
34
|
35
|
|
|
35
|
36
|
|
|
36
|
37
|
function Edit(props) {
|
|
37
|
38
|
|
|
|
39
|
+ const {
|
|
|
40
|
+ reset,control,register, handleSubmit, formState: { errors } } = useForm({
|
|
|
41
|
+ resolver : yupResolver(plazeSchema),
|
|
|
42
|
+ defaultValues: {
|
|
|
43
|
+ nombrepuesto: 'mingtest',
|
|
|
44
|
+ puestosuperior: 77,
|
|
|
45
|
+ fecha: '01/01/2019',
|
|
|
46
|
+ notas: 'esto es un ejemplod e una nota',
|
|
|
47
|
+ aredepto : 1,
|
|
|
48
|
+ }
|
|
|
49
|
+ });
|
|
|
50
|
+
|
|
|
51
|
+ const onSubmit = data => {
|
|
|
52
|
+ console.log("SUBMIT: ",data)
|
|
|
53
|
+ }
|
|
|
54
|
+
|
|
38
|
55
|
const now = useMemo(() => new Date(), [])
|
|
39
|
56
|
const auth = useSelector((state) => state.token)
|
|
40
|
|
- const queryClient = useQueryClient()
|
|
|
57
|
+ // const queryClient = useQueryClient()
|
|
41
|
58
|
let { visible, toggle } = props
|
|
42
|
59
|
|
|
43
|
|
- const [departamento, setDepartamento] = React.useState('');
|
|
44
|
60
|
const [open, setOpen] = React.useState(false);
|
|
45
|
|
-
|
|
46
|
|
- const changeDepartamento = useCallback((event) => {
|
|
47
|
|
- setDepartamento(event.target.value);
|
|
48
|
|
- }, []);
|
|
49
|
|
-
|
|
50
|
|
- const [date, setDate] = React.useState(now);
|
|
51
|
61
|
const [tab, setTab] = React.useState(0);
|
|
52
|
62
|
const [checklist, setChecklist] = React.useState([]);
|
|
53
|
63
|
|
|
54
|
64
|
const addPrueba = (check,id) => {
|
|
55
|
|
- let { tests } = values
|
|
|
65
|
+ let { tests } = { tests : []}
|
|
56
|
66
|
let temp ;
|
|
57
|
67
|
if(check){
|
|
58
|
68
|
temp = [...tests, {id}]
|
|
|
@@ -60,7 +70,7 @@ function Edit(props) {
|
|
60
|
70
|
temp = tests.filter( test => test.id !== id);
|
|
61
|
71
|
}
|
|
62
|
72
|
setChecklist(temp.map( test => test.id) )
|
|
63
|
|
- setValues({...values, tests: temp})
|
|
|
73
|
+ // setValues({...values, tests: temp})
|
|
64
|
74
|
};
|
|
65
|
75
|
|
|
66
|
76
|
const getCategories = async () => {
|
|
|
@@ -82,62 +92,22 @@ function Edit(props) {
|
|
82
|
92
|
|
|
83
|
93
|
const close = () => toggle("EDIT", {id : null});
|
|
84
|
94
|
|
|
85
|
|
- const { data } = useQuery('categories', getCategories);
|
|
|
95
|
+ const { data: categories } = useQuery('categories', getCategories);
|
|
86
|
96
|
const { data: testsCatalog } = useQuery('tests', getTest);
|
|
87
|
97
|
|
|
88
|
|
- const formik = useFormik({
|
|
89
|
|
- initialValues: {
|
|
90
|
|
- id: 1,
|
|
91
|
|
- nombrepuesto: "",
|
|
92
|
|
- puestosuperior: 1,
|
|
93
|
|
- aredepto: 1,
|
|
94
|
|
- fecha: now,
|
|
95
|
|
- notas: "",
|
|
96
|
|
- tests : []
|
|
97
|
|
- },
|
|
98
|
|
- onSubmit: (fields, { resetForm }) => {
|
|
99
|
|
- setOpen(true);
|
|
100
|
|
- fields['fecha'] = new Date(fields.fecha).toISOString();
|
|
101
|
|
-
|
|
102
|
|
- puestoMutation.mutate(fields, {
|
|
103
|
|
- onSuccess: () => {
|
|
104
|
|
- close();
|
|
105
|
|
- setOpen(false)
|
|
106
|
|
- toast.success("Puesto Actualizado!!")
|
|
107
|
|
- queryClient.invalidateQueries('puestos')
|
|
108
|
|
- },
|
|
109
|
|
- onError:() => {
|
|
110
|
|
- close();
|
|
111
|
|
- setOpen(false)
|
|
112
|
|
- toast.error("Lo sentimos ocurrió error inténtalo más tarde")
|
|
113
|
|
- }
|
|
|
98
|
+ useEffect(() => {
|
|
|
99
|
+ if(visible == null) return;
|
|
|
100
|
+ let rest = new Service(`/plaza/getthis/${visible}`)
|
|
|
101
|
+ rest
|
|
|
102
|
+ .getQuery(auth.token)
|
|
|
103
|
+ .then( response => {
|
|
|
104
|
+ let { areadeptoplz_id, fecha } = response.data;
|
|
|
105
|
+ reset({...response.data, areadepto : areadeptoplz_id, fecha : new Date(fecha) })
|
|
114
|
106
|
})
|
|
|
107
|
+ .catch(console.log)
|
|
|
108
|
+ },[visible])
|
|
115
|
109
|
|
|
116
|
|
- resetForm();
|
|
117
|
|
- },
|
|
118
|
|
- validationSchema: NewPlazaSchema,
|
|
119
|
|
- });
|
|
120
|
|
-
|
|
121
|
|
- const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
|
|
122
|
|
-
|
|
123
|
|
- useEffect(() => {
|
|
124
|
|
- console.info('use effect edit', props)
|
|
125
|
|
- },[props])
|
|
126
|
|
-
|
|
127
|
|
- // useEffect(() => {
|
|
128
|
|
- // if (puesto) {
|
|
129
|
|
- // setValues({
|
|
130
|
|
- // id: puesto.id,
|
|
131
|
|
- // nombrepuesto: puesto.nombrepuesto,
|
|
132
|
|
- // puestosuperior: puesto.puestosuperior,
|
|
133
|
|
- // aredepto: puesto.areadeptoplz_id,
|
|
134
|
|
- // fecha: new Date(puesto.create_day),
|
|
135
|
|
- // notas: puesto.notas,
|
|
136
|
|
- // tests : puesto.tests
|
|
137
|
|
- // })
|
|
138
|
|
- // setChecklist(puesto.tests.map(( {id} ) => id))
|
|
139
|
|
- // }
|
|
140
|
|
- // }, [puesto, now, setValues])
|
|
|
110
|
+ console.log("RENDER", props)
|
|
141
|
111
|
|
|
142
|
112
|
const changeTab = (_event, newValue) => {
|
|
143
|
113
|
setTab(newValue);
|
|
|
@@ -157,135 +127,119 @@ function Edit(props) {
|
|
157
|
127
|
<Tab label="Pruebas" />
|
|
158
|
128
|
</Tabs>
|
|
159
|
129
|
|
|
160
|
|
- <FormikProvider style={{ padding: 25 }} value={formik}>
|
|
161
|
|
- <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
|
|
162
|
|
-
|
|
163
|
|
-
|
|
164
|
|
- <TabPanel value={tab} index={1}>
|
|
165
|
|
- <Stack spacing={1}>
|
|
166
|
|
-<Box style={{ paddingTop :5, paddingLeft :15 }}>
|
|
167
|
|
- <Divider/>
|
|
168
|
|
- <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
|
|
169
|
|
- <Divider/>
|
|
170
|
|
- <FormGroup>
|
|
171
|
|
- {
|
|
172
|
|
- testsCatalog ?
|
|
173
|
|
- testsCatalog.data.map( test => (
|
|
174
|
|
- <FormControlLabel
|
|
175
|
|
- key={test.id}
|
|
176
|
|
- control={
|
|
177
|
|
- <Checkbox
|
|
178
|
|
- checked={checklist.includes((test.id))}
|
|
179
|
|
- onChange={(event)=> addPrueba(event.target.checked,test.id)}
|
|
180
|
|
- />
|
|
181
|
|
- }
|
|
182
|
|
- label={test.nombre}
|
|
183
|
|
- />
|
|
184
|
|
- )): null
|
|
185
|
|
- }
|
|
186
|
|
- </FormGroup>
|
|
187
|
|
- </Box>
|
|
|
130
|
+ <form onSubmit={handleSubmit(onSubmit)}>
|
|
|
131
|
+ <TabPanel value={tab} index={1}>
|
|
|
132
|
+ <Stack spacing={1}>
|
|
|
133
|
+ <Box style={{ paddingTop :5, paddingLeft :15 }}>
|
|
|
134
|
+ <Divider/>
|
|
|
135
|
+ <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
|
|
|
136
|
+ <Divider/>
|
|
|
137
|
+ <FormGroup>
|
|
|
138
|
+ {
|
|
|
139
|
+ testsCatalog ?
|
|
|
140
|
+ testsCatalog.data.map( test => (
|
|
|
141
|
+ <FormControlLabel
|
|
|
142
|
+ label={test.nombre}
|
|
|
143
|
+ key={test.id}
|
|
|
144
|
+ control={
|
|
|
145
|
+ <Checkbox
|
|
|
146
|
+ checked={checklist.includes((test.id))}
|
|
|
147
|
+ onChange={(event)=> addPrueba(event.target.checked,test.id)} /> }
|
|
|
148
|
+ />
|
|
|
149
|
+ )): null
|
|
|
150
|
+ }
|
|
|
151
|
+ </FormGroup>
|
|
|
152
|
+ </Box>
|
|
|
153
|
+ </Stack>
|
|
|
154
|
+ </TabPanel>
|
|
|
155
|
+
|
|
|
156
|
+ <TabPanel value={tab} index={0} >
|
|
|
157
|
+ <Stack spacing={3}>
|
|
|
158
|
+
|
|
|
159
|
+ <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
|
160
|
+
|
|
|
161
|
+ <TextField
|
|
|
162
|
+ name="nombrepuesto"
|
|
|
163
|
+ label="Nombre"
|
|
|
164
|
+ fullWidth
|
|
|
165
|
+ helperText={errors.nombrepuesto?.message}
|
|
|
166
|
+ error={Boolean(errors?.nombrepuesto)}
|
|
|
167
|
+ {...register("nombrepuesto")} />
|
|
|
168
|
+
|
|
|
169
|
+ <TextField
|
|
|
170
|
+ name="puestosuperior"
|
|
|
171
|
+ label="Puesto superior"
|
|
|
172
|
+ fullWidth
|
|
|
173
|
+ {...register("puestosuperior")} />
|
|
|
174
|
+
|
|
188
|
175
|
</Stack>
|
|
189
|
|
- </TabPanel>
|
|
190
|
|
-
|
|
191
|
|
-
|
|
192
|
|
- <TabPanel value={tab} index={0} >
|
|
193
|
|
- <Stack spacing={3}>
|
|
194
|
|
-
|
|
195
|
|
- <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
196
|
|
-
|
|
197
|
|
- <TextField
|
|
198
|
|
- label="Nombre"
|
|
199
|
|
- fullWidth
|
|
200
|
|
- {...getFieldProps('nombrepuesto')}
|
|
201
|
|
- error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
|
|
202
|
|
- helperText={touched.nombrepuesto && errors.nombrepuesto}
|
|
203
|
|
- />
|
|
204
|
|
-
|
|
205
|
|
- <TextField
|
|
206
|
|
- label="Puesto Superior"
|
|
207
|
|
- fullWidth
|
|
208
|
|
- {...getFieldProps('puestosuperior')}
|
|
209
|
|
- error={Boolean(touched.puestosuperior && errors.puestosuperior)}
|
|
210
|
|
- helperText={touched.puestosuperior && errors.puestosuperior}
|
|
211
|
|
- />
|
|
212
|
|
-
|
|
213
|
|
- </Stack>
|
|
214
|
|
- <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
215
|
|
- <FormControl fullWidth>
|
|
216
|
|
- <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
|
|
217
|
|
- <Select
|
|
218
|
|
- labelId="demo-simple-select-label"
|
|
219
|
|
- value={departamento}
|
|
220
|
|
- label="Departamento"
|
|
221
|
|
- onChange={changeDepartamento}
|
|
222
|
|
- {...getFieldProps('aredepto')}
|
|
223
|
|
- error={Boolean(touched.aredepto && errors.aredepto)} >
|
|
224
|
|
- {
|
|
225
|
|
- data ?
|
|
226
|
|
- data.data.map(cate => {
|
|
227
|
|
- return (
|
|
228
|
|
- <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
|
|
229
|
|
- )
|
|
230
|
|
- })
|
|
231
|
|
- : <MenuItem>Null</MenuItem>
|
|
232
|
|
- }
|
|
233
|
|
- </Select>
|
|
234
|
|
- </FormControl>
|
|
235
|
|
-
|
|
236
|
|
-
|
|
237
|
|
- <LocalizationProvider
|
|
238
|
|
- dateAdapter={DateFnsUtils}>
|
|
239
|
|
- <DesktopDatePicker
|
|
240
|
|
- label="Fecha Creación"
|
|
241
|
|
- fullWidth
|
|
242
|
|
- inputFormat="dd/MM/yyyy"
|
|
243
|
|
- {...getFieldProps('fecha')}
|
|
244
|
|
- xd
|
|
245
|
|
- value={date}
|
|
246
|
|
- onChange={setDate}
|
|
247
|
|
- renderInput={(params) =>
|
|
248
|
|
- <TextField
|
|
249
|
|
- disabled={true}
|
|
250
|
|
- label="Fecha Creación"
|
|
251
|
|
- fullWidth
|
|
252
|
|
- {...params}
|
|
253
|
|
- />}
|
|
254
|
|
- />
|
|
255
|
|
- </LocalizationProvider>
|
|
256
|
|
-
|
|
257
|
|
- </Stack>
|
|
258
|
|
-
|
|
259
|
|
- <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
|
|
260
|
|
- <TextField
|
|
261
|
|
- id="filled-multiline-static"
|
|
262
|
|
- multiline
|
|
263
|
|
- rows={4}
|
|
264
|
|
- variant="filled"
|
|
265
|
|
- label="Notas"
|
|
266
|
|
- fullWidth
|
|
267
|
|
- type="text"
|
|
268
|
|
- {...getFieldProps('notas')}
|
|
269
|
|
- error={Boolean(touched.notas && errors.notas)}
|
|
270
|
|
- helperText={touched.notas && errors.notas}
|
|
271
|
|
- />
|
|
272
|
|
- </Stack>
|
|
|
176
|
+
|
|
|
177
|
+ <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
|
178
|
+
|
|
|
179
|
+ <FormControl fullWidth>
|
|
|
180
|
+ <InputLabel>Departamento</InputLabel>
|
|
|
181
|
+ <Controller
|
|
|
182
|
+ name="aredepto"
|
|
|
183
|
+ control={control}
|
|
|
184
|
+ render={ ({field}) =>
|
|
|
185
|
+ <Select {...field}>
|
|
|
186
|
+ {
|
|
|
187
|
+ categories ?
|
|
|
188
|
+ categories.data.map(cate => {
|
|
|
189
|
+ return (
|
|
|
190
|
+ <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
|
|
|
191
|
+ )
|
|
|
192
|
+ })
|
|
|
193
|
+ : <MenuItem value={1}>hola</MenuItem>
|
|
|
194
|
+ }
|
|
|
195
|
+ </Select>
|
|
|
196
|
+ }>
|
|
|
197
|
+ </Controller>
|
|
|
198
|
+ </FormControl>
|
|
|
199
|
+
|
|
|
200
|
+ <LocalizationProvider dateAdapter={DateFnsUtils}>
|
|
|
201
|
+ <Controller
|
|
|
202
|
+ name="fecha"
|
|
|
203
|
+ control={control}
|
|
|
204
|
+ render={({field}) =>
|
|
|
205
|
+ <DesktopDatePicker
|
|
|
206
|
+ {...field}
|
|
|
207
|
+ label="Fecha Creación"
|
|
|
208
|
+ fullWidth
|
|
|
209
|
+ inputFormat="dd/MM/yyyy"
|
|
|
210
|
+ renderInput={(params) => <TextField {...params} />}
|
|
|
211
|
+ />
|
|
|
212
|
+ } >
|
|
|
213
|
+ </Controller>
|
|
|
214
|
+ </LocalizationProvider>
|
|
273
|
215
|
</Stack>
|
|
274
|
|
- </TabPanel>
|
|
275
|
216
|
|
|
|
217
|
+ <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
|
|
|
218
|
+ <TextField
|
|
|
219
|
+ name="notas"
|
|
|
220
|
+ multiline
|
|
|
221
|
+ rows={4}
|
|
|
222
|
+ label="Notas"
|
|
|
223
|
+ fullWidth
|
|
|
224
|
+ type="text"
|
|
|
225
|
+ {...register("notas")}
|
|
|
226
|
+ />
|
|
|
227
|
+ </Stack>
|
|
|
228
|
+ </Stack>
|
|
|
229
|
+ </TabPanel>
|
|
276
|
230
|
|
|
277
|
|
- <Modal.Footer>
|
|
278
|
|
- <Button
|
|
279
|
|
- type="submit"
|
|
280
|
|
- className="registerBtn"
|
|
281
|
|
- variant="contained"
|
|
282
|
|
- sx={{ mt: 1, mr: 1 }} >
|
|
283
|
|
- {'Actualizar'}
|
|
284
|
|
- </Button>
|
|
285
|
|
- </Modal.Footer>
|
|
|
231
|
+ <Modal.Footer>
|
|
|
232
|
+ <Button
|
|
|
233
|
+ type="submit"
|
|
|
234
|
+ className="registerBtn"
|
|
|
235
|
+ variant="contained"
|
|
|
236
|
+ sx={{ mt: 1, mr: 1 }} >
|
|
|
237
|
+ {'Actualizar'}
|
|
|
238
|
+ </Button>
|
|
|
239
|
+ </Modal.Footer>
|
|
|
240
|
+
|
|
|
241
|
+ </form>
|
|
286
|
242
|
|
|
287
|
|
- </Form>
|
|
288
|
|
- </FormikProvider>
|
|
289
|
243
|
</Modal.Body>
|
|
290
|
244
|
<Backdrop
|
|
291
|
245
|
sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
|
@@ -299,5 +253,4 @@ function Edit(props) {
|
|
299
|
253
|
)
|
|
300
|
254
|
}
|
|
301
|
255
|
|
|
302
|
|
-
|
|
303
|
256
|
export default memo(Edit);
|
amenpunk