|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import React, { FC, useEffect, useState } from 'react' |
|
|
|
|
import { Button, Card, Col, Form, Modal, Row } from 'react-bootstrap' |
|
|
|
|
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' |
|
|
|
@ -12,6 +12,12 @@ 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 {} |
|
|
|
@ -32,20 +38,19 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
// 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<boolean>(false) // Specify the type of 'show'
|
|
|
|
|
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>('') // Specify the type of 'Nico'
|
|
|
|
|
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 = [ |
|
|
|
|
{ |
|
|
|
@ -124,6 +129,9 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
setNico(data.nico) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// const truncatedValue = inputValue.substring(0, 8)
|
|
|
|
|
// setFraccion(truncatedValue)
|
|
|
|
|
|
|
|
|
|
const generaReporte = () => { |
|
|
|
|
setTipoReporte(0) |
|
|
|
|
FraccionesVulnerables.getAll() |
|
|
|
@ -131,6 +139,10 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
setData(response.data) |
|
|
|
|
setDataOriginal(response.data) |
|
|
|
|
// uploadAllRows(response.data)
|
|
|
|
|
|
|
|
|
|
setHeader('Informativo') |
|
|
|
|
setMsg('Se encontro la siguiente informacion...') |
|
|
|
|
setShowMsg(true) |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
@ -156,7 +168,7 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
|
|
|
|
|
setSelectedRow(null) |
|
|
|
|
setFraccion(0) |
|
|
|
|
setNico('') |
|
|
|
|
setNico('0') |
|
|
|
|
setActivo(0) // Establecer a 0 (No)
|
|
|
|
|
setEditMode(true) |
|
|
|
|
setId(0) |
|
|
|
@ -200,14 +212,66 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
//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) { |
|
|
|
|
if (Nico.length > 2) { |
|
|
|
|
console.log( |
|
|
|
|
'El valor de Nico tiene más de 2 caracteres. No se actualizará la tabla ni se realizará la petición uploadFile.' |
|
|
|
|
) |
|
|
|
|
return |
|
|
|
|
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 = { |
|
|
|
@ -229,28 +293,35 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
// console.log('este el id normal ' + id)
|
|
|
|
|
|
|
|
|
|
// Restablecer valores de los campos
|
|
|
|
|
setFraccion(0) |
|
|
|
|
setNico('') |
|
|
|
|
setActivo(1) |
|
|
|
|
setEditMode(false) |
|
|
|
|
setShowModal(false) |
|
|
|
|
handleCreateNewRecord() |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error('Error durante la inserción:', error) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
// Aquí actualizamos el registro existente
|
|
|
|
|
|
|
|
|
|
if (Nico.length > 2) { |
|
|
|
|
console.log( |
|
|
|
|
'El valor de Nico tiene más de 2 caracteres. No se actualizará la tabla ni se realizará la petición uploadFile.' |
|
|
|
|
) |
|
|
|
|
return // Sale de la función sin hacer nada más
|
|
|
|
|
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) { |
|
|
|
@ -284,12 +355,13 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Función para manejar el cambio en el campo de entrada de la fracción
|
|
|
|
|
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> |
|
|
|
@ -324,9 +396,12 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
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', |
|
|
|
@ -346,9 +421,14 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
<FormControl |
|
|
|
|
type="text" |
|
|
|
|
value={Nico} |
|
|
|
|
onChange={(e) => setNico(e.target.value)} |
|
|
|
|
// 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', |
|
|
|
@ -476,6 +556,15 @@ export default function CatFraccionesVulnerables(props: IProps) { |
|
|
|
|
</div> |
|
|
|
|
</Card.Body> |
|
|
|
|
</Card> |
|
|
|
|
<MsgInformativo |
|
|
|
|
show={show} |
|
|
|
|
msg={msg} |
|
|
|
|
header={header} |
|
|
|
|
msgColor={msgColor} |
|
|
|
|
closeToast={() => { |
|
|
|
|
setShowMsg(false) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|