From 9d58d775d75ff700619dcd2699a803093c8d6f8e Mon Sep 17 00:00:00 2001 From: Felix Morales Date: Mon, 22 Apr 2024 11:16:27 -0500 Subject: [PATCH] Primer avance del reporte de archivo electronico para la vista de clientes --- .../Reportes/ArchivoElectronico/DialogAE.tsx | 178 +++++++++ .../Reportes/customCells/verDocumentos.tsx | 26 ++ .../ReporteArchivoElectronico.tsx | 371 ++++++++++++++++++ src/Services/Reportes/reportes.services.ts | 9 + src/index.tsx | 2 + 5 files changed, 586 insertions(+) create mode 100644 src/Components/Reportes/ArchivoElectronico/DialogAE.tsx create mode 100644 src/Components/Reportes/customCells/verDocumentos.tsx create mode 100644 src/Components/ReportesClientes/ReporteArchivoElectronico.tsx diff --git a/src/Components/Reportes/ArchivoElectronico/DialogAE.tsx b/src/Components/Reportes/ArchivoElectronico/DialogAE.tsx new file mode 100644 index 0000000..6b5660f --- /dev/null +++ b/src/Components/Reportes/ArchivoElectronico/DialogAE.tsx @@ -0,0 +1,178 @@ +import React, { FC, useEffect, useState } from 'react' +// Bootstrap +import { Button, Col, Container, Modal, Row } from 'react-bootstrap' +import { BsCloudDownload } from 'react-icons/bs' +// Interfaces +import IArchivoElectronico from '../../../Interfaces/IArchivoElectronico' +// DTOs +import DTOgetArchivosPorReferencia from '../../../DTO/DTOgetArchivosPorReferencia' +// Redux +import { RootState } from '../../../store/store' +import { useSelector } from 'react-redux' +// Servicios +import AEOServices from '../../../Services/Catalogos/ArchivoElectronico.Services' +import ArchivoElectronicoDataServices from '../../../Services/Catalogos/ArchivoElectronico.Services' +// Otros +import { AgGridReact } from 'ag-grid-react' +import { MsgInformativo } from '../../Utils/Toast/msgInformativo' +import { TargetURL } from '../../../Constants/TargetURL' + +interface IProps { + showDialog: boolean + header: string + closeDialog: (arg: boolean) => void +} + +interface ListaArchivos { + archivo: string +} + +const URL = new TargetURL() + +export const DialogAE: FC = (props) => { + const [curURL, setCurURL] = useState(URL.get()) + 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>() + const [columnDefs] = useState([ + { + field: 'archivo', + width: 430, + headerCheckboxSelection: true, + headerCheckboxSelectionFilteredOnly: true, + checkboxSelection: true, + sortable: true, + filter: true, + }, + ]) + const gridRef = React.useRef(null) + const [msgColor, setMsgColor] = React.useState('primary') + const [show, setShowMsg] = useState(false) + 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}` + ) + } + + const getFilesByReference = () => { + let selectedNodes = gridRef.current.api.getSelectedNodes() + let selectedData = selectedNodes.map((node: any) => node.data) + const Archivos = selectedData.map((item: ListaArchivos) => item.archivo) + const data: DTOgetArchivosPorReferencia = { + Referencia: Referencia, + PedimentoLargo: Pedimento, + NoCliente: NoCliente, + IdUsuario: 0, + Archivo: 'dummy', + Archivos: Archivos, + } + AEOServices.getTheseFilesByReferences(data) + .then((response: any) => { + const url = window.URL.createObjectURL(new Blob([response.data])) + const link = document.createElement('a') + link.href = url + link.setAttribute('download', Referencia + '.zip') + document.body.appendChild(link) + link.click() + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + props.closeDialog(false) + } + + return ( +
+ {' '} + { + props.closeDialog(false) + }} + centered + > + + Referencia: {Referencia} + + + {filteredData ? ( +
+ +
+ ) : ( + 'Sin archivos que mostrar' + )} + + + + + + + + + + + + + + + + + setShowMsg(false)} /> +
+ ) +} diff --git a/src/Components/Reportes/customCells/verDocumentos.tsx b/src/Components/Reportes/customCells/verDocumentos.tsx new file mode 100644 index 0000000..fbabde1 --- /dev/null +++ b/src/Components/Reportes/customCells/verDocumentos.tsx @@ -0,0 +1,26 @@ +import React, { FC, useState } from 'react' +import { Button } from 'react-bootstrap' +import { DialogAE } from '../ArchivoElectronico/DialogAE' +interface IProps {} + +export const VerDocumentos: FC = (props) => { + const [showDialog, setShowDialog] = useState(false) + const showDocumentos = () => { + setShowDialog(true) + } + + const closeDialog = () => { + setShowDialog(false) + } + + return ( +
+ + + + +
+ ) +} diff --git a/src/Components/ReportesClientes/ReporteArchivoElectronico.tsx b/src/Components/ReportesClientes/ReporteArchivoElectronico.tsx new file mode 100644 index 0000000..5379416 --- /dev/null +++ b/src/Components/ReportesClientes/ReporteArchivoElectronico.tsx @@ -0,0 +1,371 @@ +import React, { useEffect, useState } from "react" +import { Button, Card, Col, Form, Modal, Row } from "react-bootstrap" +import IClientes from "../../Interfaces/Catalogos/IClientes" +import IRpArchivoElectronicoOficial from "../../Interfaces/Reportes/IRptArchivoElectronicoOficial" +import { VerDocumentos } from "../Reportes/customCells/verDocumentos" +import { MsgInformativo } from "../Utils/Toast/msgInformativo" +import { AgGridReact } from "ag-grid-react" +import { BsSearch, BsFileEarmarkExcel, BsCloudDownload } from "react-icons/bs" +import { RowClickedEvent } from "ag-grid-community" +import IArchivoElectronico from "../../Interfaces/IArchivoElectronico" +import * as XLSX from 'xlsx' +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' + +export const ReporteArchivoElectronico:React.FC = () => { + //const dispatch = useDispatch() + const [UserId, setUserId] = useState(() => { + const stickyValue = window.localStorage.getItem('UserId') + return stickyValue !== null ? JSON.parse(stickyValue) : 0 + }) + const [Years, setYears] = useState(generateArrayOfYears()) + const [Months, setMonths] = useState([ + 'Enero', + 'Febrero', + 'Marzo', + 'Abril', + 'Mayo', + 'Junio', + 'Julio', + 'Agosto', + 'Septiembre', + 'Octubre', + 'Noviembre', + 'Diciembre', + ]) + const [Anio, setAnio] = useState(currentDate(1)) + const [Mes, setMes] = useState(currentDate(2)) + const [Clientes, setClientes] = useState>() + const [Data, setData] = useState>([]) + const [filteredData, setFilteredData] = useState>([]) + const [TipoOperacion, setTipoOperacion] = useState(0) + const [Cliente, setCliente] = useState(0) + const [msgColor, setMsgColor] = React.useState('primary') + const [show, setShowMsg] = useState(false) + const [header, setHeader] = useState('') + const [msg, setMsg] = useState('') + const [filtro, setFiltro] = useState('') + const [showDialog, setShowDialog] = useState(false) + const gridRef = React.useRef(null) + const [columnDefs] = useState([ + { + field: 'referencia', + headerCheckboxSelection: true, + headerCheckboxSelectionFilteredOnly: true, + checkboxSelection: true, + sortable: true, + filter: true, + }, + { field: 'ver documentos', sortable: true, cellRenderer: VerDocumentos }, + { field: 'aduana', sortable: true, filter: true }, + { field: 'patente', sortable: true, filter: true }, + { field: 'pedimento', sortable: true, filter: true }, + { field: 'fechaPago', sortable: true, filter: true }, + ]) + + const handleClose = () => setShowDialog(false) + + function generateArrayOfYears() { + var max = new Date().getFullYear() + var min = 2020 + var years = [] + for (var i = max; i >= min; i--) { + years.push(i) + } + return years + } + + function currentDate(mode: number): number { + var today = new Date() + var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0! + var yyyy = today.getFullYear() + return mode === 1 ? yyyy : parseInt(mm) + } + + const generaReporte = () => { + if(Anio === 0){ + setHeader('Error') + setMsg('Especifique el año de búsqueda.') + setShowMsg(true) + return; + } + if(Mes === 0){ + setHeader('Error') + setMsg('Especifique el mes de búsqueda.') + setShowMsg(true) + return; + } + if(Cliente===0 && Clientes!.length > 1){ + setHeader('Error') + setMsg('Seleccione una razón social') + setShowMsg(true) + return; + } + const data: DTOAEPeriodo = { + Anio: Anio, + Mes: Mes, + TipoOperacion: TipoOperacion, + NoCliente: Cliente, + } + console.log(JSON.stringify(data)) + reportesServices + .getRptArchivoElectronicoOficial(data) + .then((response) => { + setData(response.data) + setFilteredData(response.data) + console.log(response.data) + setHeader('Informativo') + setMsg('Se encontro la siguiente informacion...') + setShowMsg(true) + }) + .catch((e: Error) => { + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + } + + const downloadExcel = () => { + exportExcel(Data, 'Reporte archivo electronico oficial') + } + + function exportExcel(jsonData: any[], fileName: string): void { + let Heading = [['Referencia', 'Aduana', 'Patente', 'Pedimento', 'Fecha pago']] + const wb = XLSX.utils.book_new() + const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) + XLSX.utils.sheet_add_aoa(ws, Heading) + XLSX.utils.sheet_add_json(ws, jsonData, { origin: 'A2', skipHeader: true }) + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') + XLSX.writeFile(wb, fileName + '.xlsx') + var range = XLSX.utils.decode_range(ws['!ref?']) + for (var C = range.s.c; C <= range.e.c; ++C) { + var address = XLSX.utils.encode_col(C) + '1' // <-- first row, column number C + if (!ws[address]) continue + ws[address].v = ws[address].v.toUpperCase() + } + } + + const filtraReporte = (e: any) => { + setFiltro(e.target.value) + gridRef.current.api.setQuickFilter(e.target.value) + } + + useEffect(() => { + ClientesServices.getAllClientes(parseInt(UserId)) + .then((response) => { + setClientes(response.data) + if(response.data.length === 1) + setCliente(response.data[0].sClave) + }) + .catch((e: Error) => { + console.log(e) + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + }, []) + + /* function getParams(e: RowClickedEvent) { + const data: IArchivoElectronico = { + Referencia: e.data.referencia, + PedimentoLargo: + Anio.toString().substring(2, 2) + + ' ' + + e.data.aduana.toString().substring(0, 2) + + ' ' + + e.data.patente.toString() + + ' ' + + e.data.pedimento.toString(), + NoCliente: Cliente, + IdUsuario: 0, + Archivo: '', + } + console.log('.......................................................' + data) + //dispatch(setArchivoElectronico(data)) + } */ + + const downloadReferences = () => { + setShowDialog(true) + if (Cliente === 0) { + setMsg('Seleccione el cliente') + setHeader('Para poder continuar, favor de: ') + setShowMsg(true) + } + let selectedNodes = gridRef.current.api.getSelectedNodes() + let selectedData = selectedNodes.map((node: any) => node.data) + const Referencias = selectedData.map((item: IRpArchivoElectronicoOficial) => item.referencia) + const data = { + Anio: Anio, + Mes: Mes, + NoCliente: Cliente, + TipoOperacion: TipoOperacion, + Referencias: Referencias, + } + console.log(data) + reportesServices.getZippedReferences(data) + .then((response: any) => { + const url = window.URL.createObjectURL(response.data) + const link = document.createElement('a') + link.href = url + link.setAttribute('download', 'Archivo Electronico Oficial.zip') + document.body.appendChild(link) + link.click() + setShowDialog(false) + }) + .catch((e: Error) => { + console.log(e) + setHeader('Error') + setMsg('Ocurrio un error: ' + e) + setShowMsg(true) + return + }) + } + + return ( +
+ + +
+
+
+ setAnio(parseInt(e.target.value))} + size='sm' + defaultValue={Anio} + > + {Years.map((x, i) => ( + + ))} + +
+
+ setMes(parseInt(e.target.value))} + size='sm' + defaultValue={Mes} + > + + {Months.map((x, i) => ( + + ))} + +
+
+ Tipo oper +
+
+ setTipoOperacion(parseInt(e.target.value))} + className='form-select form-select-sm' + > + + + + +
+
+ Cliente +
+
+ { + setCliente(parseInt(e.target.value)) + }} + className='form-select form-select-sm' + value={Cliente} + > + + {Clientes + ? Clientes.map((c) => { + return c.agrupado === 1 ? : '' + }) + : null} + +
+ +
+ +
+
+
+
 
