add tests in password

src/Components/Modal/AgregarManual.js

@@ -34,7 +34,7 @@ function Manual(props) {
     }
 
     const { data } = useQuery('categories', getCategories);
-    const { data: tests } = useQuery('tests', getTest);
+    const { data: testsCatalog } = useQuery('tests', getTest);
     const queryClient = useQueryClient();
 
     const NewPlazaSchema = Yup.object().shape({
@@ -43,7 +43,7 @@ function Manual(props) {
         aredepto: Yup.number().required('Escoge alguna área'),
         fecha: Yup.date("Ingresa una fecha válida"),
         notas: Yup.string("Ingresa una nota válida").min(5, "Ingresa una nota válida").max(150),
-        pruebas: Yup.array()
+        tests: Yup.array()
     })
 
     const [departamento, setDepartamento] = React.useState('');
@@ -74,7 +74,7 @@ function Manual(props) {
             aredepto: 1,
             fecha: date,
             notas: "",
-            pruebas:[]
+            tests:[]
         },
         onSubmit: (fields, { resetForm }) => {
 
@@ -108,15 +108,15 @@ function Manual(props) {
     const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
     const addPrueba = (check,id) => {
-        let { pruebas } = values
+        let { tests } = values
         let temp ;
         if(check){
-            temp = [...pruebas, {id}]
+            temp = [...tests, {id}]
         }else{
-            temp = pruebas.filter( test => test.id !== id);
+            temp = tests.filter( test => test.id !== id);
         }
         setChecklist(  temp.map( test => test.id) )
-        setValues({...values, pruebas: temp})
+        setValues({...values, tests: temp})
     };
 
     return (
@@ -145,8 +145,8 @@ function Manual(props) {
                                     <Divider/>
                                     <FormGroup>
                                         {
-                                            tests ?
-                                            tests.data.map( test => (
+                                            testsCatalog ?
+                                            testsCatalog.data.map( test => (
                                                 <FormControlLabel 
                                                     key={test.id}
                                                     control={

src/Components/Modal/EditPlaza.js

@@ -6,10 +6,12 @@ import toast, { Toaster } from 'react-hot-toast';
 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
+import { TabPanel } from './TabPanel'
 
 import {
     Button, Stack, TextField, MenuItem, FormControl, InputLabel, Select,
-    Backdrop, CircularProgress
+    Backdrop, CircularProgress,
+    Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
 } from '@mui/material';
 
 import { Service } from '../../Utils/HTTP';
@@ -26,6 +28,7 @@ const NewPlazaSchema = Yup.object().shape({
     aredepto: Yup.number().required('Escoge alguna área'),
     fecha: Yup.date("Ingresa una fecha válida"),
     notas: Yup.string("Ingresa una nota válida").min(5).max(150),
+    pruebas: Yup.array()
 })
 
 
@@ -46,6 +49,21 @@ function Edit(props) {
     }, []);
 
     const [date, setDate] = React.useState(now);
+    const [tab, setTab] = React.useState(0);
+    const [checklist, setChecklist] = React.useState([]);
+
+    const addPrueba = (check,id) => {
+        let { pruebas } = values
+        console.log(pruebas)
+        let temp ;
+        if(check){
+            temp = [...pruebas, {id}]
+        }else{
+            temp = pruebas.filter( test => test.id !== id);
+        }
+        setChecklist(temp.map( test => test.id) )
+        setValues({...values, pruebas: temp})
+    };
 
     const getCategories = async () => {
         let rest = new Service("/categoria/getAll")
@@ -56,13 +74,18 @@ function Edit(props) {
         let rest = new Service('/plaza/edit');
         return rest.putQuery(fields, token)
     }
+    
+    const getTest = async () => {
+        let rest = new Service("/tests/getAll")
+        return await rest.getQuery(token)
+    }
 
     const puestoMutation = useMutation(updatePuesto)
 
     const close = () => toggle("EDIT");
 
     const { data } = useQuery('categories', getCategories);
-
+    const { data: tests } = useQuery('tests', getTest);
 
     const formik = useFormik({
         initialValues: {
@@ -71,7 +94,8 @@ function Edit(props) {
             puestosuperior: 1,
             aredepto: 1,
             fecha: now,
-            notas: ""
+            notas: "",
+            pruebas : []
         },
         onSubmit: (fields, { resetForm }) => {
             setOpen(true);
@@ -96,7 +120,7 @@ function Edit(props) {
         validationSchema: NewPlazaSchema,
     });
 
-    const { errors, touched, handleSubmit, getFieldProps, setValues } = formik;
+    const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
 
     useEffect(() => {
         console.log("PUESTO :: ", puesto)
@@ -107,11 +131,17 @@ function Edit(props) {
                 puestosuperior: puesto.puestosuperior,
                 aredepto: puesto.areadeptoplz_id,
                 fecha: new Date(puesto.create_day),
-                notas: puesto.notas
+                notas: puesto.notas,
+                pruebas : puesto.tests
             })
+            setChecklist(puesto.tests.map(( {id} ) => id))
         }
     }, [puesto, now, setValues])
 
+    const changeTab = (_event, newValue) => {
+        setTab(newValue);
+    };
+
     return (
 
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
@@ -121,8 +151,44 @@ function Edit(props) {
             </Modal.Header>
             <Modal.Body className="modal-body">
 
+                <Tabs value={tab} onChange={changeTab} aria-label="basic tabs example">
+                    <Tab label="Información" />
+                    <Tab label="Pruebas" />
+                </Tabs>
+
                 <FormikProvider style={{ padding: 25 }} value={formik}>
                     <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+
+
+                        <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/>
+                                    <FormGroup>
+                                        {
+                                            tests ?
+                                            tests.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
+                                        }
+                                    </FormGroup>
+                                </Box>
+                            </Stack>
+                        </TabPanel>
+
+
+                        <TabPanel value={tab} index={0} >
                         <Stack spacing={3}>
 
                             <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
@@ -204,6 +270,7 @@ function Edit(props) {
                                 />
                             </Stack>
                         </Stack>
+                        </TabPanel>
 
 
                         <Modal.Footer>