From 50dae88430f1a59d9f32d490ee31ea9124611ad9 Mon Sep 17 00:00:00 2001 From: IO420 <320154041@pcpuma.acatlan.unam.mx> Date: Mon, 3 Nov 2025 19:07:01 -0600 Subject: [PATCH] added fetch perifericos and change name --- .../{forgotPassword => CambiarPass}/page.tsx | 2 +- src/app/(Administrador)/crearCuenta/page.tsx | 3 +- src/app/layout.tsx | 4 +- src/components/AgregarEquipo.tsx | 56 ++++++++++++-- src/components/Editar.tsx | 76 +++++++++++++++---- src/components/header.tsx | 6 +- src/data/areas.ts | 2 +- 7 files changed, 121 insertions(+), 28 deletions(-) rename src/app/(Administrador)/{forgotPassword => CambiarPass}/page.tsx (98%) diff --git a/src/app/(Administrador)/forgotPassword/page.tsx b/src/app/(Administrador)/CambiarPass/page.tsx similarity index 98% rename from src/app/(Administrador)/forgotPassword/page.tsx rename to src/app/(Administrador)/CambiarPass/page.tsx index ff68644..e10ad67 100644 --- a/src/app/(Administrador)/forgotPassword/page.tsx +++ b/src/app/(Administrador)/CambiarPass/page.tsx @@ -7,7 +7,7 @@ import toast from "react-hot-toast"; import "../../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio import Link from "next/link"; -export default function ForgotPasswordPage() { +export default function Page() { const [email, setEmail] = useState(""); const [loading, setLoading] = useState(false); const router = useRouter(); diff --git a/src/app/(Administrador)/crearCuenta/page.tsx b/src/app/(Administrador)/crearCuenta/page.tsx index b3cc2c2..e5b260b 100644 --- a/src/app/(Administrador)/crearCuenta/page.tsx +++ b/src/app/(Administrador)/crearCuenta/page.tsx @@ -9,7 +9,7 @@ import axios from "axios"; import { useRouter } from "next/navigation"; import toast from "react-hot-toast"; -function CrearCuenta() { +export default function Page() { const [nombre, setNombre] = useState(""); const [correo, setCorreo] = useState(""); const [password, setPassword] = useState(""); @@ -116,4 +116,3 @@ function CrearCuenta() { ); } -export default CrearCuenta; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 73a562e..742b3e6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import Header from "../components/header"; import { Inter, Montserrat } from "next/font/google"; -import "../app/styles/base/globales.scss"; import { Toaster } from "react-hot-toast"; +import "../app/styles/base/globales.scss"; const inter = Inter({ subsets: ["latin"], @@ -21,7 +21,7 @@ export default function RootLayout({ }) { return ( - +
{children} diff --git a/src/components/AgregarEquipo.tsx b/src/components/AgregarEquipo.tsx index 6d8d48b..8934616 100644 --- a/src/components/AgregarEquipo.tsx +++ b/src/components/AgregarEquipo.tsx @@ -19,6 +19,7 @@ export default function Page() { const router = useRouter(); const [formData, setFormData] = useState({ + inventario: "", serie: "", marca: "", modelo: "", @@ -31,9 +32,14 @@ export default function Page() { adscripcion: "", lugar: "", responsable: "", + tipoPeriferico: "", }); - formData.serie = inventario ? inventario : ""; + useEffect(() => { + if (inventario) { + setFormData((prev) => ({ ...prev, inventario })); + } + }, [inventario]); // Tipos de datos interface TipoUso { @@ -81,6 +87,7 @@ export default function Page() { SistemaOperativo[] >([]); const [procesadores, setProcesadores] = useState([]); + const [perifericos, setPerifericos] = useState([]); const [suggestions, setSuggestions] = useState({ adscripcion: [] as string[], @@ -155,6 +162,27 @@ export default function Page() { fetchProcesador(); }, [tiposEquipo]); + useEffect(() => { + const fetchPerifericos = async () => { + if (formData.tipoEquipo !== "PERIFÉRICO") return; + + const token = Cookies.get("token"); + const headers = { Authorization: `Bearer ${token}` }; + + try { + const response = await axios.get(`${api_url}/equipos/perifericos`, { + headers, + }); + setPerifericos(response.data); + } catch (err) { + console.error(err); + toast.error("No se pudieron cargar los periféricos"); + } + }; + + fetchPerifericos(); + }, [formData.tipoEquipo]); + const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })); @@ -201,6 +229,7 @@ export default function Page() { await axios.post(`${api_url}/equipos/crear`, formData, { headers }); toast.success("Equipo guardado correctamente"); setFormData({ + inventario: "", serie: "", marca: "", modelo: "", @@ -213,6 +242,7 @@ export default function Page() { adscripcion: "", lugar: "", responsable: "", + tipoPeriferico: "", }); } catch (err) { toast.error("Error al guardar el equipo"); @@ -236,8 +266,10 @@ export default function Page() { required type="text" placeholder="Ingresa Inventario" - value={formData.serie} - onChange={(e) => handleInputChange("serie", e.target.value)} + value={formData.inventario} + onChange={(e) => + handleInputChange("inventario", e.target.value) + } />
@@ -246,7 +278,7 @@ export default function Page() { required type="text" placeholder="Ingresa serie" - value={""} + value={formData.serie} onChange={(e) => handleInputChange("serie", e.target.value)} />
@@ -369,9 +401,19 @@ export default function Page() { {!mostrarCamposComputadora && (
- - + handleInputChange("tipoPeriferico", e.target.value) + } + > + + {perifericos.map((p: any) => ( + + ))}
)} diff --git a/src/components/Editar.tsx b/src/components/Editar.tsx index ab76498..935b674 100644 --- a/src/components/Editar.tsx +++ b/src/components/Editar.tsx @@ -5,16 +5,20 @@ import { useEffect, useState } from "react"; import axios from "axios"; import Cookies from "js-cookie"; import toast from "react-hot-toast"; +import { SO_POR_EQUIPO } from "@/data/so_por_equipo"; +import { AREAS } from "@/data/areas"; import "../app/styles/layout/agregarEquipo.scss"; import "./editar.css"; -import { SO_POR_EQUIPO } from "@/data/so_por_equipo"; import { PROCESADORES_POR_EQUIPO } from "@/data/procesadores"; +import { useRouter } from "next/navigation"; export default function Editar() { const searchParams = useSearchParams(); const inventario = searchParams.get("equipoId"); + const router = useRouter(); + const [formData, setFormData] = useState({ inventario: "", serie: "", @@ -76,6 +80,10 @@ export default function Editar() { >([]); const [procesadores, setProcesadores] = useState([]); + const [suggestions, setSuggestions] = useState({ + adscripcion: [] as string[], + }); + const api_url = process.env.NEXT_PUBLIC_API_URL; const mostrarCamposComputadora = formData.tipoEquipo !== "PERIFÉRICO"; @@ -178,8 +186,42 @@ export default function Editar() { } }; + 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; + } + + // Normaliza para quitar acentos y poner en minúsculas + const normalize = (str: string) => + str + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + .toLowerCase() + .trim(); + + const searchValue = normalize(value); + + // Busca coincidencias + const matches = AREAS.map((a) => a.label) + .filter((label) => normalize(label).includes(searchValue)) + .slice(0, 10); // máximo 10 sugerencias + + setSuggestions((prev) => ({ ...prev, adscripcion: matches })); + } + }; + + const handleSelectSuggestion = (field: string, value: string) => { + setFormData((prev) => ({ ...prev, [field]: value })); + setSuggestions((prev) => ({ ...prev, [field]: [] })); + }; + const handleCancelar = () => { - toast("Acción cancelada"); + router.push("/Escaner"); }; return ( @@ -339,21 +381,29 @@ export default function Editar() { )} -
+
- + /> + {suggestions.adscripcion.length > 0 && ( +
    + {suggestions.adscripcion.map((s) => ( +
  • handleSelectSuggestion("adscripcion", s)} + > + {s} +
    • + ))} +
+ )}
diff --git a/src/components/header.tsx b/src/components/header.tsx index f7eb04d..df18e34 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -8,7 +8,8 @@ import { usePathname } from "next/navigation"; function Header() { const pathname = usePathname(); - const rutasConBar = ["/Escaner", "/AgregarEquipo"]; + const publicNav = ["/Escaner", "/AgregarEquipo", "/Editar"]; + const privateNav = ["/Reporte", "/CrearCuenta", "/CambiarPass"]; return (
@@ -40,7 +41,8 @@ function Header() { alignItems: "end", }} > - {rutasConBar.includes(pathname) && } + {publicNav.includes(pathname) && } + {privateNav.includes(pathname) && }
); diff --git a/src/data/areas.ts b/src/data/areas.ts index 41753fd..1dcb0eb 100644 --- a/src/data/areas.ts +++ b/src/data/areas.ts @@ -1,4 +1,4 @@ -//Esto es culpa de los webservices +//Esto es culpa de los webservices y de santi(wizard) attentamente IO export const AREAS: Array<{ id: number; label: string }> = [ { id: 128, label: "Coordinación de Actividades Deportivas y Recreativas" },