Introduce Encounter Provider Control

src/api/api.ts

@@ -71,6 +71,12 @@ export function getAllLocations(): Observable<{ uuid: string; display: string }[
   );
 }
 
+export function getEncounterProviders(): Observable<{ uuid: string; display: string }[]> {
+  return openmrsObservableFetch(`/ws/rest/v1/provider?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/encounter/ohri-encounter-form.component.tsx

@@ -83,6 +83,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
   const [fields, setFields] = useState<Array<OHRIFormField>>([]);
   const [encounterLocation, setEncounterLocation] = useState(null);
   const [encounterDate, setEncounterDate] = useState(formSessionDate);
+  const [encounterProvider, setEncounterProvider] = useState(provider);
   const { encounter, isLoading: isLoadingEncounter } = useEncounter(formJson);
   const [previousEncounter, setPreviousEncounter] = useState<OpenmrsEncounter>(null);
   const [isLoadingPreviousEncounter, setIsLoadingPreviousEncounter] = useState(true);
@@ -92,6 +93,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
   const [invalidFields, setInvalidFields] = useState([]);
   const [initValues, setInitValues] = useState({});
   const [obsGroupCounter, setObsGroupCounter] = useState<Array<RepeatObsGroupCounter>>([]);
+
   const layoutType = useLayoutType();
 
   const encounterContext = useMemo(
@@ -102,9 +104,11 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
       location: location,
       sessionMode: sessionMode || (form?.encounter ? 'edit' : 'enter'),
       encounterDate: formSessionDate,
+      encounterProvider: provider,
       form: form,
       visit: visit,
       setEncounterDate,
+      setEncounterProvider,
       initValues: initValues,
       obsGroupCounter: obsGroupCounter,
       setObsGroupCounter: setObsGroupCounter,
@@ -478,13 +482,13 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
       // update encounter providers
       const hasCurrentProvider =
         encounterForSubmission['encounterProviders'].findIndex(
-          (encProvider) => encProvider.provider.uuid == provider,
+          (encProvider) => encProvider.provider.uuid == encounterProvider,
         ) !== -1;
       if (!hasCurrentProvider) {
         encounterForSubmission['encounterProviders'] = [
           ...encounterForSubmission.encounterProviders,
           {
-            provider: provider,
+            provider: encounterProvider,
             encounterRole: encounterRole?.uuid,
           },
         ];
@@ -504,7 +508,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
         encounterType: formJson.encounterType,
         encounterProviders: [
           {
-            provider: provider,
+            provider: encounterProvider,
             encounterRole: encounterRole?.uuid,
           },
         ],
@@ -709,6 +713,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
       value={{
         values,
         setFieldValue,
+        setEncounterProvider: setEncounterProvider,
         setEncounterLocation: setEncounterLocation,
         setObsGroupsToVoid: setObsGroupsToVoid,
         obsGroupsToVoid: obsGroupsToVoid,

src/components/inputs/ui-select-extended/ui-select-extended.tsx

@@ -45,7 +45,10 @@ const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handler, onC
   }, [encounterContext.sessionMode, question.readonly, question.inlineRendering, layoutType, workspaceLayout]);
 
   useEffect(() => {
-    const datasourceName = question.questionOptions?.datasource?.name;
+    let datasourceName = question.questionOptions?.datasource?.name;
+    if (question.type === 'encounterProvider') {
+      datasourceName = question.type;
+    }
     setConfig(
       datasourceName
         ? question.questionOptions.datasource?.config

src/components/section/helpers.ts

@@ -21,7 +21,9 @@ export function getFieldControlWithFallback(question: OHRIFormField) {
   if (question.type === 'encounterLocation') {
     question.questionOptions.rendering = 'encounter-location';
   }
-
+  if (question.type === 'encounterProvider') {
+    return getRegisteredControl('encounterProvider');
+  }
   // Retrieve the registered control based on the specified rendering
   return getRegisteredControl(question.questionOptions.rendering);
 }

src/datasources/concept-data-source.ts

@@ -15,7 +15,7 @@ export class ConceptDataSource extends BaseOpenMRSDataSource {
       } else {
         return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
           return data.results.filter(
-            concept => concept.conceptClass && config.class.includes(concept.conceptClass.uuid),
+            (concept) => concept.conceptClass && config.class.includes(concept.conceptClass.uuid),
           );
         });
       }

src/datasources/location-data-source.ts

@@ -9,16 +9,16 @@ export class LocationDataSource extends BaseOpenMRSDataSource {
   fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]> {
     let apiUrl = this.url;
     const urlParts = apiUrl.split('?');
-    if (config?.tag) {  
+    if (config?.tag) {
       apiUrl = `${urlParts[0]}?tag=${config.tag}&${urlParts[1]}`;
     }
     //overwrite url if there's a uuid value, meaning we are in edit mode
-    if(uuid){
+    if (uuid) {
       apiUrl = `${urlParts[0]}/${uuid}?${urlParts[1]}`;
     }
 
     return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
-      if(data.results){
+      if (data.results) {
         return data.results;
       }
       return data;

src/datasources/provider-datasource.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class ProviderDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super('/ws/rest/v1/provider?v=custom:(uuid,display)');
+  }
+
+  fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]> {
+    let apiUrl = this.url;
+    const urlParts = apiUrl.split('?');
+    if (config?.tag) {
+      apiUrl = `${urlParts[0]}?tag=${config.tag}&${urlParts[1]}`;
+    }
+    //overwrite url if there's a uuid value, meaning we are in edit mode
+    if (uuid) {
+      apiUrl = `${urlParts[0]}/${uuid}?${urlParts[1]}`;
+    }
+
+    return openmrsFetch(searchTerm ? `${apiUrl}&q=${searchTerm}` : apiUrl).then(({ data }) => {
+      if (data.results) {
+        console.log(data.results);
+        return data.results;
+      }
+      return data;
+    });
+  }
+}

src/hooks/useEncounterRole.tsx

@@ -6,7 +6,7 @@ export function useEncounterRole() {
     '/ws/rest/v1/encounterrole?v=custom:(uuid,display,name)',
     openmrsFetch,
   );
-  const clinicalEncounterRole = data?.data.results.find(encounterRole => encounterRole.name === 'Clinician');
+  const clinicalEncounterRole = data?.data.results.find((encounterRole) => encounterRole.name === 'Clinician');
 
   if (clinicalEncounterRole) {
     return { encounterRole: clinicalEncounterRole, error, isLoading };

src/ohri-form-context.tsx

@@ -6,6 +6,7 @@ type OHRIFormContextProps = {
   values: Record<string, any>;
   setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
   setEncounterLocation: (value: any) => void;
+  setEncounterProvider: (value: any) => void;
   obsGroupsToVoid: Array<any>;
   setObsGroupsToVoid: (value: any) => void;
   encounterContext: EncounterContext;
@@ -25,6 +26,8 @@ export interface EncounterContext {
   sessionMode: SessionMode;
   encounterDate: Date;
   setEncounterDate(value: Date): void;
+  encounterProvider: string;
+  setEncounterProvider(value: string): void;
   initValues?: Record<string, any>;
   setObsGroupCounter?: any;
 }

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

@@ -10,6 +10,12 @@ export const controlTemplates: Array<ControlTemplate> = [
       },
     },
   },
+  {
+    name: 'encounterProvider',
+    datasource: {
+      name: 'provider_datasource',
+    },
+  },
   {
     name: 'problem',
     datasource: {

src/registry/inbuilt-components/inbuiltControls.ts

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

src/registry/inbuilt-components/inbuiltDataSources.ts

@@ -1,6 +1,7 @@
 import { DataSource } from '../../api/types';
 import { ConceptDataSource } from '../../datasources/concept-data-source';
 import { LocationDataSource } from '../../datasources/location-data-source';
+import { ProviderDataSource } from '../../datasources/provider-datasource';
 import { RegistryItem } from '../registry';
 
 /**
@@ -19,8 +20,12 @@ export const inbuiltDataSources: Array<RegistryItem<DataSource<any>>> = [
     name: 'problem_datasource',
     component: new ConceptDataSource(),
   },
+  {
+    name: 'provider_datasource',
+    component: new ProviderDataSource(),
+  },
 ];
 
 export const validateInbuiltDatasource = (name: string) => {
-  return inbuiltDataSources.some(datasource => datasource.name === name);
+  return inbuiltDataSources.some((datasource) => datasource.name === name);
 };

src/registry/inbuilt-components/inbuiltFieldSubmissionHandlers.ts

@@ -1,6 +1,7 @@
 import { SubmissionHandler } from '../../api/types';
 import { ObsSubmissionHandler, EncounterLocationSubmissionHandler } from '../../submission-handlers/base-handlers';
 import { EncounterDatetimeHandler } from '../../submission-handlers/encounterDatetimeHandler';
+import { EncounterProviderHandler } from '../../submission-handlers/encounterProviderHandler';
 import { RegistryItem } from '../registry';
 
 /**
@@ -27,4 +28,9 @@ export const inbuiltFieldSubmissionHandlers: Array<RegistryItem<SubmissionHandle
     component: EncounterDatetimeHandler,
     type: 'encounterDatetime',
   },
+  {
+    name: 'EncounterProviderHandler',
+    component: EncounterProviderHandler,
+    type: 'encounterProvider',
+  },
 ];

src/registry/inbuilt-components/template-component-map.ts

@@ -8,5 +8,9 @@ export const templateToComponentMap = [
   {
     name: 'problem',
     baseControlComponent: UISelectExtended,
-  }
+  },
+  {
+    name: 'encounterProvider',
+    baseControlComponent: UISelectExtended,
+  },
 ];

src/submission-handlers/encounterProviderHandler.ts

@@ -0,0 +1,24 @@
+import { SubmissionHandler } from '..';
+import { getEncounterProviders } from '../api/api';
+import { OpenmrsEncounter, OHRIFormField } from '../api/types';
+import { EncounterContext } from '../ohri-form-context';
+
+export const EncounterProviderHandler: SubmissionHandler = {
+  handleFieldSubmission: (field: OHRIFormField, value: any, context: EncounterContext) => {
+    context.setEncounterProvider(value);
+    return value;
+  },
+  getInitialValue: (encounter: OpenmrsEncounter, field: OHRIFormField, allFormFields?: OHRIFormField[]) => {
+    return new Date(); // TO DO: pick it from the visit if present
+  },
+
+  getDisplayValue: (field: OHRIFormField, value: any) => {
+    if (!field.value) {
+      return null;
+    }
+    return value;
+  },
+  getPreviousValue: (field: OHRIFormField, encounter: OpenmrsEncounter, allFormFields: Array<OHRIFormField>) => {
+    return null;
+  },
+};