add logic for capturing encounter provider

src/components/encounter/ohri-encounter-form.component.tsx

@@ -80,6 +80,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);
@@ -100,6 +101,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
       form: form,
       visit: visit,
       setEncounterDate,
+      setEncounterProvider,
     }),
     [encounter, form?.encounter, location, patient, previousEncounter, sessionMode],
   );

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

@@ -44,22 +44,6 @@
       width: 22.313rem !important;
     }
   }
-  .row {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-  }
-  .inline-loader {
-    margin-left: 10px;
-  }
-
-  @media (max-width: 600px) {
-    .form-row {
-      flex-direction: column;
-    }
-
-    .inline-loader {
-      margin-left: 0;
-      margin-top: 10px;
-    }
+  .dataSourceLoader {
+    margin-left: 3rem;
   }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ComboBox, InlineLoading, DropdownSkeleton, NotificationButton } from '@carbon/react';
+import { ComboBox } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import { OHRIFormField, OHRIFormFieldProps } from '../../../api/types';
 import { useField } from 'formik';
@@ -13,6 +13,7 @@ import { fieldRequiredErrCode, isEmpty } from '../../../validators/ohri-form-val
 import { PreviousValueReview } from '../../previous-value-review/previous-value-review.component';
 import debounce from 'lodash-es/debounce';
 import LoadingIcon from '../../loaders/loading.component';
+import InlineLoader from '../../loaders/inline-loader.component';
 
 export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handler, onChange }) => {
   const [field, meta] = useField(question.id);
@@ -41,25 +42,23 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
   };
 
   const debouncedSearch = debounce((searchterm, dataSource) => {
-    setIsLoading(true);
+    //setIsLoading(true); //Commented out to first fix loader CSS
     dataSource.fetchData(searchterm).then(dataItems => {
       setItems(dataItems.map(dataSource.toUuidAndDisplay));
-      //setIsLoading(false);
+      setIsLoading(false);
     });
   }, 300);
 
   useEffect(() => {
     // If not searchable, preload the items
     if (dataSource && !isTrue(question.questionOptions['isSearchable'])) {
-      setIsLoading(true);
-      console.log('Is loading..');
+      //setIsLoading(true);
       dataSource.fetchData().then(dataItems => {
         setItems(dataItems.map(dataSource.toUuidAndDisplay));
-        //setIsLoading(false);
+        setIsLoading(false);
       });
     }
   }, [dataSource]);
-  console.log(isLoading);
 
   useEffect(() => {
     // get the data source
@@ -109,8 +108,8 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
         <div
           className={
             isFieldRequiredError
-              ? `${styles.errorLabel} ${styles.formInputField} ${styles.multiselectOverride} ${styles.flexRow}`
-              : `${styles.formInputField} ${styles.multiselectOverride} ${styles.flexRow}`
+              ? `${styles.errorLabel} ${styles.multiselectOverride}`
+              : `${styles.multiselectOverride}`
           }>
           <ComboBox
             id={question.id}
@@ -138,12 +137,13 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
           />
         </div>
         {isLoading ? (
-          <div>
-            <InlineLoading description="Loading" status="active" iconDescription="Loading" />
+          <div className={styles.row}>
+            <InlineLoader />
           </div>
-        ) : null}
+        ) : // </div>
+        null}
         {previousValueForReview && (
-          <div>
+          <div className={styles.row}>
             <PreviousValueReview
               value={previousValueForReview.value}
               displayText={previousValueForReview.display}

src/components/loaders/inline-loader.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './inline-loader.scss';
+import { InlineLoading } from '@carbon/react';
+
+const InlineLoader: React.FC = () => (
+  <div className={styles.formField}>
+    <span className="cds--label"></span>
+    <div className={styles.row}>
+      <InlineLoading status="active" />
+    </div>
+  </div>
+);
+
+export default InlineLoader;

src/components/loaders/inline-loader.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+  .formField {
+    margin-left: 2rem; 
+    max-width: 19rem;
+
+    > div > div > label {
+      color: colors.$gray-70;
+    }
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }

src/ohri-form-context.tsx

@@ -25,6 +25,7 @@ export interface EncounterContext {
   sessionMode: SessionMode;
   encounterDate: Date;
   setEncounterDate(value: Date): void;
+  setEncounterProvider(value: any): void;
 }
 
 export const OHRIFormContext = React.createContext<OHRIFormContextProps | undefined>(undefined);

src/registry/registry.ts

@@ -24,6 +24,7 @@ import { EncounterDatetimeHandler } from '../submission-handlers/encounterDateti
 import { UISelectExtended } from '../components/inputs/ui-select-extended/ui-select-extended';
 import { EncounterProviderDataSource } from '../data-sources/encounter-provider-data-source';
 import { ConceptDataSource } from '../data-sources/concept-provider-data-source';
+import { EncounterProviderHandler } from '../submission-handlers/encounterProviderHandler';
 
 export interface RegistryItem {
   id: string;
@@ -183,6 +184,11 @@ const baseHandlers: Array<RegistryItem> = [
     component: EncounterDatetimeHandler,
     type: 'encounterDatetime',
   },
+  {
+    id: 'EncounterProviderHandler',
+    component: EncounterProviderHandler,
+    type: 'encounterProvider',
+  },
 ];
 
 const fieldValidators: Array<ValidatorRegistryItem> = [

src/submission-handlers/encounterProviderHandler.ts

@@ -0,0 +1,21 @@
+import { useSession } from '@openmrs/esm-framework';
+import { SubmissionHandler } from '..';
+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 encounter.encounterProviders[0];
+  },
+
+  getDisplayValue: (field: OHRIFormField, value: any) => {
+    return field.value ? field.value : null;
+  },
+  getPreviousValue: (field: OHRIFormField, value: any) => {
+    return null;
+  },
+};