Delete project logic

This commit is contained in:
2026-02-03 02:17:14 -06:00
parent 5f51d25bc1
commit 0f8f73ea2a
2 changed files with 17 additions and 116 deletions

View File

@@ -7,7 +7,6 @@ import {
fetchProjects,
createProject as apiCreateProject,
updateProject as apiUpdateProject,
deleteProject as apiDeleteProject,
deactivateProject as apiDeactivateProject,
} from "../../api/projects";
import { fetchMeterTypes, type MeterType } from "../../api/meterTypes";
@@ -28,10 +27,6 @@ export default function ProjectsPage() {
const [meterTypes, setMeterTypes] = useState<MeterType[]>([]);
const [showDeactivateModal, setShowDeactivateModal] = useState(false);
const [projectToDeactivate, setProjectToDeactivate] = useState<Project | null>(null);
const [usersAssignedCount, setUsersAssignedCount] = useState(0);
const emptyForm: ProjectInput = {
name: "",
description: "",
@@ -113,44 +108,27 @@ export default function ProjectsPage() {
if (!activeProject) return;
const confirmDelete = window.confirm(
`¿Estás seguro que quieres eliminar el proyecto "${activeProject.name}"?`
`¿Estás seguro que quieres desactivar el proyecto "${activeProject.name}"?\n\nEl proyecto será desactivado (no eliminado) y cualquier usuario asignado será desvinculado.`
);
if (!confirmDelete) return;
try {
await apiDeleteProject(activeProject.id);
setProjects((prev) => prev.filter((p) => p.id !== activeProject.id));
const deactivatedProject = await apiDeactivateProject(activeProject.id);
setProjects((prev) =>
prev.map((p) => (p.id === deactivatedProject.id ? deactivatedProject : p))
);
setActiveProject(null);
alert(`Proyecto "${activeProject.name}" ha sido desactivado exitosamente.`);
} catch (error) {
console.error("Error deleting project:", error);
// Get error message - ApiError extends Error
let errorMessage = "";
if (error instanceof Error) {
errorMessage = error.message;
} else if (typeof error === 'string') {
errorMessage = error;
}
console.log("Error message:", errorMessage); // Debug log
// Check if error is about users assigned to the project
if (errorMessage.includes("user(s) are assigned to this project")) {
// Extract number of users from error message
const match = errorMessage.match(/(\d+) user\(s\)/);
const userCount = match ? parseInt(match[1]) : 1;
console.log("Users assigned:", userCount); // Debug log
setUsersAssignedCount(userCount);
setProjectToDeactivate(activeProject);
setShowDeactivateModal(true);
} else {
alert(
`Error deleting project: ${errorMessage || "Please try again."}`
);
}
console.error("Error deactivating project:", error);
alert(
`Error al desactivar el proyecto: ${
error instanceof Error ? error.message : "Por favor intenta de nuevo."
}`
);
}
};
@@ -174,31 +152,6 @@ export default function ProjectsPage() {
setShowModal(true);
};
const handleConfirmDeactivate = async () => {
if (!projectToDeactivate) return;
try {
const deactivatedProject = await apiDeactivateProject(projectToDeactivate.id);
setProjects((prev) =>
prev.map((p) => (p.id === deactivatedProject.id ? deactivatedProject : p))
);
setShowDeactivateModal(false);
setProjectToDeactivate(null);
setActiveProject(null);
alert(`Proyecto "${projectToDeactivate.name}" ha sido desactivado y los usuarios han sido desasignados.`);
} catch (error) {
console.error("Error deactivating project:", error);
alert(
`Error deactivating project: ${
error instanceof Error ? error.message : "Please try again."
}`
);
}
};
const filtered = visibleProjects.filter((p) =>
`${p.name} ${p.areaName} ${p.description ?? ""}`
.toLowerCase()
@@ -435,60 +388,6 @@ export default function ProjectsPage() {
</div>
</div>
)}
{showDeactivateModal && projectToDeactivate && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-[500px] space-y-4">
<h2 className="text-lg font-semibold text-gray-900">
Proyecto con Usuarios Asignados
</h2>
<div className="space-y-3">
<p className="text-sm text-gray-700">
El proyecto <span className="font-semibold">"{projectToDeactivate.name}"</span> tiene{" "}
<span className="font-semibold text-blue-600">{usersAssignedCount} usuario(s)</span> asignado(s).
</p>
<p className="text-sm text-gray-700">
No se puede eliminar directamente. ¿Deseas continuar con las siguientes acciones?
</p>
<ul className="text-sm text-gray-700 space-y-2 bg-amber-50 border border-amber-200 rounded-lg p-4">
<li className="flex items-start gap-2">
<span className="text-amber-600 font-bold"></span>
<span>El proyecto será <span className="font-semibold">desactivado</span> (status = INACTIVE)</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-600 font-bold"></span>
<span>Los <span className="font-semibold">{usersAssignedCount} usuario(s)</span> serán desasignados (project_id = null)</span>
</li>
</ul>
<p className="text-xs text-gray-500">
Nota: El proyecto no será eliminado de la base de datos, solo desactivado.
</p>
</div>
<div className="flex justify-end gap-2 pt-3 border-t">
<button
onClick={() => {
setShowDeactivateModal(false);
setProjectToDeactivate(null);
}}
className="px-4 py-2 rounded hover:bg-gray-100"
>
Cancelar
</button>
<button
onClick={handleConfirmDeactivate}
className="bg-amber-600 text-white px-4 py-2 rounded hover:bg-amber-700"
>
, Desactivar Proyecto
</button>
</div>
</div>
</div>
)}
</div>
);
}