@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/past-visits-components/encounters-table/encounters-table.component.tsx

@@ -0,0 +1,452 @@
+import React, { type ComponentProps, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import {
+  Button,
+  ComboBox,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableSelectAll,
+  TableSelectRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
+} from '@carbon/react';
+import {
+  EditIcon,
+  isDesktop,
+  launchWorkspace2,
+  showModal,
+  showSnackbar,
+  TrashCanIcon,
+  useConfig,
+  useLayoutType,
+  userHasAccess,
+  useSession,
+  type EncounterType,
+  ExtensionSlot,
+  useFeatureFlag,
+  PrinterIcon,
+} from '@openmrs/esm-framework';
+import { invalidateVisitAndEncounterData, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { type ChartConfig } from '../../../../config-schema';
+import { jsonSchemaResourceName } from '../../../../constants';
+import {
+  deleteEncounter,
+  downloadPdf,
+  mapEncounter,
+  useEncounterTypes,
+  type EncountersTableProps,
+  type MappedEncounter,
+} from './encounters-table.resource';
+import EncounterObservations from '../../encounter-observations';
+import styles from './encounters-table.scss';
+
+/**
+ * This components is used by the AllEncountersTable and VisitEncountersTable to display
+ * a table of encounters, with the actual data, pagination and filtering logic passed in
+ * as props.
+ */
+const EncountersTable: React.FC<EncountersTableProps> = ({
+  currentPage,
+  encounterTypeToFilter,
+  goTo,
+  isLoading,
+  pageSize,
+  paginatedEncounters,
+  patientUuid,
+  setEncounterTypeToFilter,
+  setPageSize,
+  showEncounterTypeFilter,
+  showVisitType,
+  totalCount,
+  isSelectable,
+  canPrintEncounters,
+}) => {
+  const { t } = useTranslation();
+  const pageSizes = [10, 20, 30, 40, 50];
+  const desktopLayout = isDesktop(useLayoutType());
+  const session = useSession();
+  const { mutateVisitContext, patient } = usePatientChartStore(patientUuid);
+  const { mutate } = useSWRConfig();
+  const responsiveSize = desktopLayout ? 'sm' : 'lg';
+  const { data: encounterTypes, isLoading: isLoadingEncounterTypes } = useEncounterTypes();
+  const enableEmbeddedFormView = useFeatureFlag('enable-embedded-form-view');
+  const { encounterEditableDuration, encounterEditableDurationOverridePrivileges } = useConfig<ChartConfig>();
+  const [isPrinting, setIsPrinting] = useState(false);
+
+  const paginatedMappedEncounters = useMemo(
+    () => (paginatedEncounters ?? []).map(mapEncounter).filter(Boolean),
+    [paginatedEncounters],
+  );
+
+  const encountersByUuid = useMemo(
+    () => new Map(paginatedMappedEncounters?.map((encounter) => [encounter.id, encounter]) ?? []),
+    [paginatedMappedEncounters],
+  );
+
+  const tableHeaders = [
+    {
+      header: t('dateAndTime', 'Date & time'),
+      key: 'datetime',
+    },
+    ...(showVisitType
+      ? [
+          {
+            header: t('visitType', 'Visit type'),
+            key: 'visitType',
+          },
+        ]
+      : []),
+    {
+      header: t('encounterType', 'Encounter type'),
+      key: 'encounterType',
+    },
+    {
+      header: t('form', 'Form name'),
+      key: 'formName',
+    },
+    {
+      header: t('provider', 'Provider'),
+      key: 'provider',
+    },
+  ];
+
+  const handleDeleteEncounter = useCallback(
+    (encounterUuid: string, encounterTypeName?: string) => {
+      const dispose = showModal('delete-encounter-modal', {
+        close: () => dispose(),
+        encounterTypeName: encounterTypeName || '',
+        onConfirmation: () => {
+          const abortController = new AbortController();
+          deleteEncounter(encounterUuid, abortController)
+            .then(() => {
+              // Update current visit data for critical components
+              mutateVisitContext?.();
+
+              // Also invalidate visit history and encounter tables since the encounter was deleted
+              invalidateVisitAndEncounterData(mutate, patientUuid);
+
+              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',
+              });
+            });
+          dispose();
+        },
+      });
+    },
+    [mutate, mutateVisitContext, patientUuid, t],
+  );
+
+  const handlePrintSelected = (selectedRows: Array<any>) => {
+    const selectedEncounterUuids = selectedRows.map((row) => row.id);
+    setIsPrinting(true);
+    downloadPdf(selectedEncounterUuids, t).finally(() => setIsPrinting(false));
+  };
+
+  if (isLoadingEncounterTypes || isLoading) {
+    return <DataTableSkeleton role="progressbar" zebra />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <DataTable
+        headers={tableHeaders}
+        overflowMenuOnHover={desktopLayout}
+        rows={paginatedMappedEncounters ?? []}
+        size={responsiveSize}
+        useZebraStyles={totalCount > 1}
+      >
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getExpandHeaderProps,
+          getToolbarProps,
+          getTableProps,
+          getSelectionProps,
+          selectedRows,
+        }: {
+          headers: Array<{ header: React.ReactNode; key: string }>;
+          rows: Array<{ id: string; isExpanded: boolean; cells: Array<{ id: string; value: React.ReactNode }> }>;
+          [key: string]: any;
+        }) => {
+          const selectedRowsCount = selectedRows.length;
+          return (
+            <TableContainer className={styles.tableContainer}>
+              {showEncounterTypeFilter && (
+                <TableToolbar {...getToolbarProps()}>
+                  <TableToolbarContent>
+                    <div className={styles.filterContainer}>
+                      <ComboBox
+                        aria-label={t('filterByEncounterType', 'Filter by encounter type')}
+                        className={styles.substitutionType}
+                        id="encounterTypeFilter"
+                        items={encounterTypes}
+                        itemToString={(item: EncounterType) => item?.display}
+                        onChange={({ selectedItem }) => setEncounterTypeToFilter(selectedItem)}
+                        placeholder={t('filterByEncounterType', 'Filter by encounter type')}
+                        selectedItem={encounterTypeToFilter}
+                        size={responsiveSize}
+                      />
+                    </div>
+                    {isSelectable && canPrintEncounters && (
+                      <Button
+                        kind="ghost"
+                        size={responsiveSize}
+                        renderIcon={PrinterIcon}
+                        disabled={selectedRowsCount === 0 || isPrinting}
+                        onClick={() => handlePrintSelected(selectedRows)}
+                      >
+                        {isPrinting ? t('generating', 'Generating...') : t('printSelected', 'Print selected')}
+                      </Button>
+                    )}
+                  </TableToolbarContent>
+                </TableToolbar>
+              )}
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {isSelectable && canPrintEncounters && <TableSelectAll {...getSelectionProps()} />}
+                    {headers.map((header, i) => (
+                      <TableHeader className={styles.tableHeader} key={i} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                    <TableHeader aria-label={t('actions', 'Actions')} />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows?.map((row) => {
+                    const encounter = encountersByUuid.get(row.id);
+
+                    if (!encounter) return null;
+
+                    const isVisitNoteEncounter = (encounter: MappedEncounter) =>
+                      encounter.encounterType === 'Visit Note' && !encounter.form;
+
+                    const supportsEmbeddedFormView = (encounter: MappedEncounter) =>
+                      encounter.form?.uuid &&
+                      encounter.form.resources?.some((resource) => resource.name === jsonSchemaResourceName);
+
+                    const encounterAgeInMinutes =
+                      (Date.now() - new Date(encounter.rawDatetime).getTime()) / (1000 * 60);
+
+                    const canDeleteEncounter =
+                      userHasAccess(encounter.editPrivilege, session?.user) &&
+                      (encounterEditableDuration === 0 ||
+                        (encounterEditableDuration > 0 && encounterAgeInMinutes <= encounterEditableDuration) ||
+                        encounterEditableDurationOverridePrivileges.some((privilege) =>
+                          userHasAccess(privilege, session?.user),
+                        ));
+
+                    const canEditEncounter =
+                      canDeleteEncounter && (encounter.form?.uuid || isVisitNoteEncounter(encounter));
+
+                    const canPrintEncounter = canPrintEncounters && supportsEmbeddedFormView(encounter);
+
+                    return (
+                      <React.Fragment key={encounter.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {isSelectable && canPrintEncounters && <TableSelectRow {...getSelectionProps({ row })} />}
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                          <TableCell className="cds--table-column-menu">
+                            <Layer className={styles.layer}>
+                              {(canDeleteEncounter || canPrintEncounter) && (
+                                <OverflowMenu
+                                  aria-label={t('encounterTableActionsMenu', 'Encounter table actions menu')}
+                                  flipped
+                                  size={responsiveSize}
+                                  align="left"
+                                >
+                                  {canEditEncounter && (
+                                    <OverflowMenuItem
+                                      className={styles.menuItem}
+                                      itemText={t('editThisEncounter', 'Edit this encounter')}
+                                      onClick={() => {
+                                        if (isVisitNoteEncounter(encounter)) {
+                                          launchWorkspace2('visit-notes-form-workspace', {
+                                            encounter,
+                                            formContext: 'editing',
+                                            patientUuid,
+                                          });
+                                        } else {
+                                          launchWorkspace2('patient-form-entry-workspace', {
+                                            form: encounter.form,
+                                            encounterUuid: encounter.id,
+                                          });
+                                        }
+                                      }}
+                                    />
+                                  )}
+                                  {canPrintEncounter && (
+                                    <OverflowMenuItem
+                                      className={styles.menuItem}
+                                      itemText={t('printEncounter', 'Print this encounter')}
+                                      disabled={isPrinting}
+                                      onClick={() => {
+                                        setIsPrinting(true);
+                                        downloadPdf([encounter.id], t).finally(() => setIsPrinting(false));
+                                      }}
+                                    />
+                                  )}
+                                  {canDeleteEncounter && (
+                                    <OverflowMenuItem
+                                      className={styles.menuItem}
+                                      hasDivider
+                                      isDelete
+                                      itemText={t('deleteThisEncounter', 'Delete this encounter')}
+                                      onClick={() => handleDeleteEncounter(encounter.id, encounter.form?.display)}
+                                    />
+                                  )}
+                                </OverflowMenu>
+                              )}
+                            </Layer>
+                          </TableCell>
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedRow}
+                            colSpan={headers.length + (isSelectable ? 3 : 2)}
+                          >
+                            <>
+                              {enableEmbeddedFormView && supportsEmbeddedFormView(encounter) ? (
+                                <ExtensionSlot
+                                  name="form-widget-slot"
+                                  state={{
+                                    additionalProps: { mode: 'embedded-view' },
+                                    visitUuid: encounter.visitUuid ?? null,
+                                    visitTypeUuid: encounter.visitTypeUuid ?? null,
+                                    visitStartDatetime: encounter.visitStartDatetime ?? null,
+                                    visitStopDatetime: encounter.visitStopDatetime ?? null,
+                                    patientUuid: patientUuid,
+                                    patient: patient,
+                                    formUuid: encounter.form.uuid,
+                                    encounterUuid: encounter.id,
+                                    promptBeforeClosing: () => {},
+                                  }}
+                                />
+                              ) : (
+                                <EncounterObservations observations={encounter.obs} />
+                              )}
+                              <>
+                                {canEditEncounter && (
+                                  <Button
+                                    kind="ghost"
+                                    onClick={() => {
+                                      if (isVisitNoteEncounter(encounter)) {
+                                        launchWorkspace2('visit-notes-form-workspace', {
+                                          encounter,
+                                          formContext: 'editing',
+                                          patientUuid,
+                                        });
+                                      } else {
+                                        launchWorkspace2('patient-form-entry-workspace', {
+                                          form: encounter.form,
+                                          encounterUuid: encounter.id,
+                                        });
+                                      }
+                                    }}
+                                    renderIcon={(props: ComponentProps<typeof EditIcon>) => (
+                                      <EditIcon size={16} {...props} />
+                                    )}
+                                  >
+                                    {t('editThisEncounter', 'Edit this encounter')}
+                                  </Button>
+                                )}
+                                {canDeleteEncounter && (
+                                  <Button
+                                    kind="danger--ghost"
+                                    onClick={() => handleDeleteEncounter(encounter.id, encounter.form?.display)}
+                                    renderIcon={(props: ComponentProps<typeof TrashCanIcon>) => (
+                                      <TrashCanIcon size={16} {...props} />
+                                    )}
+                                  >
+                                    {t('deleteThisEncounter', 'Delete this encounter')}
+                                  </Button>
+                                )}
+                              </>
+                            </>
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + (isSelectable ? 3 : 2)}
+                          />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {rows?.length === 0 && (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noEncountersToDisplay', 'No encounters to display')}</p>
+                      {showEncounterTypeFilter && encounterTypeToFilter && (
+                        <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                      )}
+                    </div>
+                  </Tile>
+                </div>
+              )}
+            </TableContainer>
+          );
+        }}
+      </DataTable>
+      {
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', 'Previous page')}
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={totalCount}
+          onChange={({ pageSize: newPageSize, page }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (page !== currentPage) {
+              goTo(page);
+            }
+          }}
+        />
+      }
+    </div>
+  );
+};
+
+export default EncountersTable;

package/src/visit/visits-widget/past-visits-components/encounters-table/encounters-table.resource.test.ts

@@ -0,0 +1,156 @@
+import { renderHook } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useAllEncounters, encounterHasJsonSchemaForm } from './encounters-table.resource';
+
+const mockUseOpenmrsFetchAll = vi.fn();
+
+vi.mock('@openmrs/esm-framework', () => ({
+  makeUrl: vi.fn((path: string) => `http://localhost/${path}`),
+  restBaseUrl: '/ws/rest/v1',
+  useOpenmrsFetchAll: (...args: unknown[]) => mockUseOpenmrsFetchAll(...args),
+}));
+
+describe('encounterHasJsonSchemaForm', () => {
+  it('returns true when encounter has form with JSON schema resource', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: {
+        uuid: 'form-1',
+        display: 'Test Form',
+        resources: [{ name: 'JSON schema', valueReference: '{}' }],
+      },
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(true);
+  });
+
+  it('returns false when encounter has no form', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: null,
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(false);
+  });
+
+  it('returns false when form is undefined', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(false);
+  });
+
+  it('returns false when form has no resources array', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: {
+        uuid: 'form-1',
+        display: 'Test Form',
+      },
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(false);
+  });
+
+  it('returns false when form has empty resources array', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: {
+        uuid: 'form-1',
+        display: 'Test Form',
+        resources: [],
+      },
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(false);
+  });
+
+  it('returns false when resources do not contain JSON schema', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: {
+        uuid: 'form-1',
+        display: 'Test Form',
+        resources: [{ name: 'Some other resource', valueReference: '{}' }],
+      },
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(false);
+  });
+
+  it('returns true when resources contain multiple items including JSON schema', () => {
+    const encounter = {
+      uuid: 'encounter-1',
+      form: {
+        uuid: 'form-1',
+        display: 'Test Form',
+        resources: [
+          { name: 'XML template', valueReference: '<xml/>' },
+          { name: 'JSON schema', valueReference: '{}' },
+          { name: 'Metadata', valueReference: 'meta' },
+        ],
+      },
+    } as any;
+
+    expect(encounterHasJsonSchemaForm(encounter)).toBe(true);
+  });
+});
+
+describe('useAllEncounters', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls useOpenmrsFetchAll with correct URL when patientUuid is provided', () => {
+    const mockData = [
+      { uuid: 'enc-1', display: 'Encounter 1' },
+      { uuid: 'enc-2', display: 'Encounter 2' },
+    ];
+
+    mockUseOpenmrsFetchAll.mockReturnValue({
+      data: mockData,
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderHook(() => useAllEncounters('patient-123'));
+
+    expect(mockUseOpenmrsFetchAll).toHaveBeenCalled();
+    const callArg = mockUseOpenmrsFetchAll.mock.calls[0][0];
+    expect(callArg).toContain('patient=patient-123');
+    expect(callArg).toContain('order=desc');
+  });
+
+  it('passes encounterType filter to the URL when provided', () => {
+    mockUseOpenmrsFetchAll.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderHook(() => useAllEncounters('patient-123', 'encounter-type-uuid'));
+
+    expect(mockUseOpenmrsFetchAll).toHaveBeenCalled();
+    const callArg = mockUseOpenmrsFetchAll.mock.calls[0][0];
+    expect(callArg).toContain('encounterType=encounter-type-uuid');
+  });
+
+  it('includes custom representation in the URL', () => {
+    mockUseOpenmrsFetchAll.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderHook(() => useAllEncounters('patient-123'));
+
+    expect(mockUseOpenmrsFetchAll).toHaveBeenCalled();
+    const callArg = mockUseOpenmrsFetchAll.mock.calls[0][0];
+    expect(callArg).toContain('v=custom');
+    expect(callArg).toContain('encounterDatetime');
+    expect(callArg).toContain('form');
+    expect(callArg).toContain('obs');
+    expect(callArg).toContain('encounterProviders');
+  });
+});