-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
customize query multiple accordion implementation pt 1 (#2564)
* cleanup and setup * customize query implementation pt 1 * [pre-commit.ci] auto fixes from pre-commit hooks * add in beginning of new file * add in new file --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
- Loading branch information
1 parent
a5b4169
commit 2d2c5ee
Showing
17 changed files
with
431 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 0 additions & 9 deletions
9
containers/tefca-viewer/src/app/query/components/customizeQuery.css
This file was deleted.
Oops, something went wrong.
64 changes: 64 additions & 0 deletions
64
...ners/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { Icon } from "@trussworks/react-uswds"; | ||
| import styles from "./customizeQuery.module.css"; | ||
| import { GroupedValueSet } from "./customizeQueryUtils"; | ||
|
|
||
| type CustomizeQueryAccordionBodyProps = { | ||
| group: GroupedValueSet; | ||
| toggleInclude: (groupIndex: string, itemIndex: number) => void; | ||
| groupIndex: string; | ||
| }; | ||
|
|
||
| /** | ||
| * Styling component to render the body table for the customize query components | ||
| * @param param0 - props for rendering | ||
| * @param param0.group - Matched concept associated with the query that | ||
| * contains valuesets to filter query on | ||
| * @param param0.toggleInclude - Listener event to handle a valueset inclusion/ | ||
| * exclusion check | ||
| * @param param0.groupIndex - Index corresponding to group | ||
| * @returns JSX Fragment for the accordion body | ||
| */ | ||
| const CustomizeQueryAccordionBody: React.FC< | ||
| CustomizeQueryAccordionBodyProps | ||
| > = ({ group, toggleInclude, groupIndex }) => { | ||
| return ( | ||
| <div className={`${styles.customizeQueryAccordion__body}`}> | ||
| <div className={`${styles.customizeQueryGridContainer}`}> | ||
| <div className={`${styles.customizeQueryGridHeader} margin-top-10`}> | ||
| <div className={`${styles.accordionTableHeader}`}>Include</div> | ||
| <div className={`${styles.accordionTableHeader}`}>Code</div> | ||
| <div className={`${styles.accordionTableHeader}`}>Display</div> | ||
| </div> | ||
| <div className="display-flex flex-column"> | ||
| {group.items.map((item, index) => ( | ||
| <div | ||
| className={`${styles.customizeQueryGridRow} ${styles.customizeQueryStripedRow}`} | ||
| key={item.code} | ||
| > | ||
| <div | ||
| className={`margin-4 ${styles.customizeQueryCheckbox} ${styles.customizeQueryCheckbox} ${styles.hideCheckboxLabel}`} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| toggleInclude(groupIndex, index); | ||
| }} | ||
| > | ||
| {item.include && ( | ||
| <Icon.Check | ||
| className="usa-icon" | ||
| style={{ backgroundColor: "white" }} | ||
| size={4} | ||
| color="#005EA2" | ||
| /> | ||
| )} | ||
| </div> | ||
| <div>{item.code}</div> | ||
| <div>{item.display}</div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomizeQueryAccordionBody; |
69 changes: 69 additions & 0 deletions
69
...rs/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { Icon } from "@trussworks/react-uswds"; | ||
| import styles from "./customizeQuery.module.css"; | ||
| import { GroupedValueSet } from "./customizeQueryUtils"; | ||
|
|
||
| type CustomizeQueryAccordionProps = { | ||
| selectedCount: number; | ||
| handleSelectAllChange: (groupIndex: string, checked: boolean) => void; | ||
| groupIndex: string; | ||
| group: GroupedValueSet; | ||
| }; | ||
|
|
||
| /** | ||
| * 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 | ||
| * @param param0.group - matched concept containing all rendered valuesets | ||
| * @returns A component that renders the customization query body | ||
| */ | ||
| const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({ | ||
| selectedCount, | ||
| handleSelectAllChange, | ||
| groupIndex, | ||
| group, | ||
| }) => { | ||
| return ( | ||
| <div className="accordion-header display-flex flex-no-wrap flex-align-start customize-query-header"> | ||
| <div | ||
| id="select-all" | ||
| className={`hide-checkbox-label ${styles.customizeQueryCheckbox}`} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| handleSelectAllChange( | ||
| groupIndex, | ||
| selectedCount !== group.items.length, | ||
| ); | ||
| }} | ||
| > | ||
| {selectedCount === group.items.length && ( | ||
| <Icon.Check | ||
| className="usa-icon bg-base-lightest" | ||
| size={4} | ||
| color="#565C65" | ||
| /> | ||
| )} | ||
| {selectedCount > 0 && selectedCount < group.items.length && ( | ||
| <Icon.Remove | ||
| className="usa-icon bg-base-lightest" | ||
| size={4} | ||
| color="#565C65" | ||
| /> | ||
| )} | ||
| </div> | ||
| <div> | ||
| {`${group.valueSetName}`} | ||
|
|
||
| <span className="accordion-subtitle margin-top-2"> | ||
| <strong>Author:</strong> {group.author}{" "} | ||
| <strong style={{ marginLeft: "20px" }}>System:</strong> {group.system} | ||
| </span> | ||
| </div> | ||
| <span className="margin-left-auto">{`${selectedCount} selected`}</span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomizeQueryAccordionHeader; |
81 changes: 81 additions & 0 deletions
81
containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { ValueSetType } from "@/app/constants"; | ||
| import styles from "./customizeQuery.module.css"; | ||
|
|
||
| type CustomizeQueryNavProps = { | ||
| activeTab: string; | ||
| handleTabChange: (tabName: ValueSetType) => void; | ||
| handleSelectAllForTab: (checked: boolean) => void; | ||
| }; | ||
|
|
||
| /** | ||
| * Nav component for customize query page | ||
| * @param param0 - props for rendering | ||
| * @param param0.handleTabChange - listener event for tab selection | ||
| * @param param0.activeTab - currently active tab | ||
| * @param param0.handleSelectAllForTab - Listener function to grab all the | ||
| * returned labs when the select all button is hit | ||
| * @returns Nav component for the customize query page | ||
| */ | ||
| const CustomizeQueryNav: React.FC<CustomizeQueryNavProps> = ({ | ||
| handleTabChange, | ||
| activeTab, | ||
| handleSelectAllForTab, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <nav className={`${styles.usaNav} ${styles.customizeQueryNav}`}> | ||
| <ul className="usa-sidenav"> | ||
| <li className={`usa-sidenav_item`}> | ||
| <a | ||
| href="#labs" | ||
| className={`${ | ||
| activeTab === "labs" ? `${styles.currentTab}` : "" | ||
| }`} | ||
| onClick={() => handleTabChange("labs")} | ||
| > | ||
| Labs | ||
| </a> | ||
| </li> | ||
| <li className={`usa-sidenav_item`}> | ||
| <a | ||
| className={`${ | ||
| activeTab === "medications" ? `${styles.currentTab}` : "" | ||
| }`} | ||
| href="#medications" | ||
| onClick={() => handleTabChange("medications")} | ||
| > | ||
| Medications | ||
| </a> | ||
| </li> | ||
| <li className={`usa-sidenav_item`}> | ||
| <a | ||
| className={`${ | ||
| activeTab === "conditions" ? `${styles.currentTab}` : "" | ||
| }`} | ||
| href="#conditions" | ||
| onClick={() => handleTabChange("conditions")} | ||
| > | ||
| Conditions | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <ul className="usa-nav__primary usa-accordion"></ul> | ||
| <hr className="custom-hr"></hr> | ||
| <a | ||
| href="#" | ||
| type="button" | ||
| className="include-all-link" | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| handleSelectAllForTab(true); | ||
| }} | ||
| > | ||
| Include all {activeTab} | ||
| </a> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomizeQueryNav; |
Oops, something went wrong.