pdf mok fix

src/Components/Generics/loading.jsx

@@ -13,19 +13,17 @@ export function Loading() {
   return (
     <div className="content-section">
       <Paper>
-      <div className="main">
-        <Box className="loadingGeneric">
-
-              <div className="loading_or_content">
-                <div className="snippet" data-title=".dot-pulse">
-                  <div className="stage">
-                    <div className={types[0]}></div>
-                  </div>
+        <div className="main">
+          <Box className="loadingGeneric">
+            <div className="loading_or_content">
+              <div className="snippet" data-title=".dot-pulse">
+                <div className="stage">
+                  <div className={types[0]}></div>
                 </div>
               </div>
-
-        </Box>
-      </div>
+            </div>
+          </Box>
+        </div>
       </Paper>
     </div>
 

src/Pages/Puestos.jsx

@@ -110,56 +110,21 @@ export function Puestos() {
   const total_items = Divide(filter ? filter : result.data).length
 
   return (
-    <div  className="content-section">
+    <div className="content-section">
       <div className="main">
         <Box>
           <Paper sx={{ mb: 2, padding: 2, }}>
-            <Row style={{ alignItems: 'center', padding : 10 }}>
-              <Col md="6" sm="12" xs="12">
+            <Row style={{ alignItems: 'center', padding: 10, justifyContent: 'space-between' }}>
+              <Col md="4" sm="4" xs="4">
                 <div className="breadcrumb-header">
                   <Box sx={{ float: 'left', display: 'flex', flexDirection: 'row', alignItems: 'center' }} >
                     <ToggleButtonGroup style={{ marginRight: 20 }} size="small" {...control}>
                       {children}
                     </ToggleButtonGroup>
-
-
-                    {/*
-                      <TextField
-                        id="search_plaza_input"
-                        onChange={(event) => {
-                          let nombre = event.target.value
-                          if (nombre) {
-                            let temp = result.data.filter(plaza => {
-                              let isset = plaza.nombrepuesto.toUpperCase().includes(nombre.toUpperCase())
-                              return isset
-                            })
-                            if(temp.lenght <= 0){
-                              setFilter(null)
-                            }
-                            setFilter(temp)
-                          } else {
-                            setFilter(null)
-                          }
-                        }}
-                        InputProps={{
-                          startAdornment: (
-                            <InputAdornment position="start">
-                              <SearchIcon />
-                            </InputAdornment>
-                          ),
-                        }}
-                        variant="standard"
-                      />
-*/}
-
-
-
-
                   </Box>
-
                 </div>
               </Col>
-              <Col md="6" sm='12' xs="12">
+              <Col md="8" sm='8' xs="4">
                 <div className="add_producto">
                   <div onClick={() => setManual(true)} className="btn_add_producto">
                     <span className="btn_plaza_common" >Agregar manual <AddIcon fontSize="small" /></span>
@@ -172,10 +137,9 @@ export function Puestos() {
                 </div>
               </Col>
             </Row>
-
-            <div style={{padding:7}}>
+            <div style={{ padding: 7 }}>
               <div className={` main_grid_plazas main_productos ${alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'}`} id="grid_view">
-                <Row style={{minHeight:'75vh'}}>
+                <Row style={{ minHeight: '75vh' }}>
                   <GridMode
                     toggle={toggle}
                     showing={alignment}
@@ -185,7 +149,7 @@ export function Puestos() {
                 </Row>
               </div>
               <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
-                <Row style={{minHeight:'75vh'}}>
+                <Row style={{ minHeight: '75vh' }}>
                   <ListMode
                     toggle={toggle}
                     showing={alignment}
@@ -239,7 +203,7 @@ export function Puestos() {
                       variant="standard"
                     />
 
-                    <Chip style={{ marginLeft: 10, margin: 5 }} label={"Total: " + ( filter?  filter.length :  ( result ? result.data.length : 0 ))} />
+                    <Chip style={{ marginLeft: 10, margin: 5 }} label={"Total: " + (filter ? filter.length : (result ? result.data.length : 0))} />
                   </div>
                 </Col>
               </Row>

src/Pages/Resultados.jsx

@@ -2,15 +2,33 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom'
 import { Service } from '../Utils/HTTP';
 import { useSelector } from 'react-redux';
-import { Button, Box, Paper } from '@mui/material'
 import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
-// import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import { Loading } from '../Components/Generics/loading'
+import DownloadIcon from '@mui/icons-material/Download';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
+import '../pdf.css'
+// import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import { 
+  Button, Box, Paper,LinearProgress,
+  Typography
+} from '@mui/material'
 
-const Cargando = () => <div><h2>loading...</h2></div>
+function LinearProgressWithLabel(props) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value,
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
 
-// Create Document Component
 const MyDocument = (props) => {
 
   let { pdf } = props;
@@ -22,30 +40,72 @@ const MyDocument = (props) => {
     setNumPages(numPages);
   }
 
-  function onLoadError(error) {
-    console.log('error: ', error)
+  const [progress, setProgress] = useState(10);
+
+  if(!pdf){
+    <Loading/>
   }
 
+  console.log(progress)
+
   return (
     <div>
+
+        {
+          progress < 100 ?
+          <LinearProgressWithLabel value={progress}/>
+            : null
+        }
+
       <div className="pdf_controls">
-        <Button variant="contained" onClick={() => pageNumber > 1 ? setPageNumber(pageNumber - 1) : null} >
+
+
+      <div className="btn_pdfcontrol">
+        <Button 
+            className="btnmain"
+            style={{ margin: 2 }} 
+            variant="contained" 
+            onClick={() => pageNumber > 1 ? setPageNumber(pageNumber - 1) : null} >
           Anterior
         </Button>
-        <Button style={{ margin: 5 }} variant="contained" onClick={() => pageNumber + 1 <= numPages   ? setPageNumber(pageNumber + 1) : null} >
+        <Button 
+            className="btnmain"
+            style={{ margin: 2 }} 
+            variant="contained" 
+            onClick={() => pageNumber + 1 <= numPages   ? setPageNumber(pageNumber + 1) : null} >
           Siguiente
         </Button>
+      </div>
+
+        <div>
+          <b style={{marginRight : 15}}>
+            Página {pageNumber} de {numPages}
+          </b>
 
-        <p>
-          Página {pageNumber} de {numPages}
-        </p>
+          <Button 
+            className="btnmain"
+            variant="contained" 
+            onClick={() => console.log('download')} >
+            <DownloadIcon/>
+          </Button>
+        </div>
 
       </div>
 
-      <div className="Example__container__document">
-        <Document renderMode="canvas" file={pdf.data} onLoadSuccess={onDocumentLoadSuccess} onLoadError={onLoadError}>
-          <Page width={800} pageNumber={pageNumber} loading={<Cargando />} />
-        </Document>
+      <div className="Example__container">
+        <div className="Example__container__document">
+          <Document 
+            renderMode="canvas" 
+            file={pdf?.data} 
+            onLoadSuccess={onDocumentLoadSuccess} 
+            loading={Loading}
+            onLoadProgress={({loaded, total}) => {
+              setProgress((loaded / total) * 100)
+            }}
+          >
+              <Page loading={Loading} pageNumber={pageNumber} />
+          </Document>
+        </div>
       </div>
     </div>
   )
@@ -76,14 +136,10 @@ export function Resultados() {
     <div className="content-section">
       <div className="main">
         <Box sx={{ width: '100%' }}>
-          <Paper elevation={0} sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
-            <h1>Resultados {id}</h1>
-            <hr />
-            {
-              pdf ?
-                <MyDocument pdf={pdf} />
-                : <div> <h5> loading...</h5></div>
-            }
+          <Paper 
+            elevation={2} 
+            sx={{ mb: 2, padding: 2, height: '100%', minHeight: '95vh', boxShadow: 'none !important' }}>
+            <MyDocument pdf={pdf} />
           </Paper>
         </Box>
       </div>

src/pdf.css

@@ -0,0 +1,80 @@
+body {
+  margin: 0;
+  background-color: #525659;
+  font-family: Segoe UI, Tahoma, sans-serif;
+}
+
+.Example input,
+.Example button {
+  font: inherit;
+}
+
+.Example header {
+  background-color: #323639;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  color: white;
+}
+
+.Example header h1 {
+  font-size: inherit;
+  margin: 0;
+}
+
+.Example__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0px;
+  padding: 0px;
+}
+
+.Example__container__load {
+  margin-top: 1em;
+  color: white;
+}
+
+.Example__container__document {
+  margin: 1em 0;
+}
+
+.Example__container__document .react-pdf__Document {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.Example__container__document .react-pdf__Page {
+  max-width: calc(100% - 2em);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  margin: 1em;
+}
+
+.Example__container__document .react-pdf__Page canvas {
+  max-width: 100%;
+  height: auto !important;
+}
+
+.Example__container__document .react-pdf__message {
+  padding: 20px;
+  color: white;
+}
+
+.pdf_controls{
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  align-content: stretch;
+}
+.btnmain:hover{
+  background:var(--main) !important;
+  color:white !important;
+}
+.btn_pdfcontrol{
+  display:flex;
+  gap:1
+}
+.btnmain{
+  color:white !important;
+  background:var(--main) !important;
+}