135 lines
3.2 KiB
TypeScript
135 lines
3.2 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import "@/app/globals.css";
|
|
import axios from "axios";
|
|
import { envConfig } from "@/app/lib/config";
|
|
import toast from "react-hot-toast";
|
|
import Swal from "sweetalert2";
|
|
|
|
export default function Areas() {
|
|
const [areas, setAreas] = useState([]);
|
|
const [selectedArea, setSelectedArea] = useState("");
|
|
|
|
const [modo, setModo] = useState<"Activo" | "Mantenimiento" | null>(
|
|
"Mantenimiento",
|
|
);
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get(`${envConfig.apiUrl}/area-ubicacion`)
|
|
.then((data) => {
|
|
setAreas(data.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error al traer las áreas:", error);
|
|
});
|
|
}, []);
|
|
|
|
const handleActualizar = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!selectedArea) {
|
|
|
|
Swal.fire({
|
|
title: "Selecciona un área antes de actualizar!",
|
|
icon: "error",
|
|
draggable: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!modo) {
|
|
|
|
Swal.fire({
|
|
title: "Selecciona un modo!",
|
|
icon: "error",
|
|
draggable: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await axios.patch(
|
|
`${envConfig.apiUrl}/equipo/actualizar-area`,
|
|
{
|
|
id_area_ubicacion: Number(selectedArea),
|
|
activo: modo === "Activo",
|
|
}
|
|
);
|
|
|
|
|
|
Swal.fire({
|
|
title: "Equipos actualizados correctamente!",
|
|
icon: "success",
|
|
draggable: true,
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
|
|
Swal.fire({
|
|
title: "Error al actualizar los equipos!",
|
|
icon: "error",
|
|
draggable: true,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className="containerForm" onSubmit={handleActualizar}>
|
|
<label className="label">Áreas</label>
|
|
|
|
<div className="groupInput">
|
|
<select
|
|
id="areaSelect"
|
|
value={selectedArea}
|
|
onChange={(e) => setSelectedArea(e.target.value)}
|
|
>
|
|
<option value="">-- Selecciona una opción --</option>
|
|
{areas.map((area: any) => (
|
|
<option
|
|
key={area.id_area_ubicacion}
|
|
value={area.id_area_ubicacion}
|
|
>
|
|
{area.area}
|
|
</option>
|
|
))}
|
|
|
|
</select>
|
|
|
|
<div className="radio-grid">
|
|
<label className="radio-card">
|
|
<input
|
|
type="radio"
|
|
name="modo"
|
|
checked={modo === "Activo"}
|
|
onChange={() => setModo("Activo")}
|
|
/>
|
|
<span className="radio-ui"></span>
|
|
<span className="radio-text">Activo</span>
|
|
</label>
|
|
|
|
<label className="radio-card">
|
|
<input
|
|
type="radio"
|
|
name="modo"
|
|
checked={modo === "Mantenimiento"}
|
|
onChange={() => setModo("Mantenimiento")}
|
|
/>
|
|
<span className="radio-ui"></span>
|
|
<span className="radio-text">Mantenimiento</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
className="button buttonSearch"
|
|
type="submit"
|
|
style={{ marginTop: "15px" }}
|
|
>
|
|
Actualizar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|