@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/queue-patient-linelists/queue-linelist-filter.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import QueueLinelistFilter from './queue-linelist-filter.component';
+import { mockVisitTypes } from '../../__mocks__/visits.mock';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: jest.fn(() => 'tablet'),
+  useVisitTypes: jest.fn(() => mockVisitTypes),
+  toOpemrsIsoString: jest.fn(),
+}));
+// Additional mock functions if needed
+
+describe('QueueLinelistFilter', () => {
+  it('renders the form with filter elements', () => {
+    render(<QueueLinelistFilter closePanel={jest.fn()} />);
+
+    expect(screen.getByText('Gender')).toBeInTheDocument();
+    expect(screen.getByLabelText('Age')).toBeInTheDocument();
+    expect(screen.getByLabelText('Between')).toBeInTheDocument();
+    expect(screen.getByLabelText('And')).toBeInTheDocument();
+    expect(screen.getByLabelText('Date')).toBeInTheDocument();
+    expect(screen.getByText("Use today's date")).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Select visit type/i })).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Apply filters')).toBeInTheDocument();
+  });
+
+  it('calls closePanel function when cancel button is clicked', () => {
+    const closePanelMock = jest.fn();
+    render(<QueueLinelistFilter closePanel={closePanelMock} />);
+
+    const cancelButton = screen.getByText('Cancel');
+    fireEvent.click(cancelButton);
+
+    expect(closePanelMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates gender state when a radio button is selected', () => {
+    render(<QueueLinelistFilter closePanel={jest.fn()} />);
+
+    const maleRadioButton = screen.getByLabelText('Male');
+    fireEvent.click(maleRadioButton);
+
+    expect(maleRadioButton).toBeChecked();
+  });
+
+  it('updates startAge state when a number is entered', () => {
+    render(<QueueLinelistFilter closePanel={jest.fn()} />);
+
+    const startAgeInput = screen.getByLabelText('Between');
+    fireEvent.change(startAgeInput, { target: { value: '10' } });
+
+    expect(startAgeInput).toHaveValue(10);
+  });
+
+  it('updates returnDate state when date input changes', () => {
+    render(<QueueLinelistFilter closePanel={jest.fn()} />);
+
+    const returnDateInput = screen.getByLabelText('Date');
+    fireEvent.change(returnDateInput, { target: { value: '2023-08-20' } });
+
+    expect(returnDateInput).toHaveValue('2023-08-20');
+  });
+
+  it('should open the visit type dropdown and close after selection', () => {
+    render(<QueueLinelistFilter closePanel={jest.fn()} />);
+
+    const visitTypeDropdown = screen.getByRole('button', { name: /Select visit type/i });
+    fireEvent.click(visitTypeDropdown);
+    const type1Option = screen.getByText('Outpatient Visit');
+    fireEvent.click(type1Option);
+
+    expect(visitTypeDropdown).toHaveTextContent('Open menu');
+  });
+});

package/src/queue-patient-linelists/queue-linelist.component.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Overlay from '../overlay.component';
+import QueueLinelistFilter from './queue-linelist-filter.component';
+import { FilterTypes } from '../types/index';
+
+interface QueueLinelistProps {
+  closePanel: () => void;
+}
+
+const QueueLinelist: React.FC<QueueLinelistProps> = ({ closePanel }) => {
+  const { t } = useTranslation();
+  const [showFilter, setShowFilter] = useState<FilterTypes>(FilterTypes.SHOW);
+  const toggleFilter = (filterType: FilterTypes) => {
+    setShowFilter(filterType);
+  };
+
+  return (
+    <>
+      <Overlay header={t('filters', 'Filters')} closePanel={closePanel}>
+        <div className="omrs-main-content">
+          {showFilter === FilterTypes.SHOW ? <QueueLinelistFilter closePanel={closePanel} /> : null}
+        </div>
+      </Overlay>
+    </>
+  );
+};
+
+export default QueueLinelist;

package/src/queue-patient-linelists/queue-linelist.resource.tsx

