Compare commits
54 Commits
NewRptFront
...
main
@ -0,0 +1,3 @@ |
|||||||
|
{ |
||||||
|
"workbench.colorTheme": "Infinity Dark Theme Eye Friendly Colors" |
||||||
|
} |
Binary file not shown.
@ -0,0 +1,575 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
import { Alert, Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables' |
||||||
|
import FraccionesVulnerables from '../../../Services/Catalogos/FraccionesVulnerables' |
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
|
import { BsFileEarmarkExcel, BsFillPencilFill, BsSearch } from 'react-icons/bs' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import { FaEraser } from 'react-icons/fa' |
||||||
|
import { FormControl } from 'react-bootstrap' |
||||||
|
import { AiFillCloseCircle } from 'react-icons/ai' |
||||||
|
import { AiOutlineSave } from 'react-icons/ai' |
||||||
|
import { MsgInformativo } from '../../Utils/Toast/msgInformativo' |
||||||
|
|
||||||
|
// import { kMaxLength } from 'buffer'
|
||||||
|
// import { isNull, set } from 'cypress/types/lodash'
|
||||||
|
// import { number } from 'yup'
|
||||||
|
// import { parse } from 'path'
|
||||||
|
|
||||||
|
// Define types for the component props and table row data
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
export default function CatFraccionesVulnerables(props: IProps) { |
||||||
|
const [UserType, setUserType] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserType') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : '' |
||||||
|
}) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [Data, setData] = useState<ICatFraccionesVulnerables[]>([]) |
||||||
|
|
||||||
|
const [tipoReporte, setTipoReporte] = useState(0) |
||||||
|
// const [filtro, setFiltro] = useState('')
|
||||||
|
const [DataOriginal, setDataOriginal] = useState<ICatFraccionesVulnerables[]>( |
||||||
|
[] |
||||||
|
) |
||||||
|
// const mFraccionesVulnerables = useSelector((state: RootState) => state.CatFraccionesVulnerables.CatFraccionesVulnerables);
|
||||||
|
const [header, setHeader] = useState<string>('') // Specify the type of 'header'
|
||||||
|
// const [msgColor, setMsgColor] = useState<string>('primary'); // Specify the type of 'msgColor'
|
||||||
|
const [show, setShowMsg] = useState(false) // Specify the type of 'show'
|
||||||
|
const [msg, setMsg] = useState<string>('') // Specify the type of 'msg'
|
||||||
|
const [id, setId] = useState<number>(0) // Specify the type of 'id'
|
||||||
|
const [Fraccion, setFraccion] = useState<number>(0) // Specify the type of 'Fraccion'
|
||||||
|
const [Nico, setNico] = useState<string>('0') // Specify the type of 'Nico'
|
||||||
|
const [Activo, setActivo] = useState<number>(0) // Specify the type of 'Activo'
|
||||||
|
const [showModal, setShowModal] = useState<boolean>(false) |
||||||
|
const [editMode, setEditMode] = useState(false) // Nuevo estado para controlar el modo de edición
|
||||||
|
const [selectedRow, setSelectedRow] = |
||||||
|
useState<ICatFraccionesVulnerables | null>(null) // Nuevo estado para almacenar la fila seleccionada
|
||||||
|
// const [fraccionesVulnerables, setFraccionesVulnerables] = useState([]);
|
||||||
|
const [modalFileManager, setModalFileManager] = useState(false) |
||||||
|
const msgColor = 'primary' |
||||||
|
|
||||||
|
const columnsFraccionesVulnerables = [ |
||||||
|
{ |
||||||
|
name: 'Id', |
||||||
|
width: '14%', |
||||||
|
selector: (row: ICatFraccionesVulnerables) => row.id, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Fraccion', |
||||||
|
width: '20%', |
||||||
|
|
||||||
|
selector: (row: ICatFraccionesVulnerables) => row.fraccion, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Nico', |
||||||
|
width: '15%', |
||||||
|
|
||||||
|
selector: (row: ICatFraccionesVulnerables) => row.nico, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Activo', |
||||||
|
width: '15%', |
||||||
|
selector: (row: ICatFraccionesVulnerables) => |
||||||
|
row.activo === 1 ? 'Sí' : 'No', |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Edita', |
||||||
|
width: '15%', |
||||||
|
|
||||||
|
cell: (row: ICatFraccionesVulnerables) => ( |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="light" |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
visibility: UserType === '4' ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
onClick={() => loadRow(row)} // Cambia esta línea para pasar el objeto 'row' a la función 'loadRow'
|
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'blue', size: '20px' }}> |
||||||
|
<BsFillPencilFill /> |
||||||
|
</IconContext.Provider>{' '} |
||||||
|
</Button> |
||||||
|
) |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Elimina', |
||||||
|
width: '15%', |
||||||
|
cell: (row: ICatFraccionesVulnerables) => ( |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="light" |
||||||
|
style={{ |
||||||
|
textAlign: 'right', |
||||||
|
visibility: UserType === '4' ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
onClick={() => deleteRow(row.id)} // Llama a la función deleteRow pasando el ID de la fila
|
||||||
|
> |
||||||
|
<IconContext.Provider value={{ color: 'red', size: '20px' }}> |
||||||
|
<AiFillCloseCircle /> |
||||||
|
</IconContext.Provider>{' '} |
||||||
|
</Button> |
||||||
|
) |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const loadRow = (data: ICatFraccionesVulnerables): void => { |
||||||
|
setSelectedRow(data) // Al hacer clic en el botón de edición, establecemos la fila seleccionada en el estado
|
||||||
|
setEditMode(true) // Cambiamos a modo de edición
|
||||||
|
setId(data.id) // Establecemos el id de la fila seleccionada
|
||||||
|
setFraccion(data.fraccion) // Cargamos los valores de fracción y nico para edición
|
||||||
|
setNico(data.nico) |
||||||
|
} |
||||||
|
|
||||||
|
// const truncatedValue = inputValue.substring(0, 8)
|
||||||
|
// setFraccion(truncatedValue)
|
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
setTipoReporte(0) |
||||||
|
FraccionesVulnerables.getAll() |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setDataOriginal(response.data) |
||||||
|
// uploadAllRows(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 uploadAllRows = (data: ICatFraccionesVulnerables[]) => { |
||||||
|
// Iteramos sobre los datos y realizamos la petición para cada fila
|
||||||
|
data.forEach((row) => { |
||||||
|
uploadFile(row) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
// console.log(id) // Esto imprimirá el valor actualizado de id después de que cambie
|
||||||
|
}, [id]) |
||||||
|
|
||||||
|
const handleCreateNewRecord = () => { |
||||||
|
// console.log('se han borrod los texbox ')
|
||||||
|
|
||||||
|
setSelectedRow(null) |
||||||
|
setFraccion(0) |
||||||
|
setNico('0') |
||||||
|
setActivo(0) // Establecer a 0 (No)
|
||||||
|
setEditMode(true) |
||||||
|
setId(0) |
||||||
|
setShowModal(false) |
||||||
|
} |
||||||
|
|
||||||
|
function deleteRow(id: number): void { |
||||||
|
FraccionesVulnerables.Delete(id) |
||||||
|
.then((response) => { |
||||||
|
setData((prevData) => |
||||||
|
prevData.map((item) => |
||||||
|
item.id === id ? { ...item, activo: 0 } : item |
||||||
|
) |
||||||
|
) |
||||||
|
|
||||||
|
console.log(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrió un error: ' + e) |
||||||
|
|
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const uploadFile = (data: ICatFraccionesVulnerables): Promise<any> => { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
FraccionesVulnerables.Append(data) |
||||||
|
.then((response) => { |
||||||
|
// console.log(response.data) // Mensaje de éxito
|
||||||
|
resolve(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.error('Error durante la inserción:', e) // Mensaje de error
|
||||||
|
reject(e) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
//Aqui agregamos la validacion de los digitos de las fracciones -------------------------------------------------------
|
||||||
|
const handleFraccionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { |
||||||
|
const fraccionAsString = Fraccion.toString() |
||||||
|
if (e.key.length === 1 && fraccionAsString.length >= 8) { |
||||||
|
e.preventDefault() // Evitar agregar más caracteres si ya hay 8
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleFraccionBlur = (e: React.FocusEvent<HTMLInputElement>) => { |
||||||
|
const fraccionAsString = Fraccion.toString() |
||||||
|
if (fraccionAsString.length !== 8) { |
||||||
|
console.log('La fracción debe tener 8 dígitos.') |
||||||
|
|
||||||
|
e.currentTarget.focus() // Mantener el foco en el campo
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// aqui agregamos las validaciones de los digitos del nico---------------------------------------------------------
|
||||||
|
|
||||||
|
const handleNicoChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
||||||
|
const value = e.target.value |
||||||
|
if (value.length <= 2) { |
||||||
|
setNico(value) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleNicoKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { |
||||||
|
if (e.key.length === 1 && Nico.length >= 2) { |
||||||
|
e.preventDefault() // Evitar agregar más caracteres si ya hay 2
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleNicoBlur = (e: React.FocusEvent<HTMLInputElement>) => { |
||||||
|
if (Nico.length !== 2) { |
||||||
|
console.log('El Nico debe tener 2 dígitos.') |
||||||
|
e.currentTarget.focus() // Mantener el foco en el campo
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Guardar --------------------------------------------------------------
|
||||||
|
|
||||||
|
const handleSaveChanges = async () => { |
||||||
|
if (id === 0) { |
||||||
|
const fraccionAsString = Fraccion.toString() |
||||||
|
|
||||||
|
if (fraccionAsString.length !== 8 || Nico.length !== 2) { |
||||||
|
setHeader('Error') |
||||||
|
|
||||||
|
if (fraccionAsString.length !== 8 && Nico.length !== 2) { |
||||||
|
setMsg( |
||||||
|
'La fraccion debe tener 8 dígitos y el nico debe tener 2 dígitos.' |
||||||
|
) |
||||||
|
} else if (fraccionAsString.length !== 8) { |
||||||
|
setMsg('La fracción debe tener 8 dígitos.') |
||||||
|
} else { |
||||||
|
setMsg('El nico debe tener 2 dígitos.') |
||||||
|
} |
||||||
|
|
||||||
|
setShowMsg(true) |
||||||
|
return // Esto podría ser necesario para evitar una ejecución adicional
|
||||||
|
} |
||||||
|
|
||||||
|
const newRecord = { |
||||||
|
id: id, |
||||||
|
fraccion: Fraccion, |
||||||
|
nico: Nico, |
||||||
|
activo: Activo |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
const response = await uploadFile(newRecord) |
||||||
|
const newId = response.id |
||||||
|
|
||||||
|
// Actualizar el estado local con el nuevo registro que incluye el nuevo ID
|
||||||
|
const updatedRecord = { ...newRecord, id: newId } |
||||||
|
setData((prevData) => [...prevData, updatedRecord]) |
||||||
|
|
||||||
|
// console.log('este el newId' + newId)
|
||||||
|
// console.log('este el id normal ' + id)
|
||||||
|
|
||||||
|
// Restablecer valores de los campos
|
||||||
|
handleCreateNewRecord() |
||||||
|
} catch (error) { |
||||||
|
console.error('Error durante la inserción:', error) |
||||||
|
} |
||||||
|
} else { |
||||||
|
// Aquí actualizamos el registro existente
|
||||||
|
|
||||||
|
const fraccionAsString = Fraccion.toString() |
||||||
|
|
||||||
|
if (fraccionAsString.length !== 8) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('La fraccion debe tener 8 digitos.') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if (Nico.length !== 2) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('El Nico debe tener 2 digitos.') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const updatedData = Data.map((row) => |
||||||
|
row.id === selectedRow?.id |
||||||
|
? { ...row, fraccion: Fraccion, nico: Nico, activo: Activo } |
||||||
|
: row |
||||||
|
) |
||||||
|
|
||||||
|
setData(updatedData) |
||||||
|
const updatedRow = updatedData.find((row) => row.id === selectedRow?.id) |
||||||
|
if (updatedRow) { |
||||||
|
uploadFile(updatedRow) // Llamada a uploadFile para actualizar el registro
|
||||||
|
} |
||||||
|
setEditMode(false) |
||||||
|
setShowModal(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Fracciones Vulnerables') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel( |
||||||
|
jsonData: ICatFraccionesVulnerables[], |
||||||
|
fileName: string |
||||||
|
): void { |
||||||
|
let Heading = [['Id', 'Fraccion', 'Nico', 'Activo']] |
||||||
|
const wb = XLSX.utils.book_new() |
||||||
|
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]) |
||||||
|
XLSX.utils.sheet_add_aoa(ws, Heading) |
||||||
|
|
||||||
|
// Transformar los valores de 'activo' en 'Si' o 'No' antes de agregarlos a la hoja de cálculo
|
||||||
|
const transformedData = jsonData.map((row) => ({ |
||||||
|
...row, |
||||||
|
activo: row.activo === 1 ? 'Si' : 'No' |
||||||
|
})) |
||||||
|
|
||||||
|
XLSX.utils.sheet_add_json(ws, transformedData, { |
||||||
|
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' |
||||||
|
if (!ws[address]) continue |
||||||
|
ws[address].v = ws[address].v.toUpperCase() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleFraccionChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
||||||
|
const value = parseFloat(e.target.value) |
||||||
|
setFraccion(isNaN(value) ? 0 : value) |
||||||
|
} |
||||||
|
|
||||||
|
// Función para manejar el cambio en el campo de entrada de la fracción
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="mt-2"> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="container"> |
||||||
|
<div |
||||||
|
className="row mb-4 " |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
minHeight: '1vh' |
||||||
|
}} |
||||||
|
> |
||||||
|
<Card |
||||||
|
style={{ |
||||||
|
paddingTop: '10px', |
||||||
|
paddingBottom: '5px', |
||||||
|
width: '900px', |
||||||
|
height: '50px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<Row> |
||||||
|
<Col xs={12}></Col> |
||||||
|
<Col xs={12}> |
||||||
|
<Row className="align-items-center"> |
||||||
|
<Col xs={1}> |
||||||
|
<Form.Label className="mb-0">Fracción</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormControl |
||||||
|
type="text" |
||||||
|
value={Fraccion} |
||||||
|
onChange={handleFraccionChange} |
||||||
|
onKeyDown={handleFraccionKeyDown} |
||||||
|
onBlur={handleFraccionBlur} |
||||||
|
inputMode="numeric" |
||||||
|
className="orm-select mx-2" |
||||||
|
maxLength={8} |
||||||
|
minLength={8} |
||||||
|
style={{ |
||||||
|
backgroundColor: 'white', |
||||||
|
color: 'black', |
||||||
|
padding: '4px', |
||||||
|
width: '80px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ textAlign: 'right', width: '100px' }} |
||||||
|
> |
||||||
|
<Form.Label className="mb-0 ">Nico</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={1}> |
||||||
|
<FormControl |
||||||
|
type="text" |
||||||
|
value={Nico} |
||||||
|
// onChange={(e) => setNico(e.target.value)}
|
||||||
|
onChange={handleNicoChange} |
||||||
|
onKeyDown={handleNicoKeyDown} |
||||||
|
onBlur={handleNicoBlur} |
||||||
|
// inputMode="numeric"
|
||||||
|
className="orm-select mx-2" |
||||||
|
maxLength={2} |
||||||
|
minLength={2} |
||||||
|
style={{ |
||||||
|
backgroundColor: 'white', |
||||||
|
color: 'black', |
||||||
|
padding: '4px', |
||||||
|
width: '30px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={2} style={{ textAlign: 'right', width: '50px' }}> |
||||||
|
<Form.Label className="mb-0">Activo</Form.Label> |
||||||
|
</Col> |
||||||
|
<Col xs={2}> |
||||||
|
<Form.Select |
||||||
|
value={Activo} |
||||||
|
onChange={(e) => setActivo(Number(e.target.value))} |
||||||
|
className="form-select mx-2" |
||||||
|
style={{ |
||||||
|
backgroundColor: 'white', |
||||||
|
color: 'black', |
||||||
|
padding: '4px', |
||||||
|
width: '60px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<option value={1}>Si</option> |
||||||
|
<option value={0}>No</option> |
||||||
|
</Form.Select> |
||||||
|
</Col> |
||||||
|
<Col xs={0} style={{ width: '100px' }}> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="light" |
||||||
|
onClick={handleCreateNewRecord} |
||||||
|
style={{ |
||||||
|
backgroundColor: 'orange', |
||||||
|
color: 'white', |
||||||
|
padding: '4px', |
||||||
|
width: '50px', |
||||||
|
height: '32px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaEraser /> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
|
||||||
|
<Col xs={0} style={{ width: '110px' }}> |
||||||
|
<Button |
||||||
|
style={{ |
||||||
|
backgroundColor: 'blue', |
||||||
|
color: 'white', |
||||||
|
padding: '2px', |
||||||
|
width: '55px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={0} style={{ width: '110px' }}> |
||||||
|
<Button |
||||||
|
style={{ |
||||||
|
backgroundColor: 'blue', |
||||||
|
color: 'white', |
||||||
|
padding: '0px', |
||||||
|
width: '55px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
variant="primary" |
||||||
|
onClick={handleSaveChanges} |
||||||
|
> |
||||||
|
<AiOutlineSave /> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={0} style={{ width: '110px' }}> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
backgroundColor: 'green', |
||||||
|
color: 'white', |
||||||
|
padding: '1px', |
||||||
|
width: '55px', |
||||||
|
height: '30px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
</Row> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
<Row> |
||||||
|
<Col xs={3}></Col> |
||||||
|
<Col xs={6}> |
||||||
|
<Card> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
striped={true} |
||||||
|
dense={true} |
||||||
|
paginationPerPage={10} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsFraccionesVulnerables} |
||||||
|
data={Data} |
||||||
|
pointerOnHover |
||||||
|
/> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
<Col xs={1}></Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,501 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
|
||||||
|
import ITabulador from '../../../../Interfaces/Catalogos/ITabulador' |
||||||
|
import ITabuladorConceptos from '../../../../Interfaces/Catalogos/ITabuladorConceptos' |
||||||
|
import DTOConceptos from '../../../../DTO/Utils/DTOConceptos' |
||||||
|
|
||||||
|
import CTabDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Services' |
||||||
|
//import CTabDetDataService from '../../../../Services/Corresponsalias/Corresponsales.Tabuladores.Detalle.Sevices'
|
||||||
|
import AmazonSrvDataService from '../Services/Amazon.Services' |
||||||
|
|
||||||
|
import ClientesDataService from '../../../../Services/Catalogos/Clientes.Services' |
||||||
|
|
||||||
|
import { MsgInformativo } from '../../../Utils/Toast/msgInformativo' |
||||||
|
import { ControlledInput } from '../../../Utils/ControlledInput/ControlledInput' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import { |
||||||
|
Alert, |
||||||
|
Button, |
||||||
|
Card, |
||||||
|
Col, |
||||||
|
Container, |
||||||
|
FloatingLabel, |
||||||
|
Form, |
||||||
|
Modal, |
||||||
|
Row |
||||||
|
} from 'react-bootstrap' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import 'react-data-table-component-extensions/dist/index.css' |
||||||
|
import { |
||||||
|
BsCheckCircleFill, |
||||||
|
BsPlusSquareFill, |
||||||
|
BsXCircleFill |
||||||
|
} from 'react-icons/bs' |
||||||
|
import IClientes from '../../../../Interfaces/Catalogos/IClientes' |
||||||
|
import { FcTimeline } from 'react-icons/fc' |
||||||
|
import { FaEraser, FaTimesCircle } from 'react-icons/fa' |
||||||
|
import ICat2096CatConceptosConsulta from '../Interfaces/I2096CatConceptosConsulta' |
||||||
|
import { populateCatConcetosConsultas, updateCatConcetosConsulta } from '../../../../store/features/Clientes/2096/AmazonCatConceptosConsulta' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
|
||||||
|
export interface ICatConceptosConsultaProps {} |
||||||
|
|
||||||
|
export default function CatConceptosConsulta( |
||||||
|
props: ICatConceptosConsultaProps |
||||||
|
) { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [Tabulador, setTabulador] = useState(0) |
||||||
|
const [Id, setId] = useState(0) |
||||||
|
const [Concepto, setConcepto] = useState(0) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Activo, setActivo] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [Siglas, setSiglas] = useState('') |
||||||
|
const [ShortDescription, setShortDescription] = useState('') |
||||||
|
const [SpanishDescription, setSpanishDescription] = useState('') |
||||||
|
const [SpanishDescriptionWide, setSpanishDescriptionWide] = useState('') |
||||||
|
const [DetalleConceptos, setDetalleConceptos] = useState< |
||||||
|
ITabuladorConceptos[] |
||||||
|
>([]) |
||||||
|
const [CatConceptos, setCatConceptos] = useState< |
||||||
|
ICat2096CatConceptosConsulta[] |
||||||
|
>([]) |
||||||
|
const [Tabuladores, setTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [AllTabuladores, setAllTabuladores] = useState<ITabulador[]>([]) |
||||||
|
const [Costo, setCosto] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [DialogTabs, setDialogTabs] = useState(false) |
||||||
|
|
||||||
|
const colConcepts = [ |
||||||
|
{ |
||||||
|
name: 'Activo', |
||||||
|
width: '80px', |
||||||
|
cell: (row: ICat2096CatConceptosConsulta) => ( |
||||||
|
<div |
||||||
|
onClick={() => { |
||||||
|
loadData(row) |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: row.activo ? 'green' : 'red', size: '20px' }} |
||||||
|
> |
||||||
|
{row.activo ? <BsCheckCircleFill /> : <BsXCircleFill />} |
||||||
|
</IconContext.Provider> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Siglas', |
||||||
|
width: '80px', |
||||||
|
selector: (row: ICat2096CatConceptosConsulta) => row.siglas, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Descripcion corta', |
||||||
|
width: '300px', |
||||||
|
selector: (row: ICat2096CatConceptosConsulta) => row.shortDescription, |
||||||
|
wrap: true, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Descripcion español', |
||||||
|
width: '450px', |
||||||
|
selector: (row: ICat2096CatConceptosConsulta) => row.spanishDescription, |
||||||
|
wrap: true, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Descripcion amplia', |
||||||
|
width: '450px', |
||||||
|
selector: (row: ICat2096CatConceptosConsulta) => |
||||||
|
row.spanishDescriptionWide, |
||||||
|
wrap: true, |
||||||
|
sortable: true |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const loadData = (data: ICat2096CatConceptosConsulta) => { |
||||||
|
setId(data.id) |
||||||
|
setSiglas(data.siglas) |
||||||
|
setShortDescription(data.shortDescription) |
||||||
|
setSpanishDescription(data.spanishDescription) |
||||||
|
setSpanishDescriptionWide(data.spanishDescriptionWide) |
||||||
|
setActivo(data.activo ? 1 : 0) |
||||||
|
} |
||||||
|
|
||||||
|
const deleteTabulador = () => { |
||||||
|
CTabDataService.Delete(Tabulador) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg(response.data.respuesta) |
||||||
|
setShowMsg(true) |
||||||
|
setDialogTabs(false) |
||||||
|
setTabuladores(Tabuladores.filter((data) => data.id != Tabulador)) |
||||||
|
setAllTabuladores(Tabuladores) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const loadCatalog = () => { |
||||||
|
AmazonSrvDataService.CatConceptosConsultaGET() |
||||||
|
.then((response) => { |
||||||
|
dispatch(populateCatConcetosConsultas(response.data)) |
||||||
|
setCatConceptos(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadCatalog() |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (Cliente > 0) { |
||||||
|
setSiglas('') |
||||||
|
setTabuladores([]) |
||||||
|
setDetalleConceptos([]) |
||||||
|
CTabDataService.GetByCustomer(Cliente) |
||||||
|
.then((response) => { |
||||||
|
setTabuladores(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
}, [Cliente]) |
||||||
|
|
||||||
|
const filtraTabulador = (e: any) => { |
||||||
|
if (e.target.value !== '') { |
||||||
|
setTabuladores( |
||||||
|
AllTabuladores.filter(function (el) { |
||||||
|
return el.nombre |
||||||
|
.toLocaleLowerCase() |
||||||
|
.includes(e.target.value.toLocaleLowerCase()) |
||||||
|
}) |
||||||
|
) |
||||||
|
} else { |
||||||
|
setTabuladores(AllTabuladores) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const save = () => { |
||||||
|
const data: ICat2096CatConceptosConsulta = { |
||||||
|
id: Id, |
||||||
|
siglas: Siglas, |
||||||
|
shortDescription: ShortDescription, |
||||||
|
spanishDescription: SpanishDescription, |
||||||
|
spanishDescriptionWide: SpanishDescriptionWide, |
||||||
|
activo: Activo==1 |
||||||
|
} |
||||||
|
AmazonSrvDataService.CatConceptosConsultaAppend(data) |
||||||
|
.then((response) => { |
||||||
|
if (response.status === 200) { |
||||||
|
loadCatalog() |
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('La informacion se guardo correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Card style={{ height: '100%' }}> |
||||||
|
<Card.Header as="h4">Catalogo de consultas para Amazon</Card.Header> |
||||||
|
<Card.Body> |
||||||
|
<Container fluid> |
||||||
|
<Alert variant="primary"> |
||||||
|
<Row> |
||||||
|
<Col xs={1}> |
||||||
|
<FloatingLabel |
||||||
|
controlId="floatingInput" |
||||||
|
label="Siglas" |
||||||
|
className="mb-3" |
||||||
|
> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
placeholder="" |
||||||
|
value={Siglas} |
||||||
|
maxLength={4} |
||||||
|
onChange={(e) => { |
||||||
|
setSiglas(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={8}> |
||||||
|
<FloatingLabel |
||||||
|
controlId="floatingInput" |
||||||
|
label="Descripcion corta" |
||||||
|
className="mb-3" |
||||||
|
> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
placeholder="Descripcion corta" |
||||||
|
value={ShortDescription} |
||||||
|
onChange={(e) => { |
||||||
|
setShortDescription(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col |
||||||
|
xs={1} |
||||||
|
style={{ |
||||||
|
textAlign: 'left', |
||||||
|
paddingTop: '5px', |
||||||
|
cursor: 'pointer', |
||||||
|
paddingLeft: '0px' |
||||||
|
}} |
||||||
|
onClick={() => { |
||||||
|
setTabulador(0) |
||||||
|
setSiglas('') |
||||||
|
}} |
||||||
|
> |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'orange', size: '25px' }} |
||||||
|
> |
||||||
|
<FaEraser /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Col> |
||||||
|
<Col></Col> |
||||||
|
<Col style={{ paddingTop: '20px' }}> |
||||||
|
<Button |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
style={{ paddingLeft: '10px', paddingRight: '10px' }} |
||||||
|
onClick={() => save()} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={5}> |
||||||
|
<FloatingLabel |
||||||
|
controlId="floatingInput" |
||||||
|
label="Descripcion en español" |
||||||
|
className="mb-3" |
||||||
|
> |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
placeholder="" |
||||||
|
style={{ height: '100px' }} |
||||||
|
value={SpanishDescription} |
||||||
|
onChange={(e) => { |
||||||
|
setSpanishDescription(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col xs={5}> |
||||||
|
<FloatingLabel |
||||||
|
controlId="floatingInput" |
||||||
|
label="Descripcion amplia" |
||||||
|
className="mb-3" |
||||||
|
> |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
placeholder="Descripcion amplia" |
||||||
|
style={{ height: '100px' }} |
||||||
|
value={SpanishDescriptionWide} |
||||||
|
onChange={(e) => { |
||||||
|
setSpanishDescriptionWide(e.target.value) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col style={{ paddingTop: '20px' }}> |
||||||
|
<FloatingLabel controlId="floatingSelect" label="Activo"> |
||||||
|
<Form.Select |
||||||
|
aria-label="Activo" |
||||||
|
value={Activo} |
||||||
|
onChange={(e) => { |
||||||
|
setActivo(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
> |
||||||
|
<option value="1">Si</option> |
||||||
|
<option value="0">No</option> |
||||||
|
</Form.Select> |
||||||
|
</FloatingLabel> |
||||||
|
</Col> |
||||||
|
<Col></Col> |
||||||
|
</Row> |
||||||
|
</Alert> |
||||||
|
<Row> |
||||||
|
{/* <Col xs={6}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className="mb-2 text-muted"> |
||||||
|
<Row> |
||||||
|
<Col xs={2} style={{ paddingTop: '8px' }}> |
||||||
|
Tabulador |
||||||
|
</Col> |
||||||
|
<Col xs={10}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Busqueda de tabulador..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraTabulador(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
|
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> */} |
||||||
|
<Col xs={12}> |
||||||
|
<Card style={{}}> |
||||||
|
<Card.Body> |
||||||
|
<Card.Subtitle className="mb-2 text-muted"> |
||||||
|
<Row> |
||||||
|
<Col xs={12} style={{ paddingTop: '8px' }}> |
||||||
|
<DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={colConcepts} |
||||||
|
data={CatConceptos} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={9}> |
||||||
|
{/* <Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => |
||||||
|
setConcepto(parseInt(e.target.value)) |
||||||
|
} |
||||||
|
className="form-select form-select-sm" |
||||||
|
style={{ fontSize: '17px' }} |
||||||
|
> |
||||||
|
<option value="0">- Seleccione -</option> |
||||||
|
{CatConceptos |
||||||
|
? CatConceptos.map((c) => { |
||||||
|
return ( |
||||||
|
<option value={c.id} key={c.id}> |
||||||
|
{c.concepto} |
||||||
|
</option> |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> */} |
||||||
|
</Col> |
||||||
|
<Col style={{ paddingTop: '5px' }}> |
||||||
|
{/* <Form.Label |
||||||
|
onClick={() => { |
||||||
|
addConcept() |
||||||
|
}} |
||||||
|
style={{ cursor: 'pointer' }} |
||||||
|
> |
||||||
|
<IconContext.Provider |
||||||
|
value={{ color: 'green', size: '30px' }} |
||||||
|
> |
||||||
|
<BsPlusSquareFill /> |
||||||
|
</IconContext.Provider> |
||||||
|
</Form.Label> */} |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Subtitle> |
||||||
|
{/* <DataTable |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'id'} |
||||||
|
defaultSortAsc={true} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={DetalleConceptos} |
||||||
|
/> */} |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Container> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<Modal |
||||||
|
show={DialogTabs} |
||||||
|
onHide={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size="sm" |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
¿Esta seguro de eliminar: |
||||||
|
<br /> {Siglas}? |
||||||
|
</Modal.Body> |
||||||
|
<Modal.Footer> |
||||||
|
<Row> |
||||||
|
<Col xs={6} style={{ textAlign: 'left', paddingRight: '100px' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={deleteTabulador} |
||||||
|
size="sm" |
||||||
|
style={{ paddingRight: '20px', paddingLeft: '20px' }} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'right' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setDialogTabs(false) |
||||||
|
}} |
||||||
|
size="sm" |
||||||
|
> |
||||||
|
Cerrar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Footer> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,10 @@ |
|||||||
|
export default interface DTOAmazonSegragacion { |
||||||
|
vrid: string, |
||||||
|
asin: string, |
||||||
|
quantity: number, |
||||||
|
descripcion: string, |
||||||
|
motivo: string, |
||||||
|
fSegregacion: string, |
||||||
|
valorMercancia: string, |
||||||
|
|
||||||
|
} |
@ -0,0 +1,8 @@ |
|||||||
|
export default interface ICat2096CatConceptosConsulta { |
||||||
|
id: number, |
||||||
|
siglas: string, |
||||||
|
shortDescription: string, |
||||||
|
spanishDescription: string, |
||||||
|
spanishDescriptionWide: string, |
||||||
|
activo: boolean |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,125 @@ |
|||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { Button, Card, Col, Row } from 'react-bootstrap' |
||||||
|
import DataTable from 'react-data-table-component' |
||||||
|
import IConsolidadosSinFirmaBanco from '../../../../Interfaces/Facturacion/Anexo/IConsolidadosSinFirmaBanco' |
||||||
|
import DSOperaciones from '../../../../Services/Operaciones/Operaciones.Services' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import { BsFileEarmarkExcel } from 'react-icons/bs' |
||||||
|
|
||||||
|
export interface IRtpConsolidadosSinFirmaBancoProps {} |
||||||
|
|
||||||
|
export default function RtpConsolidadosSinFirmaBanco( |
||||||
|
props: IRtpConsolidadosSinFirmaBancoProps |
||||||
|
) { |
||||||
|
const [Data, setData] = useState<IConsolidadosSinFirmaBanco[]>([]) |
||||||
|
const [Total, setTotal] = useState(0) |
||||||
|
const columnsConcepts = [ |
||||||
|
{ |
||||||
|
name: 'Referencia', |
||||||
|
width: '150px', |
||||||
|
cell: (row: IConsolidadosSinFirmaBanco) => row.referencia, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Fecha Pago', |
||||||
|
width: '250px', |
||||||
|
cell: (row: IConsolidadosSinFirmaBanco) => row.fechaPago, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Fecha Validacion', |
||||||
|
width: '250px', |
||||||
|
cell: (row: IConsolidadosSinFirmaBanco) => row.firmaValidacion, |
||||||
|
sortable: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Firma Banco', |
||||||
|
with: '250px', |
||||||
|
cell: (row: IConsolidadosSinFirmaBanco) => row.firmaBanco, |
||||||
|
sortable: true |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Consolidados sin firma de banco') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
['Referencia', 'FechaPago', 'Fecha Validacion', 'Firma Banco'] |
||||||
|
] |
||||||
|
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 generaReporte = () => { |
||||||
|
DSOperaciones.OperacionesSinFirmaBancoGet() |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setTotal(response.data.length) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
console.log(e) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
generaReporte() |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<Card.Title> |
||||||
|
<Row> |
||||||
|
<Col xs={3}>Consolidados sin firma banco : {Total} registros</Col> |
||||||
|
<Col xs={8}></Col> |
||||||
|
<Col xs={1} className="colAlignRight"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Title> |
||||||
|
<Row> |
||||||
|
<Col xs={12}> |
||||||
|
<DataTable |
||||||
|
dense |
||||||
|
noHeader |
||||||
|
defaultSortFieldId={'cliente'} |
||||||
|
defaultSortAsc={true} |
||||||
|
fixedHeaderScrollHeight="550px" |
||||||
|
striped={true} |
||||||
|
fixedHeader |
||||||
|
/* paginationPerPage={10} |
||||||
|
pagination */ |
||||||
|
highlightOnHover |
||||||
|
columns={columnsConcepts} |
||||||
|
data={Data} |
||||||
|
pointerOnHover |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,401 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
// Bootstrap components
|
||||||
|
import { Button, Card, Form } from 'react-bootstrap' |
||||||
|
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
||||||
|
// Interfaces
|
||||||
|
import IClientes from '../../Interfaces/Catalogos/IClientes' |
||||||
|
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
||||||
|
// DTOs
|
||||||
|
import DTOReporte from '../../DTO/DTOReporte' |
||||||
|
// Services
|
||||||
|
import reportsDataService from '../../Services/Reportes/reportes.services' |
||||||
|
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
||||||
|
|
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
||||||
|
// GUI components
|
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { TargetURL } from '../../Constants/TargetURL' |
||||||
|
//Other
|
||||||
|
import moment from 'moment' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import IRptArcosa from '../../Interfaces/Reportes/IRptArcosa' |
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const RptArcosa: FC<IProps> = (props) => { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Data, setData] = useState<Array<IRptArcosa>>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<Array<IRptArcosa>>([]) |
||||||
|
const [Inicio, setInicio] = useState(currentDate()) |
||||||
|
const [Fin, setFin] = useState(currentDate()) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(1) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ |
||||||
|
field: 'patente', |
||||||
|
headerName: 'Patente', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'pedimento', |
||||||
|
headerName: 'Pedimento', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'pagoPedimento', |
||||||
|
headerName: 'PagoPedimento', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 200 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'regimen', |
||||||
|
headerName: 'Regimen', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'valorDls', |
||||||
|
headerName: 'ValorDls', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
field: 'valorAduana', |
||||||
|
headerName: 'ValorAduana', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'aduana', |
||||||
|
headerName: 'Aduana', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'planta', |
||||||
|
headerName: 'Planta', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'dta', |
||||||
|
headerName: 'DTA', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'prev', |
||||||
|
headerName: 'PREV', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
field: 'iva', |
||||||
|
headerName: 'IVA', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'ivaprev', |
||||||
|
headerName: 'IVAPREV', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'igi', |
||||||
|
headerName: 'IGI', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'cc', |
||||||
|
headerName: 'CC', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'total', |
||||||
|
headerName: 'Total', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 150 |
||||||
|
} |
||||||
|
]) |
||||||
|
|
||||||
|
function currentDate(): string { |
||||||
|
var today = new Date() |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
const closeToast = (show: boolean): void => { |
||||||
|
setShowMsg(false) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if (Cliente === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Seleccion el cliente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
const data: DTOReporte = { |
||||||
|
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
||||||
|
Fin: moment(Fin).format('YYYY-MM-DD'), |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
IdUsuario: UserId |
||||||
|
} |
||||||
|
reportsDataService |
||||||
|
.getRptArcosa(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(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 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesDataService.getAllClientes(parseInt(UserId)) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'Reporte Mensual Arcosa') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
[ |
||||||
|
'Patente', |
||||||
|
'Pedimento', |
||||||
|
'PagoPedimento', |
||||||
|
'Regimen', |
||||||
|
'ValorDls', |
||||||
|
'ValorAduana', |
||||||
|
'Aduana', |
||||||
|
'Planta', |
||||||
|
'DTA', |
||||||
|
'PREV', |
||||||
|
'IVA', |
||||||
|
'IVAPREV', |
||||||
|
'IGI', |
||||||
|
'CC', |
||||||
|
'Total' |
||||||
|
] |
||||||
|
] |
||||||
|
|
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
async function getAE(e: any) { |
||||||
|
if (e.column.colId === 'ver pedimento') { |
||||||
|
setcolumnaVerPDF(true) |
||||||
|
} else { |
||||||
|
setcolumnaVerPDF(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const formatNumber = (number: string, digits: number) => { |
||||||
|
number = parseFloat(number).toFixed(digits) |
||||||
|
let value = Number(number).toLocaleString('en') |
||||||
|
if (!value.indexOf('NaN')) return '0.00' |
||||||
|
return value |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Inicio} |
||||||
|
type="date" |
||||||
|
name="Inicio" |
||||||
|
placeholder="Inicio" |
||||||
|
title="Inicio" |
||||||
|
alt="Inicio" |
||||||
|
data-date-format="YYYY-mm-dd" |
||||||
|
onChange={(e) => setInicio(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Fin} |
||||||
|
type="date" |
||||||
|
name="Fin" |
||||||
|
placeholder="Fin" |
||||||
|
title="Fin" |
||||||
|
alt="Fin" |
||||||
|
onChange={(e) => setFin(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-1"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="1">Importacion</option> |
||||||
|
<option value="2">Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-4"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="0">-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return c.agrupado === 1 ? ( |
||||||
|
<option value={c.sClave}>{c.sRazonSocial}</option> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Button |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="row" style={{ paddingTop: 5 }}> |
||||||
|
<div className="col"> </div> |
||||||
|
<div className="col-4"> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Search..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onCellClicked={(e) => getAE(e)} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={closeToast} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
export default RptArcosa |
@ -0,0 +1,308 @@ |
|||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
//boostrap componentes
|
||||||
|
import { Button, Card, Form } from 'react-bootstrap' |
||||||
|
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
||||||
|
|
||||||
|
//interfaces
|
||||||
|
|
||||||
|
import { IRptFacturasFraccion } from '../../Interfaces/Reportes/IRptContsFacturasFraccion' |
||||||
|
|
||||||
|
import reportsDataService from '../../Services/Reportes/reportes.services' |
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
|
||||||
|
// Gui Components
|
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import { TargetURL } from '../../Constants/TargetURL' |
||||||
|
// import DataTable from 'react-data-table-component'
|
||||||
|
import DataTable, { TableColumn } from 'react-data-table-component' |
||||||
|
|
||||||
|
//Other
|
||||||
|
import moment from 'moment' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import { string } from 'yup' |
||||||
|
const URL = new TargetURL() |
||||||
|
|
||||||
|
export default function RptPFacturasFraccion() { |
||||||
|
const [curURL, setCurURL] = useState(URL.get()) |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Data, setData] = useState<Array<IRptFacturasFraccion>>([]) |
||||||
|
const [filteredData, setFilteredData] = useState<Array<IRptFacturasFraccion>>( |
||||||
|
[] |
||||||
|
) |
||||||
|
|
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
// const gridRef = React.useRef<any>(null)
|
||||||
|
const [referencia, setReferencia] = useState('') |
||||||
|
|
||||||
|
const columnDefs = [ |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Factura</div>, |
||||||
|
width: '220px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.factura, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Almacen</div>, |
||||||
|
width: '100px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.almacen, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Orden</div>, |
||||||
|
width: '100px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.orden, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true, |
||||||
|
texAlign: 'center' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Parte</div>, |
||||||
|
width: '150px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.parte, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Pais</div>, |
||||||
|
width: '120px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.pais, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Fraccion Factura XML</div>, |
||||||
|
width: '200px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.fraccionFacturaXML, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Fraccion GEMCO</div>, |
||||||
|
width: '150px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.fraccionGEMCO, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: <div style={{ textAlign: 'center' }}>Nico GEMCO</div>, |
||||||
|
width: '120px', |
||||||
|
selector: (row: IRptFacturasFraccion) => row.nicoGEMCO, |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
center: true |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
function currentDate(): string { |
||||||
|
var today = new Date() |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
const closeToast = (show: boolean): void => { |
||||||
|
setShowMsg(false) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if (!referencia) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('La referencia no puede estar vacía') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
reportsDataService |
||||||
|
.getRptContsFacturasFraccion(referencia) // Usa la variable 'referencia' en lugar de 'Referencia'
|
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(response.data) |
||||||
|
|
||||||
|
setHeader('Informativo') |
||||||
|
setMsg('Se encontró la siguiente información...') |
||||||
|
setShowMsg(true) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrió un error: ' + e.message) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
console.log(Data) |
||||||
|
exportExcel(Data, 'Facturas Fraccion') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel( |
||||||
|
jsonData: IRptFacturasFraccion[], |
||||||
|
fileName: string |
||||||
|
): void { |
||||||
|
let Heading = [ |
||||||
|
[ |
||||||
|
'Factura', |
||||||
|
'Almacen', |
||||||
|
'Orden', |
||||||
|
'Parte', |
||||||
|
'Pais', |
||||||
|
'Fraccion Factura XML', |
||||||
|
'Fraccion GEMCO', |
||||||
|
'Nico GEMCO' |
||||||
|
] |
||||||
|
] |
||||||
|
/* jsonData.forEach(function (v) { |
||||||
|
delete v.tipodeCambiodePedimento |
||||||
|
}) */ |
||||||
|
/* jsonData.map(function (item) { |
||||||
|
delete item.tipodeCambiodePedimento |
||||||
|
return item |
||||||
|
}) */ |
||||||
|
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) => { |
||||||
|
const searchText = e.target.value.toLowerCase() |
||||||
|
|
||||||
|
setFiltro(searchText) |
||||||
|
|
||||||
|
const filtered = Data.filter((item) => { |
||||||
|
return ( |
||||||
|
(item.factura && item.factura.toLowerCase().includes(searchText)) || |
||||||
|
(item.almacen && item.almacen.toLowerCase().includes(searchText)) || |
||||||
|
(item.orden && item.orden.toString().includes(searchText)) || |
||||||
|
(item.parte && item.parte.toLowerCase().includes(searchText)) || |
||||||
|
(item.pais && item.pais.toLowerCase().includes(searchText)) || |
||||||
|
(item.fraccionFacturaXML && |
||||||
|
item.fraccionFacturaXML.toLowerCase().includes(searchText)) || |
||||||
|
(item.fraccionGEMCO && |
||||||
|
item.fraccionGEMCO.toLowerCase().includes(searchText)) || |
||||||
|
(item.nicoGEMCO && String(item.nicoGEMCO).includes(searchText)) |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
// console.log('Filtered Data:', filtered)
|
||||||
|
|
||||||
|
setFilteredData(filtered) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-md-1" style={{ textAlign: 'right' }}> |
||||||
|
<Form.Label size="sm">Referencia</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-1" style={{ width: '130px' }}> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
value={referencia} |
||||||
|
onChange={(e) => setReferencia(e.target.value)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-md-1" style={{ width: '5px' }}></div> |
||||||
|
<div className="col-md-4" style={{ width: '150px ' }}> |
||||||
|
<Button |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
Buscar <BsSearch /> |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="col-md-1" style={{ width: '50px' }}></div> |
||||||
|
|
||||||
|
<div className="col-md-4"> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Search..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-1" style={{ width: '260px' }}></div> |
||||||
|
<div className="col-md-1"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
Excel <BsFileEarmarkExcel /> |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
|
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div |
||||||
|
className="ag-theme-alpine" |
||||||
|
style={{ height: 400, width: '100%', textAlign: 'center' }} |
||||||
|
> |
||||||
|
<DataTable |
||||||
|
columns={columnDefs} |
||||||
|
data={filteredData} |
||||||
|
defaultSortAsc={true} |
||||||
|
striped={true} |
||||||
|
dense={true} |
||||||
|
paginationPerPage={10} |
||||||
|
pagination |
||||||
|
highlightOnHover |
||||||
|
pointerOnHover |
||||||
|
style={{ height: 300, width: '100%', textAlign: 'center' }} |
||||||
|
noHeader // Para evitar que se muestre el encabezado del DataTable
|
||||||
|
onRowClicked={(row) => { |
||||||
|
// Aquí puedes manejar el clic en una fila si es necesario
|
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={closeToast} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,322 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
// Bootstrap components
|
||||||
|
import { Button, Card, Form } from 'react-bootstrap' |
||||||
|
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
||||||
|
// Interfaces
|
||||||
|
import IClientes from '../../Interfaces/Catalogos/IClientes' |
||||||
|
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
||||||
|
// DTOs
|
||||||
|
import DTOReporte from '../../DTO/DTOReporte' |
||||||
|
// Services
|
||||||
|
import reportsDataService from '../../Services/Reportes/reportes.services' |
||||||
|
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
||||||
|
|
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
||||||
|
// GUI components
|
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { TargetURL } from '../../Constants/TargetURL' |
||||||
|
//Other
|
||||||
|
import moment from 'moment' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import IRptFacturasPedimentosPagados from '../../Interfaces/Reportes/IRptFacturasPedimentosPagados' |
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const RptFacturasPedimentosPagados: FC<IProps> = (props) => { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Data, setData] = useState<Array<IRptFacturasPedimentosPagados>>([]) |
||||||
|
const [filteredData, setFilteredData] = useState< |
||||||
|
Array<IRptFacturasPedimentosPagados> |
||||||
|
>([]) |
||||||
|
const [Inicio, setInicio] = useState(currentDate()) |
||||||
|
const [Fin, setFin] = useState(currentDate()) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(1) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ |
||||||
|
field: 'referencia', |
||||||
|
headerName: 'Referencia', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'pedido', |
||||||
|
headerName: 'Pedido', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'factura', |
||||||
|
headerName: 'Factura', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 400 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'uuid', |
||||||
|
headerName: 'UUID', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 350 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'fecha', |
||||||
|
headerName: 'Fecha', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
field: 'razonSocial', |
||||||
|
headerName: 'RazonSocial', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
} |
||||||
|
]) |
||||||
|
|
||||||
|
function currentDate(): string { |
||||||
|
var today = new Date() |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
const closeToast = (show: boolean): void => { |
||||||
|
setShowMsg(false) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if (Cliente === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Seleccion el cliente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
const data: DTOReporte = { |
||||||
|
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
||||||
|
Fin: moment(Fin).format('YYYY-MM-DD'), |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
IdUsuario: UserId |
||||||
|
} |
||||||
|
reportsDataService |
||||||
|
.getRptFacturasPedimentosPagados(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(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 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesDataService.getAllClientes(parseInt(UserId)) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'FacturasEnPedimentos') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
['Referencia', 'Pedido', 'Factura', 'UUID', 'Fecha', 'RazonSocial'] |
||||||
|
] |
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
async function getAE(e: any) { |
||||||
|
if (e.column.colId === 'ver pedimento') { |
||||||
|
setcolumnaVerPDF(true) |
||||||
|
} else { |
||||||
|
setcolumnaVerPDF(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const formatNumber = (number: string, digits: number) => { |
||||||
|
number = parseFloat(number).toFixed(digits) |
||||||
|
let value = Number(number).toLocaleString('en') |
||||||
|
if (!value.indexOf('NaN')) return '0.00' |
||||||
|
return value |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Inicio} |
||||||
|
type="date" |
||||||
|
name="Inicio" |
||||||
|
placeholder="Inicio" |
||||||
|
title="Inicio" |
||||||
|
alt="Inicio" |
||||||
|
data-date-format="YYYY-mm-dd" |
||||||
|
onChange={(e) => setInicio(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Fin} |
||||||
|
type="date" |
||||||
|
name="Fin" |
||||||
|
placeholder="Fin" |
||||||
|
title="Fin" |
||||||
|
alt="Fin" |
||||||
|
onChange={(e) => setFin(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-1"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="1">Importacion</option> |
||||||
|
<option value="2">Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-4"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="0">-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return c.agrupado === 1 ? ( |
||||||
|
<option value={c.sClave}>{c.sRazonSocial}</option> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Button |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="row" style={{ paddingTop: 5 }}> |
||||||
|
<div className="col"> </div> |
||||||
|
<div className="col-4"> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Search..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onCellClicked={(e) => getAE(e)} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={closeToast} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
export default RptFacturasPedimentosPagados |
@ -0,0 +1,409 @@ |
|||||||
|
import React, { FC, useEffect, useState } from 'react' |
||||||
|
// Bootstrap components
|
||||||
|
import { Button, Card, Form } from 'react-bootstrap' |
||||||
|
import { BsSearch, BsFileEarmarkExcel } from 'react-icons/bs' |
||||||
|
// Interfaces
|
||||||
|
import IClientes from '../../Interfaces/Catalogos/IClientes' |
||||||
|
import IArchivoElectronico from '../../Interfaces/IArchivoElectronico' |
||||||
|
// DTOs
|
||||||
|
import DTOReporte from '../../DTO/DTOReporte' |
||||||
|
// Services
|
||||||
|
import reportsDataService from '../../Services/Reportes/reportes.services' |
||||||
|
import ClientesDataService from '../../Services/Catalogos/Clientes.Services' |
||||||
|
// Redux
|
||||||
|
import { useDispatch } from 'react-redux' |
||||||
|
import { setArchivoElectronico } from '../../store/features/Reportes/ArchivoElectronico' |
||||||
|
// GUI components
|
||||||
|
import { MsgInformativo } from '../Utils/Toast/msgInformativo' |
||||||
|
import { AgGridReact } from 'ag-grid-react' |
||||||
|
import { RowClickedEvent } from 'ag-grid-community' |
||||||
|
import { TargetURL } from '../../Constants/TargetURL' |
||||||
|
//Other
|
||||||
|
import moment from 'moment' |
||||||
|
import * as XLSX from 'xlsx' |
||||||
|
import IRptOperacionesPagadasMisionFood from '../../Interfaces/Reportes/IRptOperacionesPagadasMisionFood' |
||||||
|
|
||||||
|
interface IProps {} |
||||||
|
|
||||||
|
const RptOperacionesPagadasMisionFood: FC<IProps> = (props) => { |
||||||
|
const [UserId, setUserId] = useState(() => { |
||||||
|
const stickyValue = window.localStorage.getItem('UserId') |
||||||
|
return stickyValue !== null ? JSON.parse(stickyValue) : 0 |
||||||
|
}) |
||||||
|
const [Data, setData] = useState<Array<IRptOperacionesPagadasMisionFood>>([]) |
||||||
|
const [filteredData, setFilteredData] = useState< |
||||||
|
Array<IRptOperacionesPagadasMisionFood> |
||||||
|
>([]) |
||||||
|
const [Inicio, setInicio] = useState(currentDate()) |
||||||
|
const [Fin, setFin] = useState(currentDate()) |
||||||
|
const [TipoOperacion, setTipoOperacion] = useState(1) |
||||||
|
const [Cliente, setCliente] = useState(0) |
||||||
|
const [Clientes, setClientes] = useState<Array<IClientes>>() |
||||||
|
const [msgColor, setMsgColor] = React.useState('primary') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [filtro, setFiltro] = useState('') |
||||||
|
const gridRef = React.useRef<any>(null) |
||||||
|
const [columnaVerPDF, setcolumnaVerPDF] = useState(false) |
||||||
|
const dispatch = useDispatch() |
||||||
|
const [columnDefs] = useState([ |
||||||
|
{ |
||||||
|
field: 'tipoOperacion', |
||||||
|
headerName: 'TipoOperacion', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'sPedimento', |
||||||
|
headerName: 'Pedimento', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'uuid', |
||||||
|
headerName: 'UUID', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 400 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'folioFactura', |
||||||
|
headerName: 'FolioFactura', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 500 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'dFechaFirmaBanco', |
||||||
|
headerName: 'FechaFirmaBanco', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'sRazonSocial', |
||||||
|
headerName: 'RazonSocial', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ field: 'sRFC', headerName: 'RFC', sortable: true, filter: true }, |
||||||
|
{ |
||||||
|
field: 'sReferencia', |
||||||
|
headerName: 'Referencia', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
|
||||||
|
{ |
||||||
|
field: 'sEDocument', |
||||||
|
headerName: 'EDocument', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'sHRazonSocial', |
||||||
|
headerName: 'SHRazonSocial', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'sHidentificadorProv', |
||||||
|
headerName: 'HidentificadorProv', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'aa', |
||||||
|
headerName: 'AA', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'rfcaa', |
||||||
|
headerName: 'RFCAA', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'incoterm', |
||||||
|
headerName: 'Incoterm', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'caja', |
||||||
|
headerName: 'Caja', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'acuceDoda', |
||||||
|
headerName: 'AcuceDoda', |
||||||
|
sortable: true, |
||||||
|
filter: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'transportista', |
||||||
|
headerName: 'Transportista', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
field: 'edocument', |
||||||
|
headerName: 'Edocument', |
||||||
|
sortable: true, |
||||||
|
filter: true, |
||||||
|
width: 1000 |
||||||
|
} |
||||||
|
]) |
||||||
|
|
||||||
|
function currentDate(): string { |
||||||
|
var today = new Date() |
||||||
|
var dd = String(today.getDate()).padStart(2, '0') |
||||||
|
var mm = String(today.getMonth() + 1).padStart(2, '0') //January is 0!
|
||||||
|
var yyyy = today.getFullYear() |
||||||
|
return yyyy + '-' + mm + '-' + dd |
||||||
|
} |
||||||
|
|
||||||
|
const closeToast = (show: boolean): void => { |
||||||
|
setShowMsg(false) |
||||||
|
} |
||||||
|
|
||||||
|
const generaReporte = () => { |
||||||
|
if (Cliente === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Seleccion el cliente') |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
const data: DTOReporte = { |
||||||
|
Inicio: moment(Inicio).format('YYYY-MM-DD'), |
||||||
|
Fin: moment(Fin).format('YYYY-MM-DD'), |
||||||
|
TipoOperacion: TipoOperacion, |
||||||
|
NoCliente: Cliente, |
||||||
|
IdUsuario: UserId |
||||||
|
} |
||||||
|
reportsDataService |
||||||
|
.getRptOPeracionesPagadasMisionFood(data) |
||||||
|
.then((response) => { |
||||||
|
setData(response.data) |
||||||
|
setFilteredData(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 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
ClientesDataService.getAllClientes(parseInt(UserId)) |
||||||
|
.then((response) => { |
||||||
|
setClientes(response.data) |
||||||
|
}) |
||||||
|
.catch((e: Error) => { |
||||||
|
setHeader('Error') |
||||||
|
setMsg('Ocurrio un error: ' + e) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
}) |
||||||
|
}, []) |
||||||
|
|
||||||
|
const downloadExcel = () => { |
||||||
|
exportExcel(Data, 'OperacionesPagadasMissionFood') |
||||||
|
} |
||||||
|
|
||||||
|
function exportExcel(jsonData: any[], fileName: string): void { |
||||||
|
let Heading = [ |
||||||
|
[ |
||||||
|
'TipoOperacion', |
||||||
|
'Pedimento', |
||||||
|
'UUID', |
||||||
|
'FolioFactura', |
||||||
|
'FechaFirmaBanco', |
||||||
|
'RazonSocial', |
||||||
|
'RFC', |
||||||
|
'Referencia', |
||||||
|
'EDocument', |
||||||
|
'HRazonSocial', |
||||||
|
'HidentificadorProv', |
||||||
|
'AA', |
||||||
|
'RFCAA', |
||||||
|
'Incoterm', |
||||||
|
'Caja', |
||||||
|
'AcuceDoda', |
||||||
|
'Transportista', |
||||||
|
'Edocument' |
||||||
|
] |
||||||
|
] |
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
async function getAE(e: any) { |
||||||
|
if (e.column.colId === 'ver pedimento') { |
||||||
|
setcolumnaVerPDF(true) |
||||||
|
} else { |
||||||
|
setcolumnaVerPDF(false) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const formatNumber = (number: string, digits: number) => { |
||||||
|
number = parseFloat(number).toFixed(digits) |
||||||
|
let value = Number(number).toLocaleString('en') |
||||||
|
if (!value.indexOf('NaN')) return '0.00' |
||||||
|
return value |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Card> |
||||||
|
<Card.Body> |
||||||
|
<div className="row"> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Inicio} |
||||||
|
type="date" |
||||||
|
name="Inicio" |
||||||
|
placeholder="Inicio" |
||||||
|
title="Inicio" |
||||||
|
alt="Inicio" |
||||||
|
data-date-format="YYYY-mm-dd" |
||||||
|
onChange={(e) => setInicio(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-2"> |
||||||
|
<Form.Control |
||||||
|
defaultValue={Fin} |
||||||
|
type="date" |
||||||
|
name="Fin" |
||||||
|
placeholder="Fin" |
||||||
|
title="Fin" |
||||||
|
alt="Fin" |
||||||
|
onChange={(e) => setFin(e.target.value)} |
||||||
|
size="sm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Tipo oper</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-1"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => setTipoOperacion(parseInt(e.target.value))} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="1">Importacion</option> |
||||||
|
<option value="2">Exportacion</option> |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Form.Label size="sm">Cliente</Form.Label> |
||||||
|
</div> |
||||||
|
<div className="col-md-4"> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
onChange={(e) => { |
||||||
|
setCliente(parseInt(e.target.value)) |
||||||
|
}} |
||||||
|
className="form-select form-select-sm" |
||||||
|
> |
||||||
|
<option value="0">-SELECCIONE-</option> |
||||||
|
{Clientes |
||||||
|
? Clientes.map((c) => { |
||||||
|
return c.agrupado === 1 ? ( |
||||||
|
<option value={c.sClave}>{c.sRazonSocial}</option> |
||||||
|
) : ( |
||||||
|
'' |
||||||
|
) |
||||||
|
}) |
||||||
|
: null} |
||||||
|
</Form.Control> |
||||||
|
</div> |
||||||
|
<div className="col-md-1 right-label"> |
||||||
|
<Button |
||||||
|
variant="primary" |
||||||
|
size="sm" |
||||||
|
onClick={() => { |
||||||
|
generaReporte() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsSearch /> |
||||||
|
Buscar |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="row" style={{ paddingTop: 5 }}> |
||||||
|
<div className="col"> </div> |
||||||
|
<div className="col-4"> |
||||||
|
<Form.Control |
||||||
|
type="text" |
||||||
|
size="sm" |
||||||
|
placeholder="Search..." |
||||||
|
onChange={(e) => { |
||||||
|
filtraReporte(e) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="col"> |
||||||
|
<Button |
||||||
|
size="sm" |
||||||
|
variant="success" |
||||||
|
onClick={() => { |
||||||
|
downloadExcel() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BsFileEarmarkExcel /> |
||||||
|
Excel |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Card.Body> |
||||||
|
</Card> |
||||||
|
<br /> |
||||||
|
<div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}> |
||||||
|
<AgGridReact |
||||||
|
rowData={filteredData} |
||||||
|
columnDefs={columnDefs} |
||||||
|
pagination={true} |
||||||
|
paginationAutoPageSize={true} |
||||||
|
ref={gridRef} |
||||||
|
rowSelection={'multiple'} |
||||||
|
rowMultiSelectWithClick={true} |
||||||
|
onCellClicked={(e) => getAE(e)} |
||||||
|
></AgGridReact> |
||||||
|
</div> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={closeToast} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
export default RptOperacionesPagadasMisionFood |
@ -0,0 +1,6 @@ |
|||||||
|
export default interface ICatFraccionesVulnerables{ |
||||||
|
id : number ,
|
||||||
|
fraccion : number,
|
||||||
|
nico : string,
|
||||||
|
activo : number |
||||||
|
} |
@ -0,0 +1,7 @@ |
|||||||
|
export default interface IConsolidadosSinFirmaBanco{ |
||||||
|
referencia: string,
|
||||||
|
fechaPago: string,
|
||||||
|
firmaValidacion: string,
|
||||||
|
firmaBanco: string |
||||||
|
|
||||||
|
} |
@ -1,32 +1,33 @@ |
|||||||
export interface IRegister { |
export interface IRegister { |
||||||
id: number; |
id: number |
||||||
usuario: string; |
usuario: string |
||||||
nombre: string; |
nombre: string |
||||||
contrasena: string; |
contrasena: string |
||||||
correo: string; |
correo: string |
||||||
tipoUsuario: number; |
tipoUsuario: number |
||||||
activo: number; |
activo: number |
||||||
fechaAlta: string; |
fechaAlta: string |
||||||
usuarioAlta: number; |
usuarioAlta: number |
||||||
fechaModifico: string; |
fechaModifico: string |
||||||
usuarioModifico: number; |
usuarioModifico: number |
||||||
fechaElimino: string; |
fechaElimino: string |
||||||
usuarioElimino: number; |
usuarioElimino: number |
||||||
motivoElimino: string; |
motivoElimino: string |
||||||
idModulo: number; |
idModulo: number |
||||||
dept: number; |
dept: number |
||||||
tmercancia: number; |
tmercancia: number |
||||||
fechaUltimaVisita: string; |
fechaUltimaVisita: string |
||||||
visitas: number; |
visitas: number |
||||||
internos: number; |
internos: number |
||||||
permisoEspecial: number; |
permisoEspecial: number |
||||||
estadoConfiguracion: number; |
estadoConfiguracion: number |
||||||
fechaValidacionConf: string; |
fechaValidacionConf: string |
||||||
realizoEncuesta: string; |
realizoEncuesta: string |
||||||
encuestaActiva: number; |
encuestaActiva: number |
||||||
fechaLimiteEncuesta: string; |
fechaLimiteEncuesta: string |
||||||
codigoAccesoM: string; |
codigoAccesoM: string |
||||||
tokenAccesoM: string; |
tokenAccesoM: string |
||||||
deviceToken: string; |
deviceToken: string |
||||||
idPerfil: number; |
idPerfil: number |
||||||
|
departamento: string |
||||||
} |
} |
||||||
|
@ -0,0 +1,18 @@ |
|||||||
|
export default interface IRptArcosa{ |
||||||
|
Patente: string,
|
||||||
|
Pedimento: string,
|
||||||
|
PagoPedimento: string,
|
||||||
|
Regimen: string,
|
||||||
|
ValorDls: Number,
|
||||||
|
ValorAduana: Number,
|
||||||
|
Aduana: Number,
|
||||||
|
Planta: string,
|
||||||
|
DTA: string, |
||||||
|
PREV : string
|
||||||
|
IVA: string,
|
||||||
|
IGI : string,
|
||||||
|
CC: string,
|
||||||
|
Total : number |
||||||
|
|
||||||
|
} |
||||||
|
|
@ -0,0 +1,16 @@ |
|||||||
|
export interface IRptFacturasFraccion{ |
||||||
|
factura : string,
|
||||||
|
almacen : string,
|
||||||
|
orden : number ;
|
||||||
|
parte : string,
|
||||||
|
pais : string ,
|
||||||
|
fraccionFacturaXML : string,
|
||||||
|
fraccionGEMCO : string,
|
||||||
|
nicoGEMCO : string;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,10 @@ |
|||||||
|
export default interface IRptFacturasPedimentosPagados{ |
||||||
|
|
||||||
|
Referencia: string
|
||||||
|
Pedido: string |
||||||
|
Factura: string |
||||||
|
UUID: string |
||||||
|
Fecha : string
|
||||||
|
RazonSocial : string |
||||||
|
|
||||||
|
} |
@ -0,0 +1,24 @@ |
|||||||
|
export default interface IRptOperacionesPagadasMissionFood { |
||||||
|
|
||||||
|
TipoOperacion : string,
|
||||||
|
sPedimento: string,
|
||||||
|
UUID :string,
|
||||||
|
FolioFactura : string, |
||||||
|
dFechaFirmaBanco : string,
|
||||||
|
sRazonSocial : string,
|
||||||
|
sRFC : string,
|
||||||
|
sRefrencia : string,
|
||||||
|
sEDocument : string,
|
||||||
|
sHRazonSocial : string,
|
||||||
|
sHidentificadorProv : string,
|
||||||
|
AA : string,
|
||||||
|
RFCAA : string,
|
||||||
|
Incoterm : string,
|
||||||
|
Caja : string,
|
||||||
|
AcuceDoda : string,
|
||||||
|
Transportista : string,
|
||||||
|
Edocument : string |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@ |
|||||||
|
import http from "../common/http-common"; |
||||||
|
import ICatFraccionesVulnerables from '../../Interfaces/Catalogos/ICatFraccionesVulnerables' |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
class FraccionesVulnerablesDataService { |
||||||
|
|
||||||
|
|
||||||
|
constructor() |
||||||
|
{ |
||||||
|
type returnData = [ICatFraccionesVulnerables[]] |
||||||
|
} |
||||||
|
|
||||||
|
getAll() { |
||||||
|
return http.get<ICatFraccionesVulnerables[]>(`/Catalogos/CatFraccionesVulnerables/getAll`); |
||||||
|
} |
||||||
|
|
||||||
|
Append(data: ICatFraccionesVulnerables) { |
||||||
|
return http.post<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Append`, data); |
||||||
|
} |
||||||
|
Delete(id: number) { |
||||||
|
return http.delete<ICatFraccionesVulnerables>(`/Catalogos/CatFraccionesVulnerables/Delete/${id}`); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
export default new FraccionesVulnerablesDataService(); |
@ -0,0 +1,42 @@ |
|||||||
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||||
|
import ICatFraccionesVulnerables from '../../../Interfaces/Catalogos/ICatFraccionesVulnerables'; |
||||||
|
const CatFraccionesVulnerables: ICatFraccionesVulnerables[] = [{id:0, fraccion:0 , nico:'' , activo:0 }] |
||||||
|
const initialState = { CatFraccionesVulnerables } |
||||||
|
|
||||||
|
export const CatFraccionesVulnerablesSlice = createSlice({ |
||||||
|
name: 'CatCorresponsales', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
populateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables[]>) => { |
||||||
|
state.CatFraccionesVulnerables = [] |
||||||
|
state.CatFraccionesVulnerables.push(... action.payload) |
||||||
|
}, |
||||||
|
addCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => { |
||||||
|
var Existe = state.CatFraccionesVulnerables.find(function(item) { |
||||||
|
return item.id === action.payload.id; |
||||||
|
}); |
||||||
|
if (!Existe) state.CatFraccionesVulnerables.push(action.payload) |
||||||
|
}, |
||||||
|
updateCatFraccionesVulnerables : (state, action: PayloadAction<ICatFraccionesVulnerables>) => { |
||||||
|
const i = state.CatFraccionesVulnerables.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.CatFraccionesVulnerables[i] = action.payload; |
||||||
|
else state.CatFraccionesVulnerables.push(action.payload); |
||||||
|
|
||||||
|
}, |
||||||
|
deleteCatFraccionesVulnerables : (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.CatFraccionesVulnerables.filter(data => data.id != action.payload); |
||||||
|
state.CatFraccionesVulnerables=newArr |
||||||
|
}, |
||||||
|
InitCatFraccionesVulnerables : (state, action: PayloadAction<number>) => { |
||||||
|
state.CatFraccionesVulnerables.splice(0,state.CatFraccionesVulnerables.length-1) |
||||||
|
// state.CatCorresponsales = [{id:0, factura:'-Seleccione-', idTrafico:0, valorFacturaDls:0, proveedor:0}]
|
||||||
|
}, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export const { addCatFraccionesVulnerables,
|
||||||
|
populateCatFraccionesVulnerables,
|
||||||
|
updateCatFraccionesVulnerables,
|
||||||
|
deleteCatFraccionesVulnerables, |
||||||
|
InitCatFraccionesVulnerables } = CatFraccionesVulnerablesSlice.actions; |
||||||
|
export default CatFraccionesVulnerablesSlice.reducer; |
@ -0,0 +1,50 @@ |
|||||||
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||||
|
import ICat2096CatConceptosConsulta from '../../../../Components/Clientes/Amazon/Interfaces/I2096CatConceptosConsulta' |
||||||
|
const CatConcetosConsulta: ICat2096CatConceptosConsulta[] = [] |
||||||
|
const initialState = { CatConcetosConsulta } |
||||||
|
|
||||||
|
export const CatConceptosConsultaSlice = createSlice({ |
||||||
|
name: 'CatConceptosConsulta', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
initializeCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => { |
||||||
|
state.CatConcetosConsulta = action.payload |
||||||
|
}, |
||||||
|
populateCatConcetosConsultas: (state, action: PayloadAction<ICat2096CatConceptosConsulta[]>) => { |
||||||
|
action.payload.forEach((newItem) => { |
||||||
|
var Existe = state.CatConcetosConsulta.find(function (onMemoryItem) { |
||||||
|
return onMemoryItem.id === newItem.id |
||||||
|
}) |
||||||
|
if (!Existe) state.CatConcetosConsulta.push(newItem) |
||||||
|
}) |
||||||
|
}, |
||||||
|
addCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||||
|
var Existe = state.CatConcetosConsulta.find(function (item) { |
||||||
|
return item.id === action.payload.id |
||||||
|
}) |
||||||
|
if (!Existe) state.CatConcetosConsulta.push(action.payload) |
||||||
|
}, |
||||||
|
updateCatConcetosConsulta: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||||
|
const i = state.CatConcetosConsulta.findIndex( |
||||||
|
(_element) => _element.id === action.payload.id |
||||||
|
) |
||||||
|
if (i > -1) state.CatConcetosConsulta[i] = action.payload |
||||||
|
else state.CatConcetosConsulta.push(action.payload) |
||||||
|
}, |
||||||
|
updateCatConcetosConsultaDetail: (state, action: PayloadAction<ICat2096CatConceptosConsulta>) => { |
||||||
|
const i = state.CatConcetosConsulta.findIndex( |
||||||
|
(_element) => _element.id === action.payload.id |
||||||
|
) |
||||||
|
if (i > -1) state.CatConcetosConsulta[i] = action.payload |
||||||
|
else state.CatConcetosConsulta.push(action.payload) |
||||||
|
}, |
||||||
|
deleteCatConcetosConsulta: (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.CatConcetosConsulta.filter((data) => data.id != action.payload) |
||||||
|
state.CatConcetosConsulta = newArr |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
export const { initializeCatConcetosConsulta, addCatConcetosConsulta, populateCatConcetosConsultas, updateCatConcetosConsulta, deleteCatConcetosConsulta } = |
||||||
|
CatConceptosConsultaSlice.actions |
||||||
|
export default CatConceptosConsultaSlice.reducer |
Loading…
Reference in new issue