diff --git a/src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx b/src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx index b0a24af..04d9d99 100644 --- a/src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx +++ b/src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx @@ -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('') // Specify the type of 'header' // const [msgColor, setMsgColor] = useState('primary'); // Specify the type of 'msgColor' - const [show, setShowMsg] = useState(false) // Specify the type of 'show' + const [show, setShowMsg] = useState(false) // Specify the type of 'show' const [msg, setMsg] = useState('') // Specify the type of 'msg' - const [id, setId] = useState(0) // Specify the type of 'id' const [Fraccion, setFraccion] = useState(0) // Specify the type of 'Fraccion' - const [Nico, setNico] = useState('') // Specify the type of 'Nico' + const [Nico, setNico] = useState('0') // Specify the type of 'Nico' const [Activo, setActivo] = useState(0) // Specify the type of 'Activo' - const [showModal, setShowModal] = useState(false) const [editMode, setEditMode] = useState(false) // Nuevo estado para controlar el modo de edición const [selectedRow, setSelectedRow] = useState(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) => { + 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) => { + 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) => { + const value = e.target.value + if (value.length <= 2) { + setNico(value) + } + } + + const handleNicoKeyDown = (e: React.KeyboardEvent) => { + if (e.key.length === 1 && Nico.length >= 2) { + e.preventDefault() // Evitar agregar más caracteres si ya hay 2 + } + } + + const handleNicoBlur = (e: React.FocusEvent) => { + 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) => { 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 (
@@ -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) { 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) {
+ { + setShowMsg(false) + }} + /> ) }