From 915936be21d7daf3fbae2e071f1d5c1b510450ea Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 10 Nov 2022 13:01:37 +0100
Subject: [PATCH] feat: All select all / select none buttons to filters drawer

---
 app/components/chart-footnotes.tsx      | 28 +++++----
 app/configurator/components/filters.tsx | 83 ++++++++++++++++++-------
 2 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index 9fdd3bda8b..b3997c3164 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -30,18 +30,22 @@ export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
       flexWrap: "wrap",
       overflow: "hidden",
 
-      // Separator between flex elements, the trick to have them not displayed
-      // for each line leftmost element is to have them negatively positioned
-      // cut by the overflow hidden
-      "& > *:before": {
-        content: '" "',
-        display: "block",
-        height: "3px",
-        width: "3px ",
-        borderRadius: "3px",
-        position: "relative",
-        left: "calc(-1 * var(--column-gap) / 2)",
-        backgroundColor: theme.palette.grey[600],
+      "& > button": {
+        minWidth: "auto",
+
+        // Separator between flex elements, the trick to have them not displayed
+        // for each line leftmost element is to have them negatively positioned
+        // cut by the overflow hidden
+        "&:before": {
+          content: '" "',
+          display: "block",
+          height: "3px",
+          width: "3px ",
+          borderRadius: "3px",
+          position: "relative",
+          left: "calc(-1 * var(--column-gap) / 2)",
+          backgroundColor: theme.palette.grey[600],
+        },
       },
     },
   })
diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
index 327647045f..3a047e46d5 100644
--- a/app/configurator/components/filters.tsx
+++ b/app/configurator/components/filters.tsx
@@ -33,6 +33,7 @@ import React, {
   useState,
 } from "react";
 
+import { useFootnotesStyles } from "@/components/chart-footnotes";
 import Flex from "@/components/flex";
 import { Loading } from "@/components/hint";
 import {
@@ -120,7 +121,7 @@ const useStyles = makeStyles((theme: Theme) => {
       width: "100%",
     },
     textInput: {
-      marginTop: theme.spacing(4),
+      margin: `${theme.spacing(4)} 0px`,
       padding: "0px 12px",
       width: "100%",
       height: 40,
@@ -214,6 +215,39 @@ const getColorConfig = (
     | undefined;
 };
 
+const FilterControls = ({
+  selectAll,
+  selectNone,
+  allKeysLength,
+  activeKeysLength,
+}: {
+  selectAll: () => void;
+  selectNone: () => void;
+  allKeysLength: number;
+  activeKeysLength: number;
+}) => {
+  const classes = useFootnotesStyles({ useMarginTop: false });
+
+  return (
+    <Box className={classes.actions}>
+      <Button
+        onClick={selectAll}
+        variant="inline"
+        disabled={activeKeysLength === allKeysLength}
+      >
+        <Trans id="controls.filter.select.all">Select all</Trans>
+      </Button>
+      <Button
+        onClick={selectNone}
+        variant="inline"
+        disabled={activeKeysLength === 0}
+      >
+        <Trans id="controls.filter.select.none">Select none</Trans>
+      </Button>
+    </Box>
+  );
+};
+
 const MultiFilterContent = ({
   field,
   colorComponent,
@@ -232,11 +266,11 @@ const MultiFilterContent = ({
 
   const { selectAll, selectNone } = useDimensionSelection(dimensionIri);
 
-  const { optionsByValue } = useMemo(() => {
-    const flat = getOptionsFromTree(tree);
-    const optionsByValue = keyBy(flat, (x) => x.value);
+  const { flatOptions, optionsByValue } = useMemo(() => {
+    const flatOptions = getOptionsFromTree(tree);
+    const optionsByValue = keyBy(flatOptions, (x) => x.value);
     return {
-      options: sortBy(flat, [groupByParent, (x) => x.label]),
+      flatOptions,
       optionsByValue,
     };
   }, [tree]);
@@ -351,22 +385,12 @@ const MultiFilterContent = ({
     <Box sx={{ position: "relative" }}>
       <Box mb={4}>
         <Flex justifyContent="space-between" gap="0.75rem">
-          <Flex gap="0.75rem">
-            <Button
-              onClick={selectAll}
-              variant="inline"
-              disabled={activeKeys.size === allValues.length}
-            >
-              <Trans id="controls.filter.select.all">Select all</Trans>
-            </Button>
-            <Button
-              onClick={selectNone}
-              variant="inline"
-              disabled={activeKeys.size === 0}
-            >
-              <Trans id="controls.filter.select.none">Select none</Trans>
-            </Button>
-          </Flex>
+          <FilterControls
+            selectAll={selectAll}
+            selectNone={selectNone}
+            allKeysLength={allValues.length}
+            activeKeysLength={activeKeys.size}
+          />
           <div>
             <Button
               variant="contained"
@@ -463,6 +487,7 @@ const MultiFilterContent = ({
           <DrawerContent
             pendingValuesRef={pendingValuesRef}
             options={tree}
+            flatOptions={flatOptions}
             onClose={handleCloseAutocomplete}
             values={values}
             hasColorMapping={hasColorMapping}
@@ -732,12 +757,20 @@ const DrawerContent = forwardRef<
   {
     onClose: () => void;
     options: HierarchyValue[];
+    flatOptions: HierarchyValue[];
     values: HierarchyValue[];
     pendingValuesRef: MutableRefObject<HierarchyValue[]>;
     hasColorMapping: boolean;
   }
 >((props, ref) => {
-  const { onClose, values, options, pendingValuesRef, hasColorMapping } = props;
+  const {
+    onClose,
+    options,
+    flatOptions,
+    values,
+    pendingValuesRef,
+    hasColorMapping,
+  } = props;
   const classes = useStyles();
   const [textInput, setTextInput] = useState("");
   const [pendingValues, setPendingValues] = useState<HierarchyValue[]>(
@@ -782,6 +815,12 @@ const DrawerContent = forwardRef<
           }
           sx={{ typography: "body2" }}
         />
+        <FilterControls
+          selectAll={() => setPendingValues(flatOptions)}
+          selectNone={() => setPendingValues([])}
+          allKeysLength={flatOptions.length}
+          activeKeysLength={pendingValues.length}
+        />
       </Box>
       <Tree
         depth={0}