@bathiran212/esm-patient-chart-app 7.0.0

package/src/index.ts

@@ -0,0 +1,204 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import * as Framework from '@openmrs/esm-framework';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { esmPatientChartSchema } from './config-schema';
+import { moduleName } from './constants';
+import { setupCacheableRoutes, setupOfflineVisitsSync } from './offline';
+import { summaryDashboardMeta, encountersDashboardMeta } from './dashboard.meta';
+import deleteVisitActionButtonComponent from './actions-buttons/delete-visit.component';
+import currentVisitSummaryComponent from './visit/visits-widget/current-visit-summary.extension';
+import markPatientAliveActionButtonComponent from './actions-buttons/mark-patient-alive.component';
+import markPatientDeceasedActionButtonComponent from './actions-buttons/mark-patient-deceased.component';
+import pastVisitsOverviewComponent from './visit/visits-widget/visit-detail-overview.component';
+import patientChartPageComponent from './root.component';
+import patientDetailsTileComponent from './patient-details-tile/patient-details-tile.component';
+import startVisitActionButtonComponent from './actions-buttons/start-visit.component';
+import startVisitActionButtonOnPatientSearch from './visit/start-visit-button.component';
+import stopVisitActionButtonComponent from './actions-buttons/stop-visit.component';
+import visitAttributeTagsComponent from './patient-banner-tags/visit-attribute-tags.extension';
+
+// This allows @openmrs/esm-framework to be accessed by modules that are not
+// using webpack. This is used for ngx-formentry.
+window['_openmrs_esm_framework'] = Framework;
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  setupOfflineVisitsSync();
+  setupCacheableRoutes();
+
+  defineConfigSchema(moduleName, esmPatientChartSchema);
+}
+
+export const root = getSyncLifecycle(patientChartPageComponent, { featureName: 'patient-chart', moduleName });
+
+export const patientSummaryDashboardLink =
+  // t('Patient Summary', 'Patient Summary')
+  getSyncLifecycle(
+    createDashboardLink({
+      ...summaryDashboardMeta,
+    }),
+    {
+      featureName: 'summary-dashboard',
+      moduleName,
+    },
+  );
+
+export const markPatientAliveActionButton = getSyncLifecycle(markPatientAliveActionButtonComponent, {
+  featureName: 'patient-action-mark-alive',
+  moduleName,
+});
+
+export const markPatientDeceasedActionButton = getSyncLifecycle(markPatientDeceasedActionButtonComponent, {
+  featureName: 'patient-action-mark-deceased',
+  moduleName,
+});
+
+export const startVisitActionButton = getSyncLifecycle(startVisitActionButtonComponent, {
+  featureName: 'patient-action-start-visit',
+  moduleName,
+});
+
+export const stopVisitActionButton = getSyncLifecycle(stopVisitActionButtonComponent, {
+  featureName: 'patient-action-stop-visit',
+  moduleName,
+});
+
+export const deleteVisitActionMenuButton = getSyncLifecycle(deleteVisitActionButtonComponent, {
+  featureName: 'patient-action-delete-visit',
+  moduleName,
+});
+
+export const startVisitPatientSearchActionButton = getSyncLifecycle(startVisitActionButtonOnPatientSearch, {
+  featureName: 'patient-search-action-start-visit',
+  moduleName,
+});
+
+export const stopVisitPatientSearchActionButton = getSyncLifecycle(stopVisitActionButtonComponent, {
+  featureName: 'patient-search-action-stop-visit',
+  moduleName,
+});
+
+export const clinicalViewsSummary = getAsyncLifecycle(
+  () => import('./clinical-views/encounter-tile/clinical-views-summary.component'),
+  { featureName: 'clinical-views-summary', moduleName },
+);
+
+export const encountersSummaryDashboardLink =
+  // t('Visits', 'Visits')
+  getSyncLifecycle(
+    createDashboardLink({
+      ...encountersDashboardMeta,
+    }),
+    { featureName: 'encounter', moduleName },
+  );
+
+export const currentVisitSummary = getSyncLifecycle(currentVisitSummaryComponent, {
+  featureName: 'current-visit-summary',
+  moduleName,
+});
+
+export const pastVisitsDetailOverview = getSyncLifecycle(pastVisitsOverviewComponent, {
+  featureName: 'visits-detail-overview',
+  moduleName,
+});
+
+export const patientDetailsTile = getSyncLifecycle(patientDetailsTileComponent, {
+  featureName: 'patient-details-tile',
+  moduleName,
+});
+
+export const visitAttributeTags = getSyncLifecycle(visitAttributeTagsComponent, {
+  featureName: 'visit-attribute-tags',
+  moduleName,
+});
+
+export const startVisitWorkspace = getAsyncLifecycle(() => import('./visit/visit-form/visit-form.workspace'), {
+  featureName: 'start-visit-form',
+  moduleName,
+});
+
+export const exportedVisitForm = getAsyncLifecycle(() => import('./visit/visit-form/exported-visit-form.workspace'), {
+  featureName: 'exported-visit-form',
+  moduleName,
+});
+
+// t('markPatientDeceased', 'Mark patient deceased')
+export const markPatientDeceasedForm = getAsyncLifecycle(
+  () => import('./mark-patient-deceased/mark-patient-deceased-form.workspace'),
+  {
+    featureName: 'mark-patient-deceased-form',
+    moduleName,
+  },
+);
+
+export const startVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/start-visit-dialog.modal'), {
+  featureName: 'start visit',
+  moduleName,
+});
+
+export const deleteVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/delete-visit-dialog.modal'), {
+  featureName: 'delete visit',
+  moduleName,
+});
+
+export const modifyVisitDateModal = getAsyncLifecycle(() => import('./visit/visit-prompt/modify-visit-date.modal'), {
+  featureName: 'modify visit date',
+  moduleName,
+});
+
+export const endVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/end-visit-dialog.modal'), {
+  featureName: 'end visit',
+  moduleName,
+});
+
+export const markPatientAliveModal = getAsyncLifecycle(() => import('./mark-patient-alive/mark-patient-alive.modal'), {
+  featureName: 'mark patient alive',
+  moduleName,
+});
+
+export const deleteEncounterModal = getAsyncLifecycle(
+  () => import('./visit/visits-widget/past-visits-components/delete-encounter.modal'),
+  {
+    featureName: 'delete-encounter-modal',
+    moduleName,
+  },
+);
+
+export const editVisitDetailsActionButton = getAsyncLifecycle(
+  () => import('./visit/visit-action-items/edit-visit-details.component'),
+  { featureName: 'edit-visit-details', moduleName },
+);
+
+export const deleteVisitActionButton = getAsyncLifecycle(
+  () => import('./visit/visit-action-items/delete-visit-action-item.component'),
+  { featureName: 'delete-visit', moduleName },
+);
+
+export const activeVisitActionsComponent = getAsyncLifecycle(
+  () => import('./visit/visits-widget/active-visit-buttons/active-visit-buttons'),
+  { featureName: 'active-visit-actions', moduleName },
+);
+
+export const encounterListTableTabs = getAsyncLifecycle(
+  () => import('./clinical-views/encounter-list/encounter-list-tabs.extension'),
+  { featureName: 'encounter-list-table-tabs', moduleName },
+);
+
+export const visitContextSwitcherModal = getAsyncLifecycle(
+  () => import('./visit/visits-widget/visit-context/visit-context-switcher.modal'),
+  { featureName: 'visit-context-switcher', moduleName },
+);
+
+export const visitContextHeader = getAsyncLifecycle(
+  () => import('./visit/visits-widget/visit-context/visit-context-header.extension'),
+  { featureName: 'visit-context-header', moduleName },
+);
+
+export const retrospectiveDateTimePicker = getAsyncLifecycle(
+  () =>
+    import(
+      './visit/visits-widget/visit-context/retrospective-data-date-time-picker/retrospective-date-time-picker.component'
+    ),
+  { featureName: 'retrospective-date-time-picker', moduleName },
+);

