Concentrator list and CRUD logic
This commit is contained in:
@@ -2,20 +2,15 @@ import { useState, useEffect, useMemo } from "react";
|
||||
import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
|
||||
import MaterialTable from "@material-table/core";
|
||||
import { fetchProjectNames } from "../../api/projects";
|
||||
import { createConcentrator } from "./concentrators.api";
|
||||
import {
|
||||
fetchConcentrators,
|
||||
createConcentrator,
|
||||
updateConcentrator,
|
||||
deleteConcentrator,
|
||||
type Concentrator,
|
||||
} from "../../api/concentrators";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
interface Concentrator {
|
||||
"Area Name": string;
|
||||
"Device S/N": string;
|
||||
"Device Name": string;
|
||||
"Device Time": string;
|
||||
"Device Status": string;
|
||||
"Operator": string;
|
||||
"Installed Time": string;
|
||||
"Communication Time": string;
|
||||
"Instruction Manual": string;
|
||||
}
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
@@ -34,6 +29,7 @@ export default function ConcentratorsPage() {
|
||||
|
||||
const [allProjects, setAllProjects] = useState<string[]>([]);
|
||||
const [loadingProjects, setLoadingProjects] = useState(true);
|
||||
const [loadingConcentrators, setLoadingConcentrators] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
@@ -42,7 +38,7 @@ export default function ConcentratorsPage() {
|
||||
setAllProjects(projects);
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
setAllProjects(["GRH (PADRE)", "CESPT", "Proyecto A", "Proyecto B"]);
|
||||
setAllProjects([]);
|
||||
} finally {
|
||||
setLoadingProjects(false);
|
||||
}
|
||||
@@ -62,6 +58,7 @@ export default function ConcentratorsPage() {
|
||||
);
|
||||
|
||||
const [selectedProject, setSelectedProject] = useState("");
|
||||
const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (visibleProjects.length > 0 && !selectedProject) {
|
||||
@@ -69,41 +66,22 @@ export default function ConcentratorsPage() {
|
||||
}
|
||||
}, [visibleProjects, selectedProject]);
|
||||
|
||||
const [concentrators, setConcentrators] = useState<Concentrator[]>([
|
||||
{
|
||||
"Area Name": "GRH (PADRE)",
|
||||
"Device S/N": "SN001",
|
||||
"Device Name": "Concentrador A",
|
||||
"Device Time": "2025-12-17T10:00:00Z",
|
||||
"Device Status": "ACTIVE",
|
||||
"Operator": "Operador 1",
|
||||
"Installed Time": "2025-12-17",
|
||||
"Communication Time": "2025-12-17T10:30:00Z",
|
||||
"Instruction Manual": "Manual A",
|
||||
},
|
||||
{
|
||||
"Area Name": "CESPT",
|
||||
"Device S/N": "SN002",
|
||||
"Device Name": "Concentrador B",
|
||||
"Device Time": "2025-12-16T11:00:00Z",
|
||||
"Device Status": "INACTIVE",
|
||||
"Operator": "Operador 2",
|
||||
"Installed Time": "2025-12-16",
|
||||
"Communication Time": "2025-12-16T11:30:00Z",
|
||||
"Instruction Manual": "Manual B",
|
||||
},
|
||||
{
|
||||
"Area Name": "Proyecto A",
|
||||
"Device S/N": "SN003",
|
||||
"Device Name": "Concentrador C",
|
||||
"Device Time": "2025-12-15T12:00:00Z",
|
||||
"Device Status": "ACTIVE",
|
||||
"Operator": "Operador 3",
|
||||
"Installed Time": "2025-12-15",
|
||||
"Communication Time": "2025-12-15T12:30:00Z",
|
||||
"Instruction Manual": "Manual C",
|
||||
},
|
||||
]);
|
||||
const loadConcentrators = async () => {
|
||||
setLoadingConcentrators(true);
|
||||
try {
|
||||
const data = await fetchConcentrators();
|
||||
setConcentrators(data);
|
||||
} catch (error) {
|
||||
console.error("Error loading concentrators:", error);
|
||||
setConcentrators([]);
|
||||
} finally {
|
||||
setLoadingConcentrators(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadConcentrators();
|
||||
}, []);
|
||||
|
||||
const [activeConcentrator, setActiveConcentrator] = useState<Concentrator | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
@@ -129,14 +107,20 @@ export default function ConcentratorsPage() {
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (editingSerial) {
|
||||
const concentratorToUpdate = concentrators.find(c => c["Device S/N"] === editingSerial);
|
||||
if (!concentratorToUpdate) {
|
||||
throw new Error("Concentrator to update not found");
|
||||
}
|
||||
|
||||
const updatedConcentrator = await updateConcentrator(concentratorToUpdate.id, form);
|
||||
setConcentrators((prev) =>
|
||||
prev.map((c) =>
|
||||
c["Device S/N"] === editingSerial ? { ...form } : c
|
||||
c.id === concentratorToUpdate.id ? updatedConcentrator : c
|
||||
)
|
||||
);
|
||||
} else {
|
||||
await createConcentrator(form);
|
||||
setConcentrators((prev) => [...prev, { ...form }]);
|
||||
const newConcentrator = await createConcentrator(form);
|
||||
setConcentrators((prev) => [...prev, newConcentrator]);
|
||||
}
|
||||
setShowModal(false);
|
||||
setEditingSerial(null);
|
||||
@@ -144,20 +128,35 @@ export default function ConcentratorsPage() {
|
||||
setActiveConcentrator(null);
|
||||
} catch (error) {
|
||||
console.error('Error saving concentrator:', error);
|
||||
setConcentrators((prev) => [...prev, { ...form }]);
|
||||
setShowModal(false);
|
||||
setEditingSerial(null);
|
||||
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
|
||||
setActiveConcentrator(null);
|
||||
alert(
|
||||
`Error saving concentrator: ${
|
||||
error instanceof Error ? error.message : "Please try again."
|
||||
}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
const handleDelete = async () => {
|
||||
if (!activeConcentrator) return;
|
||||
setConcentrators((prev) =>
|
||||
prev.filter((c) => c["Device S/N"] !== activeConcentrator["Device S/N"])
|
||||
|
||||
const confirmDelete = window.confirm(
|
||||
`Are you sure you want to delete the concentrator "${activeConcentrator["Device Name"]}"?`
|
||||
);
|
||||
setActiveConcentrator(null);
|
||||
|
||||
if (!confirmDelete) return;
|
||||
|
||||
try {
|
||||
await deleteConcentrator(activeConcentrator.id);
|
||||
setConcentrators((prev) => prev.filter((c) => c.id !== activeConcentrator.id));
|
||||
setActiveConcentrator(null);
|
||||
} catch (error) {
|
||||
console.error("Error deleting concentrator:", error);
|
||||
alert(
|
||||
`Error deleting concentrator: ${
|
||||
error instanceof Error ? error.message : "Please try again."
|
||||
}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/* ================= FILTER ================= */
|
||||
@@ -232,7 +231,17 @@ export default function ConcentratorsPage() {
|
||||
onClick={() => {
|
||||
if (!activeConcentrator) return;
|
||||
setEditingSerial(activeConcentrator["Device S/N"]);
|
||||
setForm(activeConcentrator);
|
||||
setForm({
|
||||
"Area Name": activeConcentrator["Area Name"],
|
||||
"Device S/N": activeConcentrator["Device S/N"],
|
||||
"Device Name": activeConcentrator["Device Name"],
|
||||
"Device Time": activeConcentrator["Device Time"],
|
||||
"Device Status": activeConcentrator["Device Status"],
|
||||
"Operator": activeConcentrator["Operator"],
|
||||
"Installed Time": activeConcentrator["Installed Time"],
|
||||
"Communication Time": activeConcentrator["Communication Time"],
|
||||
"Instruction Manual": activeConcentrator["Instruction Manual"],
|
||||
});
|
||||
setShowModal(true);
|
||||
}}
|
||||
disabled={!activeConcentrator}
|
||||
@@ -250,7 +259,7 @@ export default function ConcentratorsPage() {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setConcentrators([...concentrators])}
|
||||
onClick={loadConcentrators}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
|
||||
>
|
||||
<RefreshCcw size={16} /> Refresh
|
||||
@@ -269,6 +278,7 @@ export default function ConcentratorsPage() {
|
||||
{/* TABLE */}
|
||||
<MaterialTable
|
||||
title="Concentrators"
|
||||
isLoading={loadingConcentrators}
|
||||
columns={[
|
||||
{ title: "Device Name", field: "Device Name" },
|
||||
{ title: "Device S/N", field: "Device S/N" },
|
||||
@@ -300,11 +310,18 @@ export default function ConcentratorsPage() {
|
||||
sorting: true,
|
||||
rowStyle: (rowData) => ({
|
||||
backgroundColor:
|
||||
activeConcentrator?.["Device S/N"] === (rowData as Concentrator)["Device S/N"]
|
||||
activeConcentrator?.id === (rowData as Concentrator).id
|
||||
? "#EEF2FF"
|
||||
: "#FFFFFF",
|
||||
}),
|
||||
}}
|
||||
localization={{
|
||||
body: {
|
||||
emptyDataSourceMessage: loadingConcentrators
|
||||
? "Loading concentrators..."
|
||||
: "No concentrators found. Click 'Add' to create your first concentrator.",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user