jls846
839 lines
25 KiB
TypeScript
839 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
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 { PROCESADORES_POR_EQUIPO } from "@/data/procesadores";
|
|
|
|
import "../app/styles/layout/agregarEquipo.scss";
|
|
import "./editar.css";
|
|
|
|
export default function Editar() {
|
|
const searchParams = useSearchParams();
|
|
const inventario = searchParams.get("equipoId");
|
|
|
|
const router = useRouter();
|
|
|
|
const [formData, setFormData] = useState({
|
|
inventario: "",
|
|
serie: "",
|
|
modelo: "",
|
|
id_tipo_equipo: 0,
|
|
id_marca: 0,
|
|
id_estado: 0,
|
|
id_uso: 0,
|
|
id_adscripcion: 0,
|
|
id_sistema_operativo: 0,
|
|
id_procesador: 0,
|
|
lugar: "",
|
|
observaciones: "",
|
|
responsable: "",
|
|
id_periferico: 0,
|
|
id_laboratorio: 0,
|
|
id_proyecto: 0,
|
|
fechaMovimiento: "",
|
|
});
|
|
|
|
interface TipoUso {
|
|
id_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;
|
|
marca: string;
|
|
}
|
|
|
|
interface Adscripcion {
|
|
id_adscripcion: number;
|
|
adscripcion: string;
|
|
}
|
|
|
|
interface Perifericos {
|
|
id_periferico: number;
|
|
periferico: string;
|
|
}
|
|
|
|
interface Laboratorio {
|
|
id_laboratorio: number;
|
|
laboratorio: string;
|
|
}
|
|
|
|
interface Proyecto {
|
|
id_proyecto: number;
|
|
proyecto: string;
|
|
}
|
|
|
|
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 [laboratorios, setLaboratorios] = useState<Laboratorio[]>([]);
|
|
const [proyectos, setProyectos] = useState<Proyecto[]>([]);
|
|
const [sistemasOperativos, setSistemasOperativos] = useState<
|
|
SistemaOperativo[]
|
|
>([]);
|
|
const [procesadores, setProcesadores] = useState<Procesador[]>([]);
|
|
const [perifericos, setPerifericos] = useState<Perifericos[]>([]);
|
|
const [adscripcionLabel, setAdscripcionLabel] = useState("");
|
|
const [id, setId] = useState(0);
|
|
|
|
const [suggestions, setSuggestions] = useState({
|
|
adscripcion: [] as string[],
|
|
});
|
|
|
|
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
|
const mostrarCamposComputadora = Number(formData.id_tipo_equipo) !== 9;
|
|
|
|
useEffect(() => {
|
|
const fetchCatalogos = async () => {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
try {
|
|
const [
|
|
usosRes,
|
|
marcasRes,
|
|
estadosRes,
|
|
adscripcionesRes,
|
|
tiposEquipoRes,
|
|
sistemasOperativosRes,
|
|
procesadoresRes,
|
|
laboratoriosRes,
|
|
proyectosRes,
|
|
] = 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 }),
|
|
axios.get(`${api_url}/equipos/laboratorios`, { headers }),
|
|
axios.get(`${api_url}/equipos/proyectos`, { headers }),
|
|
]);
|
|
|
|
setTiposUso(usosRes.data);
|
|
setMarcas(marcasRes.data);
|
|
setEstados(estadosRes.data);
|
|
setAdscripciones(adscripcionesRes.data);
|
|
setTiposEquipo(tiposEquipoRes.data);
|
|
setSistemasOperativos(sistemasOperativosRes.data);
|
|
setProcesadores(procesadoresRes.data);
|
|
setLaboratorios(laboratoriosRes.data);
|
|
setProyectos(proyectosRes.data);
|
|
} catch (error) {
|
|
console.error("Error cargando catálogos:", error);
|
|
toast.error("No se pudieron cargar los catálogos de datos");
|
|
}
|
|
};
|
|
|
|
fetchCatalogos();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
interface UnidadResponsable {
|
|
idUnidadResponsable: number;
|
|
unidadResponsable: string;
|
|
cargo: string;
|
|
titulo: string;
|
|
nombre: string;
|
|
apellidos: string;
|
|
telefono: string;
|
|
correo: string;
|
|
nivel: number;
|
|
idUnidadResponsablePapa: number;
|
|
unidadResponsablePapa: string;
|
|
}
|
|
|
|
interface EquipoResponse {
|
|
[key: string]: unknown;
|
|
id_equipo: number;
|
|
inventario: string;
|
|
serie: string;
|
|
lugar: string;
|
|
fechaMovimiento: string;
|
|
antiguedad: string;
|
|
modelo: string;
|
|
estado: { id_estado: number; estado: string };
|
|
adscripcion: { id_adscripcion: number; adscripcion: string };
|
|
sistemaOperativo: {
|
|
id_sistema_operativo: number;
|
|
sistema_operativo: string;
|
|
} | null;
|
|
tipoEquipo: { id_tipo_de_equipo: number; tipo_equipo: string } | null;
|
|
procesador: {
|
|
id_procesador: number;
|
|
procesador: string;
|
|
};
|
|
tipoUso: { id_uso: number; tipo_uso: string };
|
|
marca: { id_marca: number; marca: string };
|
|
periferico: { id_periferico: number; periferico: string };
|
|
observaciones?: string;
|
|
laboratorio: {
|
|
id_laboratorio?: number;
|
|
};
|
|
proyecto: {
|
|
id_proyecto?: number;
|
|
};
|
|
}
|
|
|
|
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/buscar/${inventario}`,
|
|
{ headers }
|
|
);
|
|
|
|
const equipo = response.data as EquipoResponse;
|
|
|
|
const idAdscripcion = equipo.adscripcion?.id_adscripcion;
|
|
|
|
const responsables: UnidadResponsable[] = Object.values(equipo).filter(
|
|
(v): v is UnidadResponsable =>
|
|
typeof v === "object" &&
|
|
v !== null &&
|
|
"idUnidadResponsable" in v &&
|
|
"nombre" in v &&
|
|
"apellidos" in v
|
|
);
|
|
|
|
const responsableEncontrado = responsables.find(
|
|
(r) => r.idUnidadResponsable === idAdscripcion
|
|
);
|
|
|
|
const responsable = responsableEncontrado
|
|
? `${responsableEncontrado.nombre} ${responsableEncontrado.apellidos}`
|
|
: "";
|
|
|
|
setFormData({
|
|
inventario: equipo.inventario || "",
|
|
serie: (equipo.serie || "").toUpperCase(),
|
|
id_marca: equipo.marca?.id_marca || 0,
|
|
modelo: equipo.modelo || "",
|
|
id_tipo_equipo: equipo.tipoEquipo?.id_tipo_de_equipo || 0,
|
|
id_estado: equipo.estado?.id_estado || 0,
|
|
id_sistema_operativo:
|
|
equipo.sistemaOperativo?.id_sistema_operativo || 0,
|
|
id_procesador: equipo.procesador?.id_procesador || 0,
|
|
id_uso: equipo.tipoUso?.id_uso || 0,
|
|
observaciones: equipo.observaciones || "",
|
|
id_adscripcion: equipo.adscripcion?.id_adscripcion || 0,
|
|
lugar: equipo.lugar || "",
|
|
id_periferico: equipo.periferico?.id_periferico || 0,
|
|
id_laboratorio: equipo.laboratorio?.id_laboratorio || 0,
|
|
id_proyecto: equipo.proyecto?.id_proyecto || 0,
|
|
fechaMovimiento: equipo.fechaMovimiento || "",
|
|
responsable,
|
|
});
|
|
|
|
setAdscripcionLabel(equipo.adscripcion?.adscripcion);
|
|
setId(equipo.id_equipo);
|
|
} catch (err) {
|
|
if (axios.isAxiosError(err)) {
|
|
if (err.response) {
|
|
toast.error(
|
|
err.response.data?.message || "Error al crear la cuenta"
|
|
);
|
|
} 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");
|
|
}
|
|
toast.error("No se pudo cargar la información del equipo.");
|
|
}
|
|
};
|
|
|
|
fetchEquipo();
|
|
}, [inventario]);
|
|
|
|
useEffect(() => {
|
|
const fetchProcesador = async () => {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const response = await axios.get(
|
|
`${api_url}/equipos/procesador-tipo-equipos`,
|
|
{
|
|
headers,
|
|
}
|
|
);
|
|
|
|
setProcesadores(response.data);
|
|
};
|
|
fetchProcesador();
|
|
}, [tiposEquipo]);
|
|
|
|
useEffect(() => {
|
|
const fetchPerifericos = async () => {
|
|
if (Number(formData.id_tipo_equipo) != 9) 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.id_tipo_equipo]);
|
|
|
|
const handleGuardar = async () => {
|
|
if (!formData.inventario) {
|
|
toast.error("Inventario no encontrado");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_marca) {
|
|
toast.error("marca no encontrada");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_tipo_equipo) {
|
|
toast.error("Tipo de equipo no encontrado");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_estado) {
|
|
toast.error("estado no encontrado");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_uso) {
|
|
toast.error("tipo de uso no encontrado");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_adscripcion) {
|
|
toast.error("adscripción no encontrada");
|
|
return;
|
|
}
|
|
|
|
{
|
|
/*if (!formData.id_laboratorio) {
|
|
toast.error("Laboratorio no seleccionado");
|
|
return;
|
|
}
|
|
|
|
if (!formData.id_proyecto) {
|
|
toast.error("Proyecto no seleccionado");
|
|
return;
|
|
}*/
|
|
}
|
|
|
|
if (formData.id_tipo_equipo == 9) {
|
|
if (!formData.id_periferico) {
|
|
toast.error("Periférico no encontrado");
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (
|
|
formData.id_tipo_equipo != 8 &&
|
|
formData.id_tipo_equipo != 7 &&
|
|
formData.id_tipo_equipo != 9
|
|
) {
|
|
if (!formData.id_sistema_operativo) {
|
|
toast.error("Sistema operativo no encontrado");
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (formData.id_tipo_equipo != 9) {
|
|
if (!formData.id_procesador) {
|
|
toast.error("Procesador no encontrado");
|
|
return;
|
|
}
|
|
}
|
|
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const data = {
|
|
id_procesador: formData.id_procesador,
|
|
id_estado: formData.id_estado,
|
|
id_adscripcion: formData.id_adscripcion,
|
|
id_laboratorio: formData.id_laboratorio,
|
|
id_proyecto: formData.id_proyecto,
|
|
lugar: formData.lugar,
|
|
id_sistema_operativo: formData.id_sistema_operativo,
|
|
id_tipo_uso: formData.id_uso,
|
|
id_periferico: formData.id_periferico,
|
|
serie: formData.serie,
|
|
modelo: formData.modelo,
|
|
id_marca: formData.id_marca,
|
|
observaciones: formData.observaciones,
|
|
};
|
|
|
|
try {
|
|
await axios.patch(`${api_url}/equipos/update/${id}`, data, {
|
|
headers,
|
|
});
|
|
toast.success("Equipo actualizado correctamente");
|
|
router.push("/escaner");
|
|
} catch (error) {
|
|
console.error("Error al guardar:", error);
|
|
toast.error("Hubo un error al guardar el equipo.");
|
|
}
|
|
};
|
|
|
|
const handleInputChange = (
|
|
field: string,
|
|
value: string | number | boolean
|
|
) => {
|
|
if (field === "adscripcionLabel") {
|
|
const textValue = value as string;
|
|
setAdscripcionLabel(textValue);
|
|
|
|
const normalize = (str: string) =>
|
|
str
|
|
.normalize("NFD")
|
|
.replace(/[\u0300-\u036f]/g, "")
|
|
.toLowerCase();
|
|
|
|
const matches = adscripciones
|
|
.filter((a) => normalize(a.adscripcion).includes(normalize(textValue)))
|
|
.map((a) => a.adscripcion);
|
|
|
|
setSuggestions((prev) => ({
|
|
...prev,
|
|
adscripcion: matches.slice(0, 5),
|
|
}));
|
|
return;
|
|
}
|
|
|
|
setFormData((prev) => {
|
|
const newValue =
|
|
field.startsWith("id_") && value !== "" ? Number(value) : value;
|
|
|
|
if (field === "id_tipo_equipo") {
|
|
const idTipoEquipo = Number(value);
|
|
const tipoSeleccionado = tiposEquipo.find(
|
|
(t) => t.id_tipo_de_equipo === idTipoEquipo
|
|
);
|
|
const esPeriferico = tipoSeleccionado?.tipo_equipo === "PERIFÉRICO";
|
|
|
|
return {
|
|
...prev,
|
|
id_tipo_equipo: idTipoEquipo,
|
|
isImpresora: esPeriferico,
|
|
};
|
|
}
|
|
|
|
return { ...prev, [field]: newValue };
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchResponsable = async () => {
|
|
if (!formData.id_adscripcion) return;
|
|
|
|
try {
|
|
const response = await axios.post(
|
|
"https://venus.acatlan.unam.mx/funcionarios_test/test",
|
|
{
|
|
tipoBusqueda: "area",
|
|
IdUnidadResponsable: formData.id_adscripcion,
|
|
}
|
|
);
|
|
|
|
const data = response.data;
|
|
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
const first = data[0];
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
responsable: `${first.nombre ?? ""} ${
|
|
first.apellidos ?? ""
|
|
}`.trim(),
|
|
}));
|
|
} else {
|
|
toast.error(
|
|
"No se encontró información de la adscripción seleccionada"
|
|
);
|
|
setFormData((prev) => ({ ...prev, responsable: "" }));
|
|
}
|
|
} catch (err) {
|
|
console.error("Error al obtener responsable:", err);
|
|
toast.error("No se pudo conseguir el responsable");
|
|
setFormData((prev) => ({ ...prev, responsable: "" }));
|
|
}
|
|
};
|
|
|
|
fetchResponsable();
|
|
}, [formData.id_adscripcion]);
|
|
|
|
const handleCancelar = () => {
|
|
router.push("/escaner");
|
|
};
|
|
|
|
return (
|
|
<div className="agregarEquipoContainer">
|
|
<div className="innerContainer">
|
|
<h2 className="information">
|
|
<span>
|
|
{tiposEquipo.find(
|
|
(t) => t.id_tipo_de_equipo === Number(formData.id_tipo_equipo)
|
|
)?.tipo_equipo || "Sin tipo"}
|
|
</span>
|
|
<span>Inventario: {formData.inventario}</span>
|
|
<span>
|
|
Fecha de censo:{" "}
|
|
{formData.fechaMovimiento
|
|
? new Date(formData.fechaMovimiento).toLocaleDateString("es-MX")
|
|
: "Sin fecha"}
|
|
</span>
|
|
</h2>
|
|
|
|
<form className="equipoForm">
|
|
{/* Columna 1 */}
|
|
<div className="column">
|
|
<div className="formGroup">
|
|
<label>Serie</label>
|
|
<input
|
|
type="text"
|
|
value={formData.serie}
|
|
placeholder="Ingresa serie"
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
serie: e.target.value.toUpperCase(),
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="formGroup">
|
|
<label>Marca</label>
|
|
<select
|
|
value={formData.id_marca}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, id_marca: Number(e.target.value) })
|
|
}
|
|
>
|
|
<option value="">Selecciona marca</option>
|
|
{marcas.map((m) => (
|
|
<option key={m.id_marca} value={m.id_marca}>
|
|
{m.marca}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="formGroup">
|
|
<label>Modelo</label>
|
|
<input
|
|
type="text"
|
|
value={formData.modelo}
|
|
placeholder="Ingresa modelo"
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, modelo: e.target.value })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
{/* <div className="formGroup">
|
|
<label>Tipo de equipo</label>
|
|
<select
|
|
style={{ background: "#f6f7f9" }}
|
|
disabled
|
|
required
|
|
value={formData.id_tipo_equipo}
|
|
onChange={(e) =>
|
|
handleInputChange("id_tipo_equipo", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Selecciona tipo de equipo</option>
|
|
{tiposEquipo.map((t) => (
|
|
<option key={t.id_tipo_de_equipo} value={t.id_tipo_de_equipo}>
|
|
{t.tipo_equipo}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div> */}
|
|
|
|
<div className="formGroup">
|
|
<label>Estado</label>
|
|
<select
|
|
value={formData.id_estado}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
id_estado: Number(e.target.value),
|
|
})
|
|
}
|
|
>
|
|
<option value="">Selecciona estado</option>
|
|
{estados.map((e) => (
|
|
<option key={e.id_estado} value={e.id_estado}>
|
|
{e.estado}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{mostrarCamposComputadora && (
|
|
<div className="formGroup">
|
|
<label>Laboratorio</label>
|
|
<select
|
|
value={formData.id_laboratorio}
|
|
onChange={(e) =>
|
|
handleInputChange("id_laboratorio", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Selecciona laboratorio</option>
|
|
{laboratorios.map((lab) => (
|
|
<option key={lab.id_laboratorio} value={lab.id_laboratorio}>
|
|
{lab.laboratorio}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Columna 2 */}
|
|
<div className="column">
|
|
<div className="formGroup">
|
|
<label>Tipo de uso</label>
|
|
<select
|
|
value={formData.id_uso}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, id_uso: Number(e.target.value) })
|
|
}
|
|
>
|
|
<option value="">Selecciona uso</option>
|
|
{tiposUso.map((t) => (
|
|
<option key={t.id_uso} value={t.id_uso}>
|
|
{t.tipo_uso}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{mostrarCamposComputadora && (
|
|
<>
|
|
<div className="formGroup">
|
|
<label>Procesador</label>
|
|
<select
|
|
value={formData.id_procesador}
|
|
onChange={(e) =>
|
|
handleInputChange("id_procesador", e.target.value)
|
|
}
|
|
>
|
|
<option value="">
|
|
{formData.id_tipo_equipo
|
|
? "Selecciona procesador"
|
|
: "Selecciona primero el tipo de equipo"}
|
|
</option>
|
|
{PROCESADORES_POR_EQUIPO[formData.id_tipo_equipo]?.map(
|
|
(p) => (
|
|
<option key={p.id_procesador} value={p.id_procesador}>
|
|
{p.procesador}
|
|
</option>
|
|
)
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="formGroup">
|
|
<label>Sistema operativo</label>
|
|
<select
|
|
value={formData.id_sistema_operativo}
|
|
onChange={(e) =>
|
|
handleInputChange("id_sistema_operativo", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Selecciona sistema operativo</option>
|
|
{SO_POR_EQUIPO[formData.id_tipo_equipo]?.map((so) => (
|
|
<option
|
|
key={so.id_sistema_operativo}
|
|
value={so.id_sistema_operativo}
|
|
>
|
|
{so.sistema_operativo}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{!mostrarCamposComputadora && (
|
|
<div className="formGroup">
|
|
<label>Tipos de Periféricos</label>
|
|
<select
|
|
value={formData.id_periferico || 0}
|
|
onChange={(e) =>
|
|
handleInputChange("id_periferico", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Selecciona periférico</option>
|
|
{perifericos.map((p) => (
|
|
<option key={p.id_periferico} value={p.id_periferico}>
|
|
{p.periferico}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
<div className="formGroup" style={{ position: "relative" }}>
|
|
<label>Adscripción</label>
|
|
<input
|
|
required
|
|
type="text"
|
|
placeholder="Ingresa adscripción"
|
|
value={adscripcionLabel}
|
|
onChange={(e) =>
|
|
handleInputChange("adscripcionLabel", e.target.value)
|
|
}
|
|
style={{ fontSize: "13px" }}
|
|
/>
|
|
{suggestions.adscripcion.length > 0 && (
|
|
<ul className="suggestions">
|
|
{suggestions.adscripcion.map((s) => (
|
|
<li
|
|
key={s}
|
|
onClick={() => {
|
|
const selected = adscripciones.find(
|
|
(a) => a.adscripcion === s
|
|
);
|
|
if (selected) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
id_adscripcion: selected.id_adscripcion,
|
|
}));
|
|
setAdscripcionLabel(selected.adscripcion);
|
|
setSuggestions((prev) => ({
|
|
...prev,
|
|
adscripcion: [],
|
|
}));
|
|
}
|
|
}}
|
|
>
|
|
{s}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<div className="formGroup">
|
|
<label>Responsable</label>
|
|
<input
|
|
style={{ background: "#f6f7f9" }}
|
|
type="text"
|
|
value={formData.responsable}
|
|
disabled
|
|
placeholder="Selecciona una Adscripción"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Columna 3 */}
|
|
<div className="column">
|
|
{mostrarCamposComputadora && (
|
|
<div className="formGroup">
|
|
<label>Proyecto</label>
|
|
<select
|
|
value={formData.id_proyecto}
|
|
onChange={(e) =>
|
|
handleInputChange("id_proyecto", e.target.value)
|
|
}
|
|
>
|
|
<option value="">Selecciona proyecto</option>
|
|
{proyectos.map((proy) => (
|
|
<option key={proy.id_proyecto} value={proy.id_proyecto}>
|
|
{proy.proyecto}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
<div className="formGroup">
|
|
<label>Lugar</label>
|
|
<textarea
|
|
value={formData.lugar}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, lugar: e.target.value })
|
|
}
|
|
maxLength={200}
|
|
rows={5}
|
|
className="textAreaLarge"
|
|
/>
|
|
</div>
|
|
|
|
<div className="formGroup">
|
|
<label>Observaciones</label>
|
|
<textarea
|
|
value={formData.observaciones}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, observaciones: e.target.value })
|
|
}
|
|
maxLength={200}
|
|
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>
|
|
);
|
|
}
|