-
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.
Initializing TEFCA Select Query (#2662)
* Initializing TEFCA Select Query * logging current status * saving work * hiding advanced button, updating documentation * switching select a query go back to patient-results and adding reminder to remove button * removing unneeded constants * switching to rem, adding container to control width * fixing error, formatting * fixing width and text of explanatory comma * fixing font sizes * fixing scss import error * removing duplicate customize queries * removing duplicative uswds * removing testing button
- Loading branch information
1 parent
a55c390
commit 0bcf852
Showing
6 changed files
with
257 additions
and
16 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
37 changes: 37 additions & 0 deletions
37
containers/tefca-viewer/src/app/query/components/selectQuery/selectQuery.module.css
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,37 @@ | ||
| .searchCallToActionButton { | ||
| height: 2.5rem; | ||
| } | ||
|
|
||
| .selectQueryHeaderText { | ||
| line-height: 2.0625rem; | ||
| word-wrap: break-word; | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| .selectQueryExplanationText { | ||
| padding-top: 0.75rem; | ||
| padding-bottom: 1.5rem; | ||
| line-height: 2.0625rem; | ||
| word-wrap: break-word; | ||
| font-size: 1.375rem; | ||
| width: 50.6875rem; | ||
| } | ||
|
|
||
| .queryRow { | ||
| display: flex; | ||
| align-items: center; | ||
| padding-bottom: 1.5rem; | ||
| } | ||
|
|
||
| .customizeButton { | ||
| margin-left: 1.25rem; | ||
| margin-top: 0.5rem; | ||
| } | ||
|
|
||
| .queryDropDown { | ||
| display: flex; | ||
| width: 20rem; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 0.5rem; | ||
| } |
167 changes: 167 additions & 0 deletions
167
containers/tefca-viewer/src/app/query/components/selectQuery/selectQuery.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,167 @@ | ||
| "use client"; | ||
| import React, { useState, useEffect } from "react"; | ||
| import { Button, Select } from "@trussworks/react-uswds"; | ||
| import { demoQueryOptions, FHIR_SERVERS, Mode } from "../../../constants"; | ||
| import Backlink from "../backLink/Backlink"; | ||
| import { fhirServers } from "../../../fhir-servers"; | ||
| import styles from "./selectQuery.module.css"; | ||
|
|
||
| interface SelectQueryProps { | ||
| setQueryType: (queryType: string) => void; | ||
| setHCO: (hco: string) => void; | ||
| setMode: (mode: Mode) => void; | ||
| onSubmit: () => void; // Callback when the user submits the query | ||
| goBack: () => void; | ||
| } | ||
|
|
||
| /** | ||
| * | ||
| * @param root0 - SelectQueryProps | ||
| * @param root0.setQueryType - Callback to update the query type | ||
| * @param root0.setHCO - Callback to update selected Health Care Organization (HCO) | ||
| * @param root0.setMode - Callback to switch mode | ||
| * @param root0.onSubmit - Callback for submit action | ||
| * @param root0.goBack - back button | ||
| * @returns - The selectQuery component. | ||
| */ | ||
| const SelectQuery: React.FC<SelectQueryProps> = ({ | ||
| setQueryType, | ||
| setHCO, | ||
| setMode, | ||
| onSubmit, | ||
| goBack, | ||
| }) => { | ||
| const [selectedQuery, setSelectedQuery] = useState<string>(""); | ||
| const [selectedHCO, setSelectedHCO] = useState<string>(""); // Keep this as string for HCO selection | ||
| const [showAdvanced, setShowAdvanced] = useState(false); | ||
|
|
||
| // When query changes, update the parent component state | ||
| useEffect(() => { | ||
| setQueryType(selectedQuery); | ||
| }, [selectedQuery, setQueryType]); | ||
|
|
||
| const handleQueryChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | ||
| setSelectedQuery(event.target.value); | ||
| }; | ||
|
|
||
| const handleHCOChange = (event: React.ChangeEvent<HTMLSelectElement>) => { | ||
| setSelectedHCO(event.target.value); | ||
| setHCO(event.target.value as FHIR_SERVERS); // Update parent component state | ||
| }; | ||
|
|
||
| // Link to go to customize-queries page | ||
| const handleClick = () => { | ||
| setMode("customize-queries"); | ||
| }; | ||
|
|
||
| // Submit and go to results; if no custom query selected, add alert | ||
| const handleSubmit = () => { | ||
| if (selectedQuery) { | ||
| onSubmit(); | ||
| } else { | ||
| alert("Please select a query."); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <form className="content-container-smaller-width"> | ||
| {/* Back button */} | ||
| <div className="text-bold"> | ||
| <Backlink onClick={goBack} label={RETURN_TO_STEP_ONE_LABEL} /> | ||
| </div> | ||
| <h1 className={`${styles.selectQueryHeaderText}`}> | ||
| Step 3: Select a query | ||
| </h1> | ||
| <div | ||
| className={`font-sans-md text-light ${styles.selectQueryExplanationText}`} | ||
| > | ||
| We will request all data related to your selected patient and query. By | ||
| only showing relevant data for your query, we decrease the burden on our | ||
| systems and protect patient privacy. If you would like to customize the | ||
| query response, click on the "customize query" button. | ||
| </div> | ||
| <h3 className="margin-bottom-3">Query</h3> | ||
| <div className={styles.queryRow}> | ||
| {/* Select a query drop down */} | ||
| <Select | ||
| id="querySelect" | ||
| name="query" | ||
| value={selectedQuery} | ||
| onChange={handleQueryChange} | ||
| className={`${styles.queryDropDown}`} | ||
| required | ||
| > | ||
| <option value="" disabled> | ||
| Select query | ||
| </option> | ||
| {demoQueryOptions.map((option) => ( | ||
| <option key={option.value} value={option.value}> | ||
| {option.label} | ||
| </option> | ||
| ))} | ||
| </Select> | ||
| {/* Customize query button */} | ||
| <Button | ||
| type="button" | ||
| className={`usa-button--outline bg-white ${styles.customizeButton}`} | ||
| onClick={handleClick} | ||
| > | ||
| Customize query | ||
| </Button> | ||
| </div> | ||
|
|
||
| {/* Show Advanced options only when `showAdvanced` is true */} | ||
| {showAdvanced && ( | ||
| <div> | ||
| <h3 className="margin-bottom-3">Health Care Organization (HCO)</h3> | ||
| <Select | ||
| id="fhir_server" | ||
| name="fhir_server" | ||
| value={selectedHCO} // Use selectedHCO for the selected value | ||
| onChange={handleHCOChange} | ||
| required | ||
| defaultValue="" | ||
| className={`${styles.queryDropDown}`} | ||
| > | ||
| <option value="" disabled> | ||
| Select HCO | ||
| </option> | ||
| {Object.keys(fhirServers).map((fhirServer: string) => ( | ||
| <option key={fhirServer} value={fhirServer}> | ||
| {fhirServer} | ||
| </option> | ||
| ))} | ||
| </Select> | ||
| </div> | ||
| )} | ||
|
|
||
| {/* Only show the "Advanced" button if `showAdvanced` is false */} | ||
| {!showAdvanced && ( | ||
| <div> | ||
| <Button | ||
| className={`usa-button--unstyled margin-left-auto ${styles.searchCallToActionButton}`} | ||
| type="button" | ||
| onClick={() => setShowAdvanced(true)} | ||
| > | ||
| Advanced... | ||
| </Button> | ||
| </div> | ||
| )} | ||
|
|
||
| {/* Submit Button */} | ||
| <div className="padding-top-6"> | ||
| <Button | ||
| type="button" | ||
| disabled={!selectedQuery} | ||
| className={selectedQuery ? "usa-button" : "usa-button disabled"} | ||
| onClick={handleSubmit} | ||
| > | ||
| Submit | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default SelectQuery; | ||
| export const RETURN_TO_STEP_ONE_LABEL = "Return to Select patient"; |
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.