@kenyaemr/esm-appointments-app 7.0.2-pre.65

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

@@ -0,0 +1,201 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import AppointmentActions from './appointments-actions.component';
+import { useTodaysVisits } from '../../hooks/useTodaysVisits';
+import { type Appointment, AppointmentKind, AppointmentStatus } from '../../types';
+import { useConfig } from '@openmrs/esm-framework';
+
+const appointment: Appointment = {
+  uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
+  appointmentNumber: '0000',
+  patient: {
+    identifier: '100GEJ',
+    identifiers: [],
+    name: 'John Wilson',
+    uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e',
+    gender: 'M',
+    age: '35',
+  },
+  service: {
+    appointmentServiceId: 1,
+    name: 'Outpatient',
+    description: null,
+    startTime: '',
+    endTime: '',
+    maxAppointmentsLimit: null,
+    durationMins: null,
+    location: {
+      uuid: '8d6c993e-c2cc-11de-8d13-0010c6dffd0f',
+    },
+    uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90',
+    initialAppointmentStatus: 'Scheduled',
+    creatorName: null,
+  },
+  provider: {
+    uuid: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+    person: { uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' },
+  },
+  location: { name: 'HIV Clinic', uuid: '2131aff8-2e2a-480a-b7ab-4ac53250262b' },
+  startDateTime: new Date().toISOString(),
+  appointmentKind: AppointmentKind.WALKIN,
+  status: null,
+  comments: 'Some comments',
+  additionalInfo: null,
+  providers: [{ uuid: '24252571-dd5a-11e6-9d9c-0242ac150002', display: 'Dr James Cook' }],
+  recurring: false,
+  voided: false,
+  teleconsultationLink: null,
+  extensions: [],
+};
+
+jest.mock('../../hooks/useTodaysVisits', () => {
+  const originalModule = jest.requireActual('../../hooks/useTodaysVisits');
+
+  return {
+    ...originalModule,
+    useTodaysVisits: jest.fn(),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    useConfig: jest.fn(),
+  };
+});
+
+describe('AppointmentActions', () => {
+  const defaultProps = {
+    visits: [],
+    appointment: appointment,
+    scheduleType: 'Pending',
+    mutate: () => {},
+  };
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('renders the check in button when appointment is today and the patient has not checked in and check in button enabled', () => {
+    appointment.status = AppointmentStatus.SCHEDULED;
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [],
+    }));
+    const props = { ...defaultProps };
+    const { getByText } = render(<AppointmentActions {...props} />);
+    const button = getByText(/check in/i);
+    expect(button).toBeInTheDocument();
+  });
+
+  it('does not renders the check in button when appointment is today and the patient has not checked in but the check-in button is disabled', () => {
+    appointment.status = AppointmentStatus.SCHEDULED;
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: false },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [],
+    }));
+    const props = { ...defaultProps };
+    const { queryByText } = render(<AppointmentActions {...props} />);
+    const button = queryByText('Check In');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('renders the checked out button when the patient has checked out', () => {
+    appointment.status = AppointmentStatus.COMPLETED;
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [
+        {
+          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+          startDatetime: new Date().toISOString(),
+          stopDatetime: new Date().toISOString(),
+        },
+      ],
+    }));
+    const props = { ...defaultProps };
+    const { getByText } = render(<AppointmentActions {...props} />);
+    const button = getByText('Checked out');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders the check out button when the patient has an active visit and today is the appointment date and the check out button enabled', () => {
+    appointment.status = AppointmentStatus.CHECKEDIN;
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [
+        {
+          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+          startDatetime: new Date().toISOString(),
+          stopDatetime: null,
+        },
+      ],
+    }));
+    const props = { ...defaultProps, scheduleType: 'Scheduled' };
+    const { getByText } = render(<AppointmentActions {...props} />);
+    const button = getByText('Check out');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('does not render check out button when the patient has an active visit and today is the appointment date but the check out button is disabled', () => {
+    appointment.status = AppointmentStatus.CHECKEDIN;
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: false },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [
+        {
+          patient: { uuid: '8673ee4f-e2ab-4077-ba55-4980f408773e' },
+          startDatetime: new Date().toISOString(),
+          stopDatetime: null,
+        },
+      ],
+    }));
+    const props = { ...defaultProps, scheduleType: 'Scheduled' };
+    const { queryByText } = render(<AppointmentActions {...props} />);
+    const button = queryByText('Check out');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  // commenting these tests out as this functionality is not implemented yet so not sure how they would have ever passed?
+  /*it('renders the correct button when today is the appointment date and the schedule type is pending', () => {
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [],
+    }));
+    const props = { ...defaultProps, scheduleType: 'Pending' };
+    render(<AppointmentActions {...props} />);
+    const button = screen.getByRole('button', { name: /Checked out/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders the correct button when today is the appointment date and the schedule type is not pending', () => {
+    useConfig.mockImplementation(() => ({
+      checkInButton: { enabled: true },
+      checkOutButton: { enabled: true },
+    }));
+    useTodaysVisits.mockImplementation(() => ({
+      visits: [],
+    }));
+    const props = { ...defaultProps, scheduleType: 'Confirmed' };
+    render(<AppointmentActions {...props} />);
+    const button = screen.getByRole('button', { name: /Checked out/i });
+    expect(button).toBeInTheDocument();
+  });*/
+});

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

