@bathiran212/esm-patient-chart-app 7.0.0

package/src/actions-buttons/stop-visit.component.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal, useVisit } from '@openmrs/esm-framework';
+import { OverflowMenuItem } from '@carbon/react';
+import styles from './action-button.scss';
+
+interface StopVisitOverflowMenuItemProps {
+  patientUuid: string;
+  closeMenu?: () => void;
+}
+
+/**
+ * This button shows up in the patient banner action menu, but only when the patient has an active visit.
+ * On click, it opens the modal in end-visit-dialog.component.tsx to END the visit
+ */
+const StopVisitOverflowMenuItem: React.FC<StopVisitOverflowMenuItemProps> = ({ patientUuid, closeMenu }) => {
+  const { t } = useTranslation();
+  const { activeVisit } = useVisit(patientUuid);
+
+  const handleLaunchModal = useCallback(() => {
+    const dispose = showModal('end-visit-dialog', {
+      closeModal: () => dispose(),
+      patientUuid,
+    });
+  }, [patientUuid]);
+
+  return (
+    activeVisit && (
+      <OverflowMenuItem
+        className={styles.menuitem}
+        itemText={`${t('endActiveVisit', 'End active visit')}`}
+        onClick={handleLaunchModal}
+        closeMenu={closeMenu}
+      />
+    )
+  );
+};
+
+export default StopVisitOverflowMenuItem;

package/src/actions-buttons/stop-visit.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import StopVisitOverflowMenuItem from './stop-visit.component';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showModal, useVisit } from '@openmrs/esm-framework';
+import { mockCurrentVisit } from '__mocks__';
+import { mockPatient } from 'tools';
+
+const mockUseVisit = vi.mocked(useVisit);
+const mockShowModal = vi.mocked(showModal);
+
+describe('StopVisitOverflowMenuItem', () => {
+  it('should be able to stop active visit', async () => {
+    const user = userEvent.setup();
+
+    mockUseVisit.mockReturnValue({ activeVisit: mockCurrentVisit } as ReturnType<typeof useVisit>);
+
+    render(<StopVisitOverflowMenuItem patientUuid={mockPatient.id} />);
+
+    const endVisitButton = screen.getByRole('menuitem', { name: /End active visit/i });
+    expect(endVisitButton).toBeInTheDocument();
+
+    await user.click(endVisitButton);
+    expect(mockShowModal).toHaveBeenCalledTimes(1);
+  });
+});

