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

package/src/offline.resources.ts

@@ -0,0 +1,155 @@
+import React from 'react';
+import find from 'lodash-es/find';
+import camelCase from 'lodash-es/camelCase';
+import escapeRegExp from 'lodash-es/escapeRegExp';
+import { getConfig, messageOmrsServiceWorker, openmrsFetch, type Session } from '@openmrs/esm-framework';
+import type {
+  PatientIdentifierType,
+  FetchedPatientIdentifierType,
+  AddressTemplate,
+} from './patient-registration/patient-registration.types';
+import { cacheForOfflineHeaders, moduleName } from './constants';
+
+export interface Resources {
+  addressTemplate: AddressTemplate;
+  currentSession: Session;
+  relationshipTypes: any;
+  identifierTypes: Array<PatientIdentifierType>;
+}
+
+export const ResourcesContext = React.createContext<Resources>(null);
+
+export async function fetchCurrentSession(): Promise<Session> {
+  const { data } = await cacheAndFetch<Session>('/ws/rest/v1/session');
+  return data;
+}
+
+export async function fetchAddressTemplate() {
+  const { data } = await cacheAndFetch<AddressTemplate>('/ws/rest/v1/addresstemplate');
+  return data;
+}
+
+export async function fetchAllRelationshipTypes() {
+  const { data } = await cacheAndFetch('/ws/rest/v1/relationshiptype?v=default');
+  return data;
+}
+
+export async function fetchAllFieldDefinitionTypes() {
+  const config = await getConfig(moduleName);
+
+  if (!config.fieldDefinitions) {
+    return;
+  }
+
+  const fieldDefinitionPromises = config.fieldDefinitions.map((def) => fetchFieldDefinitionType(def));
+
+  const fieldDefinitionResults = await Promise.all(fieldDefinitionPromises);
+
+  const mergedData = fieldDefinitionResults.reduce((merged, result) => {
+    if (result) {
+      merged.push(result);
+    }
+    return merged;
+  }, []);
+
+  return mergedData;
+}
+
+async function fetchFieldDefinitionType(fieldDefinition) {
+  let apiUrl = '';
+
+  if (fieldDefinition.type === 'person attribute') {
+    apiUrl = `/ws/rest/v1/personattributetype/${fieldDefinition.uuid}`;
+  }
+
+  if (fieldDefinition.answerConceptSetUuid) {
+    await cacheAndFetch(`/ws/rest/v1/concept/${fieldDefinition.answerConceptSetUuid}`);
+  }
+  const { data } = await cacheAndFetch(apiUrl);
+  return data;
+}
+
+export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<PatientIdentifierType>> {
+  const patientIdentifierTypes = await fetchPatientIdentifierTypes();
+
+  // @ts-ignore Reason: The required props of the type are generated below.
+  const identifierTypes: Array<PatientIdentifierType> = patientIdentifierTypes.filter(Boolean);
+
+  const [autoGenOptions, ...allIdentifierSources] = await Promise.all([
+    fetchAutoGenerationOptions(),
+    ...identifierTypes.map((identifierType) => fetchIdentifierSources(identifierType.uuid)),
+  ]);
+
+  for (let i = 0; i < identifierTypes?.length; i++) {
+    identifierTypes[i].identifierSources = allIdentifierSources[i].data.results.map((source) => {
+      const option = find(autoGenOptions.data.results, { source: { uuid: source.uuid } });
+      source.autoGenerationOption = option;
+      return source;
+    });
+  }
+
+  return identifierTypes;
+}
+
+async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdentifierType>> {
+  const [patientIdentifierTypesResponse, primaryIdentifierTypeResponse] = await Promise.all([
+    cacheAndFetch('/ws/rest/v1/patientidentifiertype?v=custom:(display,uuid,name,format,required,uniquenessBehavior)'),
+    cacheAndFetch('/ws/rest/v1/metadatamapping/termmapping?v=full&code=emr.primaryIdentifierType'),
+  ]);
+
+  if (patientIdentifierTypesResponse.ok) {
+    // Primary identifier type is to be kept at the top of the list.
+    const patientIdentifierTypes = patientIdentifierTypesResponse?.data?.results;
+
+    const primaryIdentifierTypeUuid = primaryIdentifierTypeResponse?.data?.results?.[0]?.metadataUuid;
+
+    let identifierTypes = primaryIdentifierTypeResponse?.ok
+      ? [
+          mapPatientIdentifierType(
+            patientIdentifierTypes?.find((type) => type.uuid === primaryIdentifierTypeUuid),
+            true,
+          ),
+        ]
+      : [];
+
+    patientIdentifierTypes.forEach((type) => {
+      if (type.uuid !== primaryIdentifierTypeUuid) {
+        identifierTypes.push(mapPatientIdentifierType(type, false));
+      }
+    });
+    return identifierTypes;
+  }
+
+  return [];
+}
+
+async function fetchIdentifierSources(identifierType: string) {
+  return await cacheAndFetch(`/ws/rest/v1/idgen/identifiersource?v=default&identifierType=${identifierType}`);
+}
+
+async function fetchAutoGenerationOptions(abortController?: AbortController) {
+  return await cacheAndFetch(`/ws/rest/v1/idgen/autogenerationoption?v=full`);
+}
+
+async function cacheAndFetch<T = any>(url?: string) {
+  const abortController = new AbortController();
+
+  await messageOmrsServiceWorker({
+    type: 'registerDynamicRoute',
+    pattern: escapeRegExp(url),
+  });
+
+  return await openmrsFetch<T>(url, { headers: cacheForOfflineHeaders, signal: abortController?.signal });
+}
+
+function mapPatientIdentifierType(patientIdentifierType, isPrimary) {
+  return {
+    name: patientIdentifierType.display,
+    fieldName: camelCase(patientIdentifierType.name),
+    required: patientIdentifierType.required,
+    uuid: patientIdentifierType.uuid,
+    format: patientIdentifierType.format,
+    isPrimary,
+    uniquenessBehavior: patientIdentifierType.uniquenessBehavior,
+  };
+}

