Skip to content

Commit

Permalink
[New #507] Added filter icon when filtering is active
Browse files Browse the repository at this point in the history
  • Loading branch information
LaChope committed Jul 11, 2024
1 parent 4034e46 commit 602ee11
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 42 deletions.
39 changes: 0 additions & 39 deletions src/components/filters/FaultTreeFilters.tsx

This file was deleted.

7 changes: 5 additions & 2 deletions src/components/table/FaultTreeAndSystemOverviewTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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);
Expand All @@ -67,6 +68,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
};

const applyFilters = () => {
setAppliedFilters(filterValues); // Apply the filters
handleFilterChange(filterValues.label, filterValues.snsLabel);
handleFilterClose();
};
Expand All @@ -81,6 +83,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
sortConfig={sortConfig || initialSortConfig}
onSortChange={handleSortChange}
onFilterClick={handleFilterClick}
filterValues={appliedFilters} // Pass applied filters
/>
)}
{systems && <SystemTableHead />}
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 5 additions & 1 deletion src/components/table/FaultTreeTableHead.tsx
Original file line number Diff line number Diff line change
@@ -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"}
Expand All @@ -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"}
Expand Down

0 comments on commit 602ee11

Please sign in to comment.