package/src/loader/loader.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import styles from './loader.scss';
+
+const Loader: React.FC = () => {
+  const { t } = useTranslation();
+  return <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />;
+};
+
+export default Loader;

package/src/loader/loader.scss

@@ -0,0 +1,9 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.loading {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  min-height: layout.$spacing-09;
+}

package/src/mark-patient-alive/mark-patient-alive.modal.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { invalidateCurrentVisit, invalidateVisitAndEncounterData } from '@openmrs/esm-patient-common-lib';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { markPatientAlive } from '../data.resource';
+
+interface MarkPatientAliveProps {
+  closeModal: () => void;
+  patientUuid: string;
+}
+
+const MarkPatientAlive: React.FC<MarkPatientAliveProps> = ({ closeModal, patientUuid }) => {
+  const { t } = useTranslation();
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const handleSubmit = useCallback(() => {
+    closeModal();
+
+    markPatientAlive(patientUuid)
+      .then(() => {
+        globalMutate((key) => Array.isArray(key) && key[0] === 'patient' && key[1] === patientUuid);
+        invalidateCurrentVisit(globalMutate, patientUuid);
+        invalidateVisitAndEncounterData(globalMutate, patientUuid);
+        showSnackbar({
+          title: t('markAliveSuccessfully', 'Patient marked alive successfully'),
+        });
+      })
+      .catch((error) => {
+        showSnackbar({
+          title: t('errorMarkingPatientAlive', 'Error marking patient alive'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+      });
+  }, [closeModal, globalMutate, patientUuid, t]);
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('markPatientAlive', 'Mark patient alive')} />
+      <ModalBody>{t('markPatientAliveConfirmation', 'Are you sure you want to mark this patient alive?')}</ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('no', 'No')}
+        </Button>
+        <Button onClick={handleSubmit}>{t('yes', 'Yes')}</Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default MarkPatientAlive;

package/src/mark-patient-deceased/mark-patient-deceased-form.scss

@@ -0,0 +1,175 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05;
+
+  & section {
+    margin: layout.$spacing-05 0;
+  }
+}
+
+.heading {
+  @include type.type-style('productive-heading-03');
+  color: $text-02;
+  margin: layout.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('productive-heading-02');
+  color: $text-02;
+  margin: 0 0 layout.$spacing-03 0;
+}
+
+.conceptAnswerOverviewWrapper {
+  margin: layout.$spacing-03 0;
+  border: 0.0625rem solid $grey-2;
+  background-color: $ui-01;
+
+  :global(.cds--tile) {
+    border: none !important;
+  }
+}
+
+.errorOutline {
+  outline: 1px solid $danger;
+}
+
+.conceptAnswerOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.conceptAnswerOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-short-01');
+  color: $text-02;
+  background-color: $ui-01;
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
+}
+
+.contentSwitcher {
+  height: layout.$spacing-09;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid $grey-2;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
+}
+
+.conceptAnswerOverviewWrapperTablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.conceptAnswerOverviewWrapperDesktop {
+  padding: 0;
+}
+
+.warningContainer {
+  display: flex;
+  background-color: $warning-background;
+  padding: layout.$spacing-05;
+  align-items: center;
+}
+
+.warningIcon {
+  display: flex;
+  align-self: center;
+  fill: $inverse-support-03;
+  margin-right: layout.$spacing-03;
+  align-self: start;
+}
+
+.warningText {
+  font-size: 0.875rem;
+}
+
+.datePicker {
+  padding-bottom: layout.$spacing-03;
+  width: 100%;
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: $danger;
+}
+
+.nonCodedCauseOfDeath {
+  margin: layout.$spacing-05;
+}
+
+.skeleton {
+  :global(.cds--structured-list-tbody .cds--structured-list-row:last-child) {
+    border-bottom: none;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  padding: layout.$spacing-09 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import { vi, describe, it, expect, beforeEach, afterAll } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { esmPatientChartSchema, type ChartConfig } from '../config-schema';
+import { mockPatient } from 'tools';
+import { markPatientDeceased, useCausesOfDeath } from '../data.resource';
+import MarkPatientDeceasedForm from './mark-patient-deceased-form.workspace';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib/src';
+
+const mockMarkPatientDeceased = vi.mocked(markPatientDeceased);
+const mockUseCausesOfDeath = vi.mocked(useCausesOfDeath);
+const mockUseConfig = vi.mocked(useConfig<ChartConfig>);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+const mockCloseWorkspace = vi.fn();
+
+vi.mock('../data.resource', () => ({
+  markPatientDeceased: vi.fn().mockResolvedValue({}),
+  useCausesOfDeath: vi.fn(),
+}));
+
+describe('MarkPatientDeceasedForm', () => {
+  const freeTextFieldConceptUuid = '1234e218-6c8a-4ca3-8edb-9f6d9c8c8c7f';
+
+  const defaultProps: PatientWorkspace2DefinitionProps<{}, {}> = {
+    closeWorkspace: mockCloseWorkspace,
+    workspaceName: null,
+    launchChildWorkspace: vi.fn(),
+    windowProps: {},
+    workspaceProps: {},
+    groupProps: {
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+    },
+    windowName: '',
+    isRootWorkspace: false,
+    showActionMenu: true,
+  };
+
+  const codedCausesOfDeath = [
+    {
+      display: 'Traumatic injury',
+      uuid: '8b64f45e-1d5f-4894-b77c-4e1d840e2c99',
+      name: 'Traumatic injury',
+    },
+    {
+      display: 'Neoplasm/cancer',
+      uuid: 'c4e8d03c-f09b-48d1-8d93-7d84d463f865',
+      name: 'Neoplasm/cancer',
+    },
+    {
+      display: 'Infectious disease',
+      uuid: 'b7c1c30f-5b9e-4a3d-b943-7f4b3f740e6c',
+      name: 'Infectious disease',
+    },
+    {
+      display: 'Other',
+      uuid: freeTextFieldConceptUuid,
+      name: 'Other',
+    },
+  ];
+
+  beforeEach(() => {
+    mockUseCausesOfDeath.mockReturnValue({
+      causesOfDeath: codedCausesOfDeath,
+      isLoading: false,
+      isValidating: false,
+    });
+
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientChartSchema),
+      freeTextFieldConceptUuid,
+    });
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the cause of death form', () => {
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    expect(screen.getByRole('img', { name: /warning/i })).toBeInTheDocument();
+    expect(
+      screen.getByText(/marking the patient as deceased updates this patient's death information/i),
+    ).toBeInTheDocument();
+    const causes = screen.getAllByText(/cause of death/i);
+    expect(causes.length).toBeGreaterThan(0);
+    expect(causes[0]).toBeInTheDocument();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.getByLabelText(/date/i)).toBeInTheDocument();
+
+    codedCausesOfDeath.forEach((codedCauseOfDeath) => {
+      expect(screen.getByRole('radio', { name: codedCauseOfDeath.display })).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: /discard/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /save and close/i })).toBeInTheDocument();
+  });
+
+  it('searches through the list when the user types in the search input', async () => {
+    const user = userEvent.setup();
+
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    const searchInput = screen.getByRole('searchbox');
+
+    await user.type(searchInput, 'totally random text');
+    expect(screen.getByText(/no matching coded causes of death/i));
+
+    await user.clear(searchInput);
+    await user.type(searchInput, 'traumatic injury');
+
+    expect(screen.getByRole('radio', { name: 'Traumatic injury' })).toBeInTheDocument();
+    expect(screen.getAllByRole('radio')).toHaveLength(1);
+  });
+
+  it('selecting "Other" as the cause of death requires the user to enter a non-coded cause of death', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const user = userEvent.setup();
+
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    const submitButton = screen.getByRole('button', { name: /save and close/i });
+
+    await user.click(screen.getByRole('radio', { name: 'Other' }));
+    expect(screen.getByRole('textbox', { name: /non-coded cause of death/i })).toBeInTheDocument();
+
+    await user.click(submitButton);
+
+    expect(screen.getByText(/please enter the non-coded cause of death/i)).toBeInTheDocument();
+
+    await user.type(screen.getByRole('textbox', { name: /non\-coded cause of death/i }), 'Septicemia');
+    await user.click(submitButton);
+
+    expect(markPatientDeceased).toHaveBeenCalledWith(
+      expect.any(Date),
+      '8673ee4f-e2ab-4077-ba55-4980f408773e', // causeOfDeathUuid
+      freeTextFieldConceptUuid, // otherCauseOfDeathConceptUuid
+      'Septicemia', // otherCauseOfDeath
+    );
+    consoleError.mockRestore();
+  });
+
+  it('submits the form with a coded cause of death', async () => {
+    const user = userEvent.setup();
+
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    const submitButton = screen.getByRole('button', { name: /save and close/i });
+    const traumaticInjuryRadio = screen.getByRole('radio', { name: 'Traumatic injury' });
+
+    await user.click(traumaticInjuryRadio);
+    await user.click(submitButton);
+
+    expect(markPatientDeceased).toHaveBeenCalledWith(
+      expect.any(Date),
+      '8673ee4f-e2ab-4077-ba55-4980f408773e',
+      '8b64f45e-1d5f-4894-b77c-4e1d840e2c99', // causeOfDeathUuid for Traumatic injury,
+      '',
+    );
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      title: 'Patient marked deceased successfully',
+    });
+  });
+
+  it('renders an error message when saving the cause of death fails', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const user = userEvent.setup();
+    const mockError = new Error('API Error');
+
+    mockMarkPatientDeceased.mockRejectedValueOnce(mockError);
+
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    const submitButton = screen.getByRole('button', { name: /save and close/i });
+    const traumaticInjuryRadio = screen.getByRole('radio', { name: 'Traumatic injury' });
+
+    await user.click(traumaticInjuryRadio);
+    await user.click(submitButton);
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      subtitle: mockError.message,
+      title: 'Error marking patient deceased',
+    });
+    consoleError.mockRestore();
+  });
+
+  it('clicking the discard button closes the workspace', async () => {
+    const user = userEvent.setup();
+
+    render(<MarkPatientDeceasedForm {...defaultProps} />);
+
+    const discardButton = screen.getByRole('button', { name: /discard/i });
+    await user.click(discardButton);
+
+    expect(mockCloseWorkspace).toHaveBeenCalledTimes(1);
+  });
+});