package/src/offline.ts

@@ -0,0 +1,91 @@
+import {
+  makeUrl,
+  messageOmrsServiceWorker,
+  navigate,
+  setupDynamicOfflineDataHandler,
+  setupOfflineSync,
+  type SyncProcessOptions,
+} from '@openmrs/esm-framework';
+import { patientRegistration, personRelationshipRepresentation } from './constants';
+import {
+  fetchAddressTemplate,
+  fetchAllFieldDefinitionTypes,
+  fetchAllRelationshipTypes,
+  fetchCurrentSession,
+  fetchPatientIdentifierTypesWithSources,
+} from './offline.resources';
+import { FormManager } from './patient-registration/form-manager';
+import { type PatientRegistration } from './patient-registration/patient-registration.types';
+
+export function setupOffline() {
+  setupOfflineSync(patientRegistration, [], syncPatientRegistration, {
+    onBeginEditSyncItem(syncItem) {
+      navigate({ to: `\${openmrsSpaBase}/patient/${syncItem.content.fhirPatient.id}/edit` });
+    },
+  });
+
+  precacheStaticAssets();
+
+  setupDynamicOfflineDataHandler({
+    id: 'esm-patient-registration-app:patient',
+    type: 'patient',
+    displayName: 'Patient registration',
+    async isSynced(patientUuid) {
+      const expectedUrls = getPatientUrlsToBeCached(patientUuid);
+      const cache = await caches.open('omrs-spa-cache-v1');
+      const keys = (await cache.keys()).map((key) => key.url);
+      return expectedUrls.every((url) => keys.includes(url));
+    },
+    async sync(patientUuid) {
+      const urlsToCache = getPatientUrlsToBeCached(patientUuid);
+      await Promise.allSettled(
+        urlsToCache.map(async (url) => {
+          await messageOmrsServiceWorker({
+            type: 'registerDynamicRoute',
+            url,
+          });
+
+          await fetch(url);
+        }),
+      );
+    },
+  });
+}
+
+function getPatientUrlsToBeCached(patientUuid: string) {
+  return [
+    `/ws/fhir2/R4/Patient/${patientUuid}`,
+    `/ws/rest/v1/relationship?v=${personRelationshipRepresentation}&person=${patientUuid}`,
+    `/ws/rest/v1/person/${patientUuid}/attribute`,
+    `/ws/rest/v1/patient/${patientUuid}/identifier?v=custom:(uuid,identifier,identifierType:(uuid,required,name),preferred)`,
+  ].map((url) => window.origin + makeUrl(url));
+}
+
+async function precacheStaticAssets() {
+  await Promise.all([
+    fetchCurrentSession(),
+    fetchAddressTemplate(),
+    fetchAllRelationshipTypes(),
+    fetchAllFieldDefinitionTypes(),
+    fetchPatientIdentifierTypesWithSources(),
+  ]);
+}
+
+export async function syncPatientRegistration(
+  queuedPatient: PatientRegistration,
+  options: SyncProcessOptions<PatientRegistration>,
+) {
+  await FormManager.savePatientFormOnline(
+    queuedPatient._patientRegistrationData.isNewPatient,
+    queuedPatient._patientRegistrationData.formValues,
+    queuedPatient._patientRegistrationData.patientUuidMap,
+    queuedPatient._patientRegistrationData.initialAddressFieldValues,
+    queuedPatient._patientRegistrationData.capturePhotoProps,
+    queuedPatient._patientRegistrationData.currentLocation,
+    queuedPatient._patientRegistrationData.initialIdentifierValues,
+    queuedPatient._patientRegistrationData.currentUser,
+    queuedPatient._patientRegistrationData.config,
+    queuedPatient._patientRegistrationData.savePatientTransactionManager,
+    options.abort,
+  );
+}