+
+ { + filtraReporte(e) + }} + /> +
+
+ +     + +
+
+ + +
+
+ {/* getParams(e) */}} + > +
+ setShowMsg(false)} /> + + + + + + proccessing + Espere, por favor... + + + +
+ ) +} \ No newline at end of file diff --git a/src/Services/Reportes/reportes.services.ts b/src/Services/Reportes/reportes.services.ts index 72e8a4b..c554bb2 100644 --- a/src/Services/Reportes/reportes.services.ts +++ b/src/Services/Reportes/reportes.services.ts @@ -67,5 +67,14 @@ class reportsDataService { getRptOperacionesDiarias(data: DTOReporte) { return http.get(`/reportes/RptOperacionesDiarias?Inicio=${data.Inicio}&Fin=${data.Fin}&TipoOperacion=${data.TipoOperacion}&NoCliente=${data.NoCliente}`); } + getZippedReferences(data : DTOAEPeriodo) { + return http.post("/ArchivoElectronico/DownloadZippedArchivosOficiales", data, {responseType: 'blob'}) + .then(function (response) { + return response + }) + .catch(function (error) { + console.log(error) + }) + } } export default new reportsDataService(); \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 54a6d0e..a0757a5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -30,6 +30,7 @@ import RptClientesTraficos from './Components/Clientes/Traficos/RptClientesTrafi import { RelacionFacturas } from './Components/ReportesClientes/Alen/RelacionFacturas' import { ReporteFacturasConsolidados } from './Components/ReportesClientes/Alen/ReporteFacturasConsolidados' import { CuentasCerradas } from './Components/ReportesClientes/CuentasCerradas.tsx/CuentasCerradas' +import { ReporteArchivoElectronico } from './Components/ReportesClientes/ReporteArchivoElectronico' require (`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`) function PageNotFound() { @@ -92,6 +93,7 @@ root.render( }/> }/> + }/> }>{/*Aqui van todas las rutas relacionadas a los clientes */} }>{/*Aqui van todas las rutas relacionadas a los reportes de los clientes*/}