diff --git a/client/src/components/Projects/ColumnHeaderPopups/NumberPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/NumberPopup.jsx index 614acb3be..f1004ef77 100644 --- a/client/src/components/Projects/ColumnHeaderPopups/NumberPopup.jsx +++ b/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" }} > - +
+ +
-
+ +
{`${selectedListItems.length} selected`}
diff --git a/client/src/components/Projects/ColumnHeaderPopups/StringListPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/StringListPopup.jsx index f474fd24c..9ea12c360 100644 --- a/client/src/components/Projects/ColumnHeaderPopups/StringListPopup.jsx +++ b/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" }} > - +
+ +
-
+ +
{`${selectedListItems.length} selected`}
diff --git a/client/src/components/Projects/ColumnHeaderPopups/StringPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/StringPopup.jsx index 34f5d0860..0be5a740d 100644 --- a/client/src/components/Projects/ColumnHeaderPopups/StringPopup.jsx +++ b/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" }} > - +
+ +
-
+ +
{`${selectedListItems.length} selected`}
diff --git a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx b/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx index dddb3a797..d166cb273 100644 --- a/client/src/components/Projects/ColumnHeaderPopups/TextPopup.jsx +++ b/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" }} > - +
+ +
-
+ +
{`${selectedListItems.length} selected`}
diff --git a/client/src/helpers/util.js b/client/src/helpers/util.js index 88a237873..df01e4c52 100644 --- a/client/src/helpers/util.js +++ b/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); +};