@bathiran212/esm-patient-chart-app 7.0.0

package/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx

@@ -0,0 +1,295 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import fuzzy from 'fuzzy';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  DatePickerSkeleton,
+  Form,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  Row,
+  Search,
+  StructuredListSkeleton,
+  TextInput,
+  Tile,
+} from '@carbon/react';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { WarningFilled } from '@carbon/react/icons';
+import {
+  type PatientWorkspace2DefinitionProps,
+  EmptyState,
+  invalidateCurrentVisit,
+  invalidateVisitAndEncounterData,
+} from '@openmrs/esm-patient-common-lib';
+import {
+  ExtensionSlot,
+  useLayoutType,
+  showSnackbar,
+  ResponsiveWrapper,
+  useConfig,
+  OpenmrsDatePicker,
+  Workspace2,
+} from '@openmrs/esm-framework';
+import { useSWRConfig } from 'swr';
+import { markPatientDeceased, useCausesOfDeath } from '../data.resource';
+import { type ChartConfig } from '../config-schema';
+import styles from './mark-patient-deceased-form.scss';
+
+const MarkPatientDeceasedForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
+  closeWorkspace,
+  groupProps: { patientUuid, patient },
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const memoizedState = useMemo(() => ({ patientUuid, patient }), [patientUuid, patient]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const { causesOfDeath, isLoading: isLoadingCausesOfDeath } = useCausesOfDeath();
+  const { freeTextFieldConceptUuid } = useConfig<ChartConfig>();
+  const { mutate: globalMutate } = useSWRConfig();
+  const patientBirthDate = useMemo(() => (patient?.birthDate ? new Date(patient.birthDate) : undefined), [patient]);
+
+  const filteredCausesOfDeath = useMemo(() => {
+    if (!searchTerm) {
+      return causesOfDeath;
+    }
+    return searchTerm
+      ? fuzzy
+          .filter(searchTerm, causesOfDeath, {
+            extract: (causeOfDeathConcept) => causeOfDeathConcept.display,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : causesOfDeath;
+  }, [searchTerm, causesOfDeath]);
+
+  const handleSearchTermChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const schema = z
+    .object({
+      causeOfDeath: z.string().refine((causeOfDeath) => !!causeOfDeath, {
+        message: t('causeOfDeathIsRequired', 'Please select the cause of death'),
+      }),
+      deathDate: z
+        .date()
+        .refine((date) => !!date, {
+          message: t('deathDateRequired', 'Please select the date of death'),
+        })
+        .refine((date) => !patientBirthDate || date >= patientBirthDate, {
+          message: t('deathDateBeforeBirthDate', 'Death date cannot be before the date of birth'),
+        }),
+      nonCodedCauseOfDeath: z.string().optional(),
+    })
+    .refine((data) => !(data.causeOfDeath === freeTextFieldConceptUuid && !data.nonCodedCauseOfDeath), {
+      message: t('nonCodedCauseOfDeathRequired', 'Please enter the non-coded cause of death'),
+      path: ['nonCodedCauseOfDeath'],
+    });
+
+  type MarkPatientDeceasedFormSchema = z.infer<typeof schema>;
+
+  const {
+    control,
+    formState: { errors, isSubmitting, isDirty },
+    handleSubmit,
+    watch,
+  } = useForm<MarkPatientDeceasedFormSchema>({
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
+    defaultValues: {
+      causeOfDeath: '',
+      deathDate: new Date(),
+      nonCodedCauseOfDeath: '',
+    },
+  });
+
+  const causeOfDeathValue = watch('causeOfDeath');
+
+  const onSubmit: SubmitHandler<MarkPatientDeceasedFormSchema> = useCallback(
+    (data) => {
+      const { causeOfDeath, deathDate, nonCodedCauseOfDeath } = data;
+
+      return markPatientDeceased(deathDate, patientUuid, causeOfDeath, nonCodedCauseOfDeath)
+        .then(() => {
+          globalMutate((key) => Array.isArray(key) && key[0] === 'patient' && key[1] === patientUuid);
+          invalidateCurrentVisit(globalMutate, patientUuid);
+          invalidateVisitAndEncounterData(globalMutate, patientUuid);
+
+          showSnackbar({
+            title: t('markDeceasedSuccessfully', 'Patient marked deceased successfully'),
+          });
+
+          closeWorkspace({ discardUnsavedChanges: true });
+        })
+        .catch((error) => {
+          showSnackbar({
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+            title: t('errorMarkingPatientDeceased', 'Error marking patient deceased'),
+          });
+        });
+    },
+    [closeWorkspace, globalMutate, patientUuid, t],
+  );
+
+  const onError = (errors) => console.error(errors);
+
+  return (
+    <Workspace2 title={t('markPatientDeceased', 'Mark patient deceased')} hasUnsavedChanges={isDirty}>
+      <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+        <div>
+          {isTablet && (
+            <Row className={styles.headerGridRow}>
+              <ExtensionSlot className={styles.dataGridRow} name="visit-form-header-slot" state={memoizedState} />
+            </Row>
+          )}
+          <div className={styles.container}>
+            <span className={styles.warningContainer}>
+              <WarningFilled aria-label={t('warning', 'Warning')} className={styles.warningIcon} size={20} />
+              <span className={styles.warningText}>
+                {t('markDeceasedWarning', "Marking the patient as deceased updates this patient's death information")}
+              </span>
+            </span>
+            <section>
+              <div className={styles.sectionTitle}>{t('dateOfDeath', 'Date of death')}</div>
+              {causesOfDeath?.length ? (
+                <ResponsiveWrapper>
+                  <Controller
+                    name="deathDate"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                      <OpenmrsDatePicker
+                        {...field}
+                        className={styles.datePicker}
+                        id="deceasedDate"
+                        data-testid="deceasedDate"
+                        labelText={t('date', 'Date')}
+                        minDate={patientBirthDate}
+                        maxDate={new Date()}
+                        invalid={Boolean(fieldState?.error?.message)}
+                        invalidText={fieldState?.error?.message}
+                      />
+                    )}
+                  />
+                </ResponsiveWrapper>
+              ) : (
+                <DatePickerSkeleton />
+              )}
+            </section>
+            <section>
+              <div className={styles.sectionTitle}>{t('causeOfDeath', 'Cause of death')}</div>
+              <div
+                className={classNames(styles.conceptAnswerOverviewWrapper, {
+                  [styles.conceptAnswerOverviewWrapperTablet]: isTablet,
+                  [styles.conceptAnswerOverviewWrapperDesktop]: !isTablet,
+                  [styles.errorOutline]: errors?.causeOfDeath?.message,
+                })}
+              >
+                {isLoadingCausesOfDeath ? <StructuredListSkeleton /> : null}
+
+                {causesOfDeath?.length ? (
+                  <ResponsiveWrapper>
+                    <Search
+                      labelText={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                      onChange={handleSearchTermChange}
+                      placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                    />
+                  </ResponsiveWrapper>
+                ) : null}
+
+                {causesOfDeath?.length && filteredCausesOfDeath.length > 0 ? (
+                  <Controller
+                    name="causeOfDeath"
+                    control={control}
+                    render={({ field: { onChange } }) => (
+                      <RadioButtonGroup
+                        className={styles.radioButtonGroup}
+                        name={
+                          causeOfDeathValue === freeTextFieldConceptUuid
+                            ? 'freeTextFieldCauseOfDeath'
+                            : 'codedCauseOfDeath'
+                        }
+                        orientation="vertical"
+                        onChange={onChange}
+                      >
+                        {filteredCausesOfDeath.map(({ uuid, display, name }) => (
+                          <RadioButton
+                            className={styles.radioButton}
+                            id={name}
+                            key={uuid}
+                            labelText={display}
+                            value={uuid}
+                          />
+                        ))}
+                      </RadioButtonGroup>
+                    )}
+                  />
+                ) : null}
+
+                {searchTerm && filteredCausesOfDeath.length === 0 && (
+                  <div className={styles.tileContainer}>
+                    <Tile className={styles.tile}>
+                      <div className={styles.tileContent}>
+                        <p className={styles.content}>
+                          {t('noMatchingCodedCausesOfDeath', 'No matching coded causes of death')}
+                        </p>
+                        <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                      </div>
+                    </Tile>
+                  </div>
+                )}
+
+                {!isLoadingCausesOfDeath && !causesOfDeath?.length ? (
+                  <EmptyState
+                    displayText={t('causeOfDeath_lower', 'cause of death concepts configured in the system')}
+                    headerTitle={t('causeOfDeath', 'Cause of death')}
+                  />
+                ) : null}
+              </div>
+              {errors?.causeOfDeath && <p className={styles.errorMessage}>{errors?.causeOfDeath?.message}</p>}
+            </section>
+          </div>
+          {causeOfDeathValue === freeTextFieldConceptUuid && (
+            <div className={styles.nonCodedCauseOfDeath}>
+              <Controller
+                name="nonCodedCauseOfDeath"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <TextInput
+                    id="freeTextCauseOfDeath"
+                    invalid={!!errors?.nonCodedCauseOfDeath}
+                    invalidText={errors?.nonCodedCauseOfDeath?.message}
+                    labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                    onChange={onChange}
+                    placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                    value={value}
+                  />
+                )}
+              />
+            </div>
+          )}
+        </div>
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} role="progressbar" />
+            ) : (
+              t('saveAndClose', 'Save and close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default MarkPatientDeceasedForm;

package/src/offline.ts

@@ -0,0 +1,41 @@
+import {
+  fhirBaseUrl,
+  messageOmrsServiceWorker,
+  restBaseUrl,
+  saveVisit,
+  setupOfflineSync,
+} from '@openmrs/esm-framework';
+import { type OfflineVisit, visitSyncType } from '@openmrs/esm-patient-common-lib';
+
+export function setupCacheableRoutes() {
+  messageOmrsServiceWorker({
+    type: 'registerDynamicRoute',
+    pattern: `.+${fhirBaseUrl}/R4/Patient/.+`,
+  });
+
+  messageOmrsServiceWorker({
+    type: 'registerDynamicRoute',
+    pattern: `.+${restBaseUrl}/visit.+`,
+  });
+}
+
+/**
+ * Sets up the offline synchronization for offline visits.
+ */
+export function setupOfflineVisitsSync() {
+  setupOfflineSync<OfflineVisit>(visitSyncType, ['patient-registration'], async (visit, options) => {
+    const visitPayload = {
+      ...visit,
+      stopDatetime: new Date(),
+    };
+
+    const res = await saveVisit(visitPayload, options.abort);
+    if (!res.ok) {
+      throw new Error(
+        `Failed to synchronize offline visit with the UUID: ${visit.uuid}. Error: ${JSON.stringify(res.data)}`,
+      );
+    }
+
+    return res.data;
+  });
+}

package/src/patient-banner-tags/visit-attribute-tags.extension.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { formatDate, useConfig, useVisit } from '@openmrs/esm-framework';
+import { type ChartConfig } from '../config-schema';
+import styles from './visit-attribute-tags.scss';
+
+interface VisitAttributeTagsProps {
+  patientUuid: string;
+}
+
+const getAttributeValue = (attributeType, value) => {
+  switch (attributeType?.datatypeClassname) {
+    case 'org.openmrs.customdatatype.datatype.ConceptDatatype':
+      return value?.display;
+    case 'org.openmrs.customdatatype.datatype.FloatDatatype':
+    case 'org.openmrs.customdatatype.datatype.FreeTextDatatype':
+    case 'org.openmrs.customdatatype.datatype.LongFreeTextDatatype':
+    case 'org.openmrs.customdatatype.datatype.BooleanDatatype':
+      return value;
+    case 'org.openmrs.customdatatype.datatype.DateDatatype':
+      return formatDate(new Date(value), {
+        mode: 'wide',
+      });
+    default:
+      return value;
+  }
+};
+
+/**
+ * This extension slots to the patient-banner-tags-slot by default.
+ */
+const VisitAttributeTags: React.FC<VisitAttributeTagsProps> = ({ patientUuid }) => {
+  const { activeVisit } = useVisit(patientUuid);
+  const { visitAttributeTypes } = useConfig<ChartConfig>();
+
+  const displayableAttributes = activeVisit?.attributes
+    ?.filter(
+      (attribute) =>
+        visitAttributeTypes?.find(({ uuid }) => attribute?.attributeType?.uuid === uuid)?.displayInThePatientBanner,
+    )
+    .map((attribute) => ({
+      attribute,
+      value: getAttributeValue(attribute?.attributeType, attribute?.value),
+    }))
+    .filter(({ value }) => value != null && value !== '');
+
+  if (!displayableAttributes?.length) {
+    return null;
+  }
+
+  return (
+    <div className={styles.tagsContainer}>
+      {displayableAttributes.map(({ attribute, value }) => (
+        <Tag key={attribute?.attributeType?.uuid} type="gray">
+          {value}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export default VisitAttributeTags;

package/src/patient-banner-tags/visit-attribute-tags.scss

@@ -0,0 +1,8 @@
+@use '@carbon/layout';
+
+.tagsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+  margin: 0 layout.$spacing-02;
+}

package/src/patient-chart/chart-review/chart-review.component.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useMemo } from 'react';
+import { Navigate } from 'react-router-dom';
+import { type ConfigObject, useExtensionStore, registerExtensionSlot } from '@openmrs/esm-framework';
+import { DashboardView, type DashboardConfig, type LayoutMode } from './dashboard-view.component';
+import { basePath } from '../../constants';
+
+function makePath(target: DashboardConfig, params: Record<string, string> = {}) {
+  const parts = `${basePath}/${encodeURIComponent(target.path)}`.split('/');
+
+  Object.keys(params).forEach((key) => {
+    for (let i = 0; i < parts.length; i++) {
+      if (parts[i][0] === ':' && parts[i].indexOf(key) === 1) {
+        parts[i] = params[key];
+      }
+    }
+  });
+
+  return parts.join('/');
+}
+
+/**
+ * Maps old dashboard URL path segments to their new lowercase/hyphenated equivalents.
+ * This ensures that existing bookmarks, shared links, and external references
+ * continue to resolve to the correct dashboard after the path rename.
+ */
+const legacyPathAliases: Record<string, string> = {
+  'Patient Summary': 'patient-summary',
+  'Vitals & Biometrics': 'vitals-and-biometrics',
+  'Vitals %26 Biometrics': 'vitals-and-biometrics',
+  Allergies: 'allergies',
+  Appointments: 'appointments',
+  Attachments: 'attachments',
+  'Billing history': 'billing-history',
+  Conditions: 'conditions',
+  Encounters: 'encounters',
+  Immunizations: 'immunizations',
+  Medications: 'medications',
+  Orders: 'orders',
+  Programs: 'programs',
+  Results: 'results',
+  Visits: 'visits',
+};
+
+function resolveView(view: string): string {
+  return legacyPathAliases[view] ?? view;
+}
+
+function isDashboardConfig(obj: unknown): obj is DashboardConfig {
+  return (
+    typeof obj === 'object' &&
+    obj !== null &&
+    'path' in obj &&
+    typeof obj.path === 'string' &&
+    'slot' in obj &&
+    typeof obj.slot === 'string'
+  );
+}
+
+const seenMessages = new Set<string>();
+
+function getDashboardDefinition(meta: object, config: ConfigObject, moduleName: string, name: string) {
+  const mergedDefinition = { ...meta, ...config, moduleName };
+  if (isDashboardConfig(mergedDefinition)) {
+    return mergedDefinition;
+  } else {
+    const msg = `Could not find a valid dashboard definition for the dashboard ${name} located in ${moduleName}`;
+    if (!seenMessages.has(msg)) {
+      console.error(msg);
+      seenMessages.add(msg);
+    }
+    return null;
+  }
+}
+
+interface ChartReviewProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+  view: string;
+  setDashboardLayoutMode?: (layoutMode: LayoutMode) => void;
+}
+
+const ChartReview: React.FC<ChartReviewProps> = ({ patientUuid, patient, view, setDashboardLayoutMode }) => {
+  const extensionStore = useExtensionStore();
+
+  const dashboards = extensionStore.slots['patient-chart-dashboard-slot'].assignedExtensions
+    .flatMap((e) => {
+      if (e.config?.slotName) {
+        if (e.config.slotName in extensionStore.slots) {
+          return extensionStore.slots[e.config.slotName].assignedExtensions.map((e) =>
+            getDashboardDefinition(e.meta, e.config, e.moduleName, e.name),
+          );
+        } else {
+          registerExtensionSlot('@openmrs/esm-patient-chart-app', e.config.slotName);
+          // Since we register the new extension slot, we need to force a re-render with the
+          // update extensionStore. Throwing the promise will trigger suspense and since the
+          // promise immediately resolves, it should re-render on the next tic.
+          throw Promise.resolve();
+        }
+      }
+
+      return getDashboardDefinition(e.meta, e.config, e.moduleName, e.name);
+    })
+    .filter(Boolean);
+
+  const defaultDashboard = dashboards.filter((dashboard) => Boolean(dashboard.path))?.[0];
+  const resolvedView = resolveView(view);
+  const dashboard = useMemo(() => {
+    return dashboards.find((dashboard) => dashboard.path === resolvedView);
+  }, [dashboards, resolvedView]);
+
+  useEffect(() => {
+    const activeDashboard = dashboard ?? defaultDashboard;
+    if (setDashboardLayoutMode) {
+      setDashboardLayoutMode(activeDashboard.layoutMode ?? 'contained');
+    }
+  }, [dashboard, defaultDashboard, setDashboardLayoutMode]);
+
+  if (!('patient-chart-dashboard-slot' in extensionStore.slots)) {
+    return null;
+  }
+
+  if (!defaultDashboard) {
+    return null;
+  } else if (!dashboard) {
+    return (
+      <Navigate
+        to={makePath(defaultDashboard, {
+          patientUuid,
+        })}
+        replace
+      />
+    );
+  } else {
+    return <DashboardView dashboard={dashboard} patientUuid={patientUuid} patient={patient} />;
+  }
+};
+
+export default ChartReview;

package/src/patient-chart/chart-review/chart-review.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { vi, describe, expect, test } from 'vitest';
+import { BrowserRouter } from 'react-router-dom';
+import { screen, render } from '@testing-library/react';
+import {
+  type AssignedExtension,
+  type ExtensionSlotState,
+  useExtensionStore,
+  useExtensionSlotMeta,
+} from '@openmrs/esm-framework';
+import { mockPatient } from 'tools';
+import ChartReview from './chart-review.component';
+
+const mockUseExtensionStore = vi.mocked(useExtensionStore);
+const mockUseExtensionSlotMeta = vi.mocked(useExtensionSlotMeta);
+
+vi.mock('react-router-dom', async () => ({
+  ...((await vi.importActual('react-router-dom')) as object),
+  Redirect: vi.fn(),
+  useMatch: vi.fn().mockReturnValue({
+    params: {
+      url: '/patient/8673ee4f-e2ab-4077-ba55-4980f408773e/chart',
+      view: 'patient-summary',
+    },
+  }),
+}));
+
+function slotMetaFromStore(store, slotName) {
+  return Object.fromEntries(
+    store.slots[slotName].assignedExtensions.map((e) => {
+      return [e.name, e.meta];
+    }),
+  );
+}
+
+describe('ChartReview', () => {
+  test('renders a grid-based layout', () => {
+    const mockStore = {
+      slots: {
+        'patient-chart-dashboard-slot': {
+          assignedExtensions: [
+            {
+              name: 'charts-summary-dashboard',
+              meta: {
+                slot: 'patient-chart-summary-dashboard-slot',
+                path: 'patient-summary',
+                title: 'Patient Summary',
+              },
+            },
+            {
+              name: 'test-results-summary-dashboard',
+              meta: {
+                slot: 'patient-chart-test-results-dashboard-slot',
+                path: 'Test Results',
+                title: 'Test Results',
+              },
+            },
+          ] as unknown as AssignedExtension[],
+        },
+        'patient-chart-summary-dashboard-slot': {
+          assignedExtensions: [],
+        },
+      } as Record<string, ExtensionSlotState>,
+    };
+
+    mockUseExtensionStore.mockReturnValue(mockStore as unknown as ReturnType<typeof useExtensionStore>);
+    mockUseExtensionSlotMeta.mockImplementation((slotName) => slotMetaFromStore(mockStore, slotName));
+
+    render(
+      <BrowserRouter>
+        <ChartReview patient={mockPatient} patientUuid={mockPatient.id} view="patient-summary" />
+      </BrowserRouter>,
+    );
+
+    expect(screen.getByRole('heading')).toHaveTextContent(/Patient summary/i);
+  });
+});