fix update puesto

src/Components/Modal/AgregarManual.js

@@ -8,9 +8,9 @@ import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
 import {
-    Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
-    Backdrop, CircularProgress,Box,Divider,
-    Tabs, Tab, FormGroup, Checkbox,FormControlLabel
+  Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
+  Backdrop, CircularProgress, Box, Divider,
+  Tabs, Tab, FormGroup, Checkbox, FormControlLabel
 } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
@@ -78,7 +78,7 @@ function Manual(props) {
       aredepto: 1,
       fecha: date,
       notas: "",
-      tests:[]
+      tests: []
     },
     onSubmit: (fields, { resetForm }) => {
 
@@ -111,16 +111,16 @@ function Manual(props) {
 
   const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
-  const addPrueba = (check,id) => {
+  const addPrueba = (check, id) => {
     let { tests } = values
-    let temp ;
-    if(check){
-      temp = [...tests, {id}]
-    }else{
-      temp = tests.filter( test => test.id !== id);
+    let temp;
+    if (check) {
+      temp = [...tests, { id }]
+    } else {
+      temp = tests.filter(test => test.id !== id);
     }
-    setChecklist(  temp.map( test => test.id) )
-    setValues({...values, tests: temp})
+    setChecklist(temp.map(test => test.id))
+    setValues({ ...values, tests: temp })
   };
 
   return (
@@ -143,26 +143,26 @@ function Manual(props) {
 
             <TabPanel value={tab} index={1}>
               <Stack spacing={1}>
-                <Box style={{ paddingTop :5, paddingLeft :15 }}>
-                  <Divider/>
-                  <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
-                  <Divider/>
+                <Box style={{ paddingTop: 5, paddingLeft: 15 }}>
+                  <Divider />
+                  <h4 style={{ paddingTop: 10, paddingBottom: 10 }}>Seleciona los test a realizar</h4>
+                  <Divider />
                   <FormGroup>
                     {
-                    testsCatalog ?
-                      testsCatalog.data.map( test => (
-                        <FormControlLabel 
-                          key={test.id}
-                          control={
-                          <Checkbox 
-                            checked={checklist.includes((test.id))}
-                            onChange={(event)=> addPrueba(event.target.checked,test.id)}
-                            />
-                        } 
-                          label={test.nombre} 
+                      testsCatalog ?
+                        testsCatalog.data.map(test => (
+                          <FormControlLabel
+                            key={test.id}
+                            control={
+                              <Checkbox
+                                checked={checklist.includes((test.id))}
+                                onChange={(event) => addPrueba(event.target.checked, test.id)}
+                              />
+                            }
+                            label={test.nombre}
                           />
-                      )): null
-                  }
+                        )) : null
+                    }
                   </FormGroup>
                 </Box>
               </Stack>
@@ -179,7 +179,7 @@ function Manual(props) {
                     fullWidth
                     {...getFieldProps('nombrepuesto')}
                     error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                    />
+                  />
 
                   <FormControl fullWidth>
                     <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
@@ -191,14 +191,14 @@ function Manual(props) {
                       {...getFieldProps('puestosuperior')}
                       error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
                       {
-                      data ?
-                        data.data.map(cate => {
-                          return (
-                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-)
-                        })
-                        : <MenuItem>Null</MenuItem>
-                    }
+                        data ?
+                          data.data.map(cate => {
+                            return (
+                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                            )
+                          })
+                          : <MenuItem>Null</MenuItem>
+                      }
                     </Select>
                   </FormControl>
 
@@ -216,14 +216,14 @@ function Manual(props) {
                       {...getFieldProps('aredepto')}
                       error={Boolean(touched.aredepto && errors.aredepto)} >
                       {
-                      data ?
-                        data.data.map(cate => {
-                          return (
-                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                          )
-                        })
-                        : <MenuItem>Null</MenuItem>
-                    }
+                        data ?
+                          data.data.map(cate => {
+                            return (
+                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                            )
+                          })
+                          : <MenuItem>Null</MenuItem>
+                      }
                     </Select>
                   </FormControl>
 
@@ -243,8 +243,8 @@ function Manual(props) {
                           label="Fecha Creación"
                           fullWidth
                           {...params}
-                          />}
-                      />
+                        />}
+                    />
                   </LocalizationProvider>
 
                 </Stack>
@@ -261,7 +261,7 @@ function Manual(props) {
                     {...getFieldProps('notas')}
                     error={Boolean(touched.notas && errors.notas)}
                     helperText={touched.notas && errors.notas}
-                    />
+                  />
                 </Stack>
               </Stack>
 

src/Components/Modal/EditPlaza.js

@@ -11,7 +11,7 @@ import { TabPanel } from './TabPanel'
 import {
   Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
   Backdrop, CircularProgress,
-  Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
+  Tabs, Tab, Box, Divider, FormGroup, FormControlLabel, Checkbox
 } from '@mui/material';
 
 import toast, { Toaster } from 'react-hot-toast';
@@ -23,9 +23,9 @@ import { useQuery, useMutation, useQueryClient } from 'react-query'
 const plazeSchema = Yup.object({
   id: Yup.number(),
   nombrepuesto:
-  Yup.string().required('El nombre es requerido')
-  .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
-  .max(100),
+    Yup.string().required('El nombre es requerido')
+      .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
+      .max(100),
   puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
   aredepto: Yup.number('El área debe ser un número').required('Escoge alguna área'),
   fecha: Yup.date("Ingresa una fecha válida").required(),
@@ -36,15 +36,15 @@ const plazeSchema = Yup.object({
 
 function Edit(props) {
 
-  const { setValue,getValues,reset,control,register, handleSubmit, formState: { errors } } = useForm({
-    resolver : yupResolver(plazeSchema),
+  const { setValue, getValues, reset, control, register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(plazeSchema),
     defaultValues: {
       nombrepuesto: 'mingtest',
       puestosuperior: 77,
       fecha: '01/01/2019',
       notas: 'esto es un ejemplod e una nota',
-      aredepto : 1,
-      tests : []
+      aredepto: 1,
+      tests: []
     }
   });
 
@@ -52,7 +52,7 @@ function Edit(props) {
 
     let body = {
       ...data,
-      fecha : new Date(data.fecha).toISOString()
+      fecha: new Date(data.fecha).toISOString()
     }
 
     puestoMutation.mutate(body, {
@@ -62,7 +62,7 @@ function Edit(props) {
         toast.success("Puesto Actualizado!!")
         queryClient.invalidateQueries('puestos')
       },
-      onError:() => {
+      onError: () => {
         //close();
         //setOpen(false)
         toast.error("Lo sentimos ocurrió error inténtalo más tarde")
@@ -74,21 +74,26 @@ function Edit(props) {
   const auth = useSelector((state) => state.token)
   const queryClient = useQueryClient()
   let { visible, toggle } = props
+  const [puestoSup, setPuestoSup] = React.useState('');
 
   const [open, setOpen] = React.useState(false);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
 
-  const addPrueba = (check,id) => {
+  const changePuestoSup = (event) => {
+    setPuestoSup(event.target.value);
+  };
+
+  const addPrueba = (check, id) => {
     let tests = getValues("tests")
     console.log(tests)
-    let temp ;
-    if(check){
-      temp = [...tests, {id}]
-    }else{
-      temp = tests.filter( test => test.id !== id);
+    let temp;
+    if (check) {
+      temp = [...tests, { id }]
+    } else {
+      temp = tests.filter(test => test.id !== id);
     }
-    setChecklist(temp.map( test => test.id) )
+    setChecklist(temp.map(test => test.id))
     setValue('tests', temp)
   };
 
@@ -109,25 +114,25 @@ function Edit(props) {
 
   const puestoMutation = useMutation(updatePuesto)
 
-  const close = () => toggle("EDIT", {id : null});
+  const close = () => toggle("EDIT", { id: null });
 
   const { data: categories } = useQuery('categories', getCategories);
   const { data: testsCatalog } = useQuery('tests', getTest);
 
   useEffect(() => {
-    if(visible == null) return;
+    if (visible == null) return;
     let rest = new Service(`/plaza/getthis/${visible}`)
     rest
       .getQuery(auth.token)
-      .then( response => {
+      .then(response => {
         console.log(response.data)
         let { areadeptoplz_id, fecha, tests } = response.data;
-        let temp_test = tests.map( t => ({ id : t.id} ))
-        setChecklist(temp_test.map( t => t.id))
-        reset({...response.data, aredepto : areadeptoplz_id, fecha : new Date(fecha) , tests : temp_test  })
+        let temp_test = tests.map(t => ({ id: t.id }))
+        setChecklist(temp_test.map(t => t.id))
+        reset({ ...response.data, aredepto: areadeptoplz_id, fecha: new Date(fecha), tests: temp_test })
       })
       .catch(console.log)
-  },[visible, auth,reset])
+  }, [visible, auth, reset])
 
   const changeTab = (_event, newValue) => setTab(newValue);
 
@@ -148,24 +153,24 @@ function Edit(props) {
         <form onSubmit={handleSubmit(onSubmit)}>
           <TabPanel value={tab} index={1}>
             <Stack spacing={1}>
-              <Box style={{ paddingTop :5, paddingLeft :15 }}>
-                <Divider/>
-                <h4 style={{paddingTop :10, paddingBottom:10}}>Seleciona los test a realizar</h4>
-                <Divider/>
+              <Box style={{ paddingTop: 5, paddingLeft: 15 }}>
+                <Divider />
+                <h4 style={{ paddingTop: 10, paddingBottom: 10 }}>Seleciona los test a realizar</h4>
+                <Divider />
                 <FormGroup>
                   {
-                  testsCatalog ?
-                    testsCatalog.data.map( test => (
-                      <FormControlLabel 
-                        label={test.nombre} 
-                        key={test.id}
-                        control={
-                        <Checkbox 
-                          checked={checklist.includes((test.id))}
-                          onChange={(event)=> addPrueba(event.target.checked,test.id)} /> } 
+                    testsCatalog ?
+                      testsCatalog.data.map(test => (
+                        <FormControlLabel
+                          label={test.nombre}
+                          key={test.id}
+                          control={
+                            <Checkbox
+                              checked={checklist.includes((test.id))}
+                              onChange={(event) => addPrueba(event.target.checked, test.id)} />}
                         />
-                    )): null
-                }
+                      )) : null
+                  }
                 </FormGroup>
               </Box>
             </Stack>
@@ -184,38 +189,54 @@ function Edit(props) {
                   error={Boolean(errors?.nombrepuesto)}
                   {...register("nombrepuesto")} />
 
-                <TextField
-                  name="puestosuperior"
-                  label="Puesto superior"
-                  fullWidth
-                  helperText={errors.puestosuperior?.message}
-                  error={Boolean(errors?.puestosuperior)}
-                  {...register("puestosuperior")} />
-
+                <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
+                  <Controller
+                    helperText={errors.puestosuperior?.message}
+                    error={Boolean(errors?.puestosuperior)}
+                    name="puestosuperior"
+                    control={control}
+                    render={({field}) => 
+                      <Select {...field}>
+                        {
+                          categories ?
+                            categories.data.map(cate => {
+                              return (
+                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                              )
+                            })
+                            : <MenuItem>Null</MenuItem>
+                        }
+                      </Select>
+                    }
+                    >
+                    
+                  </Controller>
+                </FormControl>
               </Stack>
 
               <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
 
                 <FormControl fullWidth>
-                  <InputLabel>Departamento</InputLabel>
+                  <InputLabel id="demo-simple-select-label2">Departamento</InputLabel>
                   <Controller
                     helperText={errors.aredepto?.message}
                     error={Boolean(errors?.aredepto)}
                     name="aredepto"
                     control={control}
-                    render={ ({field}) =>
+                    render={({ field }) =>
                       <Select {...field}>
                         {
-                        categories ?
-                          categories.data.map(cate => {
-                            return (
-                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                            )
-                          })
-                          : <MenuItem value={1}>hola</MenuItem>
-                      }
+                          categories ?
+                            categories.data.map(cate => {
+                              return (
+                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                              )
+                            })
+                            : <MenuItem value={1}>hola</MenuItem>
+                        }
                       </Select>
-                  }>
+                    }>
                   </Controller>
                 </FormControl>
 
@@ -223,7 +244,7 @@ function Edit(props) {
                   <Controller
                     name="fecha"
                     control={control}
-                    render={({field}) => 
+                    render={({ field }) =>
                       <DesktopDatePicker
                         {...field}
                         helperText={errors.fecha?.message}
@@ -231,8 +252,8 @@ function Edit(props) {
                         label="Fecha Creación"
                         fullWidth
                         inputFormat="dd/MM/yyyy"
-                        renderInput={(params) => <TextField {...params}  helperText={errors.fecha?.message} />} /> } 
-                      >
+                        renderInput={(params) => <TextField {...params} helperText={errors.fecha?.message} />} />}
+                  >
                   </Controller>
                 </LocalizationProvider>
               </Stack>
@@ -248,7 +269,7 @@ function Edit(props) {
                   fullWidth
                   type="text"
                   {...register("notas")}
-                  />
+                />
               </Stack>
             </Stack>
           </TabPanel>

src/Components/Puestos/Card.jsx

@@ -10,7 +10,6 @@ import QA from '../../Images/puesto.jpg'
 
 export function PuestoCard(props) {
 
-  console.log('render')
     let { plaza } = props
     let { nombrepuesto, notas } = plaza
 

src/Pages/Puestos.jsx

@@ -31,7 +31,6 @@ import { useQuery } from 'react-query';
 
 export function Puestos() {
 
-  console.log('render puestos')
   const auth = useSelector((state) => state.token)
   const [page, setPage] = useState(1);