concentrators logic
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user