@ampath/esm-patient-registration-app 6.0.1-pre.6

package/src/patient-registration/form-manager.ts

@@ -0,0 +1,414 @@
+import { type FetchResponse, openmrsFetch, queueSynchronizationItem, type Session } from '@openmrs/esm-framework';
+import { patientRegistration } from '../constants';
+import {
+  type FormValues,
+  type AttributeValue,
+  type PatientUuidMapType,
+  type Patient,
+  type CapturePhotoProps,
+  type PatientIdentifier,
+  type PatientRegistration,
+  type RelationshipValue,
+  type Encounter,
+} from './patient-registration.types';
+import {
+  addPatientIdentifier,
+  deletePatientIdentifier,
+  deletePersonName,
+  deleteRelationship,
+  generateIdentifier,
+  savePatient,
+  savePatientPhoto,
+  saveRelationship,
+  updateRelationship,
+  updatePatientIdentifier,
+  saveEncounter,
+} from './patient-registration.resource';
+import { type RegistrationConfig } from '../config-schema';
+
+export type SavePatientForm = (
+  isNewPatient: boolean,
+  values: FormValues,
+  patientUuidMap: PatientUuidMapType,
+  initialAddressFieldValues: Record<string, any>,
+  capturePhotoProps: CapturePhotoProps,
+  currentLocation: string,
+  initialIdentifierValues: FormValues['identifiers'],
+  currentUser: Session,
+  config: RegistrationConfig,
+  savePatientTransactionManager: SavePatientTransactionManager,
+  abortController?: AbortController,
+) => Promise<string | void>;
+
+export class FormManager {
+  static savePatientFormOffline: SavePatientForm = async (
+    isNewPatient,
+    values,
+    patientUuidMap,
+    initialAddressFieldValues,
+    capturePhotoProps,
+    currentLocation,
+    initialIdentifierValues,
+    currentUser,
+    config,
+  ) => {
+    const syncItem: PatientRegistration = {
+      fhirPatient: FormManager.mapPatientToFhirPatient(
+        FormManager.getPatientToCreate(isNewPatient, values, patientUuidMap, initialAddressFieldValues, []),
+      ),
+      _patientRegistrationData: {
+        isNewPatient,
+        formValues: values,
+        patientUuidMap,
+        initialAddressFieldValues,
+        capturePhotoProps,
+        currentLocation,
+        initialIdentifierValues,
+        currentUser,
+        config,
+        savePatientTransactionManager: new SavePatientTransactionManager(),
+      },
+    };
+
+    await queueSynchronizationItem(patientRegistration, syncItem, {
+      id: values.patientUuid,
+      displayName: 'Patient registration',
+      patientUuid: syncItem.fhirPatient.id,
+      dependencies: [],
+    });
+
+    return null;
+  };
+
+  static savePatientFormOnline: SavePatientForm = async (
+    isNewPatient,
+    values,
+    patientUuidMap,
+    initialAddressFieldValues,
+    capturePhotoProps,
+    currentLocation,
+    initialIdentifierValues,
+    currentUser,
+    config,
+    savePatientTransactionManager,
+    abortController,
+  ) => {
+    const patientIdentifiers: Array<PatientIdentifier> = await FormManager.savePatientIdentifiers(
+      isNewPatient,
+      values.patientUuid,
+      values.identifiers,
+      initialIdentifierValues,
+      currentLocation,
+    );
+
+    const createdPatient = FormManager.getPatientToCreate(
+      isNewPatient,
+      values,
+      patientUuidMap,
+      initialAddressFieldValues,
+      patientIdentifiers,
+    );
+
+    FormManager.getDeletedNames(values.patientUuid, patientUuidMap).forEach(async (name) => {
+      await deletePersonName(name.nameUuid, name.personUuid);
+    });
+
+    const savePatientResponse = await savePatient(
+      createdPatient,
+      isNewPatient && !savePatientTransactionManager.patientSaved ? undefined : values.patientUuid,
+    );
+
+    if (savePatientResponse.ok) {
+      savePatientTransactionManager.patientSaved = true;
+      await this.saveRelationships(values.relationships, savePatientResponse);
+
+      await this.saveObservations(values.obs, savePatientResponse, currentLocation, currentUser, config);
+
+      if (config.concepts.patientPhotoUuid && capturePhotoProps?.imageData) {
+        await savePatientPhoto(
+          savePatientResponse.data.uuid,
+          capturePhotoProps.imageData,
+          '/ws/rest/v1/obs',
+          capturePhotoProps.dateTime || new Date().toISOString(),
+          config.concepts.patientPhotoUuid,
+        );
+      }
+    }
+
+    return savePatientResponse.data.uuid;
+  };
+
+  static async saveRelationships(relationships: Array<RelationshipValue>, savePatientResponse: FetchResponse) {
+    return Promise.all(
+      relationships
+        .filter((m) => m.relationshipType)
+        .filter((relationship) => !!relationship.action)
+        .map(({ relatedPersonUuid, relationshipType, uuid: relationshipUuid, action }) => {
+          const [type, direction] = relationshipType.split('/');
+          const thisPatientUuid = savePatientResponse.data.uuid;
+          const isAToB = direction === 'aIsToB';
+          const relationshipToSave = {
+            personA: isAToB ? relatedPersonUuid : thisPatientUuid,
+            personB: isAToB ? thisPatientUuid : relatedPersonUuid,
+            relationshipType: type,
+          };
+
+          switch (action) {
+            case 'ADD':
+              return saveRelationship(relationshipToSave);
+            case 'UPDATE':
+              return updateRelationship(relationshipUuid, relationshipToSave);
+            case 'DELETE':
+              return deleteRelationship(relationshipUuid);
+          }
+        }),
+    );
+  }
+
+  static async saveObservations(
+    obss: { [conceptUuid: string]: string },
+    savePatientResponse: FetchResponse,
+    currentLocation: string,
+    currentUser: Session,
+    config: RegistrationConfig,
+  ) {
+    if (obss && Object.keys(obss).length > 0) {
+      if (!config.registrationObs.encounterTypeUuid) {
+        console.error(
+          'The registration form has been configured to have obs fields, ' +
+            'but no registration encounter type has been configured. Obs field values ' +
+            'will not be saved.',
+        );
+      } else {
+        const encounterToSave: Encounter = {
+          encounterDatetime: new Date(),
+          patient: savePatientResponse.data.uuid,
+          encounterType: config.registrationObs.encounterTypeUuid,
+          location: currentLocation,
+          encounterProviders: [
+            {
+              provider: currentUser.currentProvider.uuid,
+              encounterRole: config.registrationObs.encounterProviderRoleUuid,
+            },
+          ],
+          form: config.registrationObs.registrationFormUuid,
+          obs: Object.entries(obss)
+            .filter(([, value]) => value !== '')
+            .map(([conceptUuid, value]) => ({ concept: conceptUuid, value })),
+        };
+        return saveEncounter(encounterToSave);
+      }
+    }
+  }
+
+  static async savePatientIdentifiers(
+    isNewPatient: boolean,
+    patientUuid: string,
+    patientIdentifiers: FormValues['identifiers'], // values.identifiers
+    initialIdentifierValues: FormValues['identifiers'], // Initial identifiers assigned to the patient
+    location: string,
+  ): Promise<Array<PatientIdentifier>> {
+    let identifierTypeRequests = Object.values(patientIdentifiers)
+      /* Since default identifier-types will be present on the form and are also in the not-required state,
+        therefore we might be running into situations when there's no value and no source associated,
+        hence filtering these fields out.
+      */
+      .filter(
+        ({ identifierValue, autoGeneration, selectedSource }) => identifierValue || (autoGeneration && selectedSource),
+      )
+      .map(async (patientIdentifier) => {
+        const {
+          identifierTypeUuid,
+          identifierValue,
+          identifierUuid,
+          selectedSource,
+          preferred,
+          autoGeneration,
+          initialValue,
+        } = patientIdentifier;
+
+        const identifier = !autoGeneration
+          ? identifierValue
+          : await (
+              await generateIdentifier(selectedSource.uuid)
+            ).data.identifier;
+        const identifierToCreate = {
+          uuid: identifierUuid,
+          identifier,
+          identifierType: identifierTypeUuid,
+          location,
+          preferred,
+        };
+
+        if (!isNewPatient) {
+          if (!initialValue) {
+            await addPatientIdentifier(patientUuid, identifierToCreate);
+          } else if (initialValue !== identifier) {
+            await updatePatientIdentifier(patientUuid, identifierUuid, identifierToCreate.identifier);
+          }
+        }
+
+        return identifierToCreate;
+      });
+
+    /*
+      If there was initially an identifier assigned to the patient,
+      which is now not present in the patientIdentifiers(values.identifiers),
+      this means that the identifier is meant to be deleted, hence we need
+      to delete the respective identifiers.
+    */
+
+    if (patientUuid) {
+      Object.keys(initialIdentifierValues)
+        .filter((identifierFieldName) => !patientIdentifiers[identifierFieldName])
+        .forEach(async (identifierFieldName) => {
+          await deletePatientIdentifier(patientUuid, initialIdentifierValues[identifierFieldName].identifierUuid);
+        });
+    }
+
+    return Promise.all(identifierTypeRequests);
+  }
+
+  static getDeletedNames(patientUuid: string, patientUuidMap: PatientUuidMapType) {
+    if (patientUuidMap?.additionalNameUuid) {
+      return [
+        {
+          nameUuid: patientUuidMap.additionalNameUuid,
+          personUuid: patientUuid,
+        },
+      ];
+    }
+    return [];
+  }
+
+  static getPatientToCreate(
+    isNewPatient: boolean,
+    values: FormValues,
+    patientUuidMap: PatientUuidMapType,
+    initialAddressFieldValues: Record<string, any>,
+    identifiers: Array<PatientIdentifier>,
+  ): Patient {
+    let birthdate;
+    if (values.birthdate instanceof Date) {
+      birthdate = [values.birthdate.getFullYear(), values.birthdate.getMonth() + 1, values.birthdate.getDate()].join(
+        '-',
+      );
+    } else {
+      birthdate = values.birthdate;
+    }
+
+    return {
+      uuid: values.patientUuid,
+      person: {
+        uuid: values.patientUuid,
+        names: FormManager.getNames(values, patientUuidMap),
+        gender: values.gender.charAt(0).toUpperCase(),
+        birthdate,
+        birthdateEstimated: values.birthdateEstimated,
+        attributes: FormManager.getPatientAttributes(isNewPatient, values, patientUuidMap),
+        addresses: [values.address],
+        ...FormManager.getPatientDeathInfo(values),
+      },
+      identifiers,
+    };
+  }
+
+  static getNames(values: FormValues, patientUuidMap: PatientUuidMapType) {
+    const names = [
+      {
+        uuid: patientUuidMap.preferredNameUuid,
+        preferred: true,
+        givenName: values.givenName,
+        middleName: values.middleName,
+        familyName: values.familyName,
+      },
+    ];
+
+    if (values.addNameInLocalLanguage) {
+      names.push({
+        uuid: patientUuidMap.additionalNameUuid,
+        preferred: false,
+        givenName: values.additionalGivenName,
+        middleName: values.additionalMiddleName,
+        familyName: values.additionalFamilyName,
+      });
+    }
+
+    return names;
+  }
+
+  static getPatientAttributes(isNewPatient: boolean, values: FormValues, patientUuidMap: PatientUuidMapType) {
+    const attributes: Array<AttributeValue> = [];
+    if (values.attributes) {
+      Object.entries(values.attributes)
+        .filter(([, value]) => !!value)
+        .forEach(([key, value]) => {
+          attributes.push({
+            attributeType: key,
+            value,
+          });
+        });
+
+      if (!isNewPatient && values.patientUuid) {
+        Object.entries(values.attributes)
+          .filter(([, value]) => !value)
+          .forEach(async ([key]) => {
+            const attributeUuid = patientUuidMap[`attribute.${key}`];
+            await openmrsFetch(`/ws/rest/v1/person/${values.patientUuid}/attribute/${attributeUuid}`, {
+              method: 'DELETE',
+            }).catch((err) => {
+              console.error(err);
+            });
+          });
+      }
+    }
+
+    return attributes;
+  }
+
+  static getPatientDeathInfo(values: FormValues) {
+    const { isDead, deathDate, deathCause } = values;
+    return {
+      dead: isDead,
+      deathDate: isDead ? deathDate : undefined,
+      causeOfDeath: isDead ? deathCause : undefined,
+    };
+  }
+
+  static mapPatientToFhirPatient(patient: Partial<Patient>): fhir.Patient {
+    // Important:
+    // When changing this code, ideally assume that `patient` can be missing any attribute.
+    // The `fhir.Patient` provides us with the benefit that all properties are nullable and thus
+    // not required (technically, at least). -> Even if we cannot map some props here, we still
+    // provide a valid fhir.Patient object. The various patient chart modules should be able to handle
+    // such missing props correctly (and should be updated if they don't).
+
+    // Mapping inspired by:
+    // https://github.com/openmrs/openmrs-module-fhir/blob/669b3c52220bb9abc622f815f4dc0d8523687a57/api/src/main/java/org/openmrs/module/fhir/api/util/FHIRPatientUtil.java#L36
+    // https://github.com/openmrs/openmrs-esm-patient-management/blob/94e6f637fb37cf4984163c355c5981ea6b8ca38c/packages/esm-patient-search-app/src/patient-search-result/patient-search-result.component.tsx#L21
+    // Update as required.
+    return {
+      id: patient.uuid,
+      gender: patient.person?.gender,
+      birthDate: patient.person?.birthdate,
+      deceasedBoolean: patient.person.dead,
+      deceasedDateTime: patient.person.deathDate,
+      name: patient.person?.names?.map((name) => ({
+        given: [name.givenName, name.middleName].filter(Boolean),
+        family: name.familyName,
+      })),
+      address: patient.person?.addresses.map((address) => ({
+        city: address.cityVillage,
+        country: address.country,
+        postalCode: address.postalCode,
+        state: address.stateProvince,
+        use: 'home',
+      })),
+      telecom: patient.person.attributes?.filter((attribute) => attribute.attributeType === 'Telephone Number'),
+    };
+  }
+}
+
+export class SavePatientTransactionManager {
+  patientSaved = false;
+}

