list asignacines in home

src/App.css

@@ -385,3 +385,8 @@
   justify-content: center;
   align-items: center;
 }
+
+table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}

src/Components/Home/Candidato.jsx

@@ -1,41 +1,81 @@
+import '../../App.css'
 import { Skeleton, Box } from '@mui/material';
 import React from 'react'
 const big_as = 70
 
-export function Candidato (props) {
-    let { password,puesto,DPI, aplicacion,pendientes } = props.user
-
-    return(
-        <div className="data_candidato">
-            <div className="row">
-                <div className="col20">
-                    <p>{ password }</p>
-                </div>
-                <div className="col20">
-                    <p>{ puesto }</p>
-                </div>
-                <div className="col20">
-                    <p>{ DPI }</p>
-                </div>
-                <div className="col20">
-                    <p>{ aplicacion }</p>
-                </div>
-                <div className="col20">
-                    <p>{ pendientes }</p>
-                </div>
-            </div>
+function Asignaciones(props) {
+  let { asign } = props;
+  let { cattest } = asign;
+  // console.log(cattest)
+  return (
+    <tr>
+      <td className="tg-0lax">{cattest.decription}</td>
+    </tr>
+  )
+}
+
+function TableUser(props) {
+  let { user } = props;
+  let { asignaciones, candi } = user
+  console.log(asignaciones)
+  return (
+    <tr>
+      <td className="tg-0lax">{candi.nombre + " " + candi.apellidos}</td>
+      <td className="tg-0lax">
+        <table className="tg">
+          <tbody>
+            {
+              asignaciones.map(a => <Asignaciones key={a.id} asign={a} />)
+            }
+          </tbody>
+        </table>
+
+      </td>
+    </tr>
+  )
+}
+
+export function Candidato(props) {
+  // console.log("USER: ", props.user)
+  let { password, candidatos } = props.user
+
+  return (
+    <div className="data_candidato">
+      <div className="row">
+        <div className="col20">
+          <p>{password}</p>
+        </div>
+        <div className="col20">
+
+          <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>
+
+
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
 export function Preview() {
-    return(
-        <Box sx={{ width: '100%' }}>
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
-            <Skeleton height={big_as} animation="wave" />
-        </Box>
-    )
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Skeleton height={big_as} animation="wave" />
+      <Skeleton height={big_as} animation="wave" />
+      <Skeleton height={big_as} animation="wave" />
+      <Skeleton height={big_as} animation="wave" />
+      <Skeleton height={big_as} animation="wave" />
+    </Box>
+  )
 }

src/Components/Home/Candidatos.js

@@ -1,112 +1,122 @@
 import React, { useState, useEffect } from 'react';
 import UpdateIcon from '@mui/icons-material/Update';
-
 import { Typography, Pagination, Stack, } from '@mui/material'
-
 import { Row, Col } from 'react-bootstrap';
-
 import { Candidato, Preview } from './Candidato'
-// const USER_LENGTH = 14
-const USER_LENGTH = 120
 
+function Divide(arregloOriginal) {
 
-function Divide(arregloOriginal){
+  const LONGITUD_PEDAZOS = 8;
+  let arregloDeArreglos = [];
+  for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
+    let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
+    arregloDeArreglos.push(pedazo);
+  }
+  return arregloDeArreglos
+}
 
-    const LONGITUD_PEDAZOS = 8;
-    let arregloDeArreglos = [];
-    for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
-        let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
-        arregloDeArreglos.push(pedazo);
-    }
-    return arregloDeArreglos
+function fromBase64(text) {
+  try {
+    return atob(text)
+  } catch (_e) {
+    return text
+  }
 }
 
-export default function Candidatos () {
-
-    const [page, setPage] = useState(1);
-    const [users, setUser] = useState([]);
-
-    const changePage = ( _ , value) => {
-        let page_numer = value;
-        Divide(users)
-        setPage(page_numer);
-    };
-
-    useEffect(() => {
-
-        setTimeout(() => {
-            let list =  [{
-                password : 'tester',
-                puesto : "Piloto Repartidor",
-                DPI : 0,
-                // aplicacion : "27/12/2018 12:02 PM",
-                aplicacion : new Date().toUTCString(),
-                pendientes : "No"
-            }]
-
-            let a = 1;
-            for( let _ of new Array(USER_LENGTH)  ){
-                if(_) break
-
-                let temp = {
-                    ...list[0],
-                    DPI : a * 1000,
-                    password : Math.random().toString(36).slice(5), 
-                    aplicacion : new Date(10,12,a).toUTCString(),
-                }
-
-                a=a+1;
-                list.push(temp)
-            }
-
-            let divided = Divide(list);
-
-            setUser(divided)
-
-        },3000)
-
-    }, [])
-
-
-
-    return (
-        <div className="body_historial">
-            <div className="header_historial">
-                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
-                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
-            </div>
-            <div className="content_historial">
-                <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>Puesto</p> </div>
-                        <div className="col20"><p>No. Identificación</p></div>
-                        <div className="col20"><p>Fecha de aplicación</p></div>
-                        <div className="col20"><p>Pruebas Pendientes</p></div>
-                    </Row>
-                </div>
-                {
-                    users.length 
-                    ? users[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>)) 
-                    : <Preview style={{ paddingTop:10}} lenght={10}/>
-                }
-                <Row style={{ padding : 5 }}>
-                    <Col>
-                        <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
-                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Página: {page}</Typography>
-                            <Pagination 
-                                siblingCount={1} 
-                                boundaryCount={1}
-                                shape='rounded' 
-                                count={users.length} 
-                                page={page} 
-                                onChange={changePage} 
-                            />
-                        </Stack>
-                    </Col>
-                </Row>
-            </div>
+export default function Candidatos(props) {
+
+  let { passwords } = props;
+  const [page, setPage] = useState(1);
+  const [users, setUser] = useState([]);
+
+
+  const changePage = (_, value) => {
+    let page_numer = value;
+    Divide(users)
+    setPage(page_numer);
+  };
+
+  useEffect(() => {
+
+    let list = passwords.map(pwd => {
+      let { candidatospwds } = pwd
+      console.log(candidatospwds)
+      // let candi_info = candidatospwds.map( ({candi}) => candi?.nombre +" "+ candi?.apellidos   )
+      return {
+        password: fromBase64(pwd.pwd),
+        candidatos: candidatospwds
+      }
+    })
+
+    /*
+    let list = [{
+      password: 'tester',
+      puesto: "Piloto Repartidor",
+      DPI: 0,
+      // aplicacion : "27/12/2018 12:02 PM",
+      aplicacion: new Date().toUTCString(),
+      pendientes: "No"
+    }]
+
+    let a = 1;
+    for (let _ of new Array(USER_LENGTH)) {
+      if (_) break
+
+      let temp = {
+        ...list[0],
+        DPI: a * 1000,
+        password: Math.random().toString(36).slice(5),
+        aplicacion: new Date(10, 12, a).toUTCString(),
+      }
+
+      a = a + 1;
+      list.push(temp)
+    }
+
+*/
+
+    let divided = Divide(list);
+
+    setUser(divided)
+
+
+  }, [passwords])
+
+  return (
+    <div className="body_historial">
+      <div className="header_historial">
+        <UpdateIcon style={{ color: "white", fontSize: 25, margin: 0, marginRight: 15, marginLeft: 15 }} />
+        <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
+      </div>
+      <div className="content_historial">
+        <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>
+          </Row>
         </div>
-    )
+        {
+          users.length
+            ? users[page - 1].map((user,i) => (<Candidato key={i} user={user} />))
+            : <Preview style={{ paddingTop: 10 }} lenght={10} />
+        }
+        <Row style={{ padding: 5 }}>
+          <Col>
+            <Stack style={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline' }} spacing={2}>
+              <Typography style={{ paddingTop: 15, paddingRight: 10 }}>Página: {page}</Typography>
+              <Pagination
+                siblingCount={1}
+                boundaryCount={1}
+                shape='rounded'
+                count={users.length}
+                page={page}
+                onChange={changePage}
+              />
+            </Stack>
+          </Col>
+        </Row>
+      </div>
+    </div>
+  )
 }

src/Pages/Home.jsx

@@ -6,11 +6,29 @@ import Actividades from '../Components/Home/Actividades'
 import Candidatos from '../Components/Home/Candidatos'
 import { Card } from '../Components/Card';
 import { useSelector } from 'react-redux';
+import { Service } from '../Utils/HTTP.js'
+import { useQuery } from 'react-query';
 
 export function Home() {
 
+  const auth = useSelector((state) => state.token)
   const profile = useSelector((state) => state.user.profile)
 
+  const getAllPwd = async () => {
+    let rest = new Service('/contrasenia/getallbyidUsr');
+    return await rest.getQuery(auth.token)
+  }
+
+  const { data, status } = useQuery('homepwd', getAllPwd);
+
+  let is_loading = status === "loading";
+  console.log({ is_loading })
+
+  //TODO:
+  //utilizar el servicio 
+  //http://psicoadmin.ditca.org:8081/plaza/getthis/212
+  //para renderizar informacion de cada pwd en la home
+
   return (
     <section >
       <div className="content-section">
@@ -24,7 +42,11 @@ export function Home() {
             <Row>
               <Col md="4">
                 <Card
-                  quantity={120} to='/dashboard/contrasenas' title='CONTRASEÑAS' icon={VerifiedUser} />
+                  quantity={data?.data?.length || 0} 
+                  to='/dashboard/contrasenas' 
+                  title='CONTRASEÑAS' 
+                  icon={VerifiedUser} 
+                />
               </Col>
               <Col md="4">
                 <Card
@@ -39,7 +61,9 @@ export function Home() {
           <div className="historial_candidatos">
             <Row>
               <Col md="8">
-                <Candidatos />
+                <Candidatos 
+                  passwords={data?.data || []}
+                />
               </Col>
               <Col md="4">
                 <Actividades />

src/Pages/Login.jsx

@@ -64,6 +64,7 @@ export function Login() {
           let { token, nombre, apelidos, empresa } = response;
           toast.success(`Bienvenido ${nombre} ${apelidos} !!`)
           token = token.replace("Bearer ", "")
+          console.log("TOKEN: ", token)
           let body_token = jwt_decode(token);
           let timestamp = body_token.exp * 1000;
           let restante = timestamp - Date.now();

src/Pages/Puestos.jsx

@@ -36,7 +36,6 @@ export function Puestos() {
 
   const auth = useSelector((state) => state.token)
   const [page, setPage] = useState(1);
-  const [temp, setTemp] = useState(null);
 
   const getAll = async () => {
     let rest = new Service("/plaza/getall")
@@ -131,7 +130,9 @@ export function Puestos() {
                             let isset = plaza.nombrepuesto.toUpperCase().includes(nombre.toUpperCase())
                             return isset
                           })
-                          console.log(temp)
+                          if(temp.lenght <= 0){
+                            setFilter(null)
+                          }
                           setFilter(temp)
                         } else {
                           setFilter(null)
@@ -234,7 +235,7 @@ export function Puestos() {
                       variant="standard"
                     />
 
-                    <Chip style={{ marginLeft: 10, margin: 5 }} label={"Total: " + (result ? result.data.length : 0)} />
+                    <Chip style={{ marginLeft: 10, margin: 5 }} label={"Total: " + ( filter?  filter.length :  ( result ? result.data.length : 0 ))} />
                   </div>
                 </Col>
               </Row>