add support for capturing drugs as observations

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

@@ -12,6 +12,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 { useTranslation } from 'react-i18next';
+import { useDataSource } from '../../../hooks/useDataSource';
 
 export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handler, onChange }) => {
   const { t } = useTranslation();
@@ -28,10 +29,7 @@ export const UISelectExtended: React.FC<OHRIFormFieldProps> = ({ question, handl
   const [inputValue, setInputValue] = useState('');
   const isProcessingSelection = useRef(false);
 
-  const [dataSource, config] = useMemo(
-    () => [getDataSource(question.questionOptions?.datasource?.id), question.questionOptions?.datasource?.config],
-    [],
-  );
+  const { dataSource, config } = useDataSource(question);
 
   useEffect(() => {
     if (question['submission']) {

src/hooks/useDataSource.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { getControlTemplate, getDataSource, OHRIFormField } from '..';
+
+export function useDataSource(field: OHRIFormField) {
+  const [config, setConfig] = useState({});
+  const [dataSource, setDataSource] = useState(null);
+
+  useEffect(() => {
+    if (field.questionOptions.datasource?.id) {
+      setDataSource(getDataSource(field.questionOptions.datasource.id));
+      setConfig(field.questionOptions.datasource.config);
+    } else {
+      const template = getControlTemplate(field.questionOptions.rendering);
+      setDataSource(getDataSource(template.datasource.id));
+      setConfig(template.datasource.config);
+    }
+  }, [field]);
+
+  return {
+    dataSource,
+    config,
+  };
+}

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 { BaseOpenMRSDataSource } from '../datasources/data-source';
 import { LocationDataSource } from '../datasources/location-data-source';
+
 export interface RegistryItem {
   id: string;
   component: any;
@@ -57,6 +58,16 @@ export interface FormsRegistryStoreState {
   postSubmissionActions: Array<PostSubmissionActionRegistration>;
 }
 
+export const controlTemplatesFactory = [
+  {
+    name: 'drug',
+    baseControlComponent: UISelectExtended,
+    datasource: {
+      id: 'drug',
+      config: {},
+    }
+  }
+];
 export const baseFieldComponents: Array<CustomControlRegistration> = [
   {
     id: 'OHRIText',
@@ -159,6 +170,12 @@ export const baseFieldComponents: Array<CustomControlRegistration> = [
     type: 'datetime',
     alias: '',
   },
+  ...controlTemplatesFactory.map(template => ({
+    id: `${template.name}Control`,
+    loadControl: () => Promise.resolve({default: template.baseControlComponent}),
+    type: template.name.toLowerCase(),
+    alias: '',
+  }))
 ];
 
 const baseHandlers: Array<RegistryItem> = [
@@ -204,8 +221,17 @@ const dataSources: Array<DataSourceRegistryItem> = [
     id: 'concept_location',
     component: new LocationDataSource(),
   },
+  {
+    id: 'drug',
+    component: new BaseOpenMRSDataSource('/ws/rest/v1/drug?v=custom:(uuid,display)'),
+  },
 ];
 
+
+export const getControlTemplate = (name: string) => {
+  return controlTemplatesFactory.find(template => template.name === name);
+};
+
 export const getFieldComponent = renderType => {
   let lazy = baseFieldComponents.find(item => item.type == renderType || item?.alias == renderType)?.loadControl;
   if (!lazy) {