(feat) (feat) O3-3367 Add support for person attributes

src/adapters/person-attributes-adapter.ts

@@ -0,0 +1,54 @@
+import { type PersonAttribute, type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import { type FormField, type FormFieldValueAdapter, type FormProcessorContextProps } from '../types';
+import { clearSubmission } from '../utils/common-utils';
+import { isEmpty } from '../validators/form-validator';
+
+export const PersonAttributesAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    clearSubmission(field);
+    if (field.meta?.previousValue?.value === value || isEmpty(value)) {
+      return null;
+    }
+    field.meta.submission.newValue = {
+      value: value,
+      attributeType: field.questionOptions?.attribute?.type,
+    };
+    return field.meta.submission.newValue;
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    const rendering = field.questionOptions.rendering;
+
+    const personAttributeValue = context?.customDependencies.personAttributes.find(
+      (attribute: PersonAttribute) => attribute.attributeType.uuid === field.questionOptions.attribute?.type,
+    )?.value;
+    if (rendering === 'text') {
+      if (typeof personAttributeValue === 'string') {
+        return personAttributeValue;
+      } else if (
+        personAttributeValue &&
+        typeof personAttributeValue === 'object' &&
+        'display' in personAttributeValue
+      ) {
+        return personAttributeValue?.display;
+      }
+    } else if (rendering === 'ui-select-extended') {
+      if (personAttributeValue && typeof personAttributeValue === 'object' && 'uuid' in personAttributeValue) {
+        return personAttributeValue?.uuid;
+      }
+    }
+    return null;
+  },
+  getPreviousValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    return null;
+  },
+  getDisplayValue: function (field: FormField, value: any) {
+    if (value?.display) {
+      return value.display;
+    }
+    return value;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};

src/api/index.ts

@@ -1,4 +1,4 @@
-import { fhirBaseUrl, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { fhirBaseUrl, openmrsFetch, type PersonAttribute, restBaseUrl } from '@openmrs/esm-framework';
 import { encounterRepresentation } from '../constants';
 import { type OpenmrsForm, type PatientIdentifier, type PatientProgramPayload } from '../types';
 import { isUuid } from '../utils/boolean-utils';
@@ -180,3 +180,21 @@ export function savePatientIdentifier(patientIdentifier: PatientIdentifier, pati
     body: JSON.stringify(patientIdentifier),
   });
 }
+
+export function savePersonAttribute(personAttribute: PersonAttribute, personUuid: string) {
+  let url: string;
+
+  if (personAttribute.uuid) {
+    url = `${restBaseUrl}/person/${personUuid}/attribute/${personAttribute.uuid}`;
+  } else {
+    url = `${restBaseUrl}/person/${personUuid}/attribute`;
+  }
+
+  return openmrsFetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: JSON.stringify(personAttribute),
+  });
+}

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

