@bathiran212/esm-patient-chart-app 7.0.0

package/src/visit/visits-widget/encounter-observations/index.ts

@@ -0,0 +1,3 @@
+import EncounterObservations from './encounter-observations.component';
+
+export default EncounterObservations;

package/src/visit/visits-widget/encounter-observations/styles.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: layout.$spacing-03;
+  margin-block: layout.$spacing-05;
+  margin-inline: 0 layout.$spacing-05;
+}
+
+.observation > span {
+  align-self: center;
+  justify-self: start;
+}
+
+.parentConcept {
+  font-weight: bold;
+}
+
+.childConcept {
+  padding-inline-start: layout.$spacing-04;
+}

package/src/visit/visits-widget/past-visits-components/delete-encounter.modal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalHeader, ModalBody, ModalFooter } from '@carbon/react';
+import styles from './delete-encounter.scss';
+
+interface DeleteEncounterConfirmationProps {
+  encounterTypeName?: string;
+  close: (event: React.MouseEvent<Element, MouseEvent>) => void;
+  onConfirmation: () => void;
+}
+
+const DeleteEncounterConfirmation: React.FC<DeleteEncounterConfirmationProps> = ({
+  close,
+  onConfirmation,
+  encounterTypeName,
+}) => {
+  const { t } = useTranslation();
+  const handleCancel = (event: React.MouseEvent<Element, MouseEvent>) => close(event);
+  const handleDelete = () => onConfirmation?.();
+
+  return (
+    <>
+      <ModalHeader closeModal={close} className={styles.productiveHeading03}>
+        {t('deleteEncounter', 'Delete Encounter')}?
+      </ModalHeader>
+      <ModalBody>
+        <p className={styles.bodyLong01}>
+          {t(
+            'deleteEncounterConfirmationText',
+            `Are you sure you want to delete this encounter? This action can't be undone.`,
+            { encounter: encounterTypeName },
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button size="lg" kind="secondary" onClick={handleCancel}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button autoFocus kind="danger" onClick={handleDelete} size="lg">
+          {t('delete', 'Delete')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteEncounterConfirmation;

package/src/visit/visits-widget/past-visits-components/delete-encounter.scss

@@ -0,0 +1,9 @@
+@use '@carbon/type';
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}

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

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { userHasAccess, useSession, type EncounterType } from '@openmrs/esm-framework';
+import { type EncountersTableProps, usePaginatedEncounters } from './encounters-table.resource';
+import EncountersTable from './encounters-table.component';
+
+interface AllEncountersTableProps {
+  patientUuid: string;
+}
+
+/**
+ * This component shows a table of all encounters (across all visits) of a patient
+ */
+const AllEncountersTable: React.FC<AllEncountersTableProps> = ({ patientUuid }) => {
+  const [encounterTypeToFilter, setEncounterTypeToFilter] = useState<EncounterType>(null);
+  const [pageSize, setPageSize] = useState(20);
+
+  const {
+    data: paginatedEncounters,
+    currentPage,
+    isLoading,
+    totalCount,
+    goTo,
+    mutate,
+  } = usePaginatedEncounters(patientUuid, encounterTypeToFilter?.uuid, pageSize);
+
+  const session = useSession();
+  const canPrintEncounters = userHasAccess('App: Print encounter forms', session?.user);
+
+  const encountersTableProps: EncountersTableProps = {
+    currentPage,
+    encounterTypeToFilter,
+    goTo,
+    isLoading,
+    pageSize,
+    paginatedEncounters,
+    patientUuid,
+    setEncounterTypeToFilter,
+    setPageSize,
+    showEncounterTypeFilter: true,
+    showVisitType: true,
+    totalCount,
+    isSelectable: false,
+    canPrintEncounters,
+  };
+
+  return <EncountersTable {...encountersTableProps} />;
+};
+
+export default AllEncountersTable;

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import { userHasAccess, useSession, type EncounterType } from '@openmrs/esm-framework';
+import { type EncountersTableProps, useAllEncounters, encounterHasJsonSchemaForm } from './encounters-table.resource';
+import EncountersTable from './encounters-table.component';
+
+interface CompletedFormsTableProps {
+  patientUuid: string;
+  isTabActive?: boolean;
+}
+
+const CompletedFormsTable: React.FC<CompletedFormsTableProps> = ({ patientUuid, isTabActive = false }) => {
+  const [encounterTypeToFilter, setEncounterTypeToFilterState] = useState<EncounterType>(null);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+
+  const setEncounterTypeToFilter = useCallback((encounterType: EncounterType) => {
+    setEncounterTypeToFilterState(encounterType);
+    setCurrentPage(1);
+  }, []);
+
+  const { data: allEncounters, isLoading } = useAllEncounters(
+    isTabActive ? patientUuid : null,
+    encounterTypeToFilter?.uuid,
+  );
+
+  const filteredCompletedForms = useMemo(() => {
+    if (!allEncounters) {
+      return [];
+    }
+    return allEncounters.filter(encounterHasJsonSchemaForm);
+  }, [allEncounters]);
+
+  const paginatedEncounters = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredCompletedForms.slice(startIndex, endIndex);
+  }, [filteredCompletedForms, currentPage, pageSize]);
+
+  const goTo = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
+  const session = useSession();
+  const canPrintEncounters = userHasAccess('App: Print encounter forms', session?.user);
+
+  const encountersTableProps: EncountersTableProps = {
+    currentPage,
+    encounterTypeToFilter,
+    goTo,
+    isLoading,
+    pageSize,
+    paginatedEncounters: paginatedEncounters,
+    patientUuid,
+    setEncounterTypeToFilter,
+    setPageSize,
+    showEncounterTypeFilter: true,
+    showVisitType: true,
+    totalCount: filteredCompletedForms.length,
+    isSelectable: true,
+    canPrintEncounters,
+  };
+
+  return <EncountersTable {...encountersTableProps} />;
+};
+
+export default CompletedFormsTable;

package/src/visit/visits-widget/past-visits-components/encounters-table/completed-forms-table.test.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { screen } from '@testing-library/react';
+import { mockPatientAlice } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import { useAllEncounters } from './encounters-table.resource';
+import CompletedFormsTable from './completed-forms-table.component';
+
+vi.mock('./encounters-table.resource', async () => ({
+  ...((await vi.importActual('./encounters-table.resource')) as object),
+  useAllEncounters: vi.fn(),
+}));
+
+vi.mock('./encounters-table.component', () => ({
+  default: function MockedEncountersTable(props: any) {
+    return (
+      <div
+        data-testid="encounters-table"
+        data-is-selectable={props.isSelectable}
+        data-show-encounter-type-filter={props.showEncounterTypeFilter}
+        data-show-visit-type={props.showVisitType}
+        data-total-count={props.totalCount}
+      >
+        EncountersTable
+      </div>
+    );
+  },
+}));
+
+const mockUseAllEncounters = vi.mocked(useAllEncounters);
+
+describe('CompletedFormsTable', () => {
+  it('renders loading state when encounters are loading', () => {
+    mockUseAllEncounters.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    expect(screen.getByTestId('encounters-table')).toBeInTheDocument();
+  });
+
+  it('fetches encounters for the given patient', () => {
+    mockUseAllEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    expect(mockUseAllEncounters).toHaveBeenCalledWith(mockPatientAlice.uuid, undefined);
+  });
+
+  it('renders the encounters table with row selection enabled', () => {
+    mockUseAllEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    const table = screen.getByTestId('encounters-table');
+    expect(table).toHaveAttribute('data-is-selectable', 'true');
+  });
+
+  it('renders the encounters table with the encounter type filter', () => {
+    mockUseAllEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    const table = screen.getByTestId('encounters-table');
+    expect(table).toHaveAttribute('data-show-encounter-type-filter', 'true');
+  });
+
+  it('renders the encounters table with the visit type column', () => {
+    mockUseAllEncounters.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    const table = screen.getByTestId('encounters-table');
+    expect(table).toHaveAttribute('data-show-visit-type', 'true');
+  });
+
+  it('only includes encounters that have a form with a JSON schema resource', () => {
+    const encounterWithJsonSchema = {
+      uuid: 'enc-with-schema',
+      form: {
+        uuid: 'form-1',
+        display: 'Form With Schema',
+        resources: [{ uuid: 'r1', name: 'JSON schema', valueReference: '{}' }],
+      },
+      encounterDatetime: '2022-01-18T16:25:27.000+0000',
+      encounterType: { uuid: 'type-1', display: 'Admission' },
+      obs: [],
+      visit: null,
+      encounterProviders: [],
+    };
+
+    const encounterWithoutSchema = {
+      uuid: 'enc-without-schema',
+      form: {
+        uuid: 'form-2',
+        display: 'Form Without Schema',
+        resources: [{ uuid: 'r2', name: 'Some other resource', valueReference: '{}' }],
+      },
+      encounterDatetime: '2022-01-17T10:00:00.000+0000',
+      encounterType: { uuid: 'type-1', display: 'Admission' },
+      obs: [],
+      visit: null,
+      encounterProviders: [],
+    };
+
+    const encounterWithNoForm = {
+      uuid: 'enc-no-form',
+      form: null,
+      encounterDatetime: '2022-01-16T10:00:00.000+0000',
+      encounterType: { uuid: 'type-2', display: 'Visit Note' },
+      obs: [],
+      visit: null,
+      encounterProviders: [],
+    };
+
+    mockUseAllEncounters.mockReturnValue({
+      data: [encounterWithJsonSchema, encounterWithoutSchema, encounterWithNoForm],
+      isLoading: false,
+      error: undefined,
+    } as any);
+
+    renderWithSwr(<CompletedFormsTable patientUuid={mockPatientAlice.uuid} isTabActive />);
+
+    const table = screen.getByTestId('encounters-table');
+    expect(table).toHaveAttribute('data-total-count', '1');
+  });
+});