package/src/patient-registration/before-save-prompt.tsx

@@ -0,0 +1,73 @@
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { showModal, navigate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+function getUrlWithoutPrefix(url: string) {
+  return url.split(window['getOpenmrsSpaBase']())?.[1];
+}
+
+interface BeforeSavePromptProps {
+  when: boolean;
+  redirect?: string;
+}
+
+const BeforeSavePrompt: React.FC<BeforeSavePromptProps> = ({ when, redirect }) => {
+  const { t } = useTranslation();
+  const ref = useRef<boolean>(false);
+  const [localTarget, setTarget] = useState<string | undefined>();
+  const target = localTarget || redirect;
+  const cancelUnload = useCallback(
+    (e: BeforeUnloadEvent) => {
+      const message = t(
+        'discardModalBody',
+        "The changes you made to this patient's details have not been saved. Discard changes?",
+      );
+      e.preventDefault();
+      e.returnValue = message;
+      return message;
+    },
+    [t],
+  );
+
+  const cancelNavigation = useCallback((evt: CustomEvent) => {
+    if (!evt.detail.navigationIsCanceled && !ref.current) {
+      ref.current = true;
+      evt.detail.cancelNavigation();
+      const dispose = showModal(
+        'cancel-patient-edit-modal',
+        {
+          onConfirm: () => {
+            setTarget(evt.detail.newUrl);
+            dispose();
+          },
+        },
+        () => {
+          ref.current = false;
+        },
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (when && typeof target === 'undefined') {
+      window.addEventListener('single-spa:before-routing-event', cancelNavigation);
+      window.addEventListener('beforeunload', cancelUnload);
+
+      return () => {
+        window.removeEventListener('beforeunload', cancelUnload);
+        window.removeEventListener('single-spa:before-routing-event', cancelNavigation);
+      };
+    }
+  }, [target, when, cancelUnload, cancelNavigation]);
+
+  useEffect(() => {
+    if (typeof target === 'string') {
+      navigate({ to: `\${openmrsSpaBase}/${getUrlWithoutPrefix(target)}` });
+    }
+  }, [target]);
+
+  return null;
+};
+
+export default BeforeSavePrompt;

package/src/patient-registration/date-util.ts

@@ -0,0 +1,52 @@
+export const generateFormatting = (order: Array<string>, separator: string) => {
+  const parse = (value: string) => {
+    const parts = value.split(separator);
+    const date = new Date(null);
+
+    order.forEach((key, index) => {
+      switch (key) {
+        case 'd':
+          date.setDate(parseInt(parts[index]));
+          break;
+        case 'm':
+          date.setMonth(parseInt(parts[index]) - 1);
+          break;
+        case 'Y':
+          date.setFullYear(parseInt(parts[index]));
+          break;
+      }
+    });
+    return date;
+  };
+
+  const format = (date: Date) => {
+    if (date === null) {
+      return '';
+    } else if (!(date instanceof Date)) {
+      return date;
+    } else {
+      const parts = [];
+
+      order.forEach((key, index) => {
+        switch (key) {
+          case 'd':
+            parts[index] = date.getDate();
+            break;
+          case 'm':
+            parts[index] = date.getMonth() + 1;
+            break;
+          case 'Y':
+            parts[index] = date.getFullYear();
+            break;
+        }
+      });
+
+      return parts.join(separator);
+    }
+  };
+
+  const placeHolder = order.map((x) => (x === 'Y' ? 'YYYY' : x + x)).join(separator);
+  const dateFormat = order.join(separator);
+
+  return { parse, format, placeHolder, dateFormat };
+};

package/src/patient-registration/field/__mocks__/field.resource.ts

@@ -0,0 +1,60 @@
+import { type 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,
+    };
+  }
+});

