Merge pull request #522 from kbss-cvut/add-filter-icon

Added filter icon when filtering is active
kbss-cvut · Jul 11, 2024 · f01be5b · f01be5b
2 parents 04b95b7 + 602ee11
commit f01be5b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 42 deletions.
diff --git a/src/components/filters/FaultTreeFilters.tsx b/src/components/filters/FaultTreeFilters.tsx
diff --git a/src/components/table/FaultTreeAndSystemOverviewTable.tsx b/src/components/table/FaultTreeAndSystemOverviewTable.tsx
@@ -19,7 +19,6 @@ import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries";
 import { getFilteredFaultTreesBySystem, getReorderedSystemsListbySystem } from "@utils/utils";
 import FaultTreeTableBody from "./FaultTreeTableBody";
 import SystemTableBody from "./SystemTableBody";
-import FaultTreeFilters from "@components/filters/FaultTreeFilters";
 import FaultTreeTableHead from "./FaultTreeTableHead";
 import SystemTableHead from "./SystemTableHead";
 
@@ -51,6 +50,8 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   const [filterAnchorEl, setFilterAnchorEl] = useState<null | HTMLElement>(null);
   const [filterType, setFilterType] = useState<null | string>(null);
   const [filterValues, setFilterValues] = useState({ label: "", snsLabel: "" });
+  const [appliedFilters, setAppliedFilters] = useState({ label: "", snsLabel: "" });
+
   const initialSortConfig: { key: string; direction: "asc" | "desc" } = { key: "date", direction: "desc" };
 
   const modifiedSystemsList = getReorderedSystemsListbySystem(systems, selectedSystemState);
@@ -67,6 +68,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   };
 
   const applyFilters = () => {
+    setAppliedFilters(filterValues); // Apply the filters
     handleFilterChange(filterValues.label, filterValues.snsLabel);
     handleFilterClose();
   };
@@ -81,6 +83,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
                 sortConfig={sortConfig || initialSortConfig}
                 onSortChange={handleSortChange}
                 onFilterClick={handleFilterClick}
+                filterValues={appliedFilters} // Pass applied filters
               />
             )}
             {systems && <SystemTableHead />}
@@ -126,7 +129,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
           horizontal: "center",
         }}
       >
-        <Box p={2}>
+        <Box p={2} sx={{ display: "flex", alignItems: "center" }}>
           {filterType === "label" && (
             <TextField
               label="FHA Label"

diff --git a/src/components/table/FaultTreeTableHead.tsx b/src/components/table/FaultTreeTableHead.tsx
@@ -1,20 +1,23 @@
 import React, { FC } from "react";
 import { TableCell, TableRow, Box, TableSortLabel } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
 
 interface FaultTreeTableHeadProps {
   sortConfig: { key: string; direction: "asc" | "desc" };
   onSortChange: (columnKey: string) => void;
   onFilterClick: (event: React.MouseEvent<HTMLElement>, type: string) => void;
+  filterValues: { label: string; snsLabel: string };
 }
 
-const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange, onFilterClick }) => {
+const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange, onFilterClick, filterValues }) => {
   return (
     <TableRow>
       <TableCell>
         <Box display="flex" alignItems="center">
           <span onClick={(e) => onFilterClick(e, "label")} style={{ cursor: "pointer", marginRight: "8px" }}>
             FHA Label
           </span>
+          {filterValues.label && <FilterListIcon />}
           <TableSortLabel
             active={sortConfig.key === "label"}
             direction={sortConfig.key === "label" ? sortConfig.direction : "asc"}
@@ -28,6 +31,7 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           <span onClick={(e) => onFilterClick(e, "snsLabel")} style={{ cursor: "pointer", marginRight: "8px" }}>
             SNS Label
           </span>
+          {filterValues.snsLabel && <FilterListIcon />}
           <TableSortLabel
             active={sortConfig.key === "snsLabel"}
             direction={sortConfig.key === "snsLabel" ? sortConfig.direction : "asc"}