render pwd info mok

src/App.css

@@ -385,8 +385,13 @@
   justify-content: center;
   align-items: center;
 }
+.table_list_test_user{
+  border :none !important;
+}
 
-table, th, td {
-  border: 1px solid black;
-  border-collapse: collapse;
+.home_letter{
+  font-family: 'gudea' !important;
+  color: #878787 !important;
+  line-height: 1 !important;
+  font-size: 14px !important;
 }

src/Components/Home/Candidato.jsx

@@ -1,15 +1,25 @@
 import '../../App.css'
-import { Skeleton, Box } from '@mui/material';
+import {
+  Skeleton, Box, IconButton, TableCell, TableContainer,
+  Table, TableRow, Paper, TableBody
+} from '@mui/material';
 import React from 'react'
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+
+
 const big_as = 70
 
 function Asignaciones(props) {
   let { asign } = props;
   let { cattest } = asign;
-  // console.log(cattest)
   return (
     <tr>
-      <td className="tg-0lax">{cattest.decription}</td>
+      <td>
+        {cattest.decription}
+        <IconButton color="primary" aria-label="puesto_status" components="label">
+          <CheckBoxIcon />
+        </IconButton>
+      </td>
     </tr>
   )
 }
@@ -17,21 +27,20 @@ function Asignaciones(props) {
 function TableUser(props) {
   let { user } = props;
   let { asignaciones, candi } = user
-  console.log(asignaciones)
+  // console.log(asignaciones)
   return (
-    <tr>
-      <td className="tg-0lax">{candi.nombre + " " + candi.apellidos}</td>
-      <td className="tg-0lax">
-        <table className="tg">
-          <tbody>
+    <TableRow style={{}}>
+      <TableCell className="table_list_test_user home_letter">{candi.nombre + " " + candi.apellidos}</TableCell>
+      <TableCell className="table_list_test_user home_letter">
+        <table>
+          <tbody >
             {
               asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
             }
           </tbody>
         </table>
-
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   )
 }
 
@@ -42,25 +51,29 @@ export function Candidato(props) {
   return (
     <div className="data_candidato">
       <div className="row">
-        <div className="col20">
-          <p>{password}</p>
+        <div style={{padding:15, borderRight: '1px solid #f1f1f1' }} className="col-3" >
+          <p><b>{password?.toUpperCase()}</b></p>
         </div>
-        <div className="col20">
+        <div className="col-9">
 
-          <table className="tg">
-            <thead>
-              <tr>
-                <th className="tg-0lax">Nombre</th>
-                <th className="tg-0lax">Asignaciones</th>
-              </tr>
-            </thead>
-            <tbody>
-              {
-                candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
-              }
-            </tbody>
-          </table>
+          <TableContainer style={{ boxShadow: "none" }} component={Paper}>
+            <Table size="small" aria-label="a dense table">
+              {/*
+              <TableHead>
+                <TableRow>
+                  <TableCell className="tg-0lax">Nombre</TableCell>
+                  <TableCell className="tg-0lax">Asignaciones</TableCell>
+                </TableRow>
+              </TableHead>
+                  */}
+              <TableBody>
+                {
+                  candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
+                }
+              </TableBody>
+            </Table>
 
+          </TableContainer>
 
         </div>
       </div>

src/Components/Home/Candidatos.js

@@ -6,7 +6,7 @@ import { Candidato, Preview } from './Candidato'
 
 function Divide(arregloOriginal) {
 
-  const LONGITUD_PEDAZOS = 8;
+  const LONGITUD_PEDAZOS = 4;
   let arregloDeArreglos = [];
   for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
     let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
@@ -40,7 +40,7 @@ export default function Candidatos(props) {
 
     let list = passwords.map(pwd => {
       let { candidatospwds } = pwd
-      console.log(candidatospwds)
+      // console.log(candidatospwds)
       // let candi_info = candidatospwds.map( ({candi}) => candi?.nombre +" "+ candi?.apellidos   )
       return {
         password: fromBase64(pwd.pwd),
@@ -92,8 +92,10 @@ export default function Candidatos(props) {
         <p>Últimos candidatos que han ingresado al sistema:</p>
         <div className="cabeceras">
           <Row>
-            <div className="col20"><p>Contraseña</p></div>
-            <div className="col20"><p>Detalle</p> </div>
+            <div className="col20 "><p>Contraseña</p></div>
+            <div className="col20 "><p></p> </div>
+            <div className="col20 "><p>Usuarios</p> </div>
+            <div className="col20 "><p>Asignaciones</p> </div>
           </Row>
         </div>
         {

src/Css/all.css

@@ -1807,8 +1807,7 @@ li.cabecera_li {
     color: #25344f;
 }
 .data_candidato {
-    padding: 10px;
-    border-bottom: 1px solid #f1f1f1;
+  border-bottom: 1px solid #f1f1f1;
 }
 .data_candidato a:hover {
     color: #fd4b4b;

src/Pages/Home.jsx

@@ -22,7 +22,7 @@ export function Home() {
   const { data, status } = useQuery('homepwd', getAllPwd);
 
   let is_loading = status === "loading";
-  console.log({ is_loading })
+  console.log({is_loading, data})
 
   //TODO:
   //utilizar el servicio 

src/temp.js

@@ -1,324 +1,54 @@
-import React, { memo, useCallback, useMemo, useEffect } from 'react';
-import * as Yup from 'yup';
-// import { useFormik, Form, FormikProvider } from 'formik';
-import { Modal } from 'react-bootstrap'
-import toast, { Toaster } from 'react-hot-toast';
-import { useForm, Controller } from "react-hook-form";
-
-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,
-    Tabs,Tab,Box, Divider,FormGroup,FormControlLabel,Checkbox
-} from '@mui/material';
-
-import { Service } from '../../Utils/HTTP';
-import { useSelector } from 'react-redux'
-import { useQuery, useMutation, useQueryClient } from 'react-query'
-
-const NewPlazaSchema = Yup.object().shape({
-  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),
-  puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
-  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),
-  tests: Yup.array()
-})
-
-
-
-function Edit(props) {
-
-  const { getValues ,control,register, handleSubmit, watch, formState: { errors } } = useForm({
-    defaultValues: {
-      departamento: 1,
-    }
-  });
-
-  console.log(errors)
-
-  const onSubmit = data => console.log(data);
-  console.log(watch("departamento")); // watch input value by passing the name of it
-  //
-  const now = useMemo(() => new Date(), [])
-  const auth = useSelector((state) => state.token)
-  const queryClient = useQueryClient()
-  let { visible, toggle } = props
-
-  // const [departamento, setDepartamento] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-
-  // const changeDepartamento = useCallback((event) => {
-  //   setDepartamento(event.target.value);
-  // }, []);
-
-  const [date, setDate] = React.useState(now);
-  const [tab, setTab] = React.useState(0);
-  const [checklist, setChecklist] = React.useState([]);
-
-  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);
-    }
-    setChecklist(temp.map( test => test.id) )
-    // setValues({...values, tests: temp})
-  };
-
-  const getCategories = async () => {
-    let rest = new Service("/categoria/getAll")
-    return await rest.getQuery(auth.token)
-  }
-
-  const updatePuesto = async (fields) => {
-    let rest = new Service('/plaza/edit');
-    return rest.putQuery(fields, auth.token)
-  }
-
-  const getTest = async () => {
-    let rest = new Service("/tests/getAll")
-    return await rest.getQuery(auth.token)
-  }
-
-  const puestoMutation = useMutation(updatePuesto)
-
-  const close = () => toggle("EDIT", {id : null});
-
-  const { data: categories } = useQuery('categories', getCategories);
-  const { data: testsCatalog } = useQuery('tests', getTest);
-  /*
-  const formik = useFormik({
-    initialValues: {
-      id: 1,
-      nombrepuesto: "",
-      puestosuperior: 1,
-      aredepto: 1,
-      fecha: now,
-      notas: "",
-      tests : []
-    },
-    onSubmit: (fields, { resetForm }) => {
-      setOpen(true);
-      fields['fecha'] = new Date(fields.fecha).toISOString();
-
-      puestoMutation.mutate(fields, {
-        onSuccess: () => {
-          close();
-          setOpen(false)
-          toast.success("Puesto Actualizado!!")
-          queryClient.invalidateQueries('puestos')
-        },
-        onError:() => {
-          close();
-          setOpen(false)
-          toast.error("Lo sentimos ocurrió error inténtalo más tarde")
-        }
-      })
-
-      resetForm();
-    },
-    validationSchema: NewPlazaSchema,
-  });
-*/
-
-  // const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
-
-  useEffect(() => {
-    console.info('use effect edit', props)
-  },[props])
-
-  // useEffect(() => {
-  //   if (puesto) {
-  //     setValues({
-  //       id: puesto.id,
-  //       nombrepuesto: puesto.nombrepuesto,
-  //       puestosuperior: puesto.puestosuperior,
-  //       aredepto: puesto.areadeptoplz_id,
-  //       fecha: new Date(puesto.create_day),
-  //       notas: puesto.notas,
-  //       tests : puesto.tests
-  //     })
-  //     setChecklist(puesto.tests.map(( {id} ) => id))
-  //   }
-  // }, [puesto, now, setValues])
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
 
-  const changeTab = (_event, newValue) => {
-    setTab(newValue);
-  };
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
 
+export default function DenseTable() {
   return (
-
-    <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={close}>
-      <Modal.Header>
-        <button onClick={close} type="button" className="close" data-dismiss="modal">&times;</button>
-        <h4 className="modal-title" style={{ color: '#252525' }}>Editar puesto</h4>
-      </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>
-
-          <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/>
-                  <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} 
-                          />
-                      )): null
-                  }
-                  </FormGroup>
-                </Box>
-              </Stack>
-            </TabPanel>
-
-
-            <TabPanel value={tab} index={0} >
-              <Stack spacing={3}>
-
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-
-                  <TextField
-                    label="Nombre"
-                    fullWidth
-                    {...register("nombre")}
-                    // {...getFieldProps('nombrepuesto')}
-                    // error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                    // helperText={touched.nombrepuesto && errors.nombrepuesto}
-                    />
-
-                  <TextField
-                    label="Puesto Superior"
-                    fullWidth
-                    {...register("puesto_superior")}
-                    //{...getFieldProps('puestosuperior')}
-                    //error={Boolean(touched.puestosuperior && errors.puestosuperior)}
-                    //helperText={touched.puestosuperior && errors.puestosuperior}
-                    />
-
-                </Stack>
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
-                  <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">Departamento</InputLabel>
-                    <Select
-                      {...register("departamento")}
-                      labelId="departamento"
-                      id="departamento"
-                      label="Departamento"
-                      name={"departamento"}
-                      constrol={control}
-                      value={1}
-                      //value={departamento}
-                      //{...getFieldProps('puestosuperior')}
-                      // onChange={changeDepartamento}
-                      // {...getFieldProps('aredepto')}
-                      // error={Boolean(touched.aredepto && errors.aredepto)} 
-                      >
-                      {
-                      categories ?
-                        categories.data.map(cate => {
-                          return (
-                            <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                          )
-                        })
-                        : <MenuItem value={1}>hola</MenuItem>
-                    }
-                    </Select>
-                  </FormControl>
-
-
-                  <LocalizationProvider
-                    dateAdapter={DateFnsUtils}>
-                    <DesktopDatePicker
-                      label="Fecha Creación"
-                      fullWidth
-                      inputFormat="dd/MM/yyyy"
-                      // {...getFieldProps('fecha')}
-                      {...register("fecha")}
-                      value={date}
-                      onChange={setDate}
-                      renderInput={(params) =>
-                        <TextField
-                          disabled={true}
-                          label="Fecha Creación"
-                          fullWidth
-                          {...params}
-                          />}
-                      />
-                  </LocalizationProvider>
-
-                </Stack>
-
-                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-                  <TextField
-                    id="filled-multiline-static"
-                    multiline
-                    rows={4}
-                    variant="filled"
-                    label="Notas"
-                    fullWidth
-                    type="text"
-                    {...register("notas")}
-                    // {...getFieldProps('notas')}
-                    // error={Boolean(touched.notas && errors.notas)}
-                    // helperText={touched.notas && errors.notas}
-                    />
-                </Stack>
-              </Stack>
-            </TabPanel>
-
-
-            <Modal.Footer>
-              <Button
-                type="submit"
-                className="registerBtn"
-                variant="contained"
-                sx={{ mt: 1, mr: 1 }} >
-                {'Actualizar'}
-              </Button>
-            </Modal.Footer>
-
-          </form>
-
-      </Modal.Body>
-      <Backdrop
-        sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={open}
-        onClick={() => console.log('backdrop')} >
-        <CircularProgress color="inherit" />
-      </Backdrop>
-      <Toaster position="top-right" />
-
-    </Modal>
-  )
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat&nbsp;(g)</TableCell>
+            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
 }
-
-
-export default memo(Edit);