v2.0.35.1

govtool/frontend/src/components/atoms/ChipButton.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { Chip, ChipProps, IconButton } from "@mui/material";
+import { IconX } from "@intersect.mbo/intersectmbo.org-icons-set";
+
+interface ChipButtonProps
+  extends Omit<ChipProps, "color" | "variant" | "deleteIcon"> {
+  label: React.ReactNode;
+  onDelete: () => void;
+  bgColor?: string;
+  deleteIconPosition?: "left" | "right";
+  iconSize?: number;
+  testId?: string;
+}
+
+const ChipButton: React.FC<ChipButtonProps> = ({
+  label,
+  onDelete,
+  bgColor = "#B9CCF5",
+  deleteIconPosition = "left",
+  iconSize = 14,
+  testId,
+  sx,
+  ...rest
+}) => (
+  <Chip
+    {...rest}
+    label={label}
+    onDelete={onDelete}
+    data-testid={testId}
+    deleteIcon={
+      <IconButton
+        disableRipple
+        sx={{ p: "4px", "&:hover": { backgroundColor: "transparent" } }}
+      >
+        <IconX style={{ width: iconSize, height: iconSize, color: "#222" }} />
+      </IconButton>
+    }
+    sx={{
+      backgroundColor: bgColor,
+      borderRadius: 999,
+      height: "auto",
+      py: 0.75,
+      pl: 1.75,
+      pr: 2.25,
+      display: "flex",
+      flexDirection: deleteIconPosition === "right" ? "row" : "row-reverse",
+      gap: 0.5,
+      "& .MuiChip-label": {
+        fontSize: 12,
+        fontWeight: 400,
+        color: "#000",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        px: 0,
+        py: 0,
+      },
+      "& .MuiChip-deleteIcon": { m: 0 },
+      ...(sx as object),
+    }}
+  />
+);
+
+export default ChipButton;

govtool/frontend/src/components/molecules/DataActionsBar.tsx

@@ -1,22 +1,19 @@
-import { Dispatch, FC, SetStateAction } from "react";
+import { Dispatch, FC, SetStateAction, useMemo, useState } from "react";
 import { Box, InputBase, IconButton } from "@mui/material";
 import Search from "@mui/icons-material/Search";
 import CloseIcon from "@mui/icons-material/Close";
 
 import { DataActionsFilters, DataActionsSorting } from "@molecules";
 import { OrderActionsChip } from "./OrderActionsChip";