@@ -0,0 +1,84 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { Appointment, AppointmentsFetchResponse } from '../types/index';
+import { Provider } from '../types';
+import { startOfDay } from '../constants';
+import dayjs from 'dayjs';
+
+export function useAppointments() {
+  const apiUrl = `/ws/rest/v1/appointment/all?forDate=${startOfDay}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Array<Appointment> }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    appointmentQueueEntries: data ? data?.data : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useCheckedInAppointments() {
+  const apiUrl = `/ws/rest/v1/appointment/appointmentStatus?forDate=${startOfDay}&status=CheckedIn`;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: Array<Appointment> }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    checkedInAppointments: data ? data?.data : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function useProviders() {
+  const customRepresentation = 'custom:(uuid,display,person:(age,display,gender,uuid))';
+  const apiUrl = `/ws/rest/v1/provider?q=&v=${customRepresentation}`;
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Provider> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+
+  return {
+    providers: data ? data.data?.results : [],
+    isLoading,
+    isError: error,
+    isValidating,
+  };
+}
+
+export function usePatientAppointments(patientUuid: string, startDate) {
+  const abortController = new AbortController();
+
+  const appointmentsSearchUrl = `/ws/rest/v1/appointments/search`;
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length ? data.data : [];
+
+  const upcomingAppointments = appointments
+    ?.sort((a, b) => (a.startDateTime > b.startDateTime ? 1 : -1))
+    ?.filter(({ status }) => status !== 'Cancelled')
+    ?.filter(({ startDateTime }) => dayjs(new Date(startDateTime).toISOString()).isAfter(new Date()));
+
+  return {
+    upcomingAppointment: upcomingAppointments ? upcomingAppointments?.[0] : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}

package/src/queue-patient-linelists/queue-linelist.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import QueueLinelist from './queue-linelist.component';
+
+describe('QueueLinelist', () => {
+  it('renders with filter content initially', () => {
+    render(<QueueLinelist closePanel={jest.fn()} />);
+
+    const filterContent = screen.getByText('Filters');
+    expect(filterContent).toBeInTheDocument();
+  });
+
+  it('toggles between filter content and null', () => {
+    render(<QueueLinelist closePanel={jest.fn()} />);
+
+    const closeButton = screen.getByText('Close overlay');
+    fireEvent.click(closeButton);
+
+    const filterContent = screen.queryByTestId('filter-content');
+    expect(filterContent).not.toBeInTheDocument();
+  });
+});

package/src/queue-patient-linelists/queue-services-table.component.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import QueuePatientBaseTable from './queue-linelist-base-table.component';
+import { useServiceQueueEntries } from '../active-visits/active-visits-table.resource';
+
+const ServicesTable: React.FC = () => {
+  const { t } = useTranslation();
+
+  const currentPathName: string = window.location.pathname.replace('%20', ' ');
+  let service = currentPathName.split('/')[4];
+  let locationUuid = currentPathName.split('/')[6];
+  const { serviceQueueEntries, isLoading } = useServiceQueueEntries(service, locationUuid);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 1,
+        header: t('returnDate', 'Return Date'),
+        key: 'returnDate',
+      },
+      {
+        id: 2,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 3,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 4,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+      {
+        id: 5,
+        header: t('phoneNumber', 'Phone Number'),
+        key: 'phoneNumber',
+      },
+    ],
+    [t],
+  );
+
+  return (
+    <div>
+      <QueuePatientBaseTable
+        title={t('alistOfClients', 'A list of clients waiting for ')}
+        headers={tableHeaders}
+        patientData={serviceQueueEntries}
+        serviceType={service}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+};
+
+export default ServicesTable;

package/src/queue-patient-linelists/scheduled-appointments-table.component.tsx

@@ -0,0 +1,300 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableHeader,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+  DataTableSkeleton,
+  Dropdown,
+  Pagination,
+} from '@carbon/react';
+import { Filter, OverflowMenuVertical } from '@carbon/react/icons';
+import {
+  ConfigObject,
+  ExtensionSlot,
+  formatDatetime,
+  useConfig,
+  usePagination,
+  ConfigurableLink,
+  formatDate,
+} from '@openmrs/esm-framework';
+import styles from './queue-linelist-base-table.scss';
+import QueueLinelist from './queue-linelist.component';
+import { updateSelectedAppointmentStatus, useSelectedAppointmentStatus } from '../helpers/helpers';
+import { useAppointments } from './queue-linelist.resource';
+import { getGender } from '../helpers/functions';
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: Array<DataTableHeader>;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+const AppointmentsTable: React.FC = () => {
+  const { t } = useTranslation();
+  const [showOverlay, setShowOverlay] = useState(false);
+  const { appointmentStatuses } = useConfig() as ConfigObject;
+  const currentAppointmentStatus = useSelectedAppointmentStatus();
+  const { appointmentQueueEntries, isLoading } = useAppointments();
+  const [filteredRows, setFilteredRows] = useState(appointmentQueueEntries);
+  const { results, currentPage, goTo } = usePagination(filteredRows ?? [], 20);
+
+  const handleFilter = ({ rowIds, headers, cellsById, inputValue, getCellId }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (typeof filterableValue === 'boolean') {
+          return false;
+        }
+        if (filterableValue.hasOwnProperty('content')) {
+          if (Array.isArray(filterableValue.content.props.children)) {
+            return ('' + filterableValue.content.props.children[1].props.children).toLowerCase().includes(filterTerm);
+          }
+          if (typeof filterableValue.content.props.children === 'object') {
+            return ('' + filterableValue.content.props.children.props.children.props.children)
+              .toLowerCase()
+              .includes(filterTerm);
+          }
+          return ('' + filterableValue.content.props.children).toLowerCase().includes(filterTerm);
+        }
+        return ('' + filterableValue).toLowerCase().includes(filterTerm);
+      }),
+    );
+  };
+
+  useEffect(() => {
+    if (currentAppointmentStatus != t('all', 'All') && currentAppointmentStatus !== '') {
+      setFilteredRows(
+        appointmentQueueEntries?.filter((appointment) => appointment.status === currentAppointmentStatus),
+      );
+    } else {
+      setFilteredRows(appointmentQueueEntries);
+    }
+  }, [t, currentAppointmentStatus, results, appointmentQueueEntries]);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 1,
+        header: t('returnDate', 'Return Date'),
+        key: 'returnDate',
+      },
+      {
+        id: 2,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 3,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 4,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+      {
+        id: 5,
+        header: t('status', 'Status'),
+        key: 'status',
+      },
+      {
+        id: 6,
+        header: t('phoneNumber', 'Phone Number'),
+        key: 'phoneNumber',
+      },
+    ],
+    [t],
+  );
+
+  const tableRows = useMemo(() => {
+    return results?.map((appointment) => ({
+      id: appointment.uuid,
+      name: {
+        content: (
+          <ConfigurableLink to={`\${openmrsSpaBase}/patient/${appointment.patient.uuid}/chart`}>
+            {appointment.patient.name}
+          </ConfigurableLink>
+        ),
+      },
+      returnDate: formatDate(new Date(appointment.startDateTime), {
+        mode: 'wide',
+      }),
+      gender: getGender(appointment.patient?.gender, t),
+      age: appointment.patient.age,
+      visitType: appointment.appointmentKind,
+      status: appointment.status,
+      phoneNumber: appointment.patient?.phoneNumber,
+    }));
+  }, [results, t]);
+
+  const handleStatusChange = ({ selectedItem }) => {
+    updateSelectedAppointmentStatus(selectedItem);
+  };
+
+  const pageSizes = useMemo(() => {
+    const numberOfPages = Math.ceil(appointmentQueueEntries?.length / 100);
+    return [...Array(numberOfPages).keys()].map((x) => {
+      return (x + 1) * 100;
+    });
+  }, [appointmentQueueEntries]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <ExtensionSlot name="breadcrumbs-slot" />
+
+      <div className={styles.headerContainer}>
+        <div>
+          <p className={styles.title}>{t('scheduledAppointmentsList', 'Scheduled appointments patient list')}</p>
+          <p className={styles.subTitle}>
+            {appointmentQueueEntries?.length} · Last Updated: {formatDatetime(new Date(), { mode: 'standard' })}
+          </p>
+        </div>
+
+        <Button kind="ghost" size="sm" renderIcon={(props) => <OverflowMenuVertical size={16} {...props} />}>
+          {t('actions', 'Actions')}
+        </Button>
+      </div>
+
+      <Layer>
+        <Tile className={styles.filterTile}>
+          <Tag size="md" title="Clear Filter" type="blue">
+            {t('today', 'Today')}
+          </Tag>
+
+          <div className={styles.actionsBtn}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Filter size={16} {...props} />}
+              iconDescription={t('filter', 'Filter (1)')}
+              onClick={() => setShowOverlay(true)}
+              size="sm">
+              {t('filter', 'Filter (1)')}
+            </Button>
+          </div>
+        </Tile>
+      </Layer>
+
+      <DataTable
+        data-floating-menu-container
+        filterRows={handleFilter}
+        headers={tableHeaders}
+        overflowMenuOnHover={false}
+        rows={tableRows}
+        size="md"
+        useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+          <TableContainer className={styles.tableContainer}>
+            <TableToolbar
+              style={{
+                position: 'static',
+                height: '3rem',
+                overflow: 'visible',
+                backgroundColor: 'color',
+              }}>
+              <TableToolbarContent className={styles.toolbarContent}>
+                <div className={styles.filterContainer}>
+                  <Dropdown
+                    id="serviceFilter"
+                    initialSelectedItem={'All'}
+                    label={currentAppointmentStatus}
+                    titleText={t('status', 'Status') + ':'}
+                    type="inline"
+                    items={['All', ...appointmentStatuses]}
+                    onChange={handleStatusChange}
+                    size="sm"
+                  />
+                </div>
+
+                <TableToolbarSearch
+                  className={styles.search}
+                  expanded
+                  onChange={onInputChange}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size="sm"
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} className={styles.queueTable}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Layer>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noPatientsToDisplay', 'No patients to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      </DataTable>
+
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        page={currentPage}
+        pageNumberText="Page Number"
+        pageSize={100}
+        onChange={({ page }) => goTo(page)}
+        pageSizes={pageSizes?.length > 0 ? pageSizes : [100]}
+        totalItems={appointmentQueueEntries?.length ?? 0}
+      />
+
+      {showOverlay && <QueueLinelist closePanel={() => setShowOverlay(false)} />}
+    </div>
+  );
+};
+
+export default AppointmentsTable;

package/src/queue-patient-linelists/scheduled-appointments-table.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import AppointmentsTable from './scheduled-appointments-table.component';
+import { mockAppointmentsData } from '../../__mocks__/appointments-data.mock';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: () => ({
+    appointmentStatuses: ['All', 'Scheduled', 'Completed'],
+  }),
+  usePagination: () => ({
+    goTo: jest.fn(),
+    results: mockAppointmentsData.data,
+    currentPage: 1,
+  }),
+}));
+
+jest.mock('./queue-linelist.resource', () => ({
+  useAppointments: () => ({
+    appointmentQueueEntries: mockAppointmentsData.data,
+    isLoading: false,
+  }),
+}));
+
+describe('AppointmentsTable', () => {
+  it('renders appointments when loading is complete', () => {
+    render(<AppointmentsTable />);
+
+    const appointmentName = screen.getByText('Hungai Kevin');
+    expect(appointmentName).toBeInTheDocument();
+  });
+
+  it('filters appointments based on status selection', () => {
+    render(<AppointmentsTable />);
+
+    const statusDropdown = screen.getAllByLabelText('Status:');
+    fireEvent.change(statusDropdown[0], { target: { value: 'Completed' } });
+
+    const filteredAppointmentName = screen.getByText('Hungai Kevin');
+    expect(filteredAppointmentName).toBeInTheDocument();
+  });
+});