modified editar and agregarequipo

2025-10-31 14:10:00 -06:00
parent 12f6f4cc01
commit dc79c55f1e
5 changed files with 145 additions and 52 deletions
@@ -22,13 +22,52 @@ export default function Page() {
    responsable: "",
  });

-  const [tiposUso, setTiposUso] = useState<string[]>([]);
-  const [marcas, setMarcas] = useState<string[]>([]);
-  const [estados, setEstados] = useState<string[]>([]);
-  const [adscripciones, setAdscripciones] = useState<string[]>([]);
-  const [tiposEquipo, setTiposEquipo] = useState<string[]>([]);
-  const [sistemasOperativos, setSistemasOperativos] = useState<string[]>([]);
-  const [procesadores, setProcesadores] = useState<string[]>([]);
+  // Tipos de datos
+  interface TipoUso {
+    id_tipo_uso: number;
+    tipo_uso: string;
+  }
+
+  interface Estado {
+    id_estado: number;
+    estado: string;
+  }
+
+  interface TipoEquipo {
+    id_tipo_de_equipo: number;
+    tipo_equipo: string;
+  }
+
+  interface SistemaOperativo {
+    id_sistema_operativo: number;
+    sistema_operativo: string;
+  }
+
+  interface Procesador {
+    id_procesador: number;
+    procesador: string;
+  }
+
+  interface Marca {
+    id_marca: number;
+    tipo_marca: string;
+  }
+
+  interface Adscripcion {
+    id_adscripcion: number;
+    adscripcion: string;
+  }
+
+  // Estados
+  const [tiposUso, setTiposUso] = useState<TipoUso[]>([]);
+  const [marcas, setMarcas] = useState<Marca[]>([]);
+  const [estados, setEstados] = useState<Estado[]>([]);
+  const [adscripciones, setAdscripciones] = useState<Adscripcion[]>([]);
+  const [tiposEquipo, setTiposEquipo] = useState<TipoEquipo[]>([]);
+  const [sistemasOperativos, setSistemasOperativos] = useState<
+    SistemaOperativo[]
+  >([]);
+  const [procesadores, setProcesadores] = useState<Procesador[]>([]);

  const [suggestions, setSuggestions] = useState({
    adscripcion: [] as string[],
@@ -86,7 +125,7 @@ export default function Page() {
    };

    fetchData();
-  }, []);
+  }, [api_url]);

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
@@ -98,15 +137,32 @@ export default function Page() {
  };

  const handleGuardar = async () => {
-    const token = Cookies.get("token");
-    const headers = { Authorization: `Bearer ${token}` };
-
-    await axios.post(`${api_url}/equipos/crear`, formData, { headers });
-    toast.success("Equipo guardado");
+    try {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+      await axios.post(`${api_url}/equipos/crear`, formData, { headers });
+      toast.success("Equipo guardado correctamente");
+      setFormData({
+        serie: "",
+        marca: "",
+        modelo: "",
+        tipoEquipo: "",
+        estado: "",
+        sistemaOperativo: "",
+        procesador: "",
+        tipoUso: "",
+        observaciones: "",
+        adscripcion: "",
+        lugar: "",
+        responsable: "",
+      });
+    } catch (err) {
+      toast.error("Error al guardar el equipo");
+    }
  };

  const handleCancelar = () => {
-    toast.success("Acción cancelada");
+    toast.error("Acción cancelada");
  };

  return (
@@ -119,6 +175,7 @@ export default function Page() {
            <div className="formGroup">
              <label>Serie</label>
              <input
+                required
                type="text"
                placeholder="Ingresa serie"
                value={formData.serie}
@@ -129,13 +186,14 @@ export default function Page() {
            <div className="formGroup">
              <label>Marca</label>
              <select
+                required
                value={formData.marca}
                onChange={(e) => handleInputChange("marca", e.target.value)}
              >
                <option value="">Selecciona una marca</option>
                {marcas.map((m) => (
-                  <option key={m} value={m}>
-                    {m}
+                  <option key={m.id_marca} value={m.tipo_marca}>
+                    {m.tipo_marca}
                  </option>
                ))}
              </select>
@@ -154,6 +212,7 @@ export default function Page() {
            <div className="formGroup">
              <label>Tipo de equipo</label>
              <select
+                required
                value={formData.tipoEquipo}
                onChange={(e) =>
                  handleInputChange("tipoEquipo", e.target.value)
@@ -161,8 +220,8 @@ export default function Page() {
              >
                <option value="">Selecciona tipo de equipo</option>
                {tiposEquipo.map((t) => (
-                  <option key={t} value={t}>
-                    {t}
+                  <option key={t.id_tipo_de_equipo} value={t.tipo_equipo}>
+                    {t.tipo_equipo}
                  </option>
                ))}
              </select>
@@ -171,13 +230,14 @@ export default function Page() {
            <div className="formGroup">
              <label>Estado</label>
              <select
+                required
                value={formData.estado}
                onChange={(e) => handleInputChange("estado", e.target.value)}
              >
                <option value="">Selecciona estado</option>
                {estados.map((e) => (
-                  <option key={e} value={e}>
-                    {e}
+                  <option key={e.id_estado} value={e.estado}>
+                    {e.estado}
                  </option>
                ))}
              </select>
@@ -187,15 +247,16 @@ export default function Page() {
          {/* Columna Centro */}
          <div className="column">
            <div className="formGroup">
-              <label>Tipo uso</label>
+              <label>Tipo de uso</label>
              <select
+                required
                value={formData.tipoUso}
                onChange={(e) => handleInputChange("tipoUso", e.target.value)}
              >
                <option value="">Selecciona tipo de uso</option>
                {tiposUso.map((t) => (
-                  <option key={t} value={t}>
-                    {t}
+                  <option key={t.id_tipo_uso} value={t.tipo_uso}>
+                    {t.tipo_uso}
                  </option>
                ))}
              </select>
@@ -213,8 +274,8 @@ export default function Page() {
                  >
                    <option value="">Selecciona procesador</option>
                    {procesadores.map((p) => (
-                      <option key={p} value={p}>
-                        {p}
+                      <option key={p.id_procesador} value={p.procesador}>
+                        {p.procesador}
                      </option>
                    ))}
                  </select>
@@ -230,8 +291,11 @@ export default function Page() {
                  >
                    <option value="">Selecciona sistema operativo</option>
                    {sistemasOperativos.map((so) => (
-                      <option key={so} value={so}>
-                        {so}
+                      <option
+                        key={so.id_sistema_operativo}
+                        value={so.sistema_operativo}
+                      >
+                        {so.sistema_operativo}
                      </option>
                    ))}
                  </select>
@@ -242,6 +306,7 @@ export default function Page() {
            <div className="formGroup">
              <label>Adscripción</label>
              <input
+                required
                type="text"
                placeholder="Selecciona adscripción"
                value={formData.adscripcion}
@@ -264,7 +329,6 @@ export default function Page() {
            </div>
          </div>

-          {/* Columna Derecha */}
          <div className="column">
            <div className="formGroup">
              <label>Lugar</label>
@@ -42,11 +42,13 @@ export default function Dashboard() {
      if (data) {
        router.push(`/Editar?equipoId=${data.id}`);
      } else {
-        router.push(`/AgregarEquipo?equipoId=${code}`);
+        toast.error(`No se encontro el equipo ${data.id}`);
+        router.push(`/Editar?equipoId=${data.id}`);
      }
    } catch (error) {
-      router.push(`/AgregarEquipo?equipoId=${code}`);
+      toast.error("Error No se encontro el equipo");
    }
+    toast(`${code}`);
  };

  return (
@@ -27,7 +27,6 @@ export default function BarcodeScanner({ onScan }: BarcodeScannerProps) {
  useEffect(() => {
    if (!scannerRef.current) return;

-    // ✅ Sin `any`: usamos un objeto literal tipado implícitamente
    const config: QuaggaConfig = {
      inputStream: {
        name: "Live",
@@ -10,9 +10,10 @@ import toast from "react-hot-toast";

 export default function Editar() {
  const searchParams = useSearchParams();
-  const equipoId = searchParams.get("equipoId");
+  const inventario = searchParams.get("equipoId");

  const [formData, setFormData] = useState({
+    inventario: "",
    serie: "",
    marca: "",
    modelo: "",
@@ -38,6 +39,7 @@ export default function Editar() {
  const api_url = process.env.NEXT_PUBLIC_API_URL;
  const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";

+  // 🔹 Cargar catálogos
  useEffect(() => {
    const fetchCatalogos = async () => {
      const token = Cookies.get("token");
@@ -78,28 +80,58 @@ export default function Editar() {
    fetchCatalogos();
  }, []);

+  // 🔹 Obtener equipo por inventario
  useEffect(() => {
    const fetchEquipo = async () => {
+      if (!inventario) return;
      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      try {
-        const response = await axios.get(`${api_url}/equipos/${equipoId}`, {
-          headers,
+        const response = await axios.get(
+          `${api_url}/equipos/buscar/${inventario}`,
+          {
+            headers,
+          }
+        );
+
+        const equipo = response.data;
+
+        setFormData({
+          inventario: equipo.inventario || "",
+          serie: equipo.serie || "",
+          marca: equipo.marca?.marca || "", // <- relación
+          modelo: equipo.modelo || "",
+          tipoEquipo: equipo.tipoEquipo?.tipo || "",
+          estado: equipo.estado?.estado || "",
+          sistemaOperativo: equipo.sistemaOperativo?.nombre || "",
+          procesador: equipo.procesador?.nombre || "",
+          tipoUso: equipo.tipoUso?.tipo || "",
+          observaciones: equipo.observaciones || "",
+          adscripcion: equipo.adscripcion?.adscripcion || "",
+          lugar: equipo.lugar || "",
+          responsable: equipo.responsable || "", // <- devuelto por searchResponsable
        });
-        setFormData(response.data);
      } catch (error) {
        console.error("Error al obtener el equipo:", error);
        toast.error("No se pudo cargar la información del equipo.");
      }
    };

-    if (equipoId) fetchEquipo();
-  }, [equipoId]);
+    fetchEquipo();
+  }, [inventario]);

+  // 🔹 Guardar cambios
  const handleGuardar = async () => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
    try {
-      await axios.patch(`${api_url}/equipos/update/${equipoId}`, formData);
+      await axios.patch(
+        `${api_url}/equipos/update/${formData.inventario}`,
+        formData,
+        { headers }
+      );
      toast.success("Equipo actualizado correctamente");
    } catch (error) {
      console.error("Error al guardar:", error);
@@ -115,17 +147,21 @@ export default function Editar() {
    <div className="agregarEquipoContainer">
      <div className="innerContainer">
        <h2 className="information">
-          {equipoId ? `Editar Equipo (${equipoId})` : "Agregar Equipo"}
+          {inventario ? `Editar Equipo (${inventario})` : "Agregar Equipo"}
        </h2>

        <form className="equipoForm">
          {/* Columna 1 */}
          <div className="column">
+            <div className="formGroup">
+              <label>Inventario</label>
+              <input type="text" value={formData.inventario} disabled />
+            </div>
+
            <div className="formGroup">
              <label>Serie</label>
              <input
                type="text"
-                placeholder="Ingresa serie"
                value={formData.serie}
                onChange={(e) =>
                  setFormData({ ...formData, serie: e.target.value })
@@ -154,7 +190,6 @@ export default function Editar() {
              <label>Modelo</label>
              <input
                type="text"
-                placeholder="Ingresa modelo"
                value={formData.modelo}
                onChange={(e) =>
                  setFormData({ ...formData, modelo: e.target.value })
@@ -170,7 +205,7 @@ export default function Editar() {
                  setFormData({ ...formData, tipoEquipo: e.target.value })
                }
              >
-                <option value="">Selecciona tipo de equipo</option>
+                <option value="">Selecciona tipo</option>
                {tiposEquipo.map((t) => (
                  <option key={t} value={t}>
                    {t}
@@ -207,7 +242,7 @@ export default function Editar() {
                  setFormData({ ...formData, tipoUso: e.target.value })
                }
              >
-                <option value="">Selecciona tipo de uso</option>
+                <option value="">Selecciona uso</option>
                {tiposUso.map((t) => (
                  <option key={t} value={t}>
                    {t}
@@ -276,12 +311,7 @@ export default function Editar() {

            <div className="formGroup">
              <label>Responsable</label>
-              <input
-                type="text"
-                value={formData.responsable}
-                disabled
-                placeholder="Responsable asignado"
-              />
+              <input type="text" value={formData.responsable} disabled />
            </div>
          </div>

@@ -290,7 +320,6 @@ export default function Editar() {
            <div className="formGroup">
              <label>Lugar</label>
              <textarea
-                placeholder="Ingresa lugar"
                value={formData.lugar}
                onChange={(e) =>
                  setFormData({ ...formData, lugar: e.target.value })
@@ -303,7 +332,6 @@ export default function Editar() {
            <div className="formGroup">
              <label>Observaciones</label>
              <textarea
-                placeholder="Ingresa observaciones"
                value={formData.observaciones}
                onChange={(e) =>
                  setFormData({ ...formData, observaciones: e.target.value })
@@ -13,6 +13,6 @@ export function middleware(request: NextRequest) {
 }

 export const config = {
-  matcher: ["/AgregarEquipo", "/Escaner"],
+  matcher: [],
 };
 //IO