O3-283 Configurable Support for Recording Registration Observations

packages/esm-outpatient-app/src/patient-info/appointment-details.component.tsx

@@ -26,13 +26,13 @@ const PastAppointmentDetails: React.FC<PastAppointmentDetailsProps> = ({ pastApp
       {pastAppointments.length >= 1 ? (
         pastAppointments.map((appointment, index) => {
           return (
-            <>
+            <React.Fragment key={`past-appointment-${index}`}>
               <p className={styles.title}>{t('lastEncounter', 'Last encounter')}</p>
               <p className={styles.subtitle}>
                 {formatDatetime(parseDate(appointment.startDateTime))} · {appointment.service.name} ·{' '}
                 {appointment.location.name}{' '}
               </p>
-            </>
+            </React.Fragment>
           );
         })
       ) : (
@@ -52,13 +52,13 @@ const UpcomingAppointmentDetails: React.FC<UpcomingAppointmentDetailsProps> = ({
       {upcomingAppointments.length >= 1 ? (
         upcomingAppointments.map((appointment, index) => {
           return (
-            <>
+            <React.Fragment key={`upcoming-appointment-${index}`}>
               <p className={styles.title}>{t('returnDate', 'Return date')}</p>
               <p className={styles.subtitle}>
                 {formatDatetime(parseDate(appointment.startDateTime))} · {appointment.service.name} ·{' '}
                 {appointment.location.name}{' '}
               </p>
-            </>
+            </React.Fragment>
           );
         })
       ) : (

packages/esm-patient-registration-app/src/config-schema.ts

@@ -9,14 +9,14 @@ export interface SectionDefinition {
 export interface FieldDefinition {
   id: string;
   type: string;
-  label: string;
+  label: string | null;
   uuid: string;
   placeholder: string;
   validation: {
     required: boolean;
-    matches: string;
+    matches: string | null;
   };
-  answerConceptSetUuid: string;
+  answerConceptSetUuid: string | null;
 }
 
 export interface RegistrationConfig {
@@ -38,6 +38,11 @@ export interface RegistrationConfig {
     patientPhotoUuid: string;
   };
   defaultPatientIdentifierTypes: Array<string>;
+  registrationObs: {
+    encounterTypeUuid: string | null;
+    encounterProviderRoleUuid: string;
+    registrationFormUuid: string | null;
+  };
 }
 
 export const builtInSections: Array<SectionDefinition> = [
@@ -96,6 +101,11 @@ export const esmPatientRegistrationSchema = {
         _description:
           'How this field will be referred to in the `fields` element of the `sectionDefinitions` configuration.',
       },
+      type: {
+        _type: Type.String,
+        _description: "How this field's data will be stored—a person attribute or an obs.",
+        _validators: [validators.oneOf(['person attribute', 'obs'])],
+      },
       uuid: {
         _type: Type.UUID,
         _description: "Person attribute type UUID that this field's data should be saved to.",
@@ -162,12 +172,84 @@ export const esmPatientRegistrationSchema = {
       _default: '736e8771-e501-4615-bfa7-570c03f4bef5',
     },
   },
-
   defaultPatientIdentifierTypes: {
     _type: Type.Array,
     _elements: {
       _type: Type.PatientIdentifierTypeUuid,
     },
     _default: [],
   },
+  registrationObs: {
+    encounterTypeUuid: {
+      _type: Type.UUID,
+      _default: null,
+      _description:
+        'Obs created during registration will be associated with an encounter of this type. This must be set in order to use fields of type `obs`.',
+    },
+    encounterProviderRoleUuid: {
+      _type: Type.UUID,
+      _default: 'a0b03050-c99b-11e0-9572-0800200c9a66',
+      _description: "The provider role to use for the registration encounter. Default is 'Unkown'.",
+    },
+    registrationFormUuid: {
+      _type: Type.UUID,
+      _default: null,
+      _description:
+        'The form UUID to associate with the registration encounter. By default no form will be associated.',
+    },
+  },
+  _validators: [
+    validator(
+      (config: RegistrationConfig) =>
+        !config.fieldDefinitions.some((d) => d.type == 'obs') || config.registrationObs.encounterTypeUuid != null,
+      "If fieldDefinitions contains any fields of type 'obs', `registrationObs.encounterTypeUuid` must be specified.",
+    ),
+    validator(
+      (config: RegistrationConfig) =>
+        config.sections.every((s) =>
+          [...builtInSections, ...config.sectionDefinitions].map((sDef) => sDef.id).includes(s),
+        ),
+      (config: RegistrationConfig) => {
+        const allowedSections = [...builtInSections, ...config.sectionDefinitions].map((sDef) => sDef.id);
+        const badSection = config.sections.find((s) => !allowedSections.includes(s));
+        return (
+          `'${badSection}' is not a valid section ID. Valid section IDs include the built-in sections ${stringifyDefinitions(
+            builtInSections,
+          )}` +
+          (config.sectionDefinitions.length
+            ? `; and the defined sections ${stringifyDefinitions(config.sectionDefinitions)}.`
+            : '.')
+        );
+      },
+    ),
+    validator(
+      (config: RegistrationConfig) =>
+        config.sectionDefinitions.every((sectionDefinition) =>
+          sectionDefinition.fields.every((f) =>
+            [...builtInFields, ...config.fieldDefinitions.map((fDef) => fDef.id)].includes(f),
+          ),
+        ),
+      (config: RegistrationConfig) => {
+        const allowedFields = [...builtInFields, ...config.fieldDefinitions.map((fDef) => fDef.id)];
+        const badSection = config.sectionDefinitions.find((sectionDefinition) =>
+          sectionDefinition.fields.some((f) => !allowedFields.includes(f)),
+        );
+        const badField = badSection.fields.find((f) => !allowedFields.includes(f));
+        return (
+          `The section definition '${
+            badSection.id
+          }' contains an invalid field '${badField}'. 'fields' can only contain the built-in fields '${builtInFields.join(
+            "', '",
+          )}'` +
+          (config.fieldDefinitions.length
+            ? `; or the defined fields ${stringifyDefinitions(config.fieldDefinitions)}.`
+            : '.')
+        );
+      },
+    ),
+  ],
 };
+
+function stringifyDefinitions(sectionDefinitions: Array<SectionDefinition | FieldDefinition>) {
+  return `'${sectionDefinitions.map((s) => s.id).join("', '")}'`;
+}

packages/esm-patient-registration-app/src/offline.ts

@@ -68,9 +68,11 @@ export async function syncPatientRegistration(
     queuedPatient._patientRegistrationData.patientUuidMap,
     queuedPatient._patientRegistrationData.initialAddressFieldValues,
     queuedPatient._patientRegistrationData.capturePhotoProps,
-    queuedPatient._patientRegistrationData.patientPhotoConceptUuid,
     queuedPatient._patientRegistrationData.currentLocation,
     queuedPatient._patientRegistrationData.initialIdentifierValues,
+    queuedPatient._patientRegistrationData.currentUser,
+    queuedPatient._patientRegistrationData.config,
+    queuedPatient._patientRegistrationData.savePatientTransactionManager,
     options.abort,
   );
 }

packages/esm-patient-registration-app/src/patient-registration/field/__mocks__/field.resource.ts

@@ -0,0 +1,60 @@
+import { ConceptResponse } from '../../patient-registration-types';
+
+export const useConcept = jest.fn(function mockUseConceptImplementation(uuid: string): {
+  data: ConceptResponse;
+  isLoading: boolean;
+} {
+  let data;
+  if (uuid == 'weight-uuid') {
+    data = {
+      uuid: 'weight-uuid',
+      display: 'Weight (kg)',
+      datatype: { display: 'Numeric', uuid: 'num' },
+      answers: [],
+      setMembers: [],
+    };
+  } else if (uuid == 'chief-complaint-uuid') {
+    data = {
+      uuid: 'chief-complaint-uuid',
+      display: 'Chief Complaint',
+      datatype: { display: 'Text', uuid: 'txt' },
+      answers: [],
+      setMembers: [],
+    };
+  } else if (uuid == 'nationality-uuid') {
+    data = {
+      uuid: 'nationality-uuid',
+      display: 'Nationality',
+      datatype: { display: 'Coded', uuid: 'cdd' },
+      answers: [
+        { display: 'USA', uuid: 'usa' },
+        { display: 'Mexico', uuid: 'mex' },
+      ],
+      setMembers: [],
+    };
+  }
+  return {
+    data: data ?? null,
+    isLoading: !data,
+  };
+});
+
+export const useConceptAnswers = jest.fn((uuid: string) => {
+  if (uuid == 'nationality-uuid') {
+    return {
+      data: [
+        { display: 'USA', uuid: 'usa' },
+        { display: 'Mexico', uuid: 'mex' },
+      ],
+      isLoading: false,
+    };
+  } else if (uuid == 'other-countries-uuid') {
+    return {
+      data: [
+        { display: 'Kenya', uuid: 'ke' },
+        { display: 'Uganda', uuid: 'ug' },
+      ],
+      isLoading: false,
+    };
+  }
+});

packages/esm-patient-registration-app/src/patient-registration/field/custom-field.component.tsx

@@ -1,6 +1,7 @@
 import { useConfig } from '@openmrs/esm-framework';
 import React from 'react';
 import { RegistrationConfig } from '../../config-schema';
+import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
 
 export interface CustomFieldProps {
@@ -11,5 +12,11 @@ export function CustomField({ name }: CustomFieldProps) {
   const config = useConfig() as RegistrationConfig;
   const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
 
-  return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+  if (fieldDefinition.type === 'person attribute') {
+    return <PersonAttributeField fieldDefinition={fieldDefinition} />;
+  } else if (fieldDefinition.type === 'obs') {
+    return <ObsField fieldDefinition={fieldDefinition} />;
+  } else {
+    return <div>Error: Unknown field type {fieldDefinition.type}</div>;
+  }
 }

packages/esm-patient-registration-app/src/patient-registration/field/field.resource.ts

@@ -0,0 +1,35 @@
+import { FetchResponse, openmrsFetch, showToast } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { ConceptAnswers, ConceptResponse } from '../patient-registration-types';
+
+export function useConcept(conceptUuid: string): { data: ConceptResponse; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showToast({
+      title: error.name,
+      description: error.message,
+      kind: 'error',
+    });
+  }
+  return { data: data?.data, isLoading: !data && !error };
+}
+
+export function useConceptAnswers(conceptUuid: string): { data: Array<ConceptAnswers>; isLoading: boolean } {
+  const shouldFetch = typeof conceptUuid === 'string' && conceptUuid !== '';
+  const { data, error } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `/ws/rest/v1/concept/${conceptUuid}` : null,
+    openmrsFetch,
+  );
+  if (error) {
+    showToast({
+      title: error.name,
+      description: error.message,
+      kind: 'error',
+    });
+  }
+  return { data: data?.data?.answers, isLoading: !data && !error };
+}

packages/esm-patient-registration-app/src/patient-registration/field/field.scss

@@ -83,7 +83,7 @@
   margin-left: $spacing-03;
 }
 
-.attributeField {
+.customField {
   margin-bottom: $spacing-05;
 }