@@ -149,7 +149,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
             selectedItem={selectedItem}
             placeholder={isSearchable ? t('search', 'Search') + '...' : null}
             shouldFilterItem={({ item, inputValue }) => {
-              if (!inputValue) {
+              if (!inputValue || items.find((item) => item.uuid == field.value)) {
                 // Carbon's initial call at component mount
                 return true;
               }

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

@@ -107,6 +107,14 @@ jest.mock('../../../registry/registry', () => {
   };
 });
 
+jest.mock('../../../hooks/usePersonAttributes', () => ({
+  usePersonAttributes: jest.fn().mockReturnValue({
+    personAttributes: [],
+    error: null,
+    isLoading: false,
+  }),
+}));
+
 const encounter = {
   uuid: 'encounter-uuid',
   obs: [

src/components/inputs/unspecified/unspecified.test.tsx

@@ -58,6 +58,14 @@ jest.mock('../../../hooks/useEncounter', () => ({
   }),
 }));
 
+jest.mock('../../../hooks/usePersonAttributes', () => ({
+  usePersonAttributes: jest.fn().mockReturnValue({
+    personAttributes: [],
+    error: null,
+    isLoading: false,
+  }),
+}));
+
 const renderForm = async (mode: SessionMode = 'enter') => {
   await act(async () => {
     render(

src/datasources/person-attribute-datasource.ts

@@ -0,0 +1,16 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { BaseOpenMRSDataSource } from './data-source';
+
+export class PersonAttributeLocationDataSource extends BaseOpenMRSDataSource {
+  constructor() {
+    super(null);
+  }
+
+  async fetchData(searchTerm: string, config?: Record<string, any>, uuid?: string): Promise<any[]> {
+    const rep = 'v=custom:(uuid,display)';
+    const url = `${restBaseUrl}/location?${rep}`;
+    const { data } = await openmrsFetch(searchTerm ? `${url}&q=${searchTerm}` : url);
+
+    return data?.results;
+  }
+}

src/datasources/select-concept-answers-datasource.ts

@@ -7,7 +7,7 @@ export class SelectConceptAnswersDatasource extends BaseOpenMRSDataSource {
   }
 
   fetchData(searchTerm: string, config?: Record<string, any>): Promise<any[]> {
-    const apiUrl = this.url.replace('conceptUuid', config.referencedValue || config.concept);
+    const apiUrl = this.url.replace('conceptUuid', config.concept || config.referencedValue);
     return openmrsFetch(apiUrl).then(({ data }) => {
       return data['setMembers'].length ? data['setMembers'] : data['answers'];
     });

src/form-engine.test.tsx

@@ -118,6 +118,14 @@ jest.mock('./hooks/useConcepts', () => ({
   }),
 }));
 
+jest.mock('./hooks/usePersonAttributes', () => ({
+  usePersonAttributes: jest.fn().mockReturnValue({
+    personAttributes: [],
+    error: null,
+    isLoading: false,
+  }),
+}));
+
 describe('Form engine component', () => {
   const user = userEvent.setup();
 

src/hooks/usePersonAttributes.tsx

@@ -0,0 +1,30 @@
+import { openmrsFetch, type PersonAttribute, restBaseUrl } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
+
+export const usePersonAttributes = (patientUuid: string) => {
+  const [personAttributes, setPersonAttributes] = useState<Array<PersonAttribute>>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (patientUuid) {
+      openmrsFetch(`${restBaseUrl}/patient/${patientUuid}?v=custom:(attributes)`)
+        .then((response) => {
+          setPersonAttributes(response?.data?.attributes);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setError(error);
+          setIsLoading(false);
+        });
+    } else {
+      setIsLoading(false);
+    }
+  }, [patientUuid]);
+
+  return {
+    personAttributes,
+    error,
+    isLoading: isLoading,
+  };
+};

src/processors/encounter/encounter-form-processor.ts

@@ -19,9 +19,11 @@ import {
   prepareEncounter,
   preparePatientIdentifiers,
   preparePatientPrograms,
+  preparePersonAttributes,
   saveAttachments,
   savePatientIdentifiers,
   savePatientPrograms,
+  savePersonAttributes,
 } from './encounter-processor-helper';
 import { type OpenmrsResource, showSnackbar, translateFrom } from '@openmrs/esm-framework';
 import { moduleName } from '../../globals';
@@ -31,6 +33,7 @@ import { useEncounterRole } from '../../hooks/useEncounterRole';
 import { evaluateAsyncExpression, type FormNode } from '../../utils/expression-runner';
 import { hasRendering } from '../../utils/common-utils';
 import { extractObsValueAndDisplay } from '../../utils/form-helper';
+import { usePersonAttributes } from '../../hooks/usePersonAttributes';
 
 function useCustomHooks(context: Partial<FormProcessorContextProps>) {
   const [isLoading, setIsLoading] = useState(true);
@@ -40,13 +43,14 @@ function useCustomHooks(context: Partial<FormProcessorContextProps>) {
     context.patient?.id,
     context.formJson,
   );
+  const { isLoading: isLoadingPersonAttributes, personAttributes } = usePersonAttributes(context.patient?.id);
 
   useEffect(() => {
-    setIsLoading(isLoadingPatientPrograms || isLoadingEncounter || isLoadingEncounterRole);
-  }, [isLoadingPatientPrograms, isLoadingEncounter, isLoadingEncounterRole]);
+    setIsLoading(isLoadingPatientPrograms || isLoadingEncounter || isLoadingEncounterRole || isLoadingPersonAttributes);
+  }, [isLoadingPatientPrograms, isLoadingEncounter, isLoadingEncounterRole, isLoadingPersonAttributes]);
 
   return {
-    data: { encounter, patientPrograms, encounterRole },
+    data: { encounter, patientPrograms, encounterRole, personAttributes },
     isLoading,
     error: null,
     updateContext: (setContext: React.Dispatch<React.SetStateAction<FormProcessorContextProps>>) => {
@@ -59,6 +63,7 @@ function useCustomHooks(context: Partial<FormProcessorContextProps>) {
             ...context.customDependencies,
             patientPrograms: patientPrograms,
             defaultEncounterRole: encounterRole,
+            personAttributes: personAttributes,
           },
         };
       });
@@ -79,6 +84,7 @@ const contextInitializableTypes = [
   'patientIdentifier',
   'encounterRole',
   'programState',
+  'personAttributes',
 ];
 
 export class EncounterFormProcessor extends FormProcessor {
@@ -162,6 +168,27 @@ export class EncounterFormProcessor extends FormProcessor {
       });
     }
 
+    // save person attributes
+    try {
+      const personattributes = preparePersonAttributes(context.formFields, context.location?.uuid);
+      const savedPrograms = await savePersonAttributes(context.patient, personattributes);
+      if (savedPrograms?.length) {
+        showSnackbar({
+          title: translateFn('personAttributesSaved', 'Person attribute(s) saved successfully'),
+          kind: 'success',
+          isLowContrast: true,
+        });
+      }
+    } catch (error) {
+      const errorMessages = extractErrorMessagesFromResponse(error);
+      return Promise.reject({
+        title: translateFn('errorSavingPersonAttributes', 'Error saving person attributes'),
+        description: errorMessages.join(', '),
+        kind: 'error',
+        critical: true,
+      });
+    }
+
     // save encounter
     try {
       const { data: savedEncounter } = await saveEncounter(abortController, encounter, encounter.uuid);

src/processors/encounter/encounter-processor-helper.ts

@@ -7,7 +7,7 @@ import {
   type PatientProgramPayload,
   type FormProcessorContextProps,
 } from '../../types';
-import { saveAttachment, savePatientIdentifier, saveProgramEnrollment } from '../../api';
+import { saveAttachment, savePatientIdentifier, savePersonAttribute, saveProgramEnrollment } from '../../api';
 import { hasRendering, hasSubmission } from '../../utils/common-utils';
 import dayjs from 'dayjs';
 import { voidObs, constructObs, assignedObsIds } from '../../adapters/obs-adapter';
@@ -16,6 +16,7 @@ import { ConceptTrue } from '../../constants';
 import { DefaultValueValidator } from '../../validators/default-value-validator';
 import { cloneRepeatField } from '../../components/repeat/helpers';
 import { assignedOrderIds } from '../../adapters/orders-adapter';
+import { type PersonAttribute } from '@openmrs/esm-framework';
 
 export function prepareEncounter(
   context: FormContextProps,
@@ -152,6 +153,12 @@ export function saveAttachments(fields: FormField[], encounter: OpenmrsEncounter
   });
 }
 
+export function savePersonAttributes(patient: fhir.Patient, attributes: PersonAttribute[]) {
+  return attributes.map((personAttribute) => {
+    return savePersonAttribute(personAttribute, patient.id);
+  });
+}
+
 export function getMutableSessionProps(context: FormContextProps) {
   const {
     formFields,
@@ -318,3 +325,9 @@ export async function hydrateRepeatField(
     }),
   ).then((results) => results.flat());
 }
+
+export function preparePersonAttributes(fields: FormField[], encounterLocation: string): PersonAttribute[] {
+  return fields
+    .filter((field) => field.type === 'personAttribute' && hasSubmission(field))
+    .map((field) => field.meta.submission.newValue);
+}

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

@@ -50,6 +50,12 @@ export const controlTemplates: Array<ControlTemplate> = [
       },
     },
   },
