Merge pull request #520 from kbss-cvut/filter-FTA-table

Implement filtering of fta table

src/components/dashboard/content/list/FaultTreeOverview.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { ViewType } from "./types";
 import OverviewTypeToggler from "./OverviewTypeToggler";
-import FaultTreeAndSystemOverviewTable from "./FaultTreeAndSystemOverviewTable";
+import FaultTreeAndSystemOverviewTable from "../../../table/FaultTreeAndSystemOverviewTable";
 import FaultTreeAndSystemOverviewCardsList from "./FaultTreeAndSystemOverviewCardsList";
 import { FaultTree } from "@models/faultTreeModel";
 import { contextMenuDefaultAnchor, ElementContextMenuAnchor } from "@utils/contextMenu";
@@ -27,6 +27,11 @@ const FaultTreeOverview = () => {
   const [contextMenuAnchor, setContextMenuAnchor] = useState<ElementContextMenuAnchor>(contextMenuDefaultAnchor);
   const [createFaultTreeDialogOpen, setCreateFaultTreeDialogOpen] = useState<boolean>(false);
   const [selectedSystem] = useSelectedSystemSummaries();
+  const [currentFilters, setCurrentFilters] = useState<{ label?: string; snsLabel?: string }>({});
+  const [sortConfig, setSortConfig] = useState<{ key: string; direction: "asc" | "desc" }>({
+    key: "date",
+    direction: "desc",
+  });
   const isTreeCreationDisabled = !selectedSystem;
 
   useEffect(() => {
@@ -40,6 +45,19 @@ const FaultTreeOverview = () => {
     triggerFetch();
   }, []);
 
+  const handleFilterChange = async (label: string, snsLabel: string) => {
+    const filters = { label, snsLabel };
+    setCurrentFilters(filters);
+    await triggerFetch({ ...filters, sort: `${sortConfig.direction === "asc" ? "+" : "-"}${sortConfig.key}` });
+  };
+
+  const handleSortChange = async (columnKey: string) => {
+    const isAsc = sortConfig.key === columnKey && sortConfig.direction === "asc";
+    const newSortConfig = { key: columnKey, direction: isAsc ? "desc" : "asc" };
+    setSortConfig(newSortConfig);
+    await triggerFetch({ ...currentFilters, sort: `${newSortConfig.direction === "asc" ? "+" : "-"}${columnKey}` });
+  };
+
   const toggleView = (viewType: ViewType) => {
     if (selectedView === viewType) return;
     setSelectedView(viewType);
@@ -89,6 +107,9 @@ const FaultTreeOverview = () => {
           selectedSystem={selectedSystem}
           faultTrees={faultTrees}
           handleFaultTreeContextMenu={handleContextMenu}
+          handleFilterChange={handleFilterChange}
+          sortConfig={sortConfig}
+          handleSortChange={handleSortChange}
         />
       ) : (
         <FaultTreeAndSystemOverviewCardsList

src/components/dashboard/content/list/SystemOverview.tsx

@@ -8,7 +8,7 @@ import { contextMenuDefaultAnchor, ElementContextMenuAnchor } from "@utils/conte
 import SystemContextMenu from "@components/editor/system/menu/SystemContextMenu";
 import OverviewTypeToggler from "./OverviewTypeToggler";
 import { ViewType } from "./types";
-import FaultTreeAndSystemOverviewTable from "./FaultTreeAndSystemOverviewTable";
+import FaultTreeAndSystemOverviewTable from "../../../table/FaultTreeAndSystemOverviewTable";
 import FaultTreeAndSystemOverviewCardsList from "./FaultTreeAndSystemOverviewCardsList";
 import { useTranslation } from "react-i18next";
 import { Button, Box } from "@mui/material";

src/components/filters/FaultTreeFilters.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useState } from "react";
+import { Box, TextField, Button } from "@mui/material";
+
+interface FaultTreeFiltersProps {
+  onFilterChange: (label: string, snsLabel: string) => void;
+}
+
+const FaultTreeFilters: FC<FaultTreeFiltersProps> = ({ onFilterChange }) => {
+  const [label, setLabel] = useState<string>("");
+  const [snsLabel, setSnsLabel] = useState<string>("");
+
+  const handleFilterChange = () => {
+    onFilterChange(label, snsLabel);
+  };
+
+  return (
+    <Box display="flex" alignItems="center" mb={2}>
+      <TextField
+        label="FHA Label"
+        value={label}
+        onChange={(e) => setLabel(e.target.value)}
+        variant="outlined"
+        style={{ marginRight: 8 }}
+      />
+      <TextField
+        label="SNS Label"
+        value={snsLabel}
+        onChange={(e) => setSnsLabel(e.target.value)}
+        variant="outlined"
+        style={{ marginRight: 8 }}
+      />
+      <Button variant="contained" color="primary" onClick={handleFilterChange}>
+        Apply Filters
+      </Button>
+    </Box>
+  );
+};
+
+export default FaultTreeFilters;