resultados

src/Components/Navigation/MenuMovil.jsx

@@ -13,7 +13,7 @@ import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
 import { removeToken } from '../../Slices/tokenSlice';
 
-const WITH_OF_PANEL = 50;
+const WITH_OF_PANEL = 70;
 
 export function MenuMovil(props) {
   let { anchor, control } = props;

src/Components/Resultados/Config.jsx

@@ -1,4 +1,5 @@
 import { createTheme } from '@mui/material';
+import { DenseTable } from '../../../src/temp';
 
 export const TableStyle = () => createTheme({
   components: {
@@ -112,12 +113,6 @@ export const Encabezados = [
     name: 'users',
     numeric: false,
     disablePadding: true,
-    label: 'Usuarios',
-  },
-  {
-    name: 'asings',
-    numeric: false,
-    disablePadding: true,
     label: 'Asignaciones',
   },
 ]
@@ -161,10 +156,9 @@ export const TextLabels = {
 export const BuildColumns = (columns) => {
   return columns.map((column) => {
     return {
-      'id' : 0,
+      'id' : column.id,
       'pwd' : atob( column.pwd ),
-      'users' : "",
-      'asings' : "",
+      'users' : <DenseTable users={column.candidatospwds}/>,
     }
   })
 

src/Components/Resultados/TestDataTable.jsx

@@ -15,10 +15,8 @@ export const TestDataTable = () => {
     customToolbar: () => { },
     // textLabels: TextLabels,
     onRowClick: (test) => {
+      //TODO: render exam
       console.log(test)
-      // let [plaza, pwd] = password;
-      // setPassword({pwd,plz:plaza});
-      // setVisible(true);
     },
     elevation: 9
   };
@@ -29,8 +27,6 @@ export const TestDataTable = () => {
   }
 
   const { data, status } = useQuery('homepwd', getAllPwd);
-  console.log('DATA: ', data)
-
 
   return (
     <ThemeProvider theme={TableStyle}>

src/temp.js

@@ -1,85 +1,149 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import FormLabel from '@mui/material/FormLabel';
-import FormControl from '@mui/material/FormControl';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Checkbox from '@mui/material/Checkbox';
-
-export default function CheckboxesGroup() {
-  const [state, setState] = React.useState({
-    gilad: true,
-    jason: false,
-    antoine: false,
-  });
-
-  const handleChange = (event) => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked,
-    });
-  };
-
-  const { gilad, jason, antoine } = state;
-  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
+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';
+import { } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux';
+import { Service } from './Utils/HTTP';
 
+import {
+ IconButton, Tooltip,
+} from '@mui/material';
+
+import {
+  CheckBox as CheckBoxIcon,
+  AddTask as AddTaskIcon,
+  // NewReleases as NewReleasesIcon,
+  Error as ErrorIcon,
+  AssignmentTurnedIn as AssignmentTurnedInIcon
+} from '@mui/icons-material'
+
+
+
+function IconStatus(props) {
+
+  let navigate = useNavigate()
+  let auth = useSelector((state) => state.token)
+
+  const calificar = () => {
+    let rest = new Service(`/prueba/calificacion/cleaver/report/${props.pwd}`);
+
+    rest
+      .getQuery(auth.token)
+      .then(r => {
+        navigate('/dashboard/resultados/' + props.pwd)
+      })
+      .catch(e => {
+        // navigate('/dashboard/resultados/' + props.pwd)
+      })
+  }
+
+
+  return (
+    <Tooltip title={props.message}>
+      <IconButton
+        onClick={() => {
+          if (parseInt(props.estado) === 100) {
+            calificar()
+            // navigate('/dashboard/resultados/' + props.pwd)
+          }
+        }}
+        style={{ color: props.color }}
+        components="label">
+        {<props.icon />}
+      </IconButton>
+    </Tooltip>
+
+  )
+}
+
+
+
+function getOperation(estado, SuperPWD) {
+  // Patrik: 100 -> Significa que el examen esta completo
+  // Patrik: 99 -> Que el candidato lo esta haciendo (como "doing test" del otro servicio)
+  // Patrik: 97 ->  Que hay un error y que hay mas respuestas de las que deberian
+  // Patrik: 1 -> Solo esta asignado.
+  switch (estado) {
+    case 1: // solo asignado
+      return <IconStatus color="#0bd641" icon={AddTaskIcon} message="Candidato Asignado" />
+    case 97: //error en las respuestas
+      return <IconStatus color="var(--main)"  icon={ErrorIcon} message="Hay error en las respuestas" />
+    case 99: // el candidato se encuentra realizndolo
+      return <IconStatus color="#f5f511" icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
+    case 100: // finalizado
+      return <IconStatus color="#0bd641" estado={100} icon={CheckBoxIcon} message="Calificar el examen" pwd={SuperPWD} />
+    default: return null
+  }
+}
+
+
+function Asignaciones(props) {
+
+  let { estado, cattest, id: SuperPWD } = props.asign;
+
+  return (
+    <tr>
+      <td className="asign_status">
+        {cattest.decription}
+        {/*
+          test_result.length > 0 ?
+            (
+              <Tooltip title="Mostrar resultados">
+                <IconButton
+                  onClick={() => navigate('/dashboard/resultados/' + SuperPWD)}
+                  style={{ color: '#0bd641' }}
+                  aria-label="puesto_status"
+                  components="label">
+                  <CheckBoxIcon />
+                </IconButton>
+              </Tooltip>
+            ) : null
+      */}
+        {
+          getOperation(estado, SuperPWD)
+        }
+      </td>
+    </tr>
+  )
+}
+
+
+
+
+export function DenseTable(props) {
+  let { users} = props
+  console.log("users", users)
   return (
-    <Box sx={{ display: 'flex' }}>
-      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
-        <FormLabel component="legend">Assign responsibility</FormLabel>
-        <FormGroup>
-          <FormControlLabel
-            control={
-              <Checkbox checked={gilad} onChange={handleChange} name="gilad" />
-            }
-            label="Gilad Gray"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox checked={jason} onChange={handleChange} name="jason" />
-            }
-            label="Jason Killian"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange} name="antoine" />
-            }
-            label="Antoine Llorca"
-          />
-        </FormGroup>
-        <FormHelperText>Be careful</FormHelperText>
-      </FormControl>
-      <FormControl
-        required
-        error={error}
-        component="fieldset"
-        sx={{ m: 3 }}
-        variant="standard"
-      >
-        <FormLabel component="legend">Pick two</FormLabel>
-        <FormGroup>
-          <FormControlLabel
-            control={
-              <Checkbox checked={gilad} onChange={handleChange} name="gilad" />
-            }
-            label="Gilad Gray"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox checked={jason} onChange={handleChange} name="jason" />
-            }
-            label="Jason Killian"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange} name="antoine" />
-            }
-            label="Antoine Llorca"
-          />
-        </FormGroup>
-        <FormHelperText>You can display an error</FormHelperText>
-      </FormControl>
-    </Box>
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left">Nombre</TableCell>
+            <TableCell align="left">Asignaciones</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map((row) => (
+            <TableRow
+              key={row.name }
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell align="left" component="th" scope="row">
+                {row.candi.nombre  + " " + row.candi.apellidos}
+              </TableCell>
+              <TableCell align="left">
+                {row.asignaciones.map(a => <Asignaciones key={a.id} asign={a}/>)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }