@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visit-form/visit-form.workspace.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useSWRConfig } from 'swr';
+import { useVisit, type Visit } from '@openmrs/esm-framework';
+import {
+  invalidateVisitByUuid,
+  type PatientWorkspace2DefinitionProps,
+  usePatientChartStore,
+} from '@openmrs/esm-patient-common-lib';
+import ExportedVisitForm from './exported-visit-form.workspace';
+
+export interface VisitFormProps {
+  /**
+   * A unique string identifying where the visit form is opened from.
+   * This string is passed into various extensions within the form to
+   * affect how / if they should be rendered.
+   */
+  openedFrom: string;
+  showPatientHeader?: boolean;
+}
+
+/**
+ * This form is used for starting a new visit and for editing
+ * an existing visit
+ *
+ * This workspace must only be used within the patient chart.
+ * @see exported-visit-form.workspace.tsx
+ */
+const VisitForm: React.FC<PatientWorkspace2DefinitionProps<VisitFormProps, {}>> = ({
+  workspaceProps: { openedFrom, showPatientHeader = false },
+  groupProps: { patient, patientUuid, visitContext },
+  ...rest
+}) => {
+  const { mutate: mutateActiveVisit } = useVisit(patientUuid);
+  const { mutate: globalMutate } = useSWRConfig();
+  const { setVisitContext } = usePatientChartStore(patientUuid);
+
+  const onVisitStarted = (visit: Visit) => {
+    // For visit creation, we need to update:
+    // 1. Current visit data (for critical components like visit summary, action buttons)
+    // 2. Visit history table (for the paginated visit list)
+    const mutateSavedOrUpdatedVisit = () => invalidateVisitByUuid(globalMutate, visit.uuid);
+    mutateActiveVisit();
+    setVisitContext?.(visit, mutateSavedOrUpdatedVisit);
+  };
+  return (
+    <ExportedVisitForm
+      {...rest}
+      workspaceProps={{
+        openedFrom,
+        showPatientHeader,
+        onVisitStarted,
+        patient,
+        patientUuid,
+        visitContext,
+      }}
+      groupProps={{}}
+    />
+  );
+};
+
+export default VisitForm;

package/src/visit/visit-form/visit-type.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { vi, describe, it, expect, test } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { useVisitTypes } from '@openmrs/esm-framework';
+import { screen, render } from '@testing-library/react';
+import { mockVisitTypes } from '__mocks__';
+import BaseVisitType from './base-visit-type.component';
+
+const mockUseVisitTypes = vi.mocked(useVisitTypes);
+
+vi.mock('lodash-es/debounce', () => vi.fn((fn) => fn));
+vi.mock('react-hook-form', async () => ({
+  ...((await vi.importActual('react-hook-form')) as object),
+  useFormContext: vi.fn().mockImplementation(() => ({
+    handleSubmit: () => vi.fn(),
+    control: {
+      register: vi.fn(),
+      unregister: vi.fn(),
+      getFieldState: vi.fn(),
+      _names: {
+        array: new Set('test'),
+        mount: new Set('test'),
+        unMount: new Set('test'),
+        watch: new Set('test'),
+        focus: 'test',
+        watchAll: false,
+      },
+      _subjects: {
+        watch: vi.fn(),
+        array: vi.fn(),
+        state: vi.fn(),
+      },
+      _getWatch: vi.fn(),
+      _formValues: [],
+      _defaultValues: [],
+    },
+    getValues: () => {
+      return [];
+    },
+    setValue: () => vi.fn(),
+    formState: () => vi.fn(),
+    watch: () => vi.fn(),
+  })),
+  Controller: ({ render }) =>
+    render({
+      field: {
+        onChange: vi.fn(),
+        onBlur: vi.fn(),
+        value: '',
+        ref: vi.fn(),
+      },
+      formState: {
+        isSubmitted: false,
+      },
+      fieldState: {
+        isTouched: false,
+      },
+    }),
+  useSubscribe: () => ({
+    r: { current: { subject: { subscribe: () => vi.fn() } } },
+  }),
+}));
+
+describe('VisitTypeOverview', () => {
+  const renderVisitTypeOverview = () => {
+    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
+
+    render(<BaseVisitType visitTypes={mockVisitTypes} />);
+  };
+
+  it('should be able to search for a visit type', async () => {
+    const user = userEvent.setup();
+
+    renderVisitTypeOverview();
+
+    const hivVisit = screen.getByRole('radio', { name: /HIV Return Visit/i });
+    const outpatientVisit = screen.getByRole('radio', { name: /Outpatient Visit/i });
+
+    expect(outpatientVisit).toBeInTheDocument();
+    expect(hivVisit).toBeInTheDocument();
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'HIV');
+
+    expect(outpatientVisit).toBeEmptyDOMElement();
+    expect(hivVisit).toBeInTheDocument();
+  });
+});

package/src/visit/visit-history-table/visit-actions-cell.component.tsx

@@ -0,0 +1,20 @@
+import { ExtensionSlot, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './visit-actions-cell.scss';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitActionsCell: React.FC<Props> = ({ visit, patient }) => {
+  return (
+    <ExtensionSlot
+      name="visit-detail-overview-actions"
+      className={styles.visitActions}
+      state={{ patientUuid: visit.patient.uuid, patient, visit, compact: true }}
+    />
+  );
+};
+
+export default VisitActionsCell;

package/src/visit/visit-history-table/visit-actions-cell.scss

@@ -0,0 +1,4 @@
+.visitActions {
+  display: flex;
+  align-items: center;
+}

package/src/visit/visit-history-table/visit-date-cell.component.tsx

@@ -0,0 +1,19 @@
+import { formatDate, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitDateCell: React.FC<Props> = ({ visit }) => {
+  const { t } = useTranslation();
+  const { startDatetime, stopDatetime } = visit;
+  const fromDate = formatDate(new Date(startDatetime));
+  const toDate = stopDatetime ? formatDate(new Date(stopDatetime)) : null;
+
+  return <>{toDate ? t('fromDateToDate', '{{fromDate}} - {{toDate}}', { fromDate, toDate }) : fromDate}</>;
+};
+
+export default VisitDateCell;

package/src/visit/visit-history-table/visit-diagnoses-cell.component.tsx

@@ -0,0 +1,18 @@
+import { DiagnosisTags, type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitDiagnosisCell: React.FC<Props> = ({ visit }) => {
+  const diagnoses = visit.encounters
+    .flatMap((encounter) => encounter.diagnoses)
+    .filter((diagnosis) => !diagnosis.voided)
+    .sort((a, b) => a.rank - b.rank);
+
+  return <DiagnosisTags diagnoses={diagnoses} />;
+};
+
+export default VisitDiagnosisCell;

package/src/visit/visit-history-table/visit-history-table.component.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { ErrorState, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { EmptyState } from '@openmrs/esm-patient-common-lib';
+import { usePaginatedVisits } from '../visits-widget/visit.resource';
+import VisitActionsCell from './visit-actions-cell.component';
+import VisitDateCell from './visit-date-cell.component';
+import VisitDiagnosisCell from './visit-diagnoses-cell.component';
+import VisitSummary from '../visits-widget/past-visits-components/visit-summary.component';
+import VisitTypeCell from './visit-type-cell.component';
+import styles from './visit-history-table.scss';
+
+interface VisitHistoryTableProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+}
+
+/**
+ * This show a list of visit histories in the visit tab in patient chart
+ */
+const VisitHistoryTable: React.FC<VisitHistoryTableProps> = ({ patientUuid, patient }) => {
+  const defaultPageSize = 10;
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const { data: visits, currentPage, error, isLoading, totalCount, goTo } = usePaginatedVisits(patientUuid, pageSize);
+  const { t } = useTranslation();
+  const desktopLayout = isDesktop(useLayoutType());
+
+  // TODO: make this configurable
+  const columns = [
+    { key: 'visitDate', header: t('date', 'Date'), CellComponent: VisitDateCell },
+    { key: 'visitType', header: t('visitType', 'Visit type'), CellComponent: VisitTypeCell },
+    { key: 'diagnoses', header: t('diagnoses', 'Diagnoses'), CellComponent: VisitDiagnosisCell },
+    { key: 'actions', header: '', CellComponent: VisitActionsCell },
+  ];
+
+  const layout = useLayoutType();
+
+  const rowData = visits?.map((visit) => {
+    const row: Record<string, JSX.Element | string> = { id: visit.uuid };
+    for (const { key, CellComponent } of columns) {
+      row[key] = <CellComponent key={key} visit={visit} patient={patient} />;
+    }
+    return row;
+  });
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" zebra />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('pastVisits', 'Past visits')} />;
+  }
+
+  if (visits.length === 0) {
+    return (
+      <div className={styles.emptyStateContainer}>
+        <EmptyState headerTitle={t('pastVisits', 'Past visits')} displayText={t('visits', 'visits')} />
+      </div>
+    );
+  }
+  return (
+    <div className={styles.container}>
+      {/* @ts-ignore */}
+      <DataTable headers={columns} rows={rowData} size={desktopLayout ? 'sm' : 'lg'} useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getExpandHeaderProps, getRowProps, getExpandedRowProps }) => (
+          <>
+            <TableContainer>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {headers.map((header) => (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          className: header.key === 'actions' ? styles.actionsColumn : '',
+                        })}
+                      >
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, i) => {
+                    const visit = visits[i];
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => {
+                            return <TableCell key={cell.id}>{cell?.value}</TableCell>;
+                          })}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow {...getExpandedRowProps({ row })} colSpan={headers.length + 2}>
+                            <VisitSummary visit={visit} patientUuid={patientUuid} />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <Pagination
+              forwardText={t('nextPage', 'Next page')}
+              backwardText={t('previousPage', 'Previous page')}
+              page={currentPage}
+              pageSize={pageSize}
+              pageSizes={pageSizes}
+              totalItems={totalCount}
+              onChange={({ pageSize, page }) => {
+                setPageSize(pageSize);
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default VisitHistoryTable;

package/src/visit/visit-history-table/visit-history-table.scss

@@ -0,0 +1,25 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  margin: layout.$spacing-05 0;
+  border: 1px solid $ui-03;
+
+  // fixes padding of encounters table within the expanded visit table row
+  :global(tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td) {
+    padding-inline-start: layout.$spacing-05;
+  }
+}
+
+.emptyStateContainer {
+  text-align: center;
+  margin: layout.$spacing-05 0;
+}
+
+.actionsColumn {
+  width: 1% !important; // fixes the width of action column to fit content
+}
+
+.hiddenRow {
+  display: none;
+}

package/src/visit/visit-history-table/visit-type-cell.component.tsx

@@ -0,0 +1,15 @@
+import { type Visit } from '@openmrs/esm-framework';
+import React from 'react';
+
+interface Props {
+  visit: Visit;
+  patient: fhir.Patient;
+}
+
+const VisitTypeCell: React.FC<Props> = ({ visit }) => {
+  const { visitType } = visit;
+
+  return <>{visitType.display}</>;
+};
+
+export default VisitTypeCell;

package/src/visit/visit-prompt/delete-visit-dialog.modal.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalHeader, ModalBody, ModalFooter, InlineLoading } from '@carbon/react';
+import { type Visit } from '@openmrs/esm-framework';
+import { useDeleteVisit } from '../hooks/useDeleteVisit';
+import styles from './start-visit-dialog.scss';
+
+interface DeleteVisitDialogProps {
+  closeModal: () => void;
+  visit: Visit;
+}
+
+const DeleteVisitDialog: React.FC<DeleteVisitDialogProps> = ({ closeModal, visit }) => {
+  const { t } = useTranslation();
+  const { isDeletingVisit, initiateDeletingVisit } = useDeleteVisit(visit, closeModal);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('deleteVisitDialogHeader', 'Are you sure you want to delete this visit?')}
+      />
+      <ModalBody>
+        <p className={styles.body}>
+          {t('confirmDeleteVisitText', 'Deleting this {{visit}} will delete its associated encounters.', {
+            visit: visit?.visitType?.display ?? t('visit', 'Visit'),
+          })}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={initiateDeletingVisit} disabled={isDeletingVisit}>
+          {!isDeletingVisit ? (
+            t('deleteVisit', 'Delete visit')
+          ) : (
+            <InlineLoading description={t('deletingVisit', 'Deleting visit')} />
+          )}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default DeleteVisitDialog;

package/src/visit/visit-prompt/delete-visit-dialog.test.tsx

@@ -0,0 +1,79 @@
+import { openmrsFetch, showSnackbar, type FetchResponse } from '@openmrs/esm-framework';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockCurrentVisit } from '__mocks__';
+import React from 'react';
+
+import DeleteVisitDialog from './delete-visit-dialog.modal';
+
+const mockCloseModal = vi.fn();
+const mockOpenmrsFetch = vi.mocked(openmrsFetch);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+
+describe('Delete visit', () => {
+  it('voids the visit and voids its associated encounters', async () => {
+    const user = userEvent.setup();
+
+    const response: Partial<FetchResponse> = {
+      statusText: 'ok',
+      status: 200,
+    };
+
+    mockOpenmrsFetch.mockResolvedValue(response as FetchResponse);
+
+    render(<DeleteVisitDialog visit={mockCurrentVisit} closeModal={mockCloseModal} />);
+
+    const cancelButton = screen.getByRole('button', { name: /^cancel$/i });
+    const deleteVisitButton = screen.getByRole('button', { name: /delete visit$/i });
+    const closeModalButton = screen.getByRole('button', { name: /close/i });
+
+    expect(cancelButton).toBeInTheDocument();
+    expect(deleteVisitButton).toBeInTheDocument();
+    expect(closeModalButton).toBeInTheDocument();
+
+    expect(screen.getByRole('heading', { name: /Are you sure you want to delete this visit?/i })).toBeInTheDocument();
+    expect(screen.getByText(/Deleting this Facility Visit will delete its associated encounters/i)).toBeInTheDocument();
+
+    await user.click(deleteVisitButton);
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`/ws/rest/v1/visit/${mockCurrentVisit.uuid}`, {
+      method: 'DELETE',
+    });
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'success',
+        title: 'Facility Visit deleted',
+        subtitle: 'Facility Visit deleted successfully',
+      }),
+    );
+  });
+
+  it('displays an error notification if there was problem with deleting a visit', async () => {
+    const user = userEvent.setup();
+
+    mockOpenmrsFetch.mockRejectedValueOnce({ message: 'Internal server error', status: 500 });
+
+    render(<DeleteVisitDialog visit={mockCurrentVisit} closeModal={mockCloseModal} />);
+
+    const cancelButton = screen.getByRole('button', { name: /^cancel$/i });
+    const deleteVisitButton = screen.getByRole('button', { name: /delete visit$/i });
+    const closeModalButton = screen.getByRole('button', { name: /close/i });
+
+    expect(cancelButton).toBeInTheDocument();
+    expect(deleteVisitButton).toBeInTheDocument();
+    expect(closeModalButton).toBeInTheDocument();
+    expect(screen.getByText(/Deleting this Facility Visit will delete its associated encounters/i)).toBeInTheDocument();
+
+    await user.click(deleteVisitButton);
+
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(`/ws/rest/v1/visit/${mockCurrentVisit.uuid}`, {
+      method: 'DELETE',
+    });
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      subtitle: 'An error occurred when deleting visit',
+      kind: 'error',
+      title: 'Error deleting visit',
+    });
+  });
+});

package/src/visit/visit-prompt/end-visit-dialog.modal.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar, updateVisit, useVisit } from '@openmrs/esm-framework';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import styles from './end-visit-dialog.scss';
+
+interface EndVisitDialogProps {
+  patientUuid: string;
+  closeModal: () => void;
+}
+
+/**
+ * This modal shows up when user clicks on the "End visit" button in the action menu within the
+ * patient banner. It should only show when the patient has an active visit. See stop-visit.component.tsx
+ * for the button.
+ *
+ * This dialog uses the patient chart store and SHOULD only be mounted within the patient chart
+ */
+const EndVisitDialog: React.FC<EndVisitDialogProps> = ({ patientUuid, closeModal }) => {
+  const { t } = useTranslation();
+  const { activeVisit, mutate } = useVisit(patientUuid);
+  const { visitContext, setVisitContext } = usePatientChartStore(patientUuid);
+
+  const handleEndVisit = () => {
+    if (activeVisit) {
+      const endVisitPayload = {
+        stopDatetime: new Date(),
+      };
+
+      const abortController = new AbortController();
+
+      updateVisit(activeVisit.uuid, endVisitPayload, abortController)
+        .then((response) => {
+          mutate();
+          window.dispatchEvent(new CustomEvent('queue-entry-updated'));
+          closeModal();
+          if (visitContext?.uuid == activeVisit.uuid) {
+            setVisitContext(null, null);
+          }
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('visitEndSuccessfully', `${response?.data?.visitType?.display} ended successfully`),
+            title: t('visitEnded', 'Visit ended'),
+          });
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t('errorEndingVisit', 'Error ending visit'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        });
+    }
+  };
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        title={t('endActiveVisitConfirmation', 'Are you sure you want to end this active visit?')}
+      />
+      <ModalBody>
+        <p className={styles.bodyShort02}>
+          {t('youCanAddAdditionalEncounters', 'You can add additional encounters to this visit in the visit summary.')}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleEndVisit}>
+          {t('endVisit_title', 'End Visit')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default EndVisitDialog;

package/src/visit/visit-prompt/end-visit-dialog.scss

@@ -0,0 +1,7 @@
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+  color: $ui-05;
+}