update test on modal

src/Components/Modal/EditPlaza.js

@@ -28,7 +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()
+    tests: Yup.array()
 })
 
 
@@ -53,16 +53,15 @@ function Edit(props) {
     const [checklist, setChecklist] = React.useState([]);
 
     const addPrueba = (check,id) => {
-        let { pruebas } = values
-        console.log(pruebas)
+        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})
     };
 
     const getCategories = async () => {
@@ -85,7 +84,7 @@ function Edit(props) {
     const close = () => toggle("EDIT");
 
     const { data } = useQuery('categories', getCategories);
-    const { data: tests } = useQuery('tests', getTest);
+    const { data: testsCatalog } = useQuery('tests', getTest);
 
     const formik = useFormik({
         initialValues: {
@@ -95,7 +94,7 @@ function Edit(props) {
             aredepto: 1,
             fecha: now,
             notas: "",
-            pruebas : []
+            tests : []
         },
         onSubmit: (fields, { resetForm }) => {
             setOpen(true);
@@ -123,7 +122,6 @@ function Edit(props) {
     const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
 
     useEffect(() => {
-        console.log("PUESTO :: ", puesto)
         if (puesto) {
             setValues({
                 id: puesto.id,
@@ -132,7 +130,7 @@ function Edit(props) {
                 aredepto: puesto.areadeptoplz_id,
                 fecha: new Date(puesto.create_day),
                 notas: puesto.notas,
-                pruebas : puesto.tests
+                tests : puesto.tests
             })
             setChecklist(puesto.tests.map(( {id} ) => id))
         }
@@ -168,8 +166,8 @@ function Edit(props) {
                                     <Divider/>
                                     <FormGroup>
                                         {
-                                            tests ?
-                                            tests.data.map( test => (
+                                            testsCatalog ?
+                                            testsCatalog.data.map( test => (
                                                 <FormControlLabel 
                                                     key={test.id}
                                                     control={

src/Components/Modal/EliminarPlaza.js

@@ -16,14 +16,14 @@ export function Eliminar(props) {
                 <h1 className="alert">¿Estás seguro que deseas eliminar esta plaza?</h1>
                 <p className="text-alert">Una vez eliminado no será posible recuperarla</p>
                 <Row>
-                    <Col md="6">
+                    <Col md="6" sm="6" xs="6">
                         <div className="cancel_producto_confirm">
                             <div className="btn_cancelar">
                                 <a href="/" type="submit">Cancelar</a>
                             </div>
                         </div>
                     </Col>
-                    <Col md="6">
+                    <Col md="6" sm="6" xs="6">
                         <div className="delet_producto_confirm">
                             <div className="btn_delete_producto_confirm">
                                 <a  href="/" onClick={() => console.log('ID >> ',puesto.id)} type="submit">Eliminar</a>

src/Components/Modal/MostrarPlaza.js

@@ -2,12 +2,15 @@ import React, { memo } from 'react';
 import { Modal, Col, Row } from 'react-bootstrap'
 import QA from '../../Images/puesto.jpg'
 
+import { Divider, Chip } from '@mui/material'
+
 function Mostrar(props) {
 
     let { visible, puesto } = props
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
     const close = () => props.toggle("VER");
 
+
     return (
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
             <Modal.Header>
@@ -31,6 +34,15 @@ function Mostrar(props) {
                                 type="text"
                                 placeholder="...."
                                 name="sku" readOnly />
+                            <div>
+                                {
+                                    puesto
+                                    ? puesto.tests.map( ( {decription, id} ) => 
+                                        (<Chip color="primary" key={id} label={decription}/>)
+                                    ) : null
+                                }
+                            </div>
+                            <Divider/>
                         </Col>
                     </Row>
                 </div>