package/src/clinical-views/encounter-list/encounter-list-tabs.extension.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { EncounterList } from './encounter-list.component';
+import { getMenuItemTabsConfiguration } from '../utils/encounter-list-config-builder';
+import styles from './encounter-list-tabs.scss';
+import { filter } from '../utils/helpers';
+import { type Encounter } from '../types';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib/src';
+
+interface EncounterListTabsComponentProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+/**
+ * This extension is not used in the refapp.
+ * This extension uses the patient chart store and SHOULD only be mounted within the patient chart
+ */
+const EncounterListTabsExtension: React.FC<EncounterListTabsComponentProps> = ({ patientUuid, patient }) => {
+  const { t } = useTranslation();
+  const { visitContext } = usePatientChartStore(patientUuid);
+
+  const config = useConfig();
+  const { tabDefinitions = [] } = config;
+
+  const configConcepts = {
+    trueConceptUuid: config.trueConceptUuid,
+    falseConceptUuid: config.falseConceptUuid,
+    otherConceptUuid: config.otherConceptUuid,
+  };
+
+  const tabsConfig = getMenuItemTabsConfiguration(tabDefinitions, configConcepts, t);
+
+  const tabFilters = useMemo(() => {
+    return tabsConfig.reduce((result, tab) => {
+      if (tab.hasFilter) {
+        result[tab.name] = (encounter: Encounter) => filter(encounter, tab.formList?.[0]?.uuid);
+      }
+      return result;
+    }, {});
+  }, [tabsConfig]);
+
+  const isDead = patient.deceasedBoolean ?? Boolean(patient.deceasedDateTime);
+
+  return (
+    <div className={styles.tabContainer}>
+      <Tabs>
+        <TabList contained>
+          {tabsConfig.map((tab) => (
+            <Tab key={tab.name}>{t(tab.name)}</Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          {tabsConfig.map((tab) => (
+            <TabPanel key={tab.name}>
+              <EncounterList
+                filter={tabFilters[tab.name]}
+                patientUuid={patientUuid}
+                formList={tab.formList}
+                columns={tab.columns}
+                encounterType={tab.encounterType}
+                launchOptions={tab.launchOptions}
+                headerTitle={tab.headerTitle}
+                description={tab.description}
+                visit={visitContext}
+                deathStatus={isDead}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default EncounterListTabsExtension;

package/src/clinical-views/encounter-list/encounter-list-tabs.scss

@@ -0,0 +1,7 @@
+.tabContainer div[role='tabpanel'] {
+  padding: 0 !important;
+}
+
+.tabContainer li button {
+  width: 100% !important;
+}

package/src/clinical-views/encounter-list/encounter-list.component.tsx

@@ -0,0 +1,306 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { Button, Link, OverflowMenu, OverflowMenuItem, DataTableSkeleton, Pagination } from '@carbon/react';
+import {
+  AddIcon,
+  navigate,
+  NumericObservation,
+  showModal,
+  showSnackbar,
+  useConfig,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { EncounterListDataTable } from './table.component';
+import { type LaunchAction, launchEncounterForm } from '../utils/helpers';
+import { deleteEncounter } from '../utils/encounter-list.resource';
+import { useEncounterRows, useFormsJson } from '../hooks';
+import type { TableRow, Encounter, FormattedColumn, Action } from '../types';
+import type { ChartConfig } from '../../config-schema';
+import styles from './encounter-list.scss';
+
+export interface EncounterListProps {
+  patientUuid: string;
+  encounterType: string;
+  columns: Array<FormattedColumn>;
+  headerTitle: string;
+  description: string;
+  formList?: Array<{
+    name?: string;
+    uuid: string;
+    excludedIntents?: Array<string>;
+    fixedIntent?: string;
+    isDefault?: boolean;
+  }>;
+  launchOptions: {
+    hideFormLauncher?: boolean;
+    displayText?: string;
+    workspaceWindowSize?: 'minimized' | 'maximized';
+  };
+  filter?: (encounter: Encounter) => boolean;
+  afterFormSaveAction?: () => void;
+  deathStatus?: boolean;
+  visit: Visit;
+}
+
+export const EncounterList: React.FC<EncounterListProps> = ({
+  patientUuid,
+  encounterType,
+  columns,
+  headerTitle,
+  description,
+  formList,
+  filter,
+  launchOptions,
+  afterFormSaveAction,
+  visit,
+  deathStatus,
+}) => {
+  const { t } = useTranslation();
+  const { requireActiveVisitForEncounterTile } = useConfig<Pick<ChartConfig, 'requireActiveVisitForEncounterTile'>>();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const { formsJson, isLoading: isLoadingFormsJson } = useFormsJson(formList?.[0]?.uuid);
+  const { encounters, total, isLoading, onFormSave, mutate } = useEncounterRows(
+    patientUuid,
+    encounterType,
+    filter,
+    afterFormSaveAction,
+    pageSize,
+    currentPage,
+  );
+
+  const { displayText, hideFormLauncher } = launchOptions;
+
+  const defaultActions = useMemo(
+    () =>
+      [
+        {
+          label: t('viewEncounter', 'View'),
+          form: {
+            name: formsJson?.name,
+          },
+          mode: 'view',
+          intent: '*',
+        },
+        {
+          label: t('editEncounter', 'Edit'),
+          form: {
+            name: formsJson?.name,
+          },
+          mode: 'edit',
+          intent: '*',
+        },
+        {
+          label: t('deleteEncounter', 'Delete'),
+          form: {
+            name: formsJson?.name,
+          },
+          mode: 'delete',
+          intent: '*',
+        },
+      ] as Array<Action>,
+    [formsJson, t],
+  );
+
+  const createLaunchFormAction = useCallback(
+    (encounter: Encounter, mode: LaunchAction) => () => {
+      launchEncounterForm(formsJson, mode, '*', requireActiveVisitForEncounterTile, visit, encounter.uuid);
+    },
+    [formsJson, visit, requireActiveVisitForEncounterTile],
+  );
+
+  const handleDeleteEncounter = useCallback(
+    (encounterUuid: string, encounterTypeName: string) => {
+      const close = showModal('delete-encounter-modal', {
+        close: () => close(),
+        encounterTypeName: encounterTypeName || '',
+        onConfirmation: () => {
+          const abortController = new AbortController();
+          deleteEncounter(encounterUuid, abortController)
+            .then(() => {
+              onFormSave();
+              mutate();
+              showSnackbar({
+                isLowContrast: true,
+                title: t('encounterDeleted', 'Encounter deleted'),
+                subtitle: t('encounterSuccessfullyDeleted', 'The encounter has been deleted successfully'),
+                kind: 'success',
+              });
+            })
+            .catch(() => {
+              showSnackbar({
+                isLowContrast: false,
+                title: t('error', 'Error'),
+                subtitle: t(
+                  'encounterWithError',
+                  'The encounter could not be deleted successfully. If the error persists, please contact your system administrator.',
+                ),
+                kind: 'error',
+              });
+            })
+            .finally(() => {
+              close();
+            });
+        },
+      });
+    },
+    [onFormSave, t, mutate],
+  );
+
+  const tableRows = useMemo(() => {
+    return encounters.map((encounter: Encounter) => {
+      const tableRow: TableRow = { id: encounter.uuid };
+
+      encounter['launchFormActions'] = {
+        editEncounter: createLaunchFormAction(encounter, 'edit'),
+        viewEncounter: createLaunchFormAction(encounter, 'view'),
+      };
+
+      columns.forEach((column) => {
+        let val = column?.getValue(encounter);
+        if (column.link) {
+          val = (
+            <Link
+              onClick={(e) => {
+                e.preventDefault();
+                if (column.link.handleNavigate) {
+                  column.link.handleNavigate(encounter);
+                } else if (column.link?.getUrl) {
+                  navigate({ to: column.link.getUrl(encounter) });
+                }
+              }}
+            >
+              {typeof val === 'string' ? val : ''}
+            </Link>
+          );
+        } else if (typeof val === 'number' && column.concept) {
+          val = (
+            <NumericObservation value={val} conceptUuid={column.concept} patientUuid={patientUuid} variant="cell" />
+          );
+        }
+        tableRow[column.key] = val;
+      });
+
+      const actions =
+        Array.isArray(tableRow.actions) && tableRow.actions.length > 0 ? tableRow.actions : defaultActions;
+
+      tableRow['actions'] = (
+        <OverflowMenu align="left" flipped className={styles.flippedOverflowMenu} data-testid="actions-id">
+          {actions.map((actionItem: Action, index: number) => {
+            const form = formsJson && actionItem?.form?.name ? formsJson.name === actionItem.form.name : null;
+
+            return (
+              form && (
+                <OverflowMenuItem
+                  key={index}
+                  index={index}
+                  itemText={t(actionItem.label)}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    if (actionItem.mode === 'delete') {
+                      handleDeleteEncounter(encounter.uuid, encounter.encounterType.name);
+                    } else {
+                      launchEncounterForm(
+                        formsJson,
+                        actionItem.mode,
+                        actionItem.intent,
+                        requireActiveVisitForEncounterTile,
+                        visit,
+                        encounter.uuid,
+                      );
+                    }
+                  }}
+                />
+              )
+            );
+          })}
+        </OverflowMenu>
+      );
+
+      return tableRow;
+    });
+  }, [
+    encounters,
+    createLaunchFormAction,
+    columns,
+    defaultActions,
+    formsJson,
+    t,
+    handleDeleteEncounter,
+    visit,
+    requireActiveVisitForEncounterTile,
+    patientUuid,
+  ]);
+
+  const headers = useMemo(() => {
+    if (columns) {
+      return columns.map((column) => {
+        return { key: column.key, header: t(column.header) };
+      });
+    }
+    return [];
+  }, [columns, t]);
+
+  const formLauncher = useMemo(() => {
+    if (formsJson) {
+      return (
+        <Button
+          kind="ghost"
+          renderIcon={() => <AddIcon className={styles.headerIcon} />}
+          iconDescription="Add"
+          onClick={(e) => {
+            e.preventDefault();
+            launchEncounterForm(formsJson, 'add', '*', requireActiveVisitForEncounterTile, visit);
+          }}
+        >
+          {t(displayText)}
+        </Button>
+      );
+    }
+    return null;
+  }, [formsJson, displayText, t, visit, requireActiveVisitForEncounterTile]);
+
+  if (isLoading === true || isLoadingFormsJson === true) {
+    return <DataTableSkeleton rowCount={10} />;
+  }
+
+  return (
+    <>
+      {tableRows?.length > 0 || encounters.length > 0 ? (
+        <>
+          <div className={styles.widgetContainer}>
+            <div className={styles.widgetHeaderContainer}>
+              <h4 className={classNames(styles.productiveHeading03)}>{t(headerTitle)}</h4>
+              {!(hideFormLauncher ?? deathStatus) && <div className={styles.toggleButtons}>{formLauncher}</div>}
+            </div>
+            <EncounterListDataTable tableHeaders={headers} tableRows={tableRows} />
+            <Pagination
+              page={currentPage}
+              pageSizes={[10, 20, 30, 40, 50]}
+              onChange={({ page, pageSize }) => {
+                setCurrentPage(page);
+                setPageSize(pageSize);
+              }}
+              pageSize={pageSize}
+              totalItems={total}
+            />
+          </div>
+        </>
+      ) : (
+        <EmptyState
+          displayText={t(description)}
+          headerTitle={t(headerTitle)}
+          launchForm={
+            hideFormLauncher || deathStatus
+              ? null
+              : () => launchEncounterForm(formsJson, 'add', '*', requireActiveVisitForEncounterTile, visit)
+          }
+        />
+      )}
+    </>
+  );
+};

package/src/clinical-views/encounter-list/encounter-list.scss

@@ -0,0 +1,36 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.widgetContainer {
+  background-color: $ui-background;
+  border: 1px solid #e0e0e0;
+  margin-bottom: layout.$spacing-05;
+}
+
+.widgetHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+}
+
+.widgetHeaderContainer > h4:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.headerIcon {
+  fill: var(--cds-link-primary, #0f62fe) !important;
+}
+
+.widgetContainer :global(.cds--data-table) thead th button span {
+  height: unset !important;
+}
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}

package/src/clinical-views/encounter-list/table.component.tsx

@@ -0,0 +1,63 @@
+import React, { isValidElement } from 'react';
+import {
+  DataTable,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { NumericObservation } from '@openmrs/esm-framework';
+import { type TableHeaderType, type TableRow as TableRowType } from '../types';
+import styles from './table.scss';
+
+interface EncounterListDataTableProps {
+  tableHeaders: Array<TableHeaderType>;
+  tableRows: Array<TableRowType>;
+}
+
+export const EncounterListDataTable: React.FC<EncounterListDataTableProps> = ({ tableHeaders, tableRows }) => {
+  return (
+    <TableContainer>
+      <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="md">
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header, index) => (
+                  <TableHeader
+                    key={index}
+                    className={`${styles.productiveHeading01} ${styles.text02}`}
+                    {...getHeaderProps({
+                      header,
+                    })}
+                  >
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.cells.map((cell) => {
+                    const cellContent = cell.value?.content ?? cell.value;
+                    const isNumericObs =
+                      isValidElement(cellContent) && cellContent.type === NumericObservation;
+                    return (
+                      <TableCell key={cell.id} className={isNumericObs ? styles.numericObsCell : undefined}>
+                        {cellContent}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+    </TableContainer>
+  );
+};

package/src/clinical-views/encounter-list/table.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.numericObsCell {
+  padding: 0 !important;
+}