@digihmis/esm-patient-registration-app 1.0.0

package/src/identifier-workspace/identifier-configure-form.workspace.tsx

@@ -0,0 +1,278 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Search,
+  Checkbox,
+  Layer,
+  SkeletonText,
+  RadioButton,
+  RadioButtonGroup,
+  InlineLoading,
+  ButtonSet,
+} from '@carbon/react';
+import { useConfig, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import styles from './identifier-configure.scss';
+import { RegistrationConfig } from '../config-schema';
+import { PatientIdentifierType } from '../type';
+import { fetchPatientIdentifierTypesWithSources } from './identifier.resource';
+import classNames from 'classnames';
+
+interface IdentifierConfigureWorkspaceProps {
+  closeWorkspace: () => void;
+  promptBeforeClosing?: (testFcn: () => boolean) => void;
+  patientUuid?: string;
+  currentIdentifiers?: Array<string>;
+  onSave?: (selectedIdentifiers: Array<string>) => void;
+}
+
+export default function IdentifierConfigureWorkspace({
+  closeWorkspace,
+  promptBeforeClosing,
+  currentIdentifiers = [],
+  onSave,
+}: IdentifierConfigureWorkspaceProps) {
+  const { t } = useTranslation();
+  const { defaultPatientIdentifierTypes } = useConfig<RegistrationConfig>();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const [searchString, setSearchString] = useState('');
+  const [identifierTypes, setIdentifierTypes] = useState<Array<PatientIdentifierType>>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedIdentifiers, setSelectedIdentifiers] = useState<Set<string>>(
+    new Set(currentIdentifiers.length > 0 ? currentIdentifiers : defaultPatientIdentifierTypes),
+  );
+  const [hasChanges, setHasChanges] = useState(false);
+
+  useEffect(() => {
+    const loadIdentifierTypes = async () => {
+      try {
+        setIsLoading(true);
+        const types = await fetchPatientIdentifierTypesWithSources();
+        setIdentifierTypes(types);
+      } catch (error) {
+        console.error('Error fetching identifier types:', error);
+        showSnackbar({
+          title: t('errorLoadingIdentifiers', 'Error loading identifiers'),
+          kind: 'error',
+          isLowContrast: false,
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadIdentifierTypes();
+  }, [t]);
+
+  useEffect(() => {
+    if (promptBeforeClosing) {
+      promptBeforeClosing(() => !hasChanges);
+    }
+  }, [hasChanges, promptBeforeClosing]);
+
+  const filteredIdentifierTypes = useMemo(() => {
+    if (!searchString.trim()) {
+      return identifierTypes;
+    }
+
+    const searchLower = searchString.toLowerCase();
+    return identifierTypes.filter(
+      (type) => type.name.toLowerCase().includes(searchLower) || type.fieldName.toLowerCase().includes(searchLower),
+    );
+  }, [identifierTypes, searchString]);
+
+  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(event.target.value);
+  }, []);
+
+  const handleToggleIdentifier = useCallback((uuid: string) => {
+    setSelectedIdentifiers((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(uuid)) {
+        newSet.delete(uuid);
+      } else {
+        newSet.add(uuid);
+      }
+      return newSet;
+    });
+    setHasChanges(true);
+  }, []);
+
+  const handleSelectAll = useCallback(() => {
+    const allUuids = new Set(filteredIdentifierTypes.map((type) => type.uuid));
+    setSelectedIdentifiers(allUuids);
+    setHasChanges(true);
+  }, [filteredIdentifierTypes]);
+
+  const handleDeselectAll = useCallback(() => {
+    setSelectedIdentifiers(new Set());
+    setHasChanges(true);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    closeWorkspace();
+  }, [closeWorkspace]);
+
+  const handleSave = useCallback(async () => {
+    const selectedArray = Array.from(selectedIdentifiers);
+
+    try {
+      setIsSubmitting(true);
+
+      if (onSave) {
+        await onSave(selectedArray);
+      }
+
+      showSnackbar({
+        title: t('identifiersSaved', 'Identifiers saved'),
+        subtitle: t('identifiersSavedSubtitle', '{{count}} identifier(s) configured', {
+          count: selectedArray.length,
+        }),
+        kind: 'success',
+        isLowContrast: false,
+      });
+
+      setHasChanges(false);
+      closeWorkspace();
+    } catch (error) {
+      showSnackbar({
+        title: t('errorSavingIdentifiers', 'Error saving identifiers'),
+        subtitle: error?.message || t('unknownError', 'An unknown error occurred'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [selectedIdentifiers, onSave, closeWorkspace, t]);
+
+  if (isLoading) {
+    return (
+      <div className={styles.workspaceContainer}>
+        <div className={styles.workspaceHeader}>
+          <h2 className={styles.SectionTitle}>{t('configureIdentifiers', 'Configure Identifiers')}</h2>
+        </div>
+        <div className={styles.workspaceContent}>
+          <SkeletonText />
+        </div>
+      </div>
+    );
+  }
+
+  if (!identifierTypes || identifierTypes.length === 0) {
+    return (
+      <div className={styles.workspaceContainer}>
+        <div className={styles.workspaceHeader}>
+          <h3>{t('configureIdentifiers', 'Configure Identifiers')}</h3>
+        </div>
+        <div className={styles.workspaceContent}>
+          <p>{t('noIdentifierTypes', 'No identifier types available')}</p>
+        </div>
+        <div className={styles.workspaceFooter}>
+          <Button kind="secondary" onClick={handleCancel}>
+            {t('close', 'Close')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.workspaceContainer}>
+      <div className={styles.workspaceHeader}>
+        <p className={styles.label01}>
+          {t('identifierInstructions', "Select the identifiers you'd like to add for this patient:")}
+        </p>
+        <div className={styles.searchContainer}>
+          <Search
+            labelText={t('searchIdentifierPlaceholder', 'Search identifier')}
+            placeholder={t('searchIdentifierPlaceholder', 'Search identifier')}
+            onChange={handleSearchChange}
+            value={searchString}
+            size="lg"
+          />
+        </div>
+        {filteredIdentifierTypes.length > 0 && (
+          <div className={styles.bulkActions}>
+            <Button kind="ghost" size="sm" onClick={handleSelectAll}>
+              {t('selectAll', 'Select all')}
+            </Button>
+            <Button kind="ghost" size="sm" onClick={handleDeselectAll}>
+              {t('deselectAll', 'Deselect all')}
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className={styles.workspaceContent}>
+        <div className={styles.identifierList}>
+          {filteredIdentifierTypes.length === 0 ? (
+            <>
+              <EmptyState
+                displayText={t('noMatchingIdentifiers', 'identifiers match your search')}
+                headerTitle={t('noMatchingIdentifierHeader', 'No identifiers found')}
+              />
+            </>
+          ) : (
+            filteredIdentifierTypes.map((identifierType) => (
+              <Layer key={identifierType.uuid} className={styles.identifierItem}>
+                <Checkbox
+                  id={identifierType.uuid}
+                  labelText={
+                    <div className={styles.identifierLabel}>
+                      <span className={styles.identifierName}>{identifierType.name}</span>
+                    </div>
+                  }
+                  checked={selectedIdentifiers.has(identifierType.uuid) || identifierType.required}
+                  onChange={() => handleToggleIdentifier(identifierType.uuid)}
+                  disabled={identifierType.required || selectedIdentifiers.has(identifierType.uuid)}
+                />
+                {identifierType.identifierSources && identifierType.identifierSources.length > 0 && (
+                  <div className={styles.identifierSources}>
+                    <RadioButtonGroup
+                      legendText={t('sources', 'Sources')}
+                      name={`source-${identifierType.uuid}`}
+                      valueSelected={identifierType.identifierSources[0]?.uuid || ''}>
+                      {identifierType.identifierSources.map((source) => (
+                        <RadioButton
+                          key={source.uuid}
+                          id={`${identifierType.uuid}-${source.uuid}`}
+                          labelText={source.name}
+                          value={source.uuid}
+                          disabled
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  </div>
+                )}
+              </Layer>
+            ))
+          )}
+        </div>
+      </div>
+      <ButtonSet
+        className={classNames(styles.buttonSet, {
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}>
+        <Button className={styles.button} kind="secondary" onClick={handleCancel}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button
+          className={styles.button}
+          disabled={selectedIdentifiers.size === 0 || isSubmitting}
+          kind="primary"
+          onClick={handleSave}>
+          {isSubmitting ? (
+            <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
+          ) : (
+            <span> {t('save', 'Save')}</span>
+          )}
+        </Button>
+      </ButtonSet>
+      /{' '}
+    </div>
+  );
+}

package/src/identifier-workspace/identifier-configure.scss

@@ -0,0 +1,106 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.workspaceContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: layout.$spacing-05;
+}
+
+.workspaceHeader {
+  margin-bottom: layout.$spacing-05;
+
+  h3 {
+    @include type.type-style('heading-03');
+    margin-bottom: layout.$spacing-03;
+  }
+}
+
+.bodyLong02 {
+  @include type.type-style('body-long-02');
+  color: var(--cds-text-secondary);
+  margin-bottom: layout.$spacing-05;
+}
+
+.workspaceContent {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: layout.$spacing-05;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.searchContainer {
+  margin-top: layout.$spacing-04;
+  margin-bottom: layout.$spacing-05;
+}
+
+.identifierList {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.identifierItem {
+  padding: layout.$spacing-04;
+  border: 1px solid var(--cds-border-subtle);
+  border-radius: 4px;
+  background-color: var(--cds-layer-01);
+
+  &:hover {
+    background-color: var(--cds-layer-hover-01);
+  }
+}
+
+.sourceSelection {
+  margin-top: layout.$spacing-04;
+  margin-left: layout.$spacing-07;
+  padding-left: layout.$spacing-05;
+  border-left: 2px solid var(--cds-border-subtle);
+}
+
+.workspaceFooter {
+  display: flex;
+  flex-direction: row;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+:global(.omrs-breakpoint-lt-desktop) .workspaceFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+.identifierSources {
+  margin-top: layout.$spacing-07;
+  @include type.type-style('body-02');
+}
+.label01,
+.bulkActions {
+  @include type.type-style('label-02');
+  color: colors.$gray-100;
+  font-weight: bold;
+}
+.buttonSet {
+  margin-top: auto;
+  justify-self: end;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}

package/src/identifier-workspace/identifier.resource.ts

@@ -0,0 +1,90 @@
+import { messageOmrsServiceWorker, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import escapeRegExp from 'lodash-es/escapeRegExp';
+import { cacheForOfflineHeaders } from '../constant';
+import { FetchedPatientIdentifierType, PatientIdentifierType } from '../type';
+import find from 'lodash-es/find';
+import camelCase from 'lodash-es/camelCase';
+
+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 });
+}
+
+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, identifierSourcesResponse] = await Promise.all([
+    fetchAutoGenerationOptions(),
+    fetchIdentifierSources(),
+  ]);
+
+  const allIdentifierSources = identifierSourcesResponse.data.results;
+
+  for (let i = 0; i < identifierTypes?.length; i++) {
+    identifierTypes[i].identifierSources = allIdentifierSources
+      .filter((source) => source.identifierType.uuid === identifierTypes[i].uuid)
+      .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(
+      `${restBaseUrl}/patientidentifiertype?v=custom:(display,uuid,name,format,required,uniquenessBehavior)`,
+    ),
+    cacheAndFetch(`${restBaseUrl}/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() {
+  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default`);
+}
+
+async function fetchAutoGenerationOptions(abortController?: AbortController) {
+  return await cacheAndFetch(`${restBaseUrl}/idgen/autogenerationoption?v=full`);
+}
+
+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/index.ts

@@ -0,0 +1,33 @@
+import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { dashboardMeta } from './dashboard.meta';
+import { createDashboardLink } from './left-panel/left-panel.component';
+import SearchDashboard from './search-dashboard/search-dashboard.component';
+import { RegistrationForm } from './registration-form/registration-form.component';
+import IdentifierConfigureWorkspace from './identifier-workspace/identifier-configure-form.workspace';
+import VisitTag from './patient-tags/visit-tag.extension';
+import DeceasedPatientBannerTag from './patient-tags/deceased-patient-tag.extension';
+import CheckInWorkspace from './checkin-form/checkin-form.workspace';
+
+export const moduleName = '@digihmis/esm-patient-registration-app';
+const pageName = 'registration';
+
+const options = {
+  featureName: pageName,
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+export const leftPanelLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
+export const searchDashboard = getSyncLifecycle(SearchDashboard, options);
+export const registrationForm = getSyncLifecycle(RegistrationForm, options);
+export const identifierConfigureForm = getSyncLifecycle(IdentifierConfigureWorkspace, options);
+
+// t('checkInFormTitle', 'Check In form')
+export const checkInWorkspace = getSyncLifecycle(CheckInWorkspace, options);
+export const visitTag = getSyncLifecycle(VisitTag, options);
+export const deceasedPatientTag = getSyncLifecycle(DeceasedPatientBannerTag, options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/left-panel/left-panel.component.tsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type CarbonIconType } from '@carbon/react/icons';
+import last from 'lodash-es/last';
+import styles from './left-panel.scss';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+  icon?: string | CarbonIconType;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon } = dashboardLinkConfig;
+  const nameSegment = name.split('/').at(-1);
+
+  const currentPath = window.location.pathname;
+  const basePath = window.getOpenmrsSpaBase?.() || '';
+  const cleanBasePath = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
+  const spaBasePath = `${cleanBasePath}/home`;
+
+  const urlSegment = useMemo(() => {
+    const pathSegments = currentPath.split('/');
+    const lastSegment = last(pathSegments) || '';
+    return decodeURIComponent(lastSegment);
+  }, [currentPath]);
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+  const isActive = currentPath.includes(`/${nameSegment}`) || nameSegment === urlSegment;
+
+  let linkPath = `${spaBasePath}/registration`;
+  if (name && name.trim() !== '') {
+    linkPath += name.startsWith('/') ? name : `/${name}`;
+  }
+
+  return (
+    <ConfigurableLink to={linkPath} className={`cds--side-nav__link ${isActive ? 'active-left-nav-link' : ''}`}>
+      {typeof icon === 'string' ? (
+        <MaybeIcon icon={icon} className={styles.icon} size={16} />
+      ) : (
+        IconComp && <IconComp className={styles.icon} />
+      )}
+      {t(title, 'Search')}
+    </ConfigurableLink>
+  );
+};
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
+  return <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />;
+};
+
+export default DashboardLink;

package/src/left-panel/left-panel.scss

@@ -0,0 +1,13 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-05;
+  fill: colors.$gray-70;
+}

package/src/page-header/page-header.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar } from '@carbon/react/icons';
+import { useSession, formatDate, ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './page-header.scss';
+import { IconWrapper } from '../icon-wrapper/icon-wrapper.extension';
+import { ConfigObject } from '../config-schema';
+
+export const PageHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const { registrationIcon } = useConfig<ConfigObject>();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <IconWrapper src={registrationIcon.src} alt="Registration Dashboard Icon" />
+        <div className={styles['page-labels']}>
+          <p className={styles['page-name']}>{userLocation}</p>
+          <p className={styles['page-subtitle']}>{t('search', 'Search')}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles.extensionSlot}>
+          <ExtensionSlot name={'provider-banner-slot'} />
+          <div className={styles['date-and-location']}>
+            <Calendar size={16} />
+            <span className={styles.value}>{formatDate(new Date(), { mode: 'wide', noToday: true })}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/page-header/page-header.scss

@@ -0,0 +1,76 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.header {
+  @include type.type-style('body-compact-02');
+  height: layout.$spacing-12;
+  border: 1px solid colors.$gray-20;
+  border-left: 0px;
+  display: flex;
+  background: var(--cds-field);
+  justify-content: space-between;
+  margin-top: 1.5rem;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.right-justified-items {
+  @include type.type-style('body-01');
+  color: colors.$gray-80;
+  padding-top: layout.$spacing-05;
+  padding-bottom: layout.$spacing-07;
+}
+
+.page-subtitle {
+  @include type.type-style('caption-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-06;
+}
+.page-name {
+  @include type.type-style('caption-01');
+  color: colors.$gray-80;
+  font-size: layout.$spacing-05;
+}
+
+.page-labels {
+  p:first-of-type {
+    margin-bottom: layout.$spacing-02;
+  }
+}
+
+.date-and-location {
+  margin-top: layout.$spacing-03;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+  @include type.type-style('caption-01');
+  font-size: 0.83rem;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}
+
+.view {
+  @include type.type-style('caption-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+}