Creacion del reporte de archivo electronico, seleccionar referencias y descargar sus archivos oficiales comprimidos en un zip

src/Components/Reportes/ArchivoElectronico/DialogAE.tsx

@@ -16,11 +16,16 @@ import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoE
 import { AgGridReact } from 'ag-grid-react'
 import { MsgInformativo } from '../../Utils/Toast/msgInformativo'
 import { TargetURL } from '../../../Constants/TargetURL'
+import IFileManager from '../../../Interfaces/Utils/IFileManager'
+import FileManagerServices from '../../../Services/Utils/FileManager.Services'
+import { IconContext } from 'react-icons'
+import { FaDownload } from 'react-icons/fa'
 
 interface IProps {
   showDialog: boolean
   header: string
   closeDialog: (arg: boolean) => void
+  archivos: IFileManager[]
 }
 
 interface ListaArchivos {
@@ -34,17 +39,31 @@ export const DialogAE: FC<IProps> = (props) => {
   const Referencia = useSelector((state: RootState) => state.ArchivoElectronico.Referencia)
   const Pedimento = useSelector((state: RootState) => state.ArchivoElectronico.Pedimento)
   const NoCliente = useSelector((state: RootState) => state.ArchivoElectronico.NoCliente)
-  const [filteredData, setFilteredData] = useState<Array<ListaArchivos>>()
+  const [filteredData, setFilteredData] = useState<IFileManager[]>([])
   const [columnDefs] = useState([
     {
-      field: 'archivo',
+      field: 'nombreArchivo',
+      cellRender: (params:any) => {return params.data.nombreArchivo},
       width: 430,
-      headerCheckboxSelection: true,
-      headerCheckboxSelectionFilteredOnly: true,
-      checkboxSelection: true,
+      headerCheckboxSelection: false,
+      headerCheckboxSelectionFilteredOnly: false,
+      checkboxSelection: false,
       sortable: true,
       filter: true,
+    },{
+      field: 'Descargar',
+      width: 100,
+      cellRenderer: (params:any) => {
+        return (
+          <div style={{textAlign:'center'}}>
+          <IconContext.Provider value={{ color: 'blue', size: '25px' }}>
+            <FaDownload/>
+          </IconContext.Provider>
+          </div>
+        )
+        //return <Button variant='warning' onClick={() => {getFile(params.data)}}></Button>
       },
+    }
   ])
   const gridRef = React.useRef<any>(null)
   const [msgColor, setMsgColor] = React.useState('primary')
@@ -52,34 +71,32 @@ export const DialogAE: FC<IProps> = (props) => {
   const [header, setHeader] = useState('')
   const [msg, setMsg] = useState('')
 
-  useEffect(() => {
-    const data: IArchivoElectronico = {
-      Referencia: Referencia,
-      PedimentoLargo: Pedimento.trim(),
-      NoCliente: NoCliente,
-      IdUsuario: 0,
-      Archivo: 'dummy',
-    }
-    ArchivoElectronicoDataServices.getFileList(data)
-      .then((response) => {
-        const lista: ListaArchivos[] = []
-        response.data.forEach((item) => {
-          lista.push({ archivo: item })
-        })
-        setFilteredData(lista)
-      })
-      .catch((e: Error) => {
-        console.log(e)
-        return
-      })
-  }, [Referencia])
-
   const viewFileContent = (fileName: string) => {
     window.open(
       `${curURL}/ArchivoElectronico/getFileContent?Referencia=${Referencia}&PedimentoLargo=dummy&NoCliente=${NoCliente}&IdUsuario=0&Archivo=${fileName}`
     )
   }
 
+  useEffect(() => {
+    setFilteredData(props.archivos)
+  }, [props.archivos])
+
+  const getFile = (file: IFileManager) => {
+    FileManagerServices.getFileContent(parseInt(file.tags), file.proceso).then((resp: any) => {
+        const url = window.URL.createObjectURL(new Blob([resp.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', file.nombreArchivo)
+        document.body.appendChild(link)
+        link.click()
+    }).catch(() => {
+      setHeader('Error')
+      setMsg('Ocurrio un error durante la descarga, favor de intentar nuevamente')
+      setShowMsg(true)
+      return
+    })
+  }
+
   const getFilesByReference = () => {
     let selectedNodes = gridRef.current.api.getSelectedNodes()
     let selectedData = selectedNodes.map((node: any) => node.data)
@@ -92,7 +109,7 @@ export const DialogAE: FC<IProps> = (props) => {
       Archivo: 'dummy',
       Archivos: Archivos,
     }
-    AEOServices.getTheseFilesByReferences(data)
+    /* AEOServices.getTheseFilesByReferences(data)
       .then((response: any) => {
         const url = window.URL.createObjectURL(new Blob([response.data]))
         const link = document.createElement('a')
@@ -106,7 +123,7 @@ export const DialogAE: FC<IProps> = (props) => {
         setMsg('Ocurrio un error: ' + e)
         setShowMsg(true)
         return
-      })
+      }) */
     props.closeDialog(false)
   }
 
@@ -126,22 +143,22 @@ export const DialogAE: FC<IProps> = (props) => {
         </Modal.Header>
         <Modal.Body>
           {filteredData ? (
-            <div style={{ height: '350px', width: '450px' }} className='ag-theme-alpine'>
+            <div style={{ height: '350px', width: '100%' }} className='ag-theme-alpine'>
               <AgGridReact
                 rowData={filteredData}
                 columnDefs={columnDefs}
                 pagination={true}
                 paginationPageSize={50}
                 ref={gridRef}
-                rowSelection={'multiple'}
-                rowMultiSelectWithClick={true}
+                /* rowSelection={'multiple'}
+                rowMultiSelectWithClick={true} */
               ></AgGridReact>
             </div>
           ) : (
             'Sin archivos que mostrar'
           )}
         </Modal.Body>
-        <Modal.Footer>
+        {/* <Modal.Footer>
           <Container>
             <Row>
               <Col md={2}></Col>
@@ -170,7 +187,7 @@ export const DialogAE: FC<IProps> = (props) => {
               </Col>
             </Row>
           </Container>
-        </Modal.Footer>
+        </Modal.Footer> */}
       </Modal>
       <MsgInformativo show={show} msg={msg} header={header} msgColor={msgColor} closeToast={() => setShowMsg(false)} />
     </div>

src/Components/Reportes/customCells/verDocumentos.tsx

@@ -1,11 +1,26 @@
 import React, { FC, useState } from 'react'
 import { Button } from 'react-bootstrap'
 import { DialogAE } from '../ArchivoElectronico/DialogAE'
-interface IProps {}
+import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services'
+import IFileManager from '../../../Interfaces/Utils/IFileManager';
+import FileManagerServices from '../../../Services/Utils/FileManager.Services';
+interface IProps {
+  referencia: string;
+}
 
 export const VerDocumentos: FC<IProps> = (props) => {
   const [showDialog, setShowDialog] = useState(false)
+  const [Archivos, setArchivos] = useState<IFileManager[]>([]);
   const showDocumentos = () => {
+    FileManagerServices.getFileListByreferencia(props.referencia)
+    .then((response) => {
+      const filteredFileList = response.data.filter(x=> [2,10,11,12,13,14,15,19,17,18,37,38,39,41].includes(x.proceso))
+      setArchivos(filteredFileList)
+    })
+    .catch((e: Error) => {
+      console.log(e)
+      return
+    })
     setShowDialog(true)
   }
 
@@ -20,7 +35,7 @@ export const VerDocumentos: FC<IProps> = (props) => {
           ver Documentos
         </Button>
       </span>
-      <DialogAE showDialog={showDialog} header={''} closeDialog={closeDialog} />
+      <DialogAE showDialog={showDialog} header={''} closeDialog={closeDialog} archivos={Archivos}/>
     </div>
   )
 }

src/Components/ReportesClientes/ReporteArchivoElectronico.tsx

@@ -13,6 +13,7 @@ import DTOAEPeriodo from "../../DTO/DTOAEPeriodo"
 import ClientesServices from "../../Services/Catalogos/Clientes.Services"
 import reportesServices from "../../Services/Reportes/reportes.services"
 import loadingImg from '../../images/ajaxloader.gif'
+import ArchivoElectronicoServices from "../../Services/Catalogos/ArchivoElectronico.Services"
 
 export const ReporteArchivoElectronico:React.FC = () => {
     //const dispatch = useDispatch()
@@ -58,7 +59,7 @@ export const ReporteArchivoElectronico:React.FC = () => {
         sortable: true,
         filter: true,
         },
-        { field: 'ver documentos', sortable: true, cellRenderer: VerDocumentos },
+        { field: 'ver documentos', sortable: true, cellRenderer: (params: any) => {return <VerDocumentos referencia={params.data.referencia}/>} },
         { field: 'aduana', sortable: true, filter: true },
         { field: 'patente', sortable: true, filter: true },
         { field: 'pedimento', sortable: true, filter: true },
@@ -206,7 +207,7 @@ export const ReporteArchivoElectronico:React.FC = () => {
             Referencias: Referencias,
         }
         console.log(data)
-        reportesServices.getZippedReferences(data)
+        ArchivoElectronicoServices.getZippedReferences(data)
             .then((response: any) => {
             const url = window.URL.createObjectURL(response.data)
             const link = document.createElement('a')

src/Services/Catalogos/ArchivoElectronico.Services.ts

@@ -8,7 +8,7 @@ import http from "../common/http-common";
 
 
 class ArchivoElectronicoDataService {
-   getFile(data: IArchivoElectronico) {
+   /* getFile(data: IArchivoElectronico) {
        return http.get<Blob>(`/ArchivoElectronico/getFile`, { params: data })
    }
    getFileList(data: IArchivoElectronico) {
@@ -55,6 +55,16 @@ class ArchivoElectronicoDataService {
        .catch(function (error) {
          console.log(error)
        })
+   } */
+   getZippedReferences(data : DTOAEPeriodo) {
+      return http.post<Blob>("/ArchivoElectronico/DownloadZippedArchivosOficiales", data, {responseType: 'blob'})
+      .then(function (response) {
+         return response
+       })
+       .catch(function (error) {
+         console.log(error)
+       })
    }
+   
   }
   export default new ArchivoElectronicoDataService();

src/Services/Reportes/reportes.services.ts

@@ -67,14 +67,5 @@ class reportsDataService {
     getRptOperacionesDiarias(data: DTOReporte) {
       return http.get<IRptOperacionesDiarias[]>(`/reportes/RptOperacionesDiarias?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`);
     }         
-    getZippedReferences(data : DTOAEPeriodo) {
-      return http.post<Blob>("/ArchivoElectronico/DownloadZippedArchivosOficiales", data, {responseType: 'blob'})
-      .then(function (response) {
-         return response
-       })
-       .catch(function (error) {
-         console.log(error)
-       })
-   } 
   }
   export default new reportsDataService();

src/Services/Utils/FileManager.Services.ts

@@ -5,7 +5,7 @@ import IFileManager from "../../Interfaces/Utils/IFileManager";
 class FileManagerDataService {
 
   getFileContent(id: number, Proceso: number) {
-    return http.get<ArrayBuffer>(`/FileManager/getFile?id=${id}&proceso=${Proceso}`, {responseType: 'arraybuffer'})
+    return http.get(`/FileManager/getFile?id=${id}&proceso=${Proceso}`, {responseType: 'arraybuffer'})
     .then(function (response) {
        return response
      })
@@ -40,6 +40,8 @@ class FileManagerDataService {
        console.log(error)
      })
   }
-
+  getFileListByreferencia(referencia: string) {
+    return http.get<IFileManager[]>(`/FileManager/FileListByReferencia?Referencia=${referencia}`)
+  }
 }
 export default new FileManagerDataService();