concentrators logic

This commit is contained in:
2025-12-22 01:20:33 -06:00
parent 5a82a717d8
commit b9d7eab9db

View File

@@ -51,12 +51,18 @@ export default function ConcentratorsPage() {
const [selectedProject, setSelectedProject] = useState(""); const [selectedProject, setSelectedProject] = useState("");
const [concentrators, setConcentrators] = useState<Concentrator[]>([]); const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
const [filteredConcentrators, setFilteredConcentrators] = useState<Concentrator[]>([]);
useEffect(() => { useEffect(() => {
if (visibleProjects.length > 0 && !selectedProject) { if (selectedProject) {
setSelectedProject(visibleProjects[0]); const filtered = concentrators.filter(
(c) => c["Area Name"] === selectedProject
);
setFilteredConcentrators(filtered);
} else {
setFilteredConcentrators(concentrators);
} }
}, [visibleProjects, selectedProject]); }, [selectedProject, concentrators]);
const loadConcentrators = async () => { const loadConcentrators = async () => {
setLoadingConcentrators(true); setLoadingConcentrators(true);
@@ -221,12 +227,10 @@ export default function ConcentratorsPage() {
} }
}; };
/* ================= FILTER ================= */ const searchFiltered = filteredConcentrators.filter(
const filtered = concentrators.filter(
(c) => (c) =>
(c["Device Name"].toLowerCase().includes(search.toLowerCase()) || c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
c["Device S/N"].toLowerCase().includes(search.toLowerCase())) && c["Device S/N"].toLowerCase().includes(search.toLowerCase())
c["Area Name"] === selectedProject
); );
/* ================= UI ================= */ /* ================= UI ================= */
@@ -249,11 +253,14 @@ export default function ConcentratorsPage() {
) : visibleProjects.length === 0 ? ( ) : visibleProjects.length === 0 ? (
<option>No projects available</option> <option>No projects available</option>
) : ( ) : (
visibleProjects.map((proj) => ( <>
<option value="">Select a project</option>
{visibleProjects.map((proj) => (
<option key={proj} value={proj}> <option key={proj} value={proj}>
{proj} {proj}
</option> </option>
)) ))}
</>
)} )}
</select> </select>
@@ -279,6 +286,7 @@ export default function ConcentratorsPage() {
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
onClick={() => { onClick={() => {
if (!selectedProject) return;
setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject }); setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
setGatewayForm(getEmptyGatewayData()); setGatewayForm(getEmptyGatewayData());
setErrors({}); setErrors({});
@@ -346,8 +354,8 @@ export default function ConcentratorsPage() {
title="Concentrators" title="Concentrators"
isLoading={loadingConcentrators} isLoading={loadingConcentrators}
columns={[ columns={[
{ title: "Device Name", field: "Device Name" }, { title: "Device Name", field: "Device Name", render: (rowData) => rowData["Device Name"] || "-" },
{ title: "Device S/N", field: "Device S/N" }, { title: "Device S/N", field: "Device S/N", render: (rowData) => rowData["Device S/N"] || "-" },
{ {
title: "Device Status", title: "Device Status",
field: "Device Status", field: "Device Status",
@@ -359,15 +367,15 @@ export default function ConcentratorsPage() {
: "text-red-600 border-red-600" : "text-red-600 border-red-600"
}`} }`}
> >
{rowData["Device Status"]} {rowData["Device Status"] || "-"}
</span> </span>
), ),
}, },
{ title: "Operator", field: "Operator" }, { title: "Operator", field: "Operator", render: (rowData) => rowData["Operator"] || "-" },
{ title: "Area Name", field: "Area Name" }, { title: "Area Name", field: "Area Name", render: (rowData) => rowData["Area Name"] || "-" },
{ title: "Installed Time", field: "Installed Time", type: "date" }, { title: "Installed Time", field: "Installed Time", type: "date", render: (rowData) => rowData["Installed Time"] || "-" },
]} ]}
data={filtered} data={searchFiltered}
onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)} onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)}
options={{ options={{
actionsColumnIndex: -1, actionsColumnIndex: -1,