diff --git a/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss b/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss index f6c0d813a..8ab12666f 100644 --- a/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss +++ b/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss @@ -207,6 +207,7 @@ .valueSetTemplate__toggleRowHeader > svg { color: black; } + .valueSetTemplate__checkbox { margin-left: 6.5px; } @@ -225,6 +226,17 @@ background-color: #fff; display: flex; justify-content: space-between; + + .valueSetTemplate__checkbox label { + background-color: #fff; + } +} +div.accordionBodyExpanded:last-of-type { + border-bottom: 1px #dfe1e2 solid; + + .accordionExpandedInner { + border-bottom: none !important; + } } .accordionExpandedInner { @@ -245,7 +257,6 @@ .expandedContent > div { text-transform: none !important; - white-space: nowrap; padding-right: 1rem; } @@ -257,3 +268,9 @@ color: #919191; display: flex; } + +.accordionBodyExpanded__right { + padding-bottom: 1rem; + display: flex; + align-items: center; +} diff --git a/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx b/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx index 214173217..005ceae23 100644 --- a/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx +++ b/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx @@ -12,7 +12,7 @@ import { CategoryNameToConditionOptionMap, mapFetchedDataToFrontendStructure, ConditionIdToValueSetArray, - setIncludeAll, + batchSelectConcepts, } from "../utils"; import ConditionColumnDisplay from "../buildFromTemplates/ConditionColumnDisplay"; import SearchField from "@/app/query/designSystem/searchField/SearchField"; @@ -123,7 +123,7 @@ export const ConditionSelection: React.FC = ({ // when fetching directly from conditions table (as opposed to a saved query), // default to including all value sets formattedResults.forEach((result) => { - setIncludeAll(result); + batchSelectConcepts(result, true); return (result.includeValueSet = true); }); ConditionValueSets[id] = formattedResults; diff --git a/query-connector/src/app/queryBuilding/components/SelectionTable.tsx b/query-connector/src/app/queryBuilding/components/SelectionTable.tsx index 917aa156c..0d896527d 100644 --- a/query-connector/src/app/queryBuilding/components/SelectionTable.tsx +++ b/query-connector/src/app/queryBuilding/components/SelectionTable.tsx @@ -1,15 +1,17 @@ "use client"; - +import { useEffect } from "react"; import styles from "../buildFromTemplates/buildfromTemplate.module.scss"; -import { ValueSetsByGroup, ConditionToValueSetMap } from "../utils"; +import { ValueSetsByGroup, batchSelectConcepts } from "../utils"; import { DibbsValueSetType } from "@/app/constants"; import Accordion from "../../query/designSystem/Accordion"; import SelectionViewAccordionHeader from "./SelectionViewAccordionHeader"; import SelectionViewAccordionBody from "./SelectionViewAccordionBody"; +import { ValueSet } from "@/app/constants"; +import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils"; type SelectionTableProps = { conditionId: string; - valueSets: ConditionToValueSetMap; + valueSets: ValueSetsByGroup; }; // * @param root0.conditionId - ID of the active/selected condition @@ -26,27 +28,44 @@ export const SelectionTable: React.FC = ({ conditionId, valueSets, }) => { + useEffect(() => {}); + return (
- {renderValueSetAccordions(conditionId, valueSets[conditionId])} + {renderValueSetAccordions(conditionId, valueSets)}
); }; +function toggleVSConceptCheckboxes(items: ValueSet[], setTo: boolean) { + items.forEach((item) => { + batchSelectConcepts(item, setTo); + }); + return items; +} + function renderValueSetAccordions( conditionId: string, valueSets: ValueSetsByGroup ) { - const handleCheckboxToggle = (valueSetType: string, conditionId: string) => { + const handleCheckboxToggle = ( + valueSetType: DibbsValueSetType, + conditionId: string + ) => { console.log( + valueSets[valueSetType], `placeholder: deselect all child values (${valueSetType}) for condition ID: ${conditionId}` ); }; + const types = Object.keys(valueSets) as Array; const ValueSetAccordionItem = Object.values(types).map( function (valueSetType) { - const valueSetsForType = Object.values(valueSets[valueSetType]); + const valueSetsForType: GroupedValueSet[] = Object.values( + valueSets[valueSetType] + ); + return (
{ValueSetAccordionItem}
; } diff --git a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx index 074a2dc05..8987a8401 100644 --- a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx +++ b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx @@ -3,12 +3,16 @@ import styles from "../buildFromTemplates/buildfromTemplate.module.scss"; import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils"; import { formatDiseaseDisplay } from "../utils"; import { tallyConceptsForSingleValueSet } from "../utils"; +import { DibbsValueSetType } from "@/app/constants"; type SelectionViewAccordionBodyProps = { id?: string; - valueSetType: string; + valueSetType: DibbsValueSetType; valueSets: GroupedValueSet[]; - handleCheckboxToggle: (valueSetType: string, conditionId: string) => void; + handleCheckboxToggle: ( + valueSetType: DibbsValueSetType, + conditionId: string + ) => void; }; /** @@ -47,7 +51,7 @@ const SelectionViewAccordionBody: React.FC = ({ // disabled={selectedCount == 0} />{" "} -
+
{selectedCount}/{totalCount}
diff --git a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx index 47f88fc3d..f5bd5aa04 100644 --- a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx +++ b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx @@ -2,12 +2,16 @@ import styles from "../buildFromTemplates/buildfromTemplate.module.scss"; import { Checkbox, Icon } from "@trussworks/react-uswds"; import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils"; import { tallyConcpetsForValueSetGroup } from "../utils"; +import { DibbsValueSetType } from "@/app/constants"; type SelectionViewAccordionBodyProps = { - valueSetType: string; + valueSetType: DibbsValueSetType; conditionId: string; valueSets: GroupedValueSet[] | null; - handleCheckboxToggle: (valueSetType: string, conditionId: string) => void; + handleCheckboxToggle: ( + valueSetType: DibbsValueSetType, + conditionId: string + ) => void; }; /** diff --git a/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx b/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx index 6ab9840d0..3a4f00280 100644 --- a/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx +++ b/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx @@ -34,15 +34,6 @@ type ConditionSelectionProps = { valueSetsByCondition: ConditionIdToValueSetArray; }; -// const renderSelectionTable = ( -// activeCondition: string, -// valueSets: ValueSetsByGroup -// ) => { -// return ( -// -// ); -// }; - /** * Display component for a condition on the query building page * @param root0 - params @@ -217,7 +208,7 @@ export const ValueSetSelection: React.FC = ({ {valueSets && ( )} diff --git a/query-connector/src/app/queryBuilding/utils.ts b/query-connector/src/app/queryBuilding/utils.ts index dbf89a67b..2839a1afd 100644 --- a/query-connector/src/app/queryBuilding/utils.ts +++ b/query-connector/src/app/queryBuilding/utils.ts @@ -166,11 +166,12 @@ export function tallyConcpetsForValueSetGroup ( * Utility method that marks all concepts as included for * a given ValueSet * @param input - the ValueSet to update + * @param value - the value to set for each concept.include * @returns the updated ValueSet */ -export const setIncludeAll = (input: ValueSet) => { +export const batchSelectConcepts = (input: ValueSet, value: boolean) => { input.concepts.forEach((concept) => { - concept.include = true; + concept.include = value; }); return input