-import { theme } from "@/theme";
+import ChipButton from "../atoms/ChipButton";
 
 type DataActionsBarProps = {
   chosenFilters?: string[];
   chosenFiltersLength?: number;
   chosenSorting: string;
   closeFilters?: () => void;
   closeSorts: () => void;
-  filterOptions?: {
-    key: string;
-    label: string;
-  }[];
+  filterOptions?: { key: string; label: string }[];
   filtersOpen?: boolean;
   filtersTitle?: string;
   isFiltering?: boolean;
@@ -26,107 +23,155 @@ type DataActionsBarProps = {
   setChosenSorting: Dispatch<SetStateAction<string>>;
   setFiltersOpen?: Dispatch<SetStateAction<boolean>>;
   setSearchText: Dispatch<SetStateAction<string>>;
-  setSortOpen: Dispatch<SetStateAction<boolean>>;
-  sortOpen: boolean;
-  sortOptions?: {
-    key: string;
-    label: string;
-  }[];
+  setSortOpen?: Dispatch<SetStateAction<boolean>>;
+  sortOpen?: boolean;
+  sortOptions?: { key: string; label: string }[];
 };
 
-export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
-  const {
-    chosenFilters = [],
-    chosenFiltersLength,
-    chosenSorting,
-    closeFilters = () => {},
-    closeSorts,
-    filterOptions = [],
-    filtersOpen,
-    filtersTitle,
-    isFiltering = true,
-    searchText,
-    setChosenFilters = () => {},
-    setChosenSorting,
-    setFiltersOpen,
-    setSearchText,
-    setSortOpen,
-    sortOpen,
-    sortOptions = [],
-    placeholder = "Search...",
-  } = props;
-  const {
-    palette: { boxShadow2 },
-  } = theme;
+export const DataActionsBar: FC<DataActionsBarProps> = ({
+  chosenFilters = [],
+  chosenFiltersLength,
+  chosenSorting,
+  closeFilters = () => {},
+  closeSorts,
+  filterOptions = [],
+  filtersOpen,
+  filtersTitle,
+  isFiltering = true,
+  searchText,
+  setChosenFilters = () => {},
+  setChosenSorting,
+  setFiltersOpen,
+  setSearchText,
+  setSortOpen,
+  sortOpen,
+  sortOptions = [],
+  placeholder = "Search...",
+}) => {
+  const [localFiltersOpen, setLocalFiltersOpen] = useState(false);
+  const [localSortOpen, setLocalSortOpen] = useState(false);
+
+  const effectiveFiltersOpen = filtersOpen ?? localFiltersOpen;
+  const effectiveSortOpen = sortOpen ?? localSortOpen;
+  const setEffectiveFiltersOpen = setFiltersOpen ?? setLocalFiltersOpen;
+  const setEffectiveSortOpen = setSortOpen ?? setLocalSortOpen;
+
+  const selectedFilterItems = useMemo(
+    () =>
+      (chosenFilters ?? []).map((key) => ({
+        key,
+        label: (filterOptions ?? []).find((o) => o.key === key)?.label ?? key,
+      })),
+    [chosenFilters, filterOptions],
+  );
+
+  const handleRemoveFilter = (key: string) =>
+    setChosenFilters?.((prev) => (prev ?? []).filter((k) => k !== key));
 
   return (
-    <Box alignItems="center" display="flex" justifyContent="space-between">
-      <InputBase
-        inputProps={{ "data-testid": "search-input" }}
-        onChange={(e) => setSearchText(e.target.value)}
-        placeholder={placeholder}
-        value={searchText}
-        startAdornment={
-          <Search
-            style={{
-              color: "#99ADDE",
-              height: 16,
-              marginRight: 4,
-              width: 16,
-            }}
-          />
-        }
-        endAdornment={
-          searchText && (
-            <IconButton
-              size="small"
-              onClick={() => setSearchText("")}
-              sx={{ ml: 1 }}
-            >
-              <CloseIcon fontSize="small" />
-            </IconButton>
-          )
-        }
-        sx={{
-          bgcolor: "white",
-          border: 1,
-          borderColor: "secondaryBlue",
-          borderRadius: 50,
-          boxShadow: `2px 2px 20px 0px ${boxShadow2}`,
-          fontSize: 11,
-          fontWeight: 500,
-          height: 48,
-          padding: "16px 24px",
-          maxWidth: 500,
-        }}
-      />
-      <OrderActionsChip
-        chosenFiltersLength={chosenFiltersLength}
-        filtersOpen={filtersOpen}
-        isFiltering={isFiltering}
-        setFiltersOpen={setFiltersOpen}
-        chosenSorting={chosenSorting}
-        setSortOpen={setSortOpen}
-        sortOpen={sortOpen}
+    <Box display="flex" flexDirection="column" gap={1.5}>
+      <Box
+        alignItems="center"
+        display="flex"
+        justifyContent="space-between"
+        gap={1.5}
+        flexWrap="wrap"
       >
-        {filtersOpen && (
-          <DataActionsFilters
-            chosenFilters={chosenFilters}
-            setChosenFilters={setChosenFilters}
-            closeFilters={closeFilters}
-            options={filterOptions}
-            title={filtersTitle}
-          />
-        )}
-        {sortOpen && (
-          <DataActionsSorting
-            chosenSorting={chosenSorting}
-            setChosenSorting={setChosenSorting}
-            closeSorts={closeSorts}
-            options={sortOptions}
-          />
-        )}
-      </OrderActionsChip>
+        <InputBase
+          inputProps={{ "data-testid": "search-input" }}
+          onChange={(e) => setSearchText(e.target.value)}
+          placeholder={placeholder}
+          value={searchText}
+          startAdornment={
+            <Search
+              style={{
+                color: "#99ADDE",
+                height: 16,
+                marginRight: 4,
+                width: 16,
+              }}
+            />
+          }
+          endAdornment={
+            searchText && (
+              <IconButton
+                size="small"
+                onClick={() => setSearchText("")}
+                sx={{ ml: 1 }}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            )
+          }
+          sx={{
+            bgcolor: "white",
+            border: 1,
+            borderColor: "#6E87D9",
+            borderRadius: 50,
+            boxShadow: "2px 2px 20px 0 rgba(0,0,0,0.05)",
+            fontSize: 11,
+            fontWeight: 500,
+            height: 48,
+            padding: "16px 24px",
+            maxWidth: 500,
+            flex: "0 0 auto",
+          }}
+        />
+
+        <OrderActionsChip
+          chosenFiltersLength={chosenFiltersLength}
+          filtersOpen={effectiveFiltersOpen}
+          isFiltering={isFiltering}
+          setFiltersOpen={setEffectiveFiltersOpen}
+          chosenSorting={chosenSorting}
+          setSortOpen={setEffectiveSortOpen}
+          sortOpen={effectiveSortOpen}
+        >
+          {effectiveFiltersOpen && (
+            <DataActionsFilters
+              chosenFilters={chosenFilters}
+              setChosenFilters={setChosenFilters}
+              closeFilters={closeFilters}
+              options={filterOptions}
+              title={filtersTitle}
+            />
+          )}
+          {effectiveSortOpen && (
+            <DataActionsSorting
+              chosenSorting={chosenSorting}
+              setChosenSorting={setChosenSorting}
+              closeSorts={closeSorts}
+              options={sortOptions}
+            />
+          )}
+        </OrderActionsChip>
+      </Box>
+
+      {selectedFilterItems.length > 0 && (
+        <Box
+          display="flex"
+          flexWrap="wrap"
+          gap={1}
+          alignItems="flex-start"
+          sx={{
+            mt: 2,
+            "& > *": { flex: "0 0 auto", alignSelf: "flex-start" },
+          }}
+        >
+          {selectedFilterItems.map(({ key, label }) => (
+            <ChipButton
+              key={key}
+              label={label}
+              onDelete={() => handleRemoveFilter(key)}
+              deleteIconPosition="left"
+              bgColor="#B9CCF5"
+              size="small"
+            />
+          ))}
+        </Box>
+      )}
     </Box>
   );
 };
+
+export default DataActionsBar;