builded
This commit is contained in:
@@ -1,385 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import toast from "react-hot-toast";
|
||||
import "../../styles/layout/agregarEquipo.scss";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const AgregarEquipo = dynamic(() => import("@/components/AgregarEquipo"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
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>
|
||||
);
|
||||
return <AgregarEquipo />;
|
||||
}
|
||||
|
||||
@@ -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 = {
|
||||
matcher: ["/AgregarEquipo", "/Escaner"],
|
||||
matcher: [],
|
||||
};
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user