Feat: #212 Admin Logs filter: It shall be possible to filter using mu…

…ltiple choices as in ED
decentralised-dataexchange · Jan 5, 2024 · e66b435 · e66b435
1 parent db10ec0
commit e66b435
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 51 deletions.
diff --git a/src/components/dropdowns/dropdown.tsx b/src/components/dropdowns/dropdown.tsx
@@ -1,78 +1,89 @@
-import { useState, useEffect } from "react";
+import React from "react";
 import {
   FormControl,
   Select,
   OutlinedInput,
   MenuItem,
+  Chip,
   SelectChangeEvent,
 } from "@mui/material";
-import { useFilterStore } from "../../store/store";
 
 interface Props {
   displayValue: string;
   selectWidth?: string;
   dropdownValues: {
     value: string;
-    label: string
+    label: string;
   }[];
   setSelectedFilterValue?: any;
-  setSubscriptionMethodValue: any;
-  subscriptionMethodValue: any;
+  selectedChips: any;
+  setSelectedChips: any;
 }
 
 const Dropdown = (props: Props) => {
   const {
     displayValue,
     selectWidth,
     dropdownValues,
-    setSelectedFilterValue,
-    subscriptionMethodValue,
-    setSubscriptionMethodValue,
+    selectedChips,
+    setSelectedChips,
   } = props;
 
-  const [handleFilterDropDownTriggered, setHandleFilterDropDownTriggered] =
-    useState(false);
-
-  const handleChange = (
-    event: SelectChangeEvent<typeof subscriptionMethodValue>
-  ) => {
+  const handleChange = (event: SelectChangeEvent<typeof selectedChips>) => {
     const {
       target: { value },
     } = event;
-    setSubscriptionMethodValue(
-      // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : value
-    );
+    const selectedValue = typeof value === "string" ? value.split(",") : value;
+
+    setSelectedChips(selectedValue);
   };
 
-  useEffect(() => {
-    setSelectedFilterValue(
-      subscriptionMethodValue?.[0] ? subscriptionMethodValue[0] : ""
+  const handleDeleteChip = (chipToDelete: string) => () => {
+    const updatedChips = selectedChips.filter(
+      (chip: string) => chip !== chipToDelete
     );
-    setHandleFilterDropDownTriggered(!handleFilterDropDownTriggered);
-  }, [subscriptionMethodValue]);
+    setSelectedChips(updatedChips);
+  };
+
+  const stopPropagation = (event: React.MouseEvent) => {
+    event.stopPropagation();
+  };
 
   return (
     <FormControl
-      sx={{ width: selectWidth ? { xs: "250px", sm: selectWidth } : "250px" }}
+      sx={{
+        width: selectWidth ? { xs: "250px", sm: selectWidth } : "250px",
+      }}
     >
       <Select
         displayEmpty
-        value={subscriptionMethodValue}
+        multiple
+        value={selectedChips}
         onChange={handleChange}
         input={<OutlinedInput />}
         renderValue={(selected) => {
           if (selected.length === 0) {
             return <em style={{ fontSize: "14px" }}>{displayValue}</em>;
           }
-
-          return selected.join(", ");
+          return (
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
+              {selected.map((value: string) => (
+                <Chip
+                  key={value}
+                  label={value}
+                  onDelete={handleDeleteChip(value)}
+                  onMouseDown={stopPropagation}
+                  style={{ margin: "2px" }}
+                />
+              ))}
+            </div>
+          );
         }}
         inputProps={{ "aria-label": "Without label" }}
       >
-        {dropdownValues.map((dropdownValues) => (
-          <MenuItem key={dropdownValues.value} value={dropdownValues.value}>
-            {dropdownValues.label}
+        {dropdownValues.map((dropdownValue) => (
+          <MenuItem key={dropdownValue.value} value={dropdownValue.value}>
+            {dropdownValue.label}
           </MenuItem>
         ))}
       </Select>

diff --git a/src/pages/viewLogs/viewLogs.tsx b/src/pages/viewLogs/viewLogs.tsx
@@ -50,11 +50,10 @@ const buttonStyle = {
 };
 
 const ViewLogs = () => {
-  const [selectedFilterValue, setSelectedFilterValue] = useState<any>();
-  const [subscriptionMethodValue, setSubscriptionMethodValue] = useState<
-    string[]
-  >([]);
-  const [listFilterValue, setListFilterValue] = useState(0);
+  const [selectViewAll, setSelectViewAll] = useState<any>();
+  const [selectedChips, setSelectedChips] = useState<string[]>([]);
+
+  const [listFilterValue, setListFilterValue] = useState([0]);
   const { t } = useTranslation("translation");
 
   const filterDrpodownValues = [
@@ -64,17 +63,30 @@ const ViewLogs = () => {
   ];
 
   useEffect(() => {
-    if (selectedFilterValue === "Security") {
-      setListFilterValue(1);
-    } else if (selectedFilterValue === "API Calls") {
-      setListFilterValue(2);
-    } else if (selectedFilterValue === "Webhooks") {
-      setListFilterValue(5);
-    } else if (selectedFilterValue === "all") {
-      setListFilterValue(0);
-      setSubscriptionMethodValue([]);
+    const containsWebhooks = selectedChips?.includes("Webhooks");
+    const containsAPICalls = selectedChips?.includes("API Calls");
+    const containsSecurity = selectedChips?.includes("Security");
+
+    if (selectedChips?.length === 0 || selectViewAll === "all") {
+      setListFilterValue([0]);
+      setSelectedChips([]);
+      setSelectViewAll([]);
+    } else if (containsWebhooks && containsAPICalls && containsSecurity) {
+      setListFilterValue([1, 2, 5]);
+    } else if (containsWebhooks && containsAPICalls && !containsSecurity) {
+      setListFilterValue([2, 5]);
+    } else if (containsWebhooks && containsSecurity && !containsAPICalls) {
+      setListFilterValue([1, 5]);
+    } else if (containsAPICalls && containsSecurity && !containsWebhooks) {
+      setListFilterValue([1, 2]);
+    } else if (containsWebhooks && !containsAPICalls && !containsSecurity) {
+      setListFilterValue([5]);
+    } else if (containsAPICalls && !containsSecurity && !containsWebhooks) {
+      setListFilterValue([2]);
+    } else if (containsSecurity && !containsAPICalls && !containsWebhooks) {
+      setListFilterValue([1]);
     }
-  }, [selectedFilterValue]);
+  }, [selectedChips, selectViewAll]);
 
   return (
     <Container>
@@ -93,14 +105,13 @@ const ViewLogs = () => {
             displayValue={t("viewLogs.filterCategories")}
             selectWidth={"400px"}
             dropdownValues={filterDrpodownValues}
-            setSelectedFilterValue={setSelectedFilterValue}
-            setSubscriptionMethodValue={setSubscriptionMethodValue}
-            subscriptionMethodValue={subscriptionMethodValue}
+            selectedChips={selectedChips}
+            setSelectedChips={setSelectedChips}
           />
           <Button
             style={buttonStyle}
             onClick={() => {
-              setSelectedFilterValue("all");
+              setSelectViewAll("all");
             }}
             sx={{
               color: "black",
@@ -134,8 +145,16 @@ const ViewLogs = () => {
               width: "100%",
             }}
           >
-            <TextField source="action" label={t("viewLogs.action")} sortable={false} />
-            <TextField source="typeStr" label={t("viewLogs.category")} sortable={false} />
+            <TextField
+              source="action"
+              label={t("viewLogs.action")}
+              sortable={false}
+            />
+            <TextField
+              source="typeStr"
+              label={t("viewLogs.category")}
+              sortable={false}
+            />
             <TextField
               source="timestamp"
               label={t("common.timestamp")}