From afe6410bfb68b8e59034dc4c0a96a8028512fcd1 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Mon, 3 Nov 2025 16:33:07 -0600 Subject: [PATCH] added data and restrictions --- src/app/styles/layout/agregarEquipo.scss | 30 ++++++ src/components/AgregarEquipo.tsx | 72 +++++++++++--- src/components/Editar.tsx | 34 ++++--- src/data/areas.ts | 114 +++++++++++++++++++++++ src/data/procesadores.ts | 97 +++++++++++++++++++ src/data/so_por_equipo.ts | 36 +++++++ 6 files changed, 355 insertions(+), 28 deletions(-) create mode 100644 src/data/areas.ts create mode 100644 src/data/procesadores.ts create mode 100644 src/data/so_por_equipo.ts diff --git a/src/app/styles/layout/agregarEquipo.scss b/src/app/styles/layout/agregarEquipo.scss index 1e5843a..c4f4aeb 100644 --- a/src/app/styles/layout/agregarEquipo.scss +++ b/src/app/styles/layout/agregarEquipo.scss @@ -116,6 +116,36 @@ textarea { } } +.formGroup { + position: relative; +} + +.suggestions { + position: absolute; // mantiene fuera del flujo + top: 100%; // justo debajo del input + left: 0; + width: 100%; + background: #fff; + border: 1px solid #ccc; + border-radius: 6px; + list-style: none; + margin: 4px 0 0 0; + padding: 0; + max-height: 200px; + overflow-y: auto; + z-index: 10; + font-size: 12px; +} + +.suggestions li { + padding: 8px; + cursor: pointer; + + &:hover { + background: #f2f2f2; + } +} + @media (max-width: 1075px) { .equipoForm { flex-wrap: wrap; diff --git a/src/components/AgregarEquipo.tsx b/src/components/AgregarEquipo.tsx index 0500793..6d8d48b 100644 --- a/src/components/AgregarEquipo.tsx +++ b/src/components/AgregarEquipo.tsx @@ -7,11 +7,17 @@ import Cookies from "js-cookie"; import toast from "react-hot-toast"; import "../app/styles/layout/agregarEquipo.scss"; +import { AREAS } from "@/data/areas"; +import { SO_POR_EQUIPO } from "@/data/so_por_equipo"; +import { PROCESADORES_POR_EQUIPO } from "@/data/procesadores"; +import { useRouter } from "next/navigation"; export default function Page() { const searchParams = useSearchParams(); const inventario = searchParams.get("equipoId"); + const router = useRouter(); + const [formData, setFormData] = useState({ serie: "", marca: "", @@ -57,7 +63,7 @@ export default function Page() { interface Marca { id_marca: number; - tipo_marca: string; + marca: string; } interface Adscripcion { @@ -80,7 +86,7 @@ export default function Page() { adscripcion: [] as string[], }); - const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora"; + const mostrarCamposComputadora = formData.tipoEquipo !== "PERIFÉRICO"; const api_url = process.env.NEXT_PUBLIC_API_URL; useEffect(() => { @@ -151,6 +157,30 @@ export default function Page() { const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })); + + if (field === "adscripcion") { + if (value.length < 3) { + // Si no hay al menos 3 letras, no mostrar sugerencias + setSuggestions((prev) => ({ ...prev, adscripcion: [] })); + return; + } + + // Función para normalizar: minúsculas y quitar acentos + const normalize = (str: string) => + str + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + .toLowerCase() + .trim(); + + const searchValue = normalize(value); + + const matches = AREAS.map((a) => a.label) + .filter((label) => normalize(label).includes(searchValue)) + .slice(0, 5); // máximo 10 sugerencias + + setSuggestions((prev) => ({ ...prev, adscripcion: matches })); + } }; const handleSelectSuggestion = (field: string, value: string) => { @@ -159,6 +189,12 @@ export default function Page() { }; const handleGuardar = async () => { + const adscripcionesValidas = AREAS.map((a) => a.label); + if (!adscripcionesValidas.includes(formData.adscripcion)) { + toast.error("Debes seleccionar una adscripción válida."); + return; + } + try { const token = Cookies.get("token"); const headers = { Authorization: `Bearer ${token}` }; @@ -184,7 +220,7 @@ export default function Page() { }; const handleCancelar = () => { - toast.error("Acción cancelada"); + router.push("/Escaner"); }; return ( @@ -224,8 +260,8 @@ export default function Page() { > {marcas.map((m) => ( - ))} @@ -304,9 +340,9 @@ export default function Page() { } > - {procesadores.map((p) => ( - ))} @@ -321,12 +357,9 @@ export default function Page() { } > - {sistemasOperativos.map((so) => ( - ))} @@ -334,7 +367,16 @@ export default function Page() { )} -
+ {!mostrarCamposComputadora && ( +
+ + +
+ )} + +
([]); const api_url = process.env.NEXT_PUBLIC_API_URL; - const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora"; + const mostrarCamposComputadora = formData.tipoEquipo !== "PERIFÉRICO"; // 🔹 Cargar catálogos useEffect(() => { @@ -214,8 +216,8 @@ export default function Editar() { > {marcas.map((m) => ( - ))} @@ -298,9 +300,9 @@ export default function Editar() { } > - {procesadores.map((p) => ( - ))} @@ -318,12 +320,9 @@ export default function Editar() { } > - {sistemasOperativos.map((so) => ( - ))} @@ -331,6 +330,15 @@ export default function Editar() { )} + {!mostrarCamposComputadora && ( +
+ + +
+ )} +