@kenyaemr/esm-patient-registration-app 4.3.0

package/src/offline.resources.ts

@@ -0,0 +1,109 @@
+import React from 'react';
+import find from 'lodash-es/find';
+import camelCase from 'lodash-es/camelCase';
+import escapeRegExp from 'lodash-es/escapeRegExp';
+import { FetchResponse, messageOmrsServiceWorker, openmrsFetch, Session } from '@openmrs/esm-framework';
+import { PatientIdentifierType, FetchedPatientIdentifierType } from './patient-registration/patient-registration-types';
+import { cacheForOfflineHeaders } from './constants';
+
+export interface Resources {
+  addressTemplate: any;
+  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('/ws/rest/v1/systemsetting?q=layout.address.format&v=custom:(value)');
+  return data;
+}
+
+export async function fetchAllRelationshipTypes() {
+  const { data } = await cacheAndFetch('/ws/rest/v1/relationshiptype?v=default');
+  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 = [];
+
+    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,90 @@
+import {
+  makeUrl,
+  messageOmrsServiceWorker,
+  navigate,
+  setupDynamicOfflineDataHandler,
+  setupOfflineSync,
+  subscribePrecacheStaticDependencies,
+  SyncProcessOptions,
+} from '@openmrs/esm-framework';
+import { patientRegistration, personRelationshipRepresentation } from './constants';
+import {
+  fetchAddressTemplate,
+  fetchAllRelationshipTypes,
+  fetchCurrentSession,
+  fetchPatientIdentifierTypesWithSources,
+} from './offline.resources';
+import { FormManager } from './patient-registration/form-manager';
+import { PatientRegistration } from './patient-registration/patient-registration-types';
+
+export function setupOffline() {
+  setupOfflineSync(patientRegistration, [], syncPatientRegistration, {
+    onBeginEditSyncItem(syncItem) {
+      navigate({ to: `\${openmrsSpaBase}/patient/${syncItem.content.fhirPatient.id}/edit` });
+    },
+  });
+
+  subscribePrecacheStaticDependencies(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(),
+    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,72 @@
+import React, { 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 { 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,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '../../input/basic-input/input/input.component';
+import styles from '../field.scss';
+import { FieldDefinition } from '../../../config-schema';
+import { Field } from 'formik';
+
+export interface AddressFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={`${styles.customField} ${styles.halfWidthInDesktopView}`}>
+      <Field name={fieldDefinition.id}>
+        {({ field, form: { touched, errors }, meta }) => {
+          return (
+            <Input
+              id={fieldDefinition.id}
+              labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
+              {...field}
+              required={fieldDefinition.validation.required}
+            />
+          );
+        }}
+      </Field>
+    </div>
+  );
+};

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ResourcesContext } from '../../../offline.resources';
+import { ComboInput } from '../../input/combo-input/combo-input.component';
+import { SkeletonText } from '@carbon/react';
+import styles from '../field.scss';
+import { Input } from '../../input/basic-input/input/input.component';
+import { useConfig } from '@openmrs/esm-framework';
+import AddressSearchComponent from './address-search.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+
+function parseString(xmlDockAsString: string) {
+  const parser = new DOMParser();
+  return parser.parseFromString(xmlDockAsString, 'text/xml');
+}
+function getTagAsDocument(tagName: string, template: XMLDocument) {
+  const tmp = template.getElementsByTagName(tagName)[0];
+  return tmp ? parseString(tmp.outerHTML) : parseString('');
+}
+
+export const AddressHierarchy: React.FC = () => {
+  const [selected, setSelected] = useState('');
+  const [addressLayout, setAddressLayout] = useState([]);
+  const { t } = useTranslation();
+  const { addressTemplate } = useContext(ResourcesContext);
+  const addressTemplateXml = addressTemplate?.results[0].value;
+  const setSelectedValue = (value: string) => {
+    setSelected(value);
+  };
+  const config = useConfig();
+  const {
+    fieldConfigurations: {
+      address: {
+        useAddressHierarchy: { enabled, useQuickSearch, searchAddressByLevel },
+      },
+    },
+  } = config;
+
+  const { setFieldValue, values } = useContext(PatientRegistrationContext);
+
+  useEffect(() => {
+    const templateXmlDoc = parseString(addressTemplateXml);
+    const elementDefaults = getTagAsDocument('elementDefaults', templateXmlDoc);
+    const defaultValuesEntries = elementDefaults.getElementsByTagName('entry');
+    const defaultValues = Object.fromEntries(
+      Array.prototype.map.call(defaultValuesEntries, (entry: Element) => {
+        const [name, value] = Array.from(entry.getElementsByTagName('string'));
+        return [name.innerHTML, value.innerHTML];
+      }),
+    );
+    const nameMappings = getTagAsDocument('nameMappings', templateXmlDoc);
+    const properties =
+      Array.from(nameMappings.getElementsByTagName('property')).length > 0
+        ? nameMappings.getElementsByTagName('property')
+        : nameMappings.getElementsByTagName('entry');
+
+    const propertiesObj = Array.prototype.map.call(properties, (property: Element) => {
+      const name = property.getAttribute('name') ?? property.getElementsByTagName('string')[0].innerHTML;
+      const label = property.getAttribute('value') ?? property.getElementsByTagName('string')[1].innerHTML;
+      /*
+        DO NOT REMOVE THIS COMMENT UNLESS YOU UNDERSTAND WHY IT IS HERE
+
+        t('postalCode', 'Postal code')
+        t('address1', 'Address line 1')
+        t('address2', 'Address line 2')
+        t('countyDistrict', 'District')
+        t('stateProvince', 'State')
+        t('cityVillage', 'city')
+        t('country', 'Country')
+        t('countyDistrict', 'District')
+      */
+      const value = defaultValues[name];
+      if (!values?.address?.[name] && value) {
+        setFieldValue(`address.${name}`, value);
+      }
+      return {
+        id: name,
+        name,
+        value,
+        label,
+      };
+    });
+    setAddressLayout(propertiesObj);
+  }, [t, addressTemplateXml, setFieldValue, values]);
+
+  if (!addressTemplate) {
+    return (
+      <div>
+        <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
+        <SkeletonText />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h4 className={styles.productiveHeading02Light}>{t('addressHeader', 'Address')}</h4>
+      <div
+        style={{
+          paddingBottom: '5%',
+        }}>
+        {enabled ? (
+          <>
+            {useQuickSearch && <AddressSearchComponent addressLayout={addressLayout} />}
+            {addressLayout.map((attributes, index) =>
+              searchAddressByLevel ? (
+                <ComboInput
+                  key={`combo_input_${index}`}
+                  textFieldName={attributes.name}
+                  name={`address.${attributes.name}`}
+                  labelText={t(attributes.label)}
+                  id={attributes.name}
+                  setSelectedValue={setSelectedValue}
+                  selected={selected}
+                />
+              ) : (
+                <Input
+                  key={`combo_input_${index}`}
+                  name={`address.${attributes.name}`}
+                  labelText={t(attributes.label)}
+                  id={attributes.name}
+                  setSelectedValue={setSelectedValue}
+                  selected={selected}
+                />
+              ),
+            )}
+          </>
+        ) : (
+          addressLayout.map((attributes, index) => (
+            <Input
+              key={`combo_input_${index}`}
+              name={`address.${attributes.name}`}
+              labelText={t(attributes.label)}
+              id={attributes.name}
+              setSelectedValue={setSelectedValue}
+              selected={selected}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};