package/src/patient-registration/input/basic-input/input/input.component.tsx

@@ -0,0 +1,179 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, TextInput } from '@carbon/react';
+import { useField } from 'formik';
+
+// FIXME Temporarily imported here
+export interface TextInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'id' | 'size' | 'value'> {
+  /**
+   * Specify an optional className to be applied to the `<input>` node
+   */
+  className?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter?: boolean;
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: string;
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline?: boolean;
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   * 'The `light` prop for `TextInput` has ' +
+      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+   */
+  light?: boolean;
+
+  /**
+   * Max character count allowed for the input. This is needed in order for enableCounter to display
+   */
+  maxCount?: number;
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder?: string;
+
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly?: boolean;
+
+  /**
+   * Specify the size of the Text Input. Currently supports the following:
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number | undefined;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
+
+interface InputProps extends TextInputProps {
+  checkWarning?(value: string): string;
+}
+
+export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
+  const [field, meta] = useField(props.name);
+  const { t } = useTranslation();
+
+  /*
+    Do not remove these comments
+    t('givenNameRequired')
+    t('familyNameRequired')
+    t('genderUnspecified')
+    t('genderRequired')
+    t('birthdayRequired')
+    t('birthdayNotInTheFuture')
+    t('negativeYears')
+    t('negativeMonths')
+    t('deathdayNotInTheFuture')
+    t('invalidEmail')
+    t('numberInNameDubious')
+    t('yearsEstimateRequired')
+  */
+
+  const value = field.value || '';
+  const invalidText = meta.error && t(meta.error);
+  const warnText = useMemo(() => {
+    if (!invalidText && typeof checkWarning === 'function') {
+      const warning = checkWarning(value);
+      return warning && t(warning);
+    }
+
+    return undefined;
+  }, [checkWarning, invalidText, value, t]);
+
+  const labelText = props.required ? props.labelText : `${props.labelText} (${t('optional', 'optional')})`;
+
+  return (
+    <div style={{ marginBottom: '1rem' }}>
+      <Layer>
+        <TextInput
+          {...props}
+          {...field}
+          labelText={labelText}
+          invalid={!!(meta.touched && meta.error)}
+          invalidText={invalidText}
+          warn={!!warnText}
+          warnText={warnText}
+          value={value}
+        />
+      </Layer>
+    </div>
+  );
+};

