[Upd #507] Filters for FTA table are now popover

kbss-cvut · Jul 11, 2024 · 19bdee3 · 19bdee3
1 parent 24de2a5
commit 19bdee3
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 10 deletions.
diff --git a/src/components/table/FaultTreeAndSystemOverviewTable.tsx b/src/components/table/FaultTreeAndSystemOverviewTable.tsx
@@ -1,5 +1,17 @@
 import React, { FC, useState } from "react";
-import { Box, Table, TableBody, TableContainer, CircularProgress, TableRow, TableCell, TableHead } from "@mui/material";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableContainer,
+  CircularProgress,
+  TableRow,
+  TableCell,
+  TableHead,
+  Popover,
+  TextField,
+  Button,
+} from "@mui/material";
 import useStyles from "./FaultTreeOverviewTable.styles";
 import { FaultTree } from "@models/faultTreeModel";
 import { System } from "@models/systemModel";
@@ -36,17 +48,40 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   const [selectedSystemState, setSelectedSystem] = useSelectedSystemSummaries();
   const [loading, setLoading] = useState(false);
 
+  const [filterAnchorEl, setFilterAnchorEl] = useState<null | HTMLElement>(null);
+  const [filterType, setFilterType] = useState<null | string>(null);
+  const [filterValues, setFilterValues] = useState({ label: "", snsLabel: "" });
+
   const modifiedSystemsList = getReorderedSystemsListbySystem(systems, selectedSystemState);
   const modifiedFaultTreesList = getFilteredFaultTreesBySystem(faultTrees, selectedSystem);
 
+  const handleFilterClick = (event: React.MouseEvent<HTMLElement>, type: string) => {
+    setFilterAnchorEl(event.currentTarget);
+    setFilterType(type);
+  };
+
+  const handleFilterClose = () => {
+    setFilterAnchorEl(null);
+    setFilterType(null);
+  };
+
+  const applyFilters = () => {
+    handleFilterChange(filterValues.label, filterValues.snsLabel);
+    handleFilterClose();
+  };
+
   return (
     <Box className={classes.tableContainer}>
-      {faultTrees && <FaultTreeFilters onFilterChange={handleFilterChange} />}
-
       <TableContainer>
         <Table className={classes.table}>
           <TableHead>
-            {faultTrees && <FaultTreeTableHead sortConfig={sortConfig} onSortChange={handleSortChange} />}
+            {faultTrees && (
+              <FaultTreeTableHead
+                sortConfig={sortConfig}
+                onSortChange={handleSortChange}
+                onFilterClick={handleFilterClick}
+              />
+            )}
             {systems && <SystemTableHead />}
           </TableHead>
           <TableBody>
@@ -76,6 +111,38 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
           </TableBody>
         </Table>
       </TableContainer>
+
+      <Popover
+        open={Boolean(filterAnchorEl)}
+        anchorEl={filterAnchorEl}
+        onClose={handleFilterClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+      >
+        <Box p={2} sx={{ display: "flex", alignItems: "center" }}>
+          {filterType === "label" && (
+            <TextField
+              label="FHA Label"
+              value={filterValues.label}
+              onChange={(e) => setFilterValues({ ...filterValues, label: e.target.value })}
+            />
+          )}
+          {filterType === "snsLabel" && (
+            <TextField
+              label="SNS Label"
+              value={filterValues.snsLabel}
+              onChange={(e) => setFilterValues({ ...filterValues, snsLabel: e.target.value })}
+            />
+          )}
+          <Button onClick={applyFilters}>Apply</Button>
+        </Box>
+      </Popover>
     </Box>
   );
 };

diff --git a/src/components/table/FaultTreeTableHead.tsx b/src/components/table/FaultTreeTableHead.tsx
@@ -1,23 +1,53 @@
 import React, { FC } from "react";
-import { TableCell, TableRow } from "@mui/material";
-import SortableTableHeader from "./SortableTableHeader";
+import { TableCell, TableRow, Box, TableSortLabel } from "@mui/material";
 
 interface FaultTreeTableHeadProps {
   sortConfig: { key: string; direction: "asc" | "desc" };
   onSortChange: (columnKey: string) => void;
+  onFilterClick: (event: React.MouseEvent<HTMLElement>, type: string) => void;
 }
 
-const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange }) => {
+const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange, onFilterClick }) => {
   return (
     <TableRow>
-      <SortableTableHeader columnKey="label" label="FHA Label" sortConfig={sortConfig} onSortChange={onSortChange} />
+      <TableCell>
+        <Box display="flex" alignItems="center">
+          <span onClick={(e) => onFilterClick(e, "label")} style={{ cursor: "pointer", marginRight: "8px" }}>
+            FHA Label
+          </span>
+          <TableSortLabel
+            active={true}
+            direction={sortConfig.key === "label" ? sortConfig.direction : "asc"}
+            onClick={() => onSortChange("label")}
+          />
+        </Box>
+      </TableCell>
       <TableCell>Aircraft Type</TableCell>
-      <SortableTableHeader columnKey="snsLabel" label="SNS Label" sortConfig={sortConfig} onSortChange={onSortChange} />
+      <TableCell>
+        <Box display="flex" alignItems="center">
+          <span onClick={(e) => onFilterClick(e, "snsLabel")} style={{ cursor: "pointer", marginRight: "8px" }}>
+            SNS Label
+          </span>
+          <TableSortLabel
+            active={true}
+            direction={sortConfig.key === "snsLabel" ? sortConfig.direction : "asc"}
+            onClick={() => onSortChange("snsLabel")}
+          />
+        </Box>
+      </TableCell>
       <TableCell>Calculated Failure Rate</TableCell>
       <TableCell>FHA Based Failure Rate</TableCell>
       <TableCell>Required Failure Rate</TableCell>
       <TableCell>Last Modified</TableCell>
-      <SortableTableHeader columnKey="date" label="Created" sortConfig={sortConfig} onSortChange={onSortChange} />
+      <TableCell>
+        <TableSortLabel
+          active={true}
+          direction={sortConfig.key === "date" ? sortConfig.direction : "desc"}
+          onClick={() => onSortChange("date")}
+        >
+          Created
+        </TableSortLabel>
+      </TableCell>
       <TableCell>Last Editor</TableCell>
     </TableRow>
   );