@openmrs/esm-appointments-app 4.3.1-pre.1421 → 4.3.1-pre.1443

package/dist/openmrs-esm-appointments-app.js.buildmanifest.json

@@ -2,54 +2,54 @@
   "chunks": [
     {
       "rendered": true,
-      "initial": true,
-      "entry": true,
+      "initial": false,
+      "entry": false,
       "recorded": false,
-      "size": 191064,
+      "size": 1302878,
       "sizes": {
-        "consume-shared": 126,
-        "javascript": 171154,
-        "share-init": 168,
-        "runtime": 19616
+        "javascript": 1302878
       },
-      "names": [
-        "main"
-      ],
+      "names": [],
       "idHints": [],
       "runtime": [
+        "@openmrs/esm-appointments-app",
         "main"
       ],
       "files": [
-        "main.js"
+        "75.js"
       ],
       "auxiliaryFiles": [
-        "main.js.map"
+        "75.js.map"
       ],
-      "hash": "258020d797f44832",
+      "hash": "98b7523ed9fbb92a",
       "childrenByOrder": {}
     },
     {
       "rendered": true,
-      "initial": false,
-      "entry": false,
+      "initial": true,
+      "entry": true,
       "recorded": false,
-      "size": 1298484,
+      "size": 191064,
       "sizes": {
-        "javascript": 1298484
+        "consume-shared": 126,
+        "javascript": 171154,
+        "share-init": 168,
+        "runtime": 19616
       },
-      "names": [],
+      "names": [
+        "main"
+      ],
       "idHints": [],
       "runtime": [
-        "@openmrs/esm-appointments-app",
         "main"
       ],
       "files": [
-        "210.js"
+        "main.js"
       ],
       "auxiliaryFiles": [
-        "210.js.map"
+        "main.js.map"
       ],
-      "hash": "5af8a7780873d3de",
+      "hash": "e97c29db522046cb",
       "childrenByOrder": {}
     },
     {
@@ -140,7 +140,7 @@
       "auxiliaryFiles": [
         "437.js.map"
       ],
-      "hash": "b20adca9f99373e4",
+      "hash": "ae2d6b4900867a99",
       "childrenByOrder": {}
     },
     {
@@ -226,9 +226,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 4645,
+      "size": 4599,
       "sizes": {
-        "javascript": 4645
+        "javascript": 4599
       },
       "names": [],
       "idHints": [],
@@ -240,7 +240,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "2a8b485375d1ba38",
+      "hash": "befb8842eb6eb2f7",
       "childrenByOrder": {}
     },
     {
@@ -498,9 +498,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 110385,
+      "size": 110491,
       "sizes": {
-        "javascript": 110385
+        "javascript": 110491
       },
       "names": [],
       "idHints": [],
@@ -514,7 +514,7 @@
       "auxiliaryFiles": [
         "990.js.map"
       ],
-      "hash": "9e15aed25c200787",
+      "hash": "ad89890929bec485",
       "childrenByOrder": {}
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-appointments-app",
-  "version": "4.3.1-pre.1421",
+  "version": "4.3.1-pre.1443",
   "description": "Appointments front-end module for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-appointments-app.js",
   "main": "src/index.ts",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "gitHead": "fc7b491b60edfe70bdcacba191544199bded43de"
+  "gitHead": "3501bdde5d0462c3dfd3731c03f3e994d199b695"
 }

package/src/appointments/common-components/{appointments-base-table.component.tsx → appointments-table.component.tsx}

@@ -30,9 +30,9 @@ import PatientSearch from '../../patient-search/patient-search.component';
 import { MappedAppointment } from '../../types';
 import { getPageSizes, useSearchResults } from '../utils';
 import AppointmentActions from './appointments-actions.component';
-import styles from './appointments-base-table.scss';
+import styles from './appointments-table.scss';
 
-interface AppointmentsBaseTableProps {
+interface AppointmentsTableProps {
   appointments: Array<MappedAppointment>;
   isLoading: boolean;
   tableHeading: string;
@@ -41,7 +41,7 @@ interface AppointmentsBaseTableProps {
   scheduleType?: string;
 }
 
-const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
+const AppointmentsTable: React.FC<AppointmentsTableProps> = ({
   appointments,
   isLoading,
   tableHeading,
@@ -63,14 +63,6 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
       header: t('identifier', 'Identifier'),
       key: 'identifier',
     },
-    {
-      header: t('nextAppointmentDate', 'Next appointment date'),
-      key: 'nextAppointmentDate',
-    },
-    {
-      header: t('dateTime', 'Date & Time'),
-      key: 'dateTime',
-    },
     {
       header: t('serviceType', 'Service Type'),
       key: 'serviceType',
@@ -115,7 +107,7 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
 
   return (
     <>
-      <DataTable rows={rowData} headers={headerData} isSortable>
+      <DataTable rows={rowData} headers={headerData} isSortable useZebraStyles>
         {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getToolbarProps, getTableContainerProps }) => (
           <TableContainer
             title={`${startCase(tableHeading)} ${t('appointments', 'appointment')}`}
@@ -158,10 +150,14 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
                         <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                       ))}
                     </TableExpandRow>
-                    {row.isExpanded && (
-                      <TableExpandedRow colSpan={headers.length + 1}>
-                        <AppointmentDetails appointment={appointments[row.id]} />
-                      </TableExpandedRow>
+                    {row.isExpanded ? (
+                      <TableRow className={styles.expandedActiveVisitRow}>
+                        <th colSpan={headers.length + 2}>
+                          <AppointmentDetails appointment={appointments[row.id]} />
+                        </th>
+                      </TableRow>
+                    ) : (
+                      <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
                     )}
                   </React.Fragment>
                 ))}
@@ -188,4 +184,4 @@ const AppointmentsBaseTable: React.FC<AppointmentsBaseTableProps> = ({
   );
 };
 
-export default AppointmentsBaseTable;
+export default AppointmentsTable;

package/src/appointments/common-components/appointments-table.scss

@@ -0,0 +1,18 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.hiddenRow {
+  display: none;
+}

package/src/appointments/common-components/appointments-table.test.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import AppointmentsTable from './appointments-table.component';
+import { MappedAppointment } from '../../types';
+import { usePagination } from '@openmrs/esm-framework';
+import { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import { launchOverlay } from '../../hooks/useOverlay';
+import PatientSearch from '../../patient-search/patient-search.component';
+
+// Define mock appointments data for testing purposes
+const appointments: Array<MappedAppointment> = [
+  {
+    patientUuid: '1234',
+    name: 'John Smith',
+    identifier: '12345',
+    dateTime: '2023-04-13T12:00:00.000Z',
+    serviceType: 'Service',
+    provider: 'Dr. Jane Doe',
+    id: '1234',
+    age: '50',
+    gender: 'F',
+    providers: [],
+    appointmentKind: 'Scheduled',
+    appointmentNumber: '1234',
+    location: 'location',
+    phoneNumber: '1234567890',
+    status: 'status',
+    comments: 'some comments',
+    dob: '2020-04-13T12:00:00.000Z',
+    serviceUuid: '1234',
+  },
+];
+
+const mockUsePagination = usePagination as jest.Mock;
+const mockGoToPage = jest.fn();
+const mockDownloadAppointmentsAsExcel = downloadAppointmentsAsExcel as jest.Mock;
+const mockLaunchOverlay = launchOverlay as jest.Mock;
+
+jest.mock('../../helpers/excel');
+jest.mock('../../hooks/useOverlay');
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+  };
+});
+
+describe('AppointmentsBaseTable', () => {
+  const props = {
+    appointments: [],
+    isLoading: false,
+    tableHeading: 'Scheduled',
+    visits: [],
+    scheduleType: 'Scheduled',
+  };
+
+  it('should render empty state if appointments are not provided', () => {
+    render(<AppointmentsTable {...props} />);
+    expect(screen.getByText(/Scheduled appointments/)).toBeInTheDocument();
+    const emptyScreenText = screen.getByText(/There are no scheduled appointments to display/);
+    expect(emptyScreenText).toBeInTheDocument();
+
+    const launchAppointmentsForm = screen.getByRole('button', { name: /Create appointment/ });
+    fireEvent.click(launchAppointmentsForm);
+    expect(mockLaunchOverlay).toHaveBeenCalledWith('Search', <PatientSearch />);
+  });
+
+  it('should render loading state when loading data', () => {
+    render(<AppointmentsTable {...props} isLoading={true} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render table with headers and rows if appointments are provided', async () => {
+    mockUsePagination.mockReturnValue({
+      results: appointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+    waitFor(() => {
+      expect(screen.getByText('Patient name')).toBeInTheDocument();
+      expect(screen.getByText('Identifier')).toBeInTheDocument();
+      expect(screen.getByText('Service Type')).toBeInTheDocument();
+      expect(screen.getByText('Actions')).toBeInTheDocument();
+      expect(screen.getByText('John Smith')).toBeInTheDocument();
+      expect(screen.getByText('12345')).toBeInTheDocument();
+      expect(screen.getByText('Service')).toBeInTheDocument();
+    });
+  });
+
+  it('should update search string when search input is changed', () => {
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'John' } });
+    expect(searchInput).toHaveValue('John');
+  });
+
+  it("should contain the title 'Scheduled appointments' and Total count", () => {
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+    expect(screen.getByText(/Scheduled appointment/)).toBeInTheDocument();
+    expect(screen.getByText(/Total 1/)).toBeInTheDocument();
+  });
+
+  it('should execute the download function when download button is clicked', () => {
+    render(<AppointmentsTable {...props} appointments={appointments} />);
+    const downloadButton = screen.getByRole('button', { name: /Download/ });
+    fireEvent.click(downloadButton);
+    expect(downloadButton).toBeInTheDocument();
+    expect(mockDownloadAppointmentsAsExcel).toHaveBeenCalledWith(appointments, expect.anything());
+  });
+
+  it('should have pagination when there are more than 25 appointments', () => {
+    const mockAppointments = Array.from({ length: 100 }, (_, i) => ({
+      patientUuid: `${i}`,
+      name: `Patient ${i}`,
+      identifier: `${i}${i}${i}${i}${i}`,
+      dateTime: new Date().toISOString(),
+      serviceType: 'Service',
+      provider: `Dr. Provider ${i}`,
+      id: `${i}`,
+      age: `${i + 20}`,
+      gender: i % 2 === 0 ? 'M' : 'F',
+      providers: [],
+      appointmentKind: 'Scheduled',
+      appointmentNumber: `${i}${i}${i}${i}${i}`,
+      location: 'Location',
+      phoneNumber: '1234567890',
+      status: 'Status',
+      comments: 'Some comments',
+      dob: new Date(`${i + 1950}-01-01T00:00:00.000Z`).toISOString(),
+      serviceUuid: `${i}${i}${i}${i}${i}`,
+    }));
+    mockUsePagination.mockReturnValue({
+      results: appointments.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    render(<AppointmentsTable {...props} appointments={mockAppointments} />);
+    expect(screen.getByText(/1–25 of 100 items/)).toBeInTheDocument();
+    const nextPageButton = screen.getByRole('button', { name: /Next page/ });
+    const previousPageButton = screen.getByRole('button', { name: /Previous page/ });
+
+    // Clicking the next page button should call the goTo function with the next page number
+    fireEvent.click(nextPageButton);
+    expect(mockGoToPage).toHaveBeenCalledWith(2);
+    expect(screen.getByText(/26–50 of 100 items/)).toBeInTheDocument();
+
+    // Clicking the previous page button should call the goTo function with the previous page number
+    fireEvent.click(previousPageButton);
+    expect(mockGoToPage).toHaveBeenCalledWith(1);
+
+    expect(screen.getByText(/1–25 of 100 items/)).toBeInTheDocument();
+  });
+});

package/src/appointments/details/appointment-details.scss

@@ -6,6 +6,7 @@
   min-height: fit-content;
   background-color: colors.$white;
   padding: spacing.$spacing-05;
+  margin: spacing.$spacing-03;
 }
 
 .title {

package/src/appointments/details/appointment-details.test.tsx

@@ -1,22 +1,62 @@
 import React from 'react';
-import { screen, render } from '@testing-library/react';
-import { mockMappedAppointmentsData } from '../../../../../__mocks__/appointments.mock';
+import { render } from '@testing-library/react';
 import AppointmentDetails from './appointment-details.component';
 
-describe('AppointmentTablePatientDetails ', () => {
-  it('renders a tabular view of the patient details', () => {
-    renderPatientDetailsExpansionSlot();
+const appointment = {
+  patientUuid: '12345',
+  name: 'John Doe',
+  identifier: '1234567890',
+  dateTime: new Date().toISOString(),
+  serviceType: 'Service',
+  provider: 'Dr. Provider',
+  id: '1',
+  age: '30',
+  gender: 'M',
+  providers: [],
+  appointmentKind: 'Scheduled',
+  appointmentNumber: '12345',
+  location: 'Location',
+  phoneNumber: '1234567890',
+  status: 'Status',
+  comments: 'Some comments',
+  dob: new Date('1992-01-01T00:00:00.000Z').toISOString(),
+  serviceUuid: '12345',
+};
 
-    expect(screen.getByText(/patient details/i)).toBeInTheDocument();
-    expect(screen.getByText(/appointment notes/i)).toBeInTheDocument();
-    expect(screen.getByText(/appointment history/i)).toBeInTheDocument();
-    expect(screen.getByText(/john wilson/i)).toBeInTheDocument();
-    expect(screen.queryAllByText(/45/i));
-    expect(screen.queryAllByText(/M/i));
-    expect(screen.getByText(/HIV Clinic/i)).toBeInTheDocument();
-  });
-});
+jest.mock('../../hooks/usePatientAppointmentHistory', () => ({
+  usePatientAppointmentHistory: () => ({
+    appointmentsCount: {
+      completedAppointments: 1,
+      missedAppointments: 2,
+      cancelledAppointments: 3,
+      upcomingAppointments: 4,
+    },
+  }),
+}));
 
-const renderPatientDetailsExpansionSlot = () => {
-  render(<AppointmentDetails appointment={mockMappedAppointmentsData.data[0]} />);
-};
+test('renders appointment details correctly', () => {
+  const { getByText } = render(<AppointmentDetails appointment={appointment} />);
+  expect(getByText('Service')).toBeInTheDocument();
+  expect(getByText('1992-01-01T00:00:00.000Z')).toBeInTheDocument();
+  expect(getByText('Patient name :')).toBeInTheDocument();
+  expect(getByText('John Doe')).toBeInTheDocument();
+  expect(getByText('Age :')).toBeInTheDocument();
+  expect(getByText('30')).toBeInTheDocument();
+  expect(getByText('Gender :')).toBeInTheDocument();
+  expect(getByText('Male')).toBeInTheDocument();
+  expect(getByText('Dob :')).toBeInTheDocument();
+  expect(getByText('1992-01-01T00:00:00.000Z')).toBeInTheDocument();
+  expect(getByText('Phone number :')).toBeInTheDocument();
+  expect(getByText('1234567890')).toBeInTheDocument();
+  expect(getByText('Appointment Notes')).toBeInTheDocument();
+  expect(getByText('Some comments')).toBeInTheDocument();
+  expect(getByText('Appointment History')).toBeInTheDocument();
+  expect(getByText('Completed')).toBeInTheDocument();
+  expect(getByText('1')).toBeInTheDocument();
+  expect(getByText('Missed')).toBeInTheDocument();
+  expect(getByText('2')).toBeInTheDocument();
+  expect(getByText('Cancelled')).toBeInTheDocument();
+  expect(getByText('3')).toBeInTheDocument();
+  expect(getByText('Upcoming')).toBeInTheDocument();
+  expect(getByText('4')).toBeInTheDocument();
+});

package/src/appointments/scheduled/scheduled-appointments.component.tsx

@@ -7,7 +7,7 @@ import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 dayjs.extend(isSameOrBefore);
 import styles from './scheduled-appointments.scss';
-import AppointmentsBaseTable from '../common-components/appointments-base-table.component';
+import AppointmentsTable from '../common-components/appointments-table.component';
 
 interface ScheduledAppointmentsProps {
   visits: Array<any>;
@@ -75,7 +75,7 @@ const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ visits, a
     Pending: {
       appointments: filteredRow,
       isLoading,
-      tableHeading: isDateInPast ? t('notArrived', 'Not arrived') : t('missed', 'Missed'),
+      tableHeading: isDateInPast ? t('missed', 'Missed') : t('notArrived', 'Not arrived'),
       visits,
       scheduleType,
     },
@@ -106,7 +106,7 @@ const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ visits, a
         </ContentSwitcher>
       )}
       <div className={styles.container}>
-        <AppointmentsBaseTable {...currentConfig} />
+        <AppointmentsTable {...currentConfig} />
       </div>
     </>
   );

