From 4a6caa9ed31072162407f98370178cd146dc88b0 Mon Sep 17 00:00:00 2001 From: Yinyin Liu Date: Thu, 16 Apr 2026 14:21:24 +0200 Subject: [PATCH] add filters to fast search and disable data collection installations go bottom --- .../Installations/FlatInstallationView.tsx | 6 +- .../FlatInstallationView.tsx | 50 +++--- .../SodiohomeInstallations/Installation.tsx | 6 +- .../InstallationSearch.tsx | 167 +++++++++++++----- .../dashboards/Tree/InstallationTree.tsx | 10 +- 5 files changed, 166 insertions(+), 73 deletions(-) diff --git a/typescript/frontend-marios2/src/content/dashboards/Installations/FlatInstallationView.tsx b/typescript/frontend-marios2/src/content/dashboards/Installations/FlatInstallationView.tsx index cf25147d2..20d5b621a 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Installations/FlatInstallationView.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Installations/FlatInstallationView.tsx @@ -96,8 +96,12 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => { break; } - // Sort by status (alarms first) + // Sort by status (alarms first); data-collection-disabled sinks below offline. return filtered.sort((a, b) => { + const aDisabled = a.dataCollectionEnabled === false; + const bDisabled = b.dataCollectionEnabled === false; + if (aDisabled !== bDisabled) return aDisabled ? 1 : -1; + const a_status = a.status; const b_status = b.status; diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx index 374900ece..fe4139668 100644 --- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Card, CircularProgress, @@ -31,34 +31,40 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => { const [selectedInstallation, setSelectedInstallation] = useState(-1); const currentLocation = useLocation(); const baseRoute = props.product === 5 ? routes.sodistorepro_installations : routes.sodiohome_installations; - // - const sortedInstallations = [...props.installations].sort((a, b) => { - // Compare the status field of each installation and sort them based on the status. - //Installations with alarms go first - let a_status = a.status; - let b_status = b.status; - if (a_status > b_status) { - return -1; - } - if (a_status < b_status) { - return 1; - } - return 0; - }); + const sortedInstallations = useMemo(() => { + return [...props.installations].sort((a, b) => { + // Data-collection-disabled installations sink below everything (even offline). + const aDisabled = a.dataCollectionEnabled === false; + const bDisabled = b.dataCollectionEnabled === false; + if (aDisabled !== bDisabled) return aDisabled ? 1 : -1; + + // Then sort by status (alarms first) + const a_status = a.status; + const b_status = b.status; + + if (a_status > b_status) return -1; + if (a_status < b_status) return 1; + return 0; + }); + }, [props.installations]); const handleSelectOneInstallation = (installationID: number): void => { if (selectedInstallation != installationID) { setSelectedInstallation(installationID); setSelectedInstallation(-1); + const target = props.installations.find((i) => i.id === installationID); + const landingTab = + target?.dataCollectionEnabled === false ? routes.information : routes.live; + navigate( baseRoute + routes.list + routes.installation + `${installationID}` + '/' + - routes.live, + landingTab, { replace: true } @@ -77,18 +83,16 @@ const FlatInstallationView = (props: FlatInstallationViewProps) => { } })); + const isListView = + currentLocation.pathname === baseRoute + 'list' || + currentLocation.pathname === baseRoute + routes.list; + return ( diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx index c881f9ff5..19460ce48 100644 --- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx @@ -489,12 +489,14 @@ function SodioHomeInstallation(props: singleInstallationProps) { {loading && + !dataCollectionDisabled && currentTab != 'information' && // currentTab != 'manage' && currentTab != 'history' && currentTab != 'log' && currentTab != 'report' && - currentTab != 'installationTickets' && ( + currentTab != 'installationTickets' && + currentTab != 'documents' && ( } + element={} /> diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx index eac127311..7e7176a12 100644 --- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx @@ -1,7 +1,15 @@ import React, { useMemo, useState } from 'react'; -import { FormControl, Grid, InputAdornment, TextField } from '@mui/material'; +import { + FormControl, + Grid, + InputAdornment, + InputLabel, + MenuItem, + Select, + TextField +} from '@mui/material'; import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone'; -import { useIntl } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import { I_Installation } from '../../../interfaces/InstallationTypes'; import { Route, Routes, useLocation } from 'react-router-dom'; import routes from '../../../Resources/routes.json'; @@ -16,9 +24,10 @@ interface installationSearchProps { function InstallationSearch(props: installationSearchProps) { const intl = useIntl(); const [searchTerm, setSearchTerm] = useState(''); + const [sortByStatus, setSortByStatus] = useState('All Installations'); + const [sortByAction, setSortByAction] = useState('All Installations'); const currentLocation = useLocation(); const baseRoute = props.product === 5 ? routes.sodistorepro_installations : routes.sodiohome_installations; - // const [filteredData, setFilteredData] = useState(props.installations); const indexedData = useMemo(() => { return props.installations.map((item) => ({ @@ -30,56 +39,126 @@ function InstallationSearch(props: installationSearchProps) { }, [props.installations]); const filteredData = useMemo(() => { - return indexedData.filter( + let list = indexedData.filter( (item) => item.nameLower.includes(searchTerm.toLowerCase()) || item.locationLower.includes(searchTerm.toLowerCase()) || item.regionLower.includes(searchTerm.toLowerCase()) ); - }, [searchTerm, indexedData]); + + switch (sortByStatus) { + case 'Installations With Alarm': + list = list.filter((i) => i.status === 2); + break; + case 'Installations with Warning': + list = list.filter((i) => i.status === 1); + break; + case 'Functional Installations': + list = list.filter((i) => i.status === 0); + break; + case 'Offline Installations': + list = list.filter((i) => i.status === -1); + break; + case 'Installations Without Data Collection': + list = list.filter((i) => i.dataCollectionEnabled === false); + break; + } + + switch (sortByAction) { + case 'Installations With Action Flag': + list = list.filter((i) => i.testingMode === true); + break; + case 'Installations Without Action Flag': + list = list.filter((i) => i.testingMode === false); + break; + } + + return list; + }, [searchTerm, indexedData, sortByStatus, sortByAction]); + + const isListView = + currentLocation.pathname === baseRoute + 'list' || + currentLocation.pathname === baseRoute + routes.list; return ( <> - - -
- - setSearchTerm(e.target.value)} - fullWidth - InputProps={{ - startAdornment: ( - - - - ) - }} - /> - -
+ {isListView && ( + + +
+ + setSearchTerm(e.target.value)} + fullWidth + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + + + + + + + + + + + + + + + +
+ - + )} diff --git a/typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx b/typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx index f31558379..ebd696978 100644 --- a/typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx +++ b/typescript/frontend-marios2/src/content/dashboards/Tree/InstallationTree.tsx @@ -17,12 +17,16 @@ function InstallationTree() { useContext(InstallationsContext); const sortedInstallations = [...foldersAndInstallations].sort((a, b) => { - // Compare the status field of each installation and sort them based on the status. - //Installations with alarms go first - + // Folders stay on top (existing behavior). if (a.type == 'Folder') { return -1; } + // Data-collection-disabled installations sink below everything (even offline). + const aDisabled = (a as any).dataCollectionEnabled === false; + const bDisabled = (b as any).dataCollectionEnabled === false; + if (aDisabled !== bDisabled) return aDisabled ? 1 : -1; + + // Then sort by status (alarms first). let a_status = a.status; let b_status = b.status;