alfonso
/
GEMCOFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Se agregaron las validaciones para la fraccion y el usuario

Browse Source
NewRptFraccionesNicosReferenciaFront
Luis Rendon 1 year ago
parent 5f5dbae7a2
commit be6b7dab03
1 changed files with 112 additions and 23 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 135
      src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx

135
src/Components/Catalogos/CatFraccionesVulnerables/CatFraccionesVulnerables.tsx
Unescape View File

@ -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>
)
}

Write Preview
Loading…
Cancel
Save