Extend encounter location to allow AFE schema out of the box (#173)

src/api/api.ts

@@ -65,6 +65,12 @@ export function getLocationsByTag(tag: string): Observable<{ uuid: string; displ
   );
 }
 
+export function getAllLocations(): Observable<{ uuid: string; display: string }[]> {
+  return openmrsObservableFetch(`/ws/rest/v1/location?v=custom:(uuid,display)`).pipe(
+    map(({ data }) => data['results']),
+  );
+}
+
 export async function getPreviousEncounter(patientUuid: string, encounterType: string) {
   const query = `patient=${patientUuid}&_sort=-_lastUpdated&_count=1&type=${encounterType}`;
   let response = await openmrsFetch(`/ws/fhir2/R4/Encounter?${query}`);

src/components/inputs/location/ohri-encounter-location.component.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Dropdown } from '@carbon/react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Dropdown, ComboBox } from '@carbon/react';
 import { useField } from 'formik';
 import { createErrorHandler } from '@openmrs/esm-framework';
 import { getConceptNameAndUUID, isInlineView } from '../../../utils/ohri-form-helper';
-import { getLocationsByTag } from '../../../api/api';
+import { getAllLocations, getLocationsByTag } from '../../../api/api';
 import { isTrue } from '../../../utils/boolean-utils';
 import { OHRIFormField } from '../../../api/types';
 import { OHRIFormContext } from '../../../ohri-form-context';
@@ -16,14 +16,23 @@ export const OHRIEncounterLocationPicker: React.FC<{ question: OHRIFormField; on
     useContext(OHRIFormContext);
   const [locations, setLocations] = useState([]);
   const [conceptName, setConceptName] = useState('Loading...');
+  const isProcessingSelection = useRef(false);
+  const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
-    if (question.questionOptions.locationTag) {
-      getLocationsByTag(question.questionOptions.locationTag.trim().split(' ').join('%20')).subscribe(
+    const fetchLocations = () => {
+      const locationTag = question.questionOptions.locationTag;
+      const locationTagQueryParam = locationTag ? locationTag.trim().split(' ').join('%20') : '';
+
+      const locationObservable = locationTag ? getLocationsByTag(locationTagQueryParam) : getAllLocations();
+
+      locationObservable.subscribe(
         (results) => setLocations(results),
         (error) => createErrorHandler(),
       );
-    }
+    };
+
+    fetchLocations();
   }, []);
 
   const isInline = useMemo(() => {
@@ -51,19 +60,32 @@ export const OHRIEncounterLocationPicker: React.FC<{ question: OHRIFormField; on
   ) : (
     !question.isHidden && (
       <div className={`${styles.formInputField} ${styles.multiselectOverride} ${styles.flexRow}`}>
-        <Dropdown
+        <ComboBox
           id={question.id}
           titleText={question.label}
-          label="Choose location"
           items={locations}
-          itemToString={(item) => item.display}
-          selectedItem={field.value}
+          itemToString={(item) => item?.display}
+          selectedItem={locations.find((item) => item.uuid == field.value)}
+          shouldFilterItem={({ item, inputValue }) => {
+            if (!inputValue) {
+              // Carbon's initial call at component mount
+              return true;
+            }
+            return item.display?.toLowerCase().includes(inputValue.toLowerCase());
+          }}
           onChange={({ selectedItem }) => {
+            isProcessingSelection.current = true;
             setFieldValue(question.id, selectedItem);
             setEncounterLocation(selectedItem);
           }}
-          readOnly={question.readonly}
           disabled={question.disabled}
+          readOnly={question.readonly}
+          onInputChange={(value) => {
+            if (isProcessingSelection.current) {
+              isProcessingSelection.current = false;
+              return;
+            }
+          }}
         />
       </div>
     )

src/components/section/helpers.ts

@@ -17,6 +17,11 @@ export function getFieldControlWithFallback(question: OHRIFormField) {
     return getRegisteredControl('text');
   }
 
+  //Rendering overrides for existing AFE form schemas
+  if (question.type === 'encounterLocation') {
+    question.questionOptions.rendering = 'encounter-location';
+  }
+
   // Retrieve the registered control based on the specified rendering
   return getRegisteredControl(question.questionOptions.rendering);
 }

src/registry/inbuilt-components/control-templates.ts

@@ -15,12 +15,16 @@ export const controlTemplates: Array<ControlTemplate> = [
     datasource: {
       name: 'problem_datasource',
       config: {
-        class: ['8d4918b0-c2cc-11de-8d13-0010c6dffd0f', '8d492954-c2cc-11de-8d13-0010c6dffd0f','8d492b2a-c2cc-11de-8d13-0010c6dffd0f'],
+        class: [
+          '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492954-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492b2a-c2cc-11de-8d13-0010c6dffd0f',
+        ],
       },
     },
   },
 ];
 
 export const getControlTemplate = (name: string) => {
-  return controlTemplates.find(template => template.name === name);
+  return controlTemplates.find((template) => template.name === name);
 };

src/registry/inbuilt-components/inbuiltControls.ts

@@ -117,9 +117,9 @@ export const inbuiltControls: Array<RegistryItem<React.ComponentType<OHRIFormFie
     component: File,
     type: 'file',
   },
-  ...controlTemplates.map(template => ({
+  ...controlTemplates.map((template) => ({
     name: `${template.name}Control`,
-    component: templateToComponentMap.find(component => component.name === template.name).baseControlComponent,
+    component: templateToComponentMap.find((component) => component.name === template.name).baseControlComponent,
     type: template.name.toLowerCase(),
   })),
 ];