package/src/appointments/unscheduled/unscheduled-appointments.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import isEmpty from 'lodash-es/isEmpty';
 import {
@@ -22,10 +22,15 @@ import { ConfigurableLink, usePagination } from '@openmrs/esm-framework';
 import { useUnscheduledAppointments } from '../../hooks/useUnscheduledAppointments';
 import { downloadUnscheduledAppointments } from '../../helpers/excel';
 import { EmptyState } from '../../empty-state/empty-state.component';
+import { getPageSizes, useSearchResults } from '../utils';
 
 const UnscheduledAppointments: React.FC = () => {
   const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(25);
+
+  const [searchString, setSearchString] = useState('');
   const { data: unscheduledAppointments, isLoading, error } = useUnscheduledAppointments();
+  const searchResults = useSearchResults(unscheduledAppointments, searchString);
   const headerData = [
     {
       header: 'Patient Name',
@@ -45,7 +50,7 @@ const UnscheduledAppointments: React.FC = () => {
     },
   ];
 
-  const { results, currentPage, goTo } = usePagination(unscheduledAppointments, 10);
+  const { results, currentPage, goTo } = usePagination(searchResults, pageSize);
 
   const rowData = results?.map((visit) => ({
     id: `${visit.uuid}`,
@@ -59,18 +64,11 @@ const UnscheduledAppointments: React.FC = () => {
     phoneNumber: visit.phoneNumber === '' ? '--' : visit.phoneNumber,
   }));
 
-  const pageSizes = useMemo(() => {
-    const numberOfPages = Math.ceil(unscheduledAppointments.length / 10);
-    return [...Array(numberOfPages).keys()].map((x) => {
-      return (x + 1) * 10;
-    });
-  }, [unscheduledAppointments]);
-
   if (isLoading) {
     return <DataTableSkeleton />;
   }
 
-  if (isEmpty(unscheduledAppointments)) {
+  if (!unscheduledAppointments?.length) {
     return (
       <EmptyState
         displayText={t('unscheduledAppointments_lower', 'unscheduled appointments')}
@@ -83,14 +81,20 @@ const UnscheduledAppointments: React.FC = () => {
   return (
     <div>
       <DataTable rows={rowData} headers={headerData} isSortable>
-        {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
-          <TableContainer title={`${t('unscheduledAppointments', 'Unscheduled appointments')} ${rowData.length}`}>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer
+            title={`${t('unscheduledAppointments', 'Unscheduled appointments')} ${unscheduledAppointments.length}`}
+            description={`${t(`Total ${unscheduledAppointments.length ?? 0}`)}`}>
             <TableToolbar>
               <TableToolbarContent>
-                <TableToolbarSearch style={{ backgroundColor: '#f4f4f4' }} tabIndex={0} onChange={onInputChange} />
+                <TableToolbarSearch
+                  style={{ backgroundColor: '#f4f4f4' }}
+                  tabIndex={0}
+                  onChange={(event) => setSearchString(event.target.value)}
+                />
                 <Button
                   size="lg"
-                  kind="ghost"
+                  kind="tertiary"
                   renderIcon={Download}
                   onClick={() => downloadUnscheduledAppointments(unscheduledAppointments)}>
                   {t('download', 'Download')}
@@ -124,9 +128,12 @@ const UnscheduledAppointments: React.FC = () => {
         forwardText="Next page"
         page={currentPage}
         pageNumberText="Page Number"
-        pageSize={10}
-        onChange={({ page }) => goTo(page)}
-        pageSizes={pageSizes.length > 0 ? pageSizes : [10]}
+        pageSize={pageSize}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+        pageSizes={getPageSizes(unscheduledAppointments, pageSize) ?? []}
         totalItems={unscheduledAppointments.length ?? 0}
       />
     </div>