diff --git a/containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx b/containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx index 689a2ba4c8..f1f5fa27ef 100644 --- a/containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx +++ b/containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx @@ -59,11 +59,6 @@ const CustomizeQuery: React.FC = ({ (group) => group.items, ).length; - // Check if there are items in the current active tab - const hasItemsInTabs = Object.values(valueSetOptions[activeTab]).some( - (group) => group.items.length > 0, - ); - // Keeps track of which side nav tab to display to users const handleTabChange = (tab: ValueSetType) => { setActiveTab(tab); @@ -181,16 +176,13 @@ const CustomizeQuery: React.FC = ({ activeTab={activeTab} handleTabChange={handleTabChange} handleSelectAllForTab={handleSelectAllForTab} - hasItemsInTab={hasItemsInTabs} + valueSetOptions={valueSetOptions} /> {Object.entries(valueSetOptions[activeTab]).map(([groupIndex, group]) => { - const selectedCount = group.items.filter((item) => item.include).length; - return ( void; groupIndex: string; group: GroupedValueSet; @@ -12,7 +11,6 @@ type CustomizeQueryAccordionProps = { /** * Rendering component for customize query header * @param param0 - props for rendering - * @param param0.selectedCount - stateful tally of the number of selected valuesets * @param param0.handleSelectAllChange * Listner function to include all valuesets when checkbox is selected * @param param0.groupIndex - index corresponding to group @@ -20,11 +18,13 @@ type CustomizeQueryAccordionProps = { * @returns A component that renders the customization query body */ const CustomizeQueryAccordionHeader: React.FC = ({ - selectedCount, handleSelectAllChange, groupIndex, group, }) => { + const selectedTotal = group.items.length; + const selectedCount = group.items.filter((item) => item.include).length; + return (
= ({ System: {group.system}
- {`${selectedCount} selected`} + {`${selectedCount} of ${selectedTotal} selected`} ); }; diff --git a/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryBulkSelect.tsx b/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryBulkSelect.tsx new file mode 100644 index 0000000000..1ce48a3aa8 --- /dev/null +++ b/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryBulkSelect.tsx @@ -0,0 +1,52 @@ +import styles from "../customizeQuery/customizeQuery.module.css"; + +type CustomizeQueryBulkSelectProps = { + allItemsDeselected: boolean; + allItemsSelected: boolean; + handleBulkSelectForTab: (checked: boolean) => void; + activeTab: string; +}; +/** + * + * @param root0 - params + * @param root0.allItemsDeselected - boolean used for the deselect toggle + * @param root0.allItemsSelected - boolean used for the select toggle + * @param root0.handleBulkSelectForTab - handler function for the link toggles + * @param root0.activeTab - which tab is currently selected + * @returns bulk select link selection + */ +const CustomizeQueryBulkSelect: React.FC = ({ + allItemsDeselected, + allItemsSelected, + handleBulkSelectForTab, + activeTab, +}) => { + return ( +
+ {!allItemsSelected && ( + + )} + {!allItemsDeselected && ( + + )} +
+ ); +}; + +export default CustomizeQueryBulkSelect; diff --git a/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx b/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx index 8c629f9193..d746b3d1a3 100644 --- a/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx +++ b/containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx @@ -1,11 +1,15 @@ import { ValueSetType } from "@/app/constants"; import styles from "./customizeQuery.module.css"; +import CustomizeQueryBulkSelect from "./CustomizeQueryBulkSelect"; +import { GroupedValueSet } from "./customizeQueryUtils"; type CustomizeQueryNavProps = { - activeTab: string; + activeTab: ValueSetType; handleTabChange: (tabName: ValueSetType) => void; handleSelectAllForTab: (checked: boolean) => void; - hasItemsInTab: boolean; + valueSetOptions: { + [key in ValueSetType]: { [vsNameAuthorSystem: string]: GroupedValueSet }; + }; }; /** @@ -15,15 +19,26 @@ type CustomizeQueryNavProps = { * @param param0.activeTab - currently active tab * @param param0.handleSelectAllForTab - Listener function to grab all the * returned labs when the select all button is hit - * @param param0.hasItemsInTab - Boolean indicating if there are items in the current tab + * @param param0.valueSetOptions - the selected ValueSet items * @returns Nav component for the customize query page */ const CustomizeQueryNav: React.FC = ({ handleTabChange, activeTab, handleSelectAllForTab, - hasItemsInTab, + valueSetOptions, }) => { + const hasSelectableItems = Object.values(valueSetOptions[activeTab]).some( + (group) => group.items.length > 0, + ); + const allItemsDeselected = Object.values(valueSetOptions[activeTab]) + .flatMap((groupedValSets) => groupedValSets.items.flatMap((i) => i.include)) + .every((p) => !p); + + const allItemsSelected = Object.values(valueSetOptions[activeTab]) + .flatMap((groupedValSets) => groupedValSets.items.flatMap((i) => i.include)) + .every((p) => p); + return ( <>