Merge branch 'newRptFraccionesNicosReferenciaFront'

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'
@@ -11,6 +11,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 {}
@@ -31,20 +37,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 = [
     {
@@ -123,6 +128,9 @@ export default function CatFraccionesVulnerables(props: IProps) {
     setNico(data.nico)
   }
 
+  // const truncatedValue = inputValue.substring(0, 8)
+  // setFraccion(truncatedValue)
+
   const generaReporte = () => {
     setTipoReporte(0)
     FraccionesVulnerables.getAll()
@@ -130,6 +138,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')
@@ -155,7 +167,7 @@ export default function CatFraccionesVulnerables(props: IProps) {
 
     setSelectedRow(null)
     setFraccion(0)
-    setNico('')
+    setNico('0')
     setActivo(0) // Establecer a 0 (No)
     setEditMode(true)
     setId(0)
@@ -194,14 +206,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) {
+      const fraccionAsString = Fraccion.toString()
-        console.log(
+
-          'El valor de Nico tiene más de 2 caracteres. No se actualizará la tabla ni se realizará la petición uploadFile.'
+      if (fraccionAsString.length !== 8 || Nico.length !== 2) {
-        )
+        setHeader('Error')
-        return
+
+        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 = {
@@ -223,28 +287,35 @@ export default function CatFraccionesVulnerables(props: IProps) {
         // console.log('este el id normal ' + id)
 
         // Restablecer valores de los campos
-        setFraccion(0)
+        handleCreateNewRecord()
-        setNico('')
-        setActivo(1)
-        setEditMode(false)
-        setShowModal(false)
       } catch (error) {
         console.error('Error durante la inserción:', error)
       }
     } else {
       // Aquí actualizamos el registro existente
 
-      if (Nico.length > 2) {
+      const fraccionAsString = Fraccion.toString()
-        console.log(
+
-          'El valor de Nico tiene más de 2 caracteres. No se actualizará la tabla ni se realizará la petición uploadFile.'
+      if (fraccionAsString.length !== 8) {
-        )
+        setHeader('Error')
-        return // Sale de la función sin hacer nada más
+        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) {
@@ -289,12 +360,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>
@@ -329,9 +401,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',
@@ -351,9 +426,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',
@@ -481,6 +561,15 @@ export default function CatFraccionesVulnerables(props: IProps) {
           </div>
         </Card.Body>
       </Card>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
     </div>
   )
 }