+  {
+    name: 'person-attribute-location',
+    datasource: {
+      name: 'person_attribute_location_datasource',
+    },
+  },
 ];
 
 export const getControlTemplate = (name: string) => {

src/registry/inbuilt-components/inbuiltControls.ts

@@ -94,6 +94,6 @@ export const inbuiltControls: Array<RegistryItem<React.ComponentType<FormFieldIn
   },
   ...controlTemplates.map((template) => ({
     name: template.name,
-    component: templateToComponentMap.find((component) => component.name === template.name).baseControlComponent,
+    component: templateToComponentMap.find((component) => component.name === template.name)?.baseControlComponent,
   })),
 ];

src/registry/inbuilt-components/inbuiltDataSources.ts

@@ -5,6 +5,7 @@ import { LocationDataSource } from '../../datasources/location-data-source';
 import { ProviderDataSource } from '../../datasources/provider-datasource';
 import { SelectConceptAnswersDatasource } from '../../datasources/select-concept-answers-datasource';
 import { EncounterRoleDataSource } from '../../datasources/encounter-role-datasource';
+import { PersonAttributeLocationDataSource } from '../../datasources/person-attribute-datasource';
 
 /**
  * @internal
@@ -34,6 +35,10 @@ export const inbuiltDataSources: Array<RegistryItem<DataSource<any>>> = [
     name: 'encounter_role_datasource',
     component: new EncounterRoleDataSource(),
   },
+  {
+    name: 'person_attribute_location_datasource',
+    component: new PersonAttributeLocationDataSource(),
+  },
 ];
 
 export const validateInbuiltDatasource = (name: string) => {

src/registry/inbuilt-components/inbuiltFieldValueAdapters.ts

@@ -11,6 +11,7 @@ import { OrdersAdapter } from '../../adapters/orders-adapter';
 import { PatientIdentifierAdapter } from '../../adapters/patient-identifier-adapter';
 import { ProgramStateAdapter } from '../../adapters/program-state-adapter';
 import { type FormFieldValueAdapter } from '../../types';
+import { PersonAttributesAdapter } from '../../adapters/person-attributes-adapter';
 
 export const inbuiltFieldValueAdapters: RegistryItem<FormFieldValueAdapter>[] = [
   {
@@ -61,4 +62,8 @@ export const inbuiltFieldValueAdapters: RegistryItem<FormFieldValueAdapter>[] =
     type: 'patientIdentifier',
     component: PatientIdentifierAdapter,
   },
+  {
+    type: 'personAttribute',
+    component: PersonAttributesAdapter,
+  },
 ];

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

@@ -25,4 +25,8 @@ export const templateToComponentMap = [
     name: 'encounter-role',
     baseControlComponent: UiSelectExtended,
   },
+  {
+    name: 'person_attribute_location_datasource',
+    baseControlComponent: UiSelectExtended,
+  },
 ];