@@ -0,0 +1,277 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import utc from 'dayjs/plugin/utc';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import {
+  ConfigurableLink,
+  formatDate,
+  formatDatetime,
+  isDesktop,
+  parseDate,
+  useConfig,
+  useLayoutType,
+  launchWorkspace,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { Download } from '@carbon/react/icons';
+import { EmptyState } from '../../empty-state/empty-state.component';
+import { downloadAppointmentsAsExcel } from '../../helpers/excel';
+import { useTodaysVisits } from '../../hooks/useTodaysVisits';
+import { type Appointment } from '../../types';
+import { type ConfigObject } from '../../config-schema';
+import { getPageSizes, useAppointmentSearchResults } from '../utils';
+import AppointmentActions from './appointments-actions.component';
+import AppointmentDetails from '../details/appointment-details.component';
+import PatientSearch from '../../patient-search/patient-search.component';
+import styles from './appointments-table.scss';
+
+dayjs.extend(utc);
+dayjs.extend(isToday);
+
+interface AppointmentsTableProps {
+  appointments: Array<Appointment>;
+  isLoading: boolean;
+  tableHeading: string;
+}
+
+const AppointmentsTable: React.FC<AppointmentsTableProps> = ({ appointments, isLoading, tableHeading }) => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(25);
+  const [searchString, setSearchString] = useState('');
+  const searchResults = useAppointmentSearchResults(appointments, searchString);
+  const { results, goTo, currentPage } = usePagination(searchResults, pageSize);
+  const { customPatientChartUrl, patientIdentifierType } = useConfig<ConfigObject>();
+  const { visits } = useTodaysVisits();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const headerData = [
+    {
+      header: t('patientName', 'Patient name'),
+      key: 'patientName',
+    },
+    {
+      header: t('identifier', 'Identifier'),
+      key: 'identifier',
+    },
+    {
+      header: t('location', 'Location'),
+      key: 'location',
+    },
+    {
+      header: t('serviceType', 'Service type'),
+      key: 'serviceType',
+    },
+    {
+      header: t('status', 'Status'),
+      key: 'status',
+    },
+  ];
+
+  const rowData = results?.map((appointment) => ({
+    id: appointment.uuid,
+    patientName: (
+      <ConfigurableLink
+        className={styles.link}
+        to={customPatientChartUrl}
+        templateParams={{ patientUuid: appointment.patient.uuid }}>
+        {appointment.patient.name}
+      </ConfigurableLink>
+    ),
+    nextAppointmentDate: '--',
+    identifier: patientIdentifierType
+      ? appointment.patient[patientIdentifierType.replaceAll(' ', '')] ?? appointment.patient.identifier
+      : appointment.patient.identifier,
+    dateTime: formatDatetime(new Date(appointment.startDateTime)),
+    serviceType: appointment.service.name,
+    location: appointment.location?.name,
+    provider: appointment.provider,
+    status: <AppointmentActions appointment={appointment} />,
+  }));
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" row={5} />;
+  }
+
+  if (!appointments?.length) {
+    return (
+      <EmptyState
+        headerTitle={`${t(tableHeading)} ${t('appointments_lower', 'appointments')}`}
+        displayText={`${
+          tableHeading?.match(/today/i)
+            ? t('appointmentsScheduledForToday', 'appointments scheduled for today')
+            : `${t(tableHeading)} ${t('appointments_lower', 'appointments')}`
+        }`}
+        launchForm={() => launchWorkspace('search-patient')}
+      />
+    );
+  }
+
+  return (
+    <Layer className={styles.container}>
+      <Tile className={styles.headerContainer}>
+        <div className={isDesktop(layout) ? styles.desktopHeading : styles.tabletHeading}>
+          <h4>{`${t(tableHeading)} ${t('appointments', 'Appointments')}`}</h4>
+        </div>
+      </Tile>
+      <div className={styles.toolbar}>
+        <Search
+          className={styles.searchbar}
+          labelText=""
+          placeholder={t('filterTable', 'Filter table')}
+          onChange={(event) => setSearchString(event.target.value)}
+          size={responsiveSize}
+        />
+        <Button
+          size={responsiveSize}
+          kind="tertiary"
+          renderIcon={Download}
+          onClick={() => {
+            const date = appointments[0]?.startDateTime
+              ? formatDate(parseDate(appointments[0]?.startDateTime), {
+                  time: false,
+                  noToday: true,
+                })
+              : null;
+            downloadAppointmentsAsExcel(appointments, `${tableHeading}_appointments_${date}`);
+          }}>
+          {t('download', 'Download')}
+        </Button>
+      </div>
+      <DataTable
+        aria-label={t('appointmentsTable', 'Appointments table')}
+        data-floating-menu-container
+        rows={rowData}
+        headers={headerData}
+        isSortable
+        size={responsiveSize}
+        useZebraStyles>
+        {({
+          rows,
+          headers,
+          getExpandHeaderProps,
+          getHeaderProps,
+          getRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <>
+            <TableContainer {...getTableContainerProps()}>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                    <TableHeader />
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => {
+                    const matchingAppointment = appointments.find((appointment) => appointment.uuid === row.id);
+                    const patientUuid = matchingAppointment.patient?.uuid;
+                    const visitDate = dayjs(matchingAppointment.startDateTime);
+                    const isFutureAppointment = visitDate.isAfter(dayjs());
+                    const isTodayAppointment = visitDate.isToday();
+                    const hasActiveVisitToday = visits?.some(
+                      (visit) => visit?.patient?.uuid === patientUuid && visit?.startDatetime,
+                    );
+
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                          ))}
+                          <TableCell className="cds--table-column-menu">
+                            {isFutureAppointment || (isTodayAppointment && !hasActiveVisitToday) ? (
+                              <OverflowMenu
+                                align="left"
+                                aria-label={t('actions', 'Actions')}
+                                flipped
+                                size={responsiveSize}>
+                                <OverflowMenuItem
+                                  className={styles.menuItem}
+                                  itemText={t('editAppointments', 'Edit appointment')}
+                                  size={responsiveSize}
+                                  onClick={() =>
+                                    launchWorkspace('edit-appointments-form', {
+                                      patientUuid: matchingAppointment.patient.uuid,
+                                      appointment: matchingAppointment,
+                                      context: 'editing',
+                                    })
+                                  }
+                                />
+                              </OverflowMenu>
+                            ) : null}
+                          </TableCell>
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 2}>
+                            <AppointmentDetails appointment={matchingAppointment} />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Layer>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noAppointmentsToDisplay', 'No appointments to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : null}
+          </>
+        )}
+      </DataTable>
+      <Pagination
+        backwardText={t('previousPage', 'Previous page')}
+        forwardText={t('nextPage', 'Next page')}
+        itemsPerPageText={t('itemsPerPage', 'Items per page') + ':'}
+        page={currentPage}
+        pageNumberText={t('pageNumber', 'Page number')}
+        pageSize={pageSize}
+        pageSizes={getPageSizes(appointments, pageSize) ?? []}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+        totalItems={appointments.length ?? 0}
+      />
+    </Layer>
+  );
+};
+
+export default AppointmentsTable;

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

@@ -0,0 +1,133 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.expandedRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedRow td {
+  padding: 0 2rem;
+}
+
+.expandedRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.container {
+  border: 1px solid colors.$gray-20;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: colors.$white-0;
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid var(--brand-03);
+    }
+  }
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.searchbar {
+  input {
+    background-color: colors.$gray-10;
+  }
+}
+
+.link {
+  text-decoration: none;
+  max-width: 50%;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.layer {
+  height: 100%;
+
+  :global(.cds--btn--primary) {
+    background-color: unset;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .headerContainer {
+    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
+    svg {
+      margin-left: 0;
+      margin-right: layout.$spacing-03;
+    }
+    h4 {
+      text-align: right;
+    }
+  }
+}