Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #156 from cqframework/patient-select-dropdown
Enhanced Patient Selection
- Loading branch information
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .container { | ||
| height: 100%; | ||
| word-wrap: break-word; | ||
| } | ||
|
|
||
| .vertical-separation { | ||
| padding-top: 20px; | ||
| } |
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,94 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Text from 'terra-text'; | ||
| import Field from 'terra-form-field'; | ||
| import Select from 'react-select'; | ||
|
|
||
| import styles from './patient-select.css'; | ||
|
|
||
| const propTypes = { | ||
| /** | ||
| * If the modal needs to present the current FHIR server at the top, pass this prop in | ||
| */ | ||
| currentFhirServer: PropTypes.string, | ||
| /** | ||
| * The field label for the Field component (i.e. "Change Patient") | ||
| */ | ||
| formFieldLabel: PropTypes.string.isRequired, | ||
| /** | ||
| * A boolean flag to display an error if needed on the Field component | ||
| */ | ||
| shouldDisplayError: PropTypes.bool.isRequired, | ||
| /** | ||
| * If a error needs to be displayed in the Field component, accompany it with a message | ||
| */ | ||
| errorMessage: PropTypes.string, | ||
| /** | ||
| * If the Input component needs placeholder text (usually to help the user with example values), pass this prop in | ||
| */ | ||
| placeholderText: PropTypes.string, | ||
| /** | ||
| * If the value in the Input component changes (i.e user selects option), pass in a function callback to handle the text | ||
| */ | ||
| inputOnChange: PropTypes.func.isRequired, | ||
| /** | ||
| * The name attribute for the Input component | ||
| */ | ||
| inputName: PropTypes.string, | ||
| /** | ||
| * A list of the Patient identifiers that populate the select options | ||
| */ | ||
| patients: PropTypes.array.isRequired | ||
| }; | ||
|
|
||
| /** | ||
| * PatientSelect (functional component) serves as the base UI inside modal interactions like "Change Patient". | ||
| * It contains a Field for selecting an associated input (i.e. "Select a Patient"), and an Input for | ||
| * allowing users to input text below its associated Field. Additionally, if relevant, the modal may present Text at the top which | ||
| * displays the current FHIR server in context (useful for "Select a Patient" modals). | ||
| * | ||
| * How to use: Use this component if a modal needs to have some base UI for allowing a user to select an option, given some | ||
| * Field text (i.e. "Select a Patient") | ||
| * | ||
| */ | ||
| const PatientSelect = ({ | ||
| currentFhirServer, formFieldLabel, shouldDisplayError, | ||
| errorMessage, placeholderText, inputOnChange, inputName, | ||
| patients, | ||
| }) => { | ||
| let fhirServerDisplay; | ||
| if (currentFhirServer) { | ||
| fhirServerDisplay = ( | ||
| <div> | ||
| <Text weight={400} fontSize={16}>Current FHIR server</Text> | ||
| <br /> | ||
| <Text weight={200} fontSize={14}>{currentFhirServer}</Text> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| {fhirServerDisplay} | ||
| <div className={styles['vertical-separation']}> | ||
| <Field | ||
| label={formFieldLabel} | ||
| isInvalid={shouldDisplayError} | ||
| error={errorMessage} | ||
| required | ||
| > | ||
| <Select | ||
| placeholder={placeholderText} | ||
| value={placeholderText} | ||
| onChange={inputOnChange} | ||
| options={patients} | ||
| /> | ||
| </Field> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| PatientSelect.propTypes = propTypes; | ||
|
|
||
| export default PatientSelect; | ||
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,43 @@ | ||
| import axios from 'axios'; | ||
| import store from '../store/store'; | ||
|
|
||
| function retrieveAllPatientIds() { | ||
| return new Promise((resolve, reject) => { | ||
| const { accessToken } = store.getState().fhirServerState; | ||
| const fhirServer = store.getState().fhirServerState.currentFhirServer; | ||
| const headers = { | ||
| Accept: 'application/json+fhir', | ||
| }; | ||
| const patientInfoList = []; | ||
|
|
||
| if (accessToken) { | ||
| headers.Authorization = `Bearer ${accessToken.access_token}`; | ||
| } | ||
|
|
||
| axios({ | ||
| method: 'get', | ||
| url: `${fhirServer}/Patient`, | ||
| headers, | ||
| }).then((result) => { | ||
| if (result.data && result.data.resourceType === 'Bundle' | ||
| && Array.isArray(result.data.entry) && result.data.entry.length) { | ||
| for (const patient of result.data.entry) { | ||
|
Check failure on line 24 in src/retrieve-data-helpers/all-patient-retrieval.js
|
||
| let patientInfo = {id: '', name: 'Unknown', dob: ''}; | ||
| patientInfo.id = patient.resource.id; | ||
| const familyName = (Array.isArray(patient.resource.name[0].family)) ? patient.resource.name[0].family.join(' ') : patient.resource.name[0].family; | ||
| patientInfo.name = `${patient.resource.name[0].given.join(' ')} ${familyName}`; | ||
| patientInfo.dob = patient.resource.birthDate; | ||
| patientInfoList.push(patientInfo); | ||
| } | ||
| return resolve(patientInfoList); | ||
| } else { | ||
| return reject(); | ||
| } | ||
| }).catch((err) => { | ||
| console.error('Could not retrieve patients from current FHIR server', err); | ||
| return reject(err); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| export default retrieveAllPatientIds; | ||
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