package/src/patient-registration/input/basic-input/input/input.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { Input } from './input.component';
+
+describe('text input', () => {
+  const setupInput = async () => {
+    render(
+      <Formik initialValues={{ text: '' }} onSubmit={() => {}}>
+        <Form>
+          <Input
+            id="text"
+            labelText="Text"
+            name="text"
+            placeholder="Enter text"
+            required
+            checkWarning={(value) => {
+              if (value.length > 5) {
+                return 'name should be of 5 char';
+              }
+            }}
+          />
+        </Form>
+      </Formik>,
+    );
+    return screen.getByLabelText('Text') as HTMLInputElement;
+  };
+
+  it('exists', async () => {
+    const input = await setupInput();
+    expect(input.type).toEqual('text');
+  });
+
+  it('can input valid data without warning', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const userInput = 'text';
+
+    await user.type(input, userInput);
+    await user.tab();
+
+    expect(input.value).toEqual(userInput);
+    expect(screen.queryByText('name should be of 5 char')).not.toBeInTheDocument();
+  });
+
+  it('should show a warning when the invalid input is entered', async () => {
+    const user = userEvent.setup();
+
+    const input = await setupInput();
+    const userInput = 'Hello World';
+
+    await userEvent.clear(input);
+
+    await user.type(input, userInput);
+    await user.tab();
+
+    expect(screen.getByText('name should be of 5 char')).toBeInTheDocument();
+  });
+
+  it('should show the correct label text if the field is not required', () => {
+    render(
+      <Formik initialValues={{ text: '' }} onSubmit={() => {}}>
+        <Form>
+          <Input id="text" labelText="Text" name="text" placeholder="Enter text" />
+        </Form>
+      </Formik>,
+    );
+    expect(screen.getByLabelText('Text (optional)')).toBeInTheDocument();
+  });
+});

package/src/patient-registration/input/basic-input/select/select-input.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+
+interface SelectInputProps {
+  name: string;
+  options: Array<string>;
+  label: string;
+  required?: boolean;
+}
+
+export const SelectInput: React.FC<SelectInputProps> = ({ name, options, label, required }) => {
+  const [field] = useField(name);
+  const { t } = useTranslation();
+  const selectOptions = [
+    <SelectItem disabled hidden text={`Select ${label}`} key="" value="" />,
+    ...options.map((currentOption, index) => <SelectItem text={currentOption} value={currentOption} key={index} />),
+  ];
+
+  const labelText = required ? label : `${label} (${t('optional', 'optional')})`;
+
+  return (
+    <div style={{ marginBottom: '1rem' }}>
+      <Layer>
+        <Select id="identifier" {...field} labelText={labelText}>
+          {selectOptions}
+        </Select>
+      </Layer>
+    </div>
+  );
+};