Add 'Select all' option with counter to filters

client/src/components/Projects/ColumnHeaderPopups/NumberPopup.jsx

@@ -6,6 +6,7 @@ import { MdClose } from "react-icons/md";
 import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import ToggleCheckbox from "components/UI/ToggleCheckbox";
+import { selectAllCheckboxes } from "helpers/util";
 
 const useStyles = createUseStyles({
   searchBarWrapper: {
@@ -189,12 +190,23 @@ const NumberPopup = ({
           alignItems: "baseline"
         }}
       >
-        <button
-          className={classes.toggleButton}
-          onClick={() => setSelectedListItems([])}
-        >
-          clear
-        </button>
+        <div style={{ display: "flex" }}>
+          <button
+            className={classes.toggleButton}
+            onClick={() =>
+              selectAllCheckboxes(filteredOptions, setSelectedListItems)
+            }
+          >
+            Select all {filteredOptions.length}
+          </button>
+          <div style={{ display: "flex", alignItems: "center" }}>-</div>
+          <button
+            className={classes.toggleButton}
+            onClick={() => setSelectedListItems([])}
+          >
+            Clear
+          </button>
+        </div>
         <div>{`${selectedListItems.length}  selected`}</div>
       </div>
       <div className={classes.searchBarWrapper}>

client/src/components/Projects/ColumnHeaderPopups/StringListPopup.jsx

@@ -5,6 +5,7 @@ import RadioButton from "../../UI/RadioButton";
 import { MdClose } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import ToggleCheckbox from "components/UI/ToggleCheckbox";
+import { selectAllCheckboxes } from "helpers/util";
 
 /*
 Variant of the StringPopup that is for text columns with a small number of choices that do not need the search box feature
@@ -185,12 +186,23 @@ const TextPopup = ({
           alignItems: "baseline"
         }}
       >
-        <button
-          className={classes.toggleButton}
-          onClick={() => setSelectedListItems([])}
-        >
-          clear
-        </button>
+        <div style={{ display: "flex" }}>
+          <button
+            className={classes.toggleButton}
+            onClick={() =>
+              selectAllCheckboxes(filteredOptions, setSelectedListItems)
+            }
+          >
+            Select all {filteredOptions.length}
+          </button>
+          <div style={{ display: "flex", alignItems: "center" }}>-</div>
+          <button
+            className={classes.toggleButton}
+            onClick={() => setSelectedListItems([])}
+          >
+            Clear
+          </button>
+        </div>
         <div>{`${selectedListItems.length}  selected`}</div>
       </div>
 

client/src/components/Projects/ColumnHeaderPopups/StringPopup.jsx

@@ -6,6 +6,7 @@ import { MdClose } from "react-icons/md";
 import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import ToggleCheckbox from "components/UI/ToggleCheckbox";
+import { selectAllCheckboxes } from "helpers/util";
 
 /*
 Variant of the TextPopup that gets rid of all the quirky accommodation of dro and author filtering used on the My Projects Page
@@ -200,12 +201,23 @@ const TextPopup = ({
           alignItems: "baseline"
         }}
       >
-        <button
-          className={classes.toggleButton}
-          onClick={() => setSelectedListItems([])}
-        >
-          clear
-        </button>
+        <div style={{ display: "flex" }}>
+          <button
+            className={classes.toggleButton}
+            onClick={() =>
+              selectAllCheckboxes(filteredOptions, setSelectedListItems)
+            }
+          >
+            Select all {filteredOptions.length}
+          </button>
+          <div style={{ display: "flex", alignItems: "center" }}>-</div>
+          <button
+            className={classes.toggleButton}
+            onClick={() => setSelectedListItems([])}
+          >
+            Clear
+          </button>
+        </div>
         <div>{`${selectedListItems.length}  selected`}</div>
       </div>
       <div className={classes.searchBarWrapper}>

client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx

@@ -8,6 +8,7 @@ import { MdOutlineSearch } from "react-icons/md";
 import { createUseStyles } from "react-jss";
 import ToggleCheckbox from "components/UI/ToggleCheckbox";
 import UserContext from "contexts/UserContext";
+import { selectAllCheckboxes } from "helpers/util";
 
 const useStyles = createUseStyles({
   searchBarWrapper: {
@@ -240,12 +241,23 @@ const TextPopup = ({
           alignItems: "baseline"
         }}
       >
-        <button
-          className={classes.toggleButton}
-          onClick={() => setSelectedListItems([])}
-        >
-          clear
-        </button>
+        <div style={{ display: "flex" }}>
+          <button
+            className={classes.toggleButton}
+            onClick={() =>
+              selectAllCheckboxes(filteredOptions, setSelectedListItems)
+            }
+          >
+            Select all {filteredOptions.length}
+          </button>
+          <div style={{ display: "flex", alignItems: "center" }}>-</div>
+          <button
+            className={classes.toggleButton}
+            onClick={() => setSelectedListItems([])}
+          >
+            Clear
+          </button>
+        </div>
         <div>{`${selectedListItems.length}  selected`}</div>
       </div>
       <div className={classes.searchBarWrapper}>

client/src/helpers/util.js

@@ -18,3 +18,14 @@ export const formatId = id => {
   const padded = id.toString().padStart(10, "0");
   return padded.substring(0, 5) + "-" + padded.substring(5, 10);
 };
+
+// Intended for use in popup components
+export const selectAllCheckboxes = (filteredOptions, setSelectedListItems) => {
+  // Build an array of objects that contain the name for all the list items in the popup
+  const listItems = filteredOptions.map(item => ({
+    value: item,
+    label: item
+  }));
+
+  setSelectedListItems(listItems);
+};