builded
This commit is contained in:
@@ -1,385 +1,11 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import dynamic from "next/dynamic";
|
||||||
import axios from "axios";
|
|
||||||
import Cookies from "js-cookie";
|
const AgregarEquipo = dynamic(() => import("@/components/AgregarEquipo"), {
|
||||||
import toast from "react-hot-toast";
|
ssr: false,
|
||||||
import "../../styles/layout/agregarEquipo.scss";
|
});
|
||||||
import { useSearchParams } from "next/navigation";
|
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const searchParams = useSearchParams();
|
return <AgregarEquipo />;
|
||||||
const inventario = searchParams.get("equipoId");
|
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
serie: "",
|
|
||||||
marca: "",
|
|
||||||
modelo: "",
|
|
||||||
tipoEquipo: "",
|
|
||||||
estado: "",
|
|
||||||
sistemaOperativo: "",
|
|
||||||
procesador: "",
|
|
||||||
tipoUso: "",
|
|
||||||
observaciones: "",
|
|
||||||
adscripcion: "",
|
|
||||||
lugar: "",
|
|
||||||
responsable: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
formData.serie = inventario ? inventario : "";
|
|
||||||
|
|
||||||
// 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[],
|
|
||||||
});
|
|
||||||
|
|
||||||
const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
|
|
||||||
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
|
||||||
const token = Cookies.get("token");
|
|
||||||
const headers = { Authorization: `Bearer ${token}` };
|
|
||||||
|
|
||||||
try {
|
|
||||||
const [
|
|
||||||
usosRes,
|
|
||||||
marcasRes,
|
|
||||||
estadosRes,
|
|
||||||
adscripcionesRes,
|
|
||||||
tiposEquipoRes,
|
|
||||||
sistemasOperativosRes,
|
|
||||||
procesadoresRes,
|
|
||||||
] = await Promise.all([
|
|
||||||
axios.get(`${api_url}/equipos/usos`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/marcas`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/estados`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/adscripciones`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/tipos-equipo`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
|
|
||||||
axios.get(`${api_url}/equipos/procesadores`, { headers }),
|
|
||||||
]);
|
|
||||||
|
|
||||||
setTiposUso(usosRes.data);
|
|
||||||
setMarcas(marcasRes.data);
|
|
||||||
setEstados(estadosRes.data);
|
|
||||||
setAdscripciones(adscripcionesRes.data);
|
|
||||||
setTiposEquipo(tiposEquipoRes.data);
|
|
||||||
setSistemasOperativos(sistemasOperativosRes.data);
|
|
||||||
setProcesadores(procesadoresRes.data);
|
|
||||||
console.log(adscripciones);
|
|
||||||
} catch (err) {
|
|
||||||
if (axios.isAxiosError(err)) {
|
|
||||||
if (err.response) {
|
|
||||||
toast.error(
|
|
||||||
err.response.data?.message || "No se pudo conectar con el API"
|
|
||||||
);
|
|
||||||
} else if (err.request) {
|
|
||||||
toast.error("No se pudo conectar con el servidor");
|
|
||||||
} else {
|
|
||||||
toast.error("Ocurrió un error inesperado");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
toast.error("Ocurrió un error inesperado");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, [api_url]);
|
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: string) => {
|
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectSuggestion = (field: string, value: string) => {
|
|
||||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
|
||||||
setSuggestions((prev) => ({ ...prev, [field]: [] }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGuardar = async () => {
|
|
||||||
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.error("Acción cancelada");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="agregarEquipoContainer">
|
|
||||||
<div className="innerContainer">
|
|
||||||
<h2 className="information">Agregar Nuevo Equipo</h2>
|
|
||||||
<form className="equipoForm">
|
|
||||||
{/* Columna Izquierda */}
|
|
||||||
<div className="column">
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Serie</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
placeholder="Ingresa serie"
|
|
||||||
value={formData.serie}
|
|
||||||
onChange={(e) => handleInputChange("serie", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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.id_marca} value={m.tipo_marca}>
|
|
||||||
{m.tipo_marca}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Modelo</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Ingresa modelo"
|
|
||||||
value={formData.modelo}
|
|
||||||
onChange={(e) => handleInputChange("modelo", e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Tipo de equipo</label>
|
|
||||||
<select
|
|
||||||
required
|
|
||||||
value={formData.tipoEquipo}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("tipoEquipo", e.target.value)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="">Selecciona tipo de equipo</option>
|
|
||||||
{tiposEquipo.map((t) => (
|
|
||||||
<option key={t.id_tipo_de_equipo} value={t.tipo_equipo}>
|
|
||||||
{t.tipo_equipo}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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.id_estado} value={e.estado}>
|
|
||||||
{e.estado}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Columna Centro */}
|
|
||||||
<div className="column">
|
|
||||||
<div className="formGroup">
|
|
||||||
<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.id_tipo_uso} value={t.tipo_uso}>
|
|
||||||
{t.tipo_uso}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{mostrarCamposComputadora && (
|
|
||||||
<>
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Procesador</label>
|
|
||||||
<select
|
|
||||||
value={formData.procesador}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("procesador", e.target.value)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="">Selecciona procesador</option>
|
|
||||||
{procesadores.map((p) => (
|
|
||||||
<option key={p.id_procesador} value={p.procesador}>
|
|
||||||
{p.procesador}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Sistema operativo</label>
|
|
||||||
<select
|
|
||||||
value={formData.sistemaOperativo}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("sistemaOperativo", e.target.value)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<option value="">Selecciona sistema operativo</option>
|
|
||||||
{sistemasOperativos.map((so) => (
|
|
||||||
<option
|
|
||||||
key={so.id_sistema_operativo}
|
|
||||||
value={so.sistema_operativo}
|
|
||||||
>
|
|
||||||
{so.sistema_operativo}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Adscripción</label>
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
placeholder="Selecciona adscripción"
|
|
||||||
value={formData.adscripcion}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("adscripcion", e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{suggestions.adscripcion.length > 0 && (
|
|
||||||
<ul className="suggestions">
|
|
||||||
{suggestions.adscripcion.map((s) => (
|
|
||||||
<li
|
|
||||||
key={s}
|
|
||||||
onClick={() => handleSelectSuggestion("adscripcion", s)}
|
|
||||||
>
|
|
||||||
{s}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="column">
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Lugar</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Ingresa lugar"
|
|
||||||
value={formData.lugar}
|
|
||||||
onChange={(e) => handleInputChange("lugar", e.target.value)}
|
|
||||||
rows={5}
|
|
||||||
className="textAreaLarge"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="formGroup">
|
|
||||||
<label>Observaciones</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Ingresa observaciones"
|
|
||||||
value={formData.observaciones}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleInputChange("observaciones", e.target.value)
|
|
||||||
}
|
|
||||||
rows={5}
|
|
||||||
className="textAreaLarge"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="formActions">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btnGuardar"
|
|
||||||
onClick={handleGuardar}
|
|
||||||
>
|
|
||||||
Guardar
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btnCancelar"
|
|
||||||
onClick={handleCancelar}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,386 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import axios from "axios";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
import "../app/styles/layout/agregarEquipo.scss";
|
||||||
|
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const inventario = searchParams.get("equipoId");
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
serie: "",
|
||||||
|
marca: "",
|
||||||
|
modelo: "",
|
||||||
|
tipoEquipo: "",
|
||||||
|
estado: "",
|
||||||
|
sistemaOperativo: "",
|
||||||
|
procesador: "",
|
||||||
|
tipoUso: "",
|
||||||
|
observaciones: "",
|
||||||
|
adscripcion: "",
|
||||||
|
lugar: "",
|
||||||
|
responsable: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
formData.serie = inventario ? inventario : "";
|
||||||
|
|
||||||
|
// 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[],
|
||||||
|
});
|
||||||
|
|
||||||
|
const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
|
||||||
|
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
const token = Cookies.get("token");
|
||||||
|
const headers = { Authorization: `Bearer ${token}` };
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [
|
||||||
|
usosRes,
|
||||||
|
marcasRes,
|
||||||
|
estadosRes,
|
||||||
|
adscripcionesRes,
|
||||||
|
tiposEquipoRes,
|
||||||
|
sistemasOperativosRes,
|
||||||
|
procesadoresRes,
|
||||||
|
] = await Promise.all([
|
||||||
|
axios.get(`${api_url}/equipos/usos`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/marcas`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/estados`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/adscripciones`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/tipos-equipo`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
|
||||||
|
axios.get(`${api_url}/equipos/procesadores`, { headers }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
setTiposUso(usosRes.data);
|
||||||
|
setMarcas(marcasRes.data);
|
||||||
|
setEstados(estadosRes.data);
|
||||||
|
setAdscripciones(adscripcionesRes.data);
|
||||||
|
setTiposEquipo(tiposEquipoRes.data);
|
||||||
|
setSistemasOperativos(sistemasOperativosRes.data);
|
||||||
|
setProcesadores(procesadoresRes.data);
|
||||||
|
console.log(adscripciones);
|
||||||
|
} catch (err) {
|
||||||
|
if (axios.isAxiosError(err)) {
|
||||||
|
if (err.response) {
|
||||||
|
toast.error(
|
||||||
|
err.response.data?.message || "No se pudo conectar con el API"
|
||||||
|
);
|
||||||
|
} else if (err.request) {
|
||||||
|
toast.error("No se pudo conectar con el servidor");
|
||||||
|
} else {
|
||||||
|
toast.error("Ocurrió un error inesperado");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toast.error("Ocurrió un error inesperado");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchData();
|
||||||
|
}, [api_url]);
|
||||||
|
|
||||||
|
const handleInputChange = (field: string, value: string) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectSuggestion = (field: string, value: string) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
setSuggestions((prev) => ({ ...prev, [field]: [] }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGuardar = async () => {
|
||||||
|
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.error("Acción cancelada");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="agregarEquipoContainer">
|
||||||
|
<div className="innerContainer">
|
||||||
|
<h2 className="information">Agregar Nuevo Equipo</h2>
|
||||||
|
<form className="equipoForm">
|
||||||
|
{/* Columna Izquierda */}
|
||||||
|
<div className="column">
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Serie</label>
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="text"
|
||||||
|
placeholder="Ingresa serie"
|
||||||
|
value={formData.serie}
|
||||||
|
onChange={(e) => handleInputChange("serie", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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.id_marca} value={m.tipo_marca}>
|
||||||
|
{m.tipo_marca}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Modelo</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Ingresa modelo"
|
||||||
|
value={formData.modelo}
|
||||||
|
onChange={(e) => handleInputChange("modelo", e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Tipo de equipo</label>
|
||||||
|
<select
|
||||||
|
required
|
||||||
|
value={formData.tipoEquipo}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("tipoEquipo", e.target.value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="">Selecciona tipo de equipo</option>
|
||||||
|
{tiposEquipo.map((t) => (
|
||||||
|
<option key={t.id_tipo_de_equipo} value={t.tipo_equipo}>
|
||||||
|
{t.tipo_equipo}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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.id_estado} value={e.estado}>
|
||||||
|
{e.estado}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Columna Centro */}
|
||||||
|
<div className="column">
|
||||||
|
<div className="formGroup">
|
||||||
|
<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.id_tipo_uso} value={t.tipo_uso}>
|
||||||
|
{t.tipo_uso}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{mostrarCamposComputadora && (
|
||||||
|
<>
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Procesador</label>
|
||||||
|
<select
|
||||||
|
value={formData.procesador}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("procesador", e.target.value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="">Selecciona procesador</option>
|
||||||
|
{procesadores.map((p) => (
|
||||||
|
<option key={p.id_procesador} value={p.procesador}>
|
||||||
|
{p.procesador}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Sistema operativo</label>
|
||||||
|
<select
|
||||||
|
value={formData.sistemaOperativo}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("sistemaOperativo", e.target.value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="">Selecciona sistema operativo</option>
|
||||||
|
{sistemasOperativos.map((so) => (
|
||||||
|
<option
|
||||||
|
key={so.id_sistema_operativo}
|
||||||
|
value={so.sistema_operativo}
|
||||||
|
>
|
||||||
|
{so.sistema_operativo}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Adscripción</label>
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="text"
|
||||||
|
placeholder="Selecciona adscripción"
|
||||||
|
value={formData.adscripcion}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("adscripcion", e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{suggestions.adscripcion.length > 0 && (
|
||||||
|
<ul className="suggestions">
|
||||||
|
{suggestions.adscripcion.map((s) => (
|
||||||
|
<li
|
||||||
|
key={s}
|
||||||
|
onClick={() => handleSelectSuggestion("adscripcion", s)}
|
||||||
|
>
|
||||||
|
{s}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="column">
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Lugar</label>
|
||||||
|
<textarea
|
||||||
|
placeholder="Ingresa lugar"
|
||||||
|
value={formData.lugar}
|
||||||
|
onChange={(e) => handleInputChange("lugar", e.target.value)}
|
||||||
|
rows={5}
|
||||||
|
className="textAreaLarge"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="formGroup">
|
||||||
|
<label>Observaciones</label>
|
||||||
|
<textarea
|
||||||
|
placeholder="Ingresa observaciones"
|
||||||
|
value={formData.observaciones}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInputChange("observaciones", e.target.value)
|
||||||
|
}
|
||||||
|
rows={5}
|
||||||
|
className="textAreaLarge"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="formActions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btnGuardar"
|
||||||
|
onClick={handleGuardar}
|
||||||
|
>
|
||||||
|
Guardar
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btnCancelar"
|
||||||
|
onClick={handleCancelar}
|
||||||
|
>
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
+1
-1
@@ -13,6 +13,6 @@ export function middleware(request: NextRequest) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const config = {
|
export const config = {
|
||||||
matcher: ["/AgregarEquipo", "/Escaner"],
|
matcher: [],
|
||||||
};
|
};
|
||||||
//IO
|
//IO
|
||||||
|
|||||||
Reference in New Issue
Block a user