-
Notifications
You must be signed in to change notification settings - Fork 228
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
421 additions
and
119 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
105 changes: 105 additions & 0 deletions
105
...atient-registration/field/person-attributes/location-person-attribute-field.component.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,105 @@ | ||
| import React, { useCallback, useMemo, useRef, useState } from 'react'; | ||
| import classNames from 'classnames'; | ||
| import { Field, useField } from 'formik'; | ||
| import { type PersonAttributeTypeResponse } from '../../patient-registration.types'; | ||
| import styles from './../field.scss'; | ||
| import { useLocations } from './location-person-attribute-field.resource'; | ||
| import { ComboBox, InlineLoading, Layer } from '@carbon/react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| export interface LocationPersonAttributeFieldProps { | ||
| id: string; | ||
| personAttributeType: PersonAttributeTypeResponse; | ||
| label?: string; | ||
| locationTag: string; | ||
| required?: boolean; | ||
| } | ||
|
|
||
| export function LocationPersonAttributeField({ | ||
| personAttributeType, | ||
| id, | ||
| label, | ||
| locationTag, | ||
| required, | ||
| }: LocationPersonAttributeFieldProps) { | ||
| const { t } = useTranslation(); | ||
| const fieldName = `attributes.${personAttributeType.uuid}`; | ||
| const [field, meta, { setValue }] = useField(`attributes.${personAttributeType.uuid}`); | ||
| const [searchQuery, setSearchQuery] = useState<string>(''); | ||
| const { locations, isLoading, loadingNewData } = useLocations(locationTag || null, searchQuery); | ||
| const prevLocationOptions = useRef([]); | ||
|
|
||
| const locationOptions = useMemo(() => { | ||
| if (!(isLoading && loadingNewData)) { | ||
| const newOptions = locations.map(({ resource: { id, name } }) => ({ value: id, label: name })); | ||
| prevLocationOptions.current = newOptions; | ||
| return newOptions; | ||
| } | ||
| return prevLocationOptions.current; | ||
| }, [locations, isLoading, loadingNewData]); | ||
|
|
||
| const selectedItem = useMemo(() => { | ||
| if (typeof meta.value === 'string') { | ||
| return locationOptions.find(({ value }) => value === meta.value) || null; | ||
| } | ||
| if (typeof meta.value === 'object' && meta.value) { | ||
| return locationOptions.find(({ value }) => value === meta.value.uuid) || null; | ||
| } | ||
| return null; | ||
| }, [locationOptions, meta.value]); | ||
|
|
||
| // Callback for when updating the combobox input | ||
| const handleInputChange = useCallback( | ||
| (value: string | null) => { | ||
| if (value) { | ||
| // If the value exists in the locationOptions (i.e. a label matches the input), exit the function | ||
| if (locationOptions.find(({ label }) => label === value)) return; | ||
| // If the input is a new value, set the search query | ||
| setSearchQuery(value); | ||
| // Clear the current selected value since the input doesn't match any existing options | ||
| setValue(null); | ||
| } | ||
| }, | ||
| [locationOptions, setValue], | ||
| ); | ||
| const handleSelect = useCallback( | ||
| ({ selectedItem }) => { | ||
| if (selectedItem) { | ||
| setValue(selectedItem.value); | ||
| } | ||
| }, | ||
| [setValue], | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| className={classNames(styles.customField, styles.halfWidthInDesktopView, styles.locationAttributeFieldContainer)}> | ||
| <Layer> | ||
| <Field name={fieldName}> | ||
| {({ field, form: { touched, errors } }) => { | ||
| return ( | ||
| <ComboBox | ||
| id={id} | ||
| name={`person-attribute-${personAttributeType.uuid}`} | ||
| titleText={label} | ||
| items={locationOptions} | ||
| placeholder={t('searchLocationPersonAttribute', 'Search location')} | ||
| onInputChange={handleInputChange} | ||
| required={required} | ||
| onChange={handleSelect} | ||
| selectedItem={selectedItem} | ||
| invalid={errors[fieldName] && touched[fieldName]} | ||
| typeahead | ||
| /> | ||
| ); | ||
| }} | ||
| </Field> | ||
| </Layer> | ||
| {loadingNewData && ( | ||
| <div className={styles.loadingContainer}> | ||
| <InlineLoading /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
48 changes: 48 additions & 0 deletions
48
...patient-registration/field/person-attributes/location-person-attribute-field.resource.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,48 @@ | ||
| import { useMemo } from 'react'; | ||
| import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce } from '@openmrs/esm-framework'; | ||
| import { type LocationEntry, type LocationResponse } from '@openmrs/esm-service-queues-app/src/types'; | ||
| import useSWR from 'swr'; | ||
|
|
||
| interface UseLocationsResult { | ||
| locations: Array<LocationEntry>; | ||
| isLoading: boolean; | ||
| loadingNewData: boolean; | ||
| } | ||
|
|
||
| export function useLocations(locationTag: string | null, searchQuery: string = ''): UseLocationsResult { | ||
| const debouncedSearchQuery = useDebounce(searchQuery); | ||
|
|
||
| const constructUrl = useMemo(() => { | ||
| let url = `${fhirBaseUrl}/Location?`; | ||
| let urlSearchParameters = new URLSearchParams(); | ||
| urlSearchParameters.append('_summary', 'data'); | ||
|
|
||
| if (!debouncedSearchQuery) { | ||
| urlSearchParameters.append('_count', '10'); | ||
| } | ||
|
|
||
| if (locationTag) { | ||
| urlSearchParameters.append('_tag', locationTag); | ||
| } | ||
|
|
||
| if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery != '') { | ||
| urlSearchParameters.append('name:contains', debouncedSearchQuery); | ||
| } | ||
|
|
||
| return url + urlSearchParameters.toString(); | ||
| }, [locationTag, debouncedSearchQuery]); | ||
|
|
||
| const { data, error, isLoading, isValidating } = useSWR<FetchResponse<LocationResponse>, Error>( | ||
| constructUrl, | ||
| openmrsFetch, | ||
| ); | ||
|
|
||
| return useMemo( | ||
| () => ({ | ||
| locations: data?.data?.entry || [], | ||
| isLoading, | ||
| loadingNewData: isValidating, | ||
| }), | ||
| [data, isLoading, isValidating], | ||
| ); | ||
| } |
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
Oops, something went wrong.