package/src/patient-registration/field/address/address-field.component.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ResourcesContext } from '../../../offline.resources';
+import { SkeletonText, InlineNotification } from '@carbon/react';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConfig, useConnectivity } from '@openmrs/esm-framework';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
+import AddressHierarchyLevels from './address-hierarchy-levels.component';
+import AddressSearchComponent from './address-search.component';
+import styles from '../field.scss';
+
+function parseString(xmlDockAsString: string) {
+  const parser = new DOMParser();
+  return parser.parseFromString(xmlDockAsString, 'text/xml');
+}
+
+export const AddressComponent: React.FC = () => {
+  const [selected, setSelected] = useState('');
+  const { addressTemplate } = useContext(ResourcesContext);
+  const addressLayout = useMemo(() => {
+    if (!addressTemplate?.lines) {
+      return [];
+    }
+
+    const allFields = addressTemplate?.lines?.flat();
+    const fields = allFields?.filter(({ isToken }) => isToken === 'IS_ADDR_TOKEN');
+    const allRequiredFields = Object.fromEntries(addressTemplate?.requiredElements?.map((curr) => [curr, curr]) || []);
+    return fields.map(({ displayText, codeName }) => {
+      return {
+        id: codeName,
+        name: codeName,
+        label: displayText,
+        required: Boolean(allRequiredFields[codeName]),
+      };
+    });
+  }, [addressTemplate]);
+
+  const { t } = useTranslation();
+  const config = useConfig();
+  const isOnline = useConnectivity();
+  const {
+    fieldConfigurations: {
+      address: {
+        useAddressHierarchy: { enabled: addressHierarchyEnabled, useQuickSearch, searchAddressByLevel },
+      },
+    },
+  } = config;
+
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
+
+  useEffect(() => {
+    if (addressTemplate?.elementDefaults) {
+      Object.entries(addressTemplate.elementDefaults).forEach(([name, defaultValue]) => {
+        setFieldValue(`address.${name}`, defaultValue);
+      });
+    }
+  }, [addressTemplate, setFieldValue]);
+
+  const orderedAddressFields = useMemo(() => {
+    if (isLoadingFieldOrder || errorFetchingFieldOrder) {
+      return [];
+    }
+
+    const orderMap = Object.fromEntries(orderedFields.map((field, indx) => [field, indx]));
+
+    return [...addressLayout].sort(
+      (existingField1, existingField2) => orderMap[existingField1.name] - orderMap[existingField2.name],
+    );
+  }, [isLoadingFieldOrder, errorFetchingFieldOrder, orderedFields, addressLayout]);
+
+  if (!addressTemplate) {
+    return (
+      <AddressComponentContainer>
+        <SkeletonText />
+      </AddressComponentContainer>
+    );
+  }
+
+  if (!addressHierarchyEnabled || !isOnline) {
+    return (
+      <AddressComponentContainer>
+        {addressLayout.map((attributes, index) => (
+          <Input
+            key={`combo_input_${index}`}
+            name={`address.${attributes.name}`}
+            labelText={t(attributes.label)}
+            id={attributes.name}
+            value={selected}
+            required={attributes.required}
+          />
+        ))}
+      </AddressComponentContainer>
+    );
+  }
+
+  if (isLoadingFieldOrder) {
+    return (
+      <AddressComponentContainer>
+        <SkeletonText />
+      </AddressComponentContainer>
+    );
+  }
+
+  if (errorFetchingFieldOrder) {
+    return (
+      <AddressComponentContainer>
+        <InlineNotification
+          style={{ margin: '0', minWidth: '100%' }}
+          kind="error"
+          lowContrast={true}
+          title={t('errorFetchingOrderedFields', 'Error occured fetching ordered fields for address hierarchy')}
+        />
+      </AddressComponentContainer>
+    );
+  }
+
+  return (
+    <AddressComponentContainer>
+      {useQuickSearch && <AddressSearchComponent addressLayout={orderedAddressFields} />}
+      {searchAddressByLevel ? (
+        <AddressHierarchyLevels orderedAddressFields={orderedAddressFields} />
+      ) : (
+        orderedAddressFields.map((attributes, index) => (
+          <Input
+            key={`combo_input_${index}`}
+            name={`address.${attributes.name}`}
+            labelText={t(attributes.label)}
+            id={attributes.name}
+            value={selected}
+            required={attributes.required}
+          />
+        ))
+      )}
+    </AddressComponentContainer>
+  );
+};
+
+const AddressComponentContainer = ({ children }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
+      <div
+        style={{
+          paddingBottom: '5%',
+        }}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/patient-registration/field/address/address-hierarchy-levels.component.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarchy.resource';
+import { useField } from 'formik';
+import ComboInput from '../../input/combo-input/combo-input.component';
+
+interface AddressHierarchyLevelsProps {
+  orderedAddressFields: Array<any>;
+}
+
+const AddressHierarchyLevels: React.FC<AddressHierarchyLevelsProps> = ({ orderedAddressFields }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {orderedAddressFields.map((attribute) => (
+        <AddressComboBox key={attribute.id} attribute={attribute} />
+      ))}
+    </>
+  );
+};
+
+export default AddressHierarchyLevels;
+
+interface AddressComboBoxProps {
+  attribute: {
+    id: string;
+    name: string;
+    value: string;
+    label: string;
+    required?: boolean;
+  };
+}
+
+const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
+  const { t } = useTranslation();
+  const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
+  const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
+  const { entries } = useAddressEntries(fetchEntriesForField, searchString);
+  const label = t(attribute.label) + (attribute?.required ? '' : ` (${t('optional', 'optional')})`);
+
+  const handleInputChange = useCallback(
+    (newValue) => {
+      setValue(newValue);
+    },
+    [setValue],
+  );
+
+  const handleSelection = useCallback(
+    (selectedItem) => {
+      if (meta.value !== selectedItem) {
+        setValue(selectedItem);
+        updateChildElements();
+      }
+    },
+    [updateChildElements, meta.value, setValue],
+  );
+
+  return (
+    <ComboInput
+      entries={entries}
+      handleSelection={handleSelection}
+      name={`address.${attribute.name}`}
+      fieldProps={{
+        ...field,
+        id: attribute.name,
+        labelText: label,
+        required: attribute?.required,
+      }}
+      handleInputChange={handleInputChange}
+    />
+  );
+};