modal report fix

src/Components/Resultados/Config.jsx

@@ -153,12 +153,13 @@ export const TextLabels = {
   },
 }
 
-export const BuildColumns = (columns) => {
+export const BuildColumns = (columns, setId) => {
+  console.log("BUILD:", setId)
   return columns.map((column) => {
     return {
       'id' : column.id,
       'pwd' : atob( column.pwd ),
-      'users' : <DenseTable users={column.candidatospwds}/>,
+      'users' : <DenseTable users={column.candidatospwds} setId={(id) => setId(id)} />,
     }
   })
 

src/Components/Resultados/TestDataTable.jsx

@@ -6,8 +6,9 @@ import { useQuery } from 'react-query';
 import { Service } from '../../Utils/HTTP'
 import MUIDataTable from "mui-datatables";
 
-export const TestDataTable = () => {
+export const TestDataTable = (props) => {
   
+  let { setId } = props; 
   const auth = useSelector((state) => state.token)
 
   const options = {
@@ -16,7 +17,8 @@ export const TestDataTable = () => {
     // textLabels: TextLabels,
     onRowClick: (test) => {
       //TODO: render exam
-      console.log(test)
+      // console.log(test)
+      setId(test[0])
     },
     elevation: 9,
     download : false,
@@ -35,7 +37,7 @@ export const TestDataTable = () => {
       <MUIDataTable
         sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
         title={"Expedientes"}
-        data={BuildColumns( status === 'success' ? data.data : [])}
+        data={BuildColumns( status === 'success' ? data.data : [], setId )}
         columns={Encabezados}
         options={options}
       />

src/Pages/Resultados.jsx

@@ -12,9 +12,9 @@ import '../pdf.css'
 // import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 //
 //
-import { 
-  Button, Box, Paper,LinearProgress,
-  Typography
+import {
+  Button, Box, Paper, LinearProgress,
+  Typography, Dialog, DialogContent, DialogTitle
 } from '@mui/material'
 
 function LinearProgressWithLabel(props) {
@@ -61,42 +61,42 @@ const MyDocument = (props) => {
   return (
     <div>
 
-        {
-          progress < 100 ?
-          <LinearProgressWithLabel value={progress}/>
-            : null
-        }
+      {
+        progress < 100 ?
+          <LinearProgressWithLabel value={progress} />
+          : null
+      }
 
       <div className="pdf_controls">
 
 
-      <div className="btn_pdfcontrol">
-        <Button 
+        <div className="btn_pdfcontrol">
+          <Button
             className="btnmain"
-            style={{ margin: 2 }} 
-            variant="contained" 
+            style={{ margin: 2 }}
+            variant="contained"
             onClick={() => pageNumber > 1 ? setPageNumber(pageNumber - 1) : null} >
-          Anterior
-        </Button>
-        <Button 
+            Anterior
+          </Button>
+          <Button
             className="btnmain"
-            style={{ margin: 2 }} 
-            variant="contained" 
-            onClick={() => pageNumber + 1 <= numPages   ? setPageNumber(pageNumber + 1) : null} >
-          Siguiente
-        </Button>
-      </div>
+            style={{ margin: 2 }}
+            variant="contained"
+            onClick={() => pageNumber + 1 <= numPages ? setPageNumber(pageNumber + 1) : null} >
+            Siguiente
+          </Button>
+        </div>
 
         <div>
-          <b style={{marginRight : 15}}>
+          <b style={{ marginRight: 15 }}>
             Página {pageNumber} de {numPages}
           </b>
 
-          <Button 
+          <Button
             className="btnmain"
-            variant="contained" 
+            variant="contained"
             onClick={Download} >
-            <DownloadIcon/>
+            <DownloadIcon />
           </Button>
         </div>
 
@@ -104,13 +104,13 @@ const MyDocument = (props) => {
 
       <div className="Example__container">
         <div className="Example__container__document">
-          { pdf ?
-            (<Document 
-              renderMode="canvas" 
-              file={pdf?.data} 
-              onLoadSuccess={onDocumentLoadSuccess} 
+          {pdf ?
+            (<Document
+              renderMode="canvas"
+              file={pdf?.data}
+              onLoadSuccess={onDocumentLoadSuccess}
               loading={Loading}
-              onLoadProgress={({loaded, total}) => {
+              onLoadProgress={({ loaded, total }) => {
                 setProgress((loaded / total) * 100)
               }}
             >
@@ -129,14 +129,16 @@ export function Resultados() {
   let { id } = useParams();
   let auth = useSelector((state) => state.token)
   let [pdf, setPdf] = useState(null);
+  let [idResult, setIDResult] = useState(id);
 
   useEffect(() => {
+    console.log("ID:", idResult)
 
-    if(!id) {
+    if (!idResult) {
       console.log('no hay id')
       return
     }
-    let url = `/report/cleaverResult/${id}?output=pdf`
+    let url = `/report/cleaverResult/${idResult}?output=pdf`
     let rest = new Service(url);
 
     pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
@@ -146,24 +148,33 @@ export function Resultados() {
       .then(blob => setPdf(blob))
       .catch(error => console.log({ error }))
 
-  }, [auth, id])
+  }, [auth, idResult])
 
   return (
     <div className="content-section">
       <div className="main">
         <Box sx={{ width: '100%' }}>
-          <Paper 
-            elevation={2} 
+          <Paper
+            elevation={2}
             sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
-            <h1>Reporte de Resultados</h1><hr/>
-            <TestDataTable/>
-            {
-              pdf ? 
-                ( <MyDocument token={auth.token} id={id} pdf={pdf} />) : null
-            }
+            <h1>Reporte de Resultados</h1><hr />
+            <TestDataTable setId={setIDResult} />
           </Paper>
         </Box>
       </div>
+
+      <Dialog open={pdf !== null} fullWidth maxWidth="lg" onHide={() => setPdf(null)}>
+        <DialogTitle>Reporte de Resultados
+          <button type="button" className="close" onClick={() => setPdf(null)}>&times;</button>
+        </DialogTitle>
+        <DialogContent>
+          {
+            pdf ?
+              (<MyDocument token={auth.token} id={id} pdf={pdf} />) : null
+          }
+        </DialogContent>
+      </Dialog>
+
     </div>
   )
 }

src/temp.js

@@ -7,7 +7,7 @@ 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 { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux';
 import { Service } from './Utils/HTTP';
 
@@ -27,7 +27,9 @@ import {
 
 function IconStatus(props) {
 
-  let navigate = useNavigate()
+  let { pwd, setId } = props
+  // let navigate = useNavigate()
+  // console.log('MPROP',props)
   let auth = useSelector((state) => state.token)
 
   const calificar = () => {
@@ -36,7 +38,10 @@ function IconStatus(props) {
     rest
       .getQuery(auth.token)
       .then(r => {
-        navigate('/dashboard/resultados/' + props.pwd)
+        console.log("SENDING ID:", pwd)
+        setId(pwd)()
+        // console.log('RESULTADO:',r)
+        // navigate('/dashboard/resultados/' + props.pwd)
       })
       .catch(e => {
         // navigate('/dashboard/resultados/' + props.pwd)
@@ -64,7 +69,7 @@ function IconStatus(props) {
 
 
 
-function getOperation(estado, SuperPWD) {
+function getOperation(estado, SuperPWD,setId) {
   // 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
@@ -77,7 +82,7 @@ function getOperation(estado, SuperPWD) {
     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} />
+      return <IconStatus setId={setId} color="#0bd641" estado={100} icon={CheckBoxIcon} message="Calificar el examen" pwd={SuperPWD} />
     default: return null
   }
 }
@@ -85,7 +90,8 @@ function getOperation(estado, SuperPWD) {
 
 function Asignaciones(props) {
 
-  let { estado, cattest, id: SuperPWD } = props.asign;
+  let { asign, setId } = props;
+  let { estado, cattest, id: SuperPWD } = asign;
 
   return (
     <tr>
@@ -106,7 +112,7 @@ function Asignaciones(props) {
             ) : null
       */}
         {
-          getOperation(estado, SuperPWD)
+          getOperation(estado, SuperPWD, setId)
         }
       </td>
     </tr>
@@ -117,8 +123,8 @@ function Asignaciones(props) {
 
 
 export function DenseTable(props) {
-  let { users} = props
-  console.log("users", users)
+  let { users,setId } = props
+  // console.log("users", users)
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
@@ -138,7 +144,7 @@ export function DenseTable(props) {
                 {row.candi.nombre  + " " + row.candi.apellidos}
               </TableCell>
               <TableCell align="left">
-                {row.asignaciones.map(a => <Asignaciones key={a.id} asign={a}/>)}
+                {row.asignaciones.map(a => <Asignaciones setId={setId} key={a.id} asign={a}/>)}
               </TableCell>
             </TableRow>
           ))}