@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/queue-table/cells/queue-table-wait-time-cell.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import QueueDuration from '../../queue-entry-table-components/queue-duration.component';
+import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
+
+export const QueueTableWaitTimeCell = ({ queueEntry }: QueueTableCellComponentProps) => {
+  const startedAt = dayjs(queueEntry.startedAt).toDate();
+  const endedAt = queueEntry.endedAt ? dayjs(queueEntry.endedAt).toDate() : null;
+  return <QueueDuration startedAt={startedAt} endedAt={endedAt} />;
+};
+
+export const queueTableWaitTimeColumn: QueueTableColumnFunction = (key, header) => ({
+  key,
+  header,
+  CellComponent: QueueTableWaitTimeCell,
+  getFilterableValue: null,
+});

package/src/queue-table/default-queue-table.component.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { DataTableSkeleton, Dropdown, TableToolbarSearch } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import {
+  closeWorkspace,
+  ExtensionSlot,
+  isDesktop,
+  launchWorkspace,
+  showSnackbar,
+  showToast,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import ClearQueueEntries from '../clear-queue-entries-dialog/clear-queue-entries.component';
+import {
+  updateSelectedServiceName,
+  updateSelectedServiceUuid,
+  useSelectedQueueLocationUuid,
+  useSelectedServiceName,
+  useSelectedServiceUuid,
+} from '../helpers/helpers';
+import { useQueues } from '../hooks/useQueues';
+import { useQueueEntries } from '../hooks/useQueueEntries';
+import QueueTableExpandedRow from './queue-table-expanded-row.component';
+import QueueTable from './queue-table.component';
+import styles from './queue-table.scss';
+import { useColumns } from './cells/columns.resource';
+
+const serviceQueuesPatientSearchWorkspace = 'service-queues-patient-search';
+
+/*
+Component with default values / sub-components passed into the more generic QueueTable.
+This is used in the main dashboard of the queues app. (Currently behind a feature flag)
+*/
+function DefaultQueueTable() {
+  const selectedQueueUuid = useSelectedServiceUuid();
+  const currentLocationUuid = useSelectedQueueLocationUuid();
+  const { queueEntries, isLoading, isValidating, error } = useQueueEntries({
+    queue: selectedQueueUuid,
+    location: currentLocationUuid,
+    isEnded: false,
+  });
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (error?.message) {
+      showSnackbar({
+        title: t('errorLoadingQueueEntries', 'Error loading queue entries'),
+        kind: 'error',
+        subtitle: error?.message,
+      });
+    }
+  }, [error?.message]);
+  const layout = useLayoutType();
+
+  const [isPatientSearchOpen, setIsPatientSearchOpen] = useState(false);
+  const [patientSearchQuery, setPatientSearchQuery] = useState<string>('');
+
+  const handleBackToSearchList = useCallback(() => {
+    setIsPatientSearchOpen(true);
+    closeWorkspace(serviceQueuesPatientSearchWorkspace);
+  }, []);
+
+  const columns = useColumns(null, null);
+  if (!columns) {
+    showToast({
+      title: t('notableConfig', 'No table configuration'),
+      kind: 'warning',
+      description: 'No table configuration defined for queue: null and status: null',
+    });
+  }
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredQueueEntries = useMemo(() => {
+    const searchTermLowercase = searchTerm.toLowerCase();
+    return queueEntries?.filter((queueEntry) => {
+      return columns.some((column) => {
+        const columnSearchTerm = column.getFilterableValue?.(queueEntry)?.toLocaleLowerCase();
+        return columnSearchTerm?.includes(searchTermLowercase);
+      });
+    });
+  }, [queueEntries, searchTerm]);
+
+  if (isLoading && !queueEntries.length) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerContainer}>
+        <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{t('patientsCurrentlyInQueue', 'Patients currently in queue')}</h4>
+        </div>
+        <div className={styles.headerButtons}>
+          <ExtensionSlot
+            name="patient-search-button-slot"
+            state={{
+              isOpen: isPatientSearchOpen,
+              searchQuery: patientSearchQuery,
+              buttonText: t('addPatientToQueue', 'Add patient to queue'),
+              overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
+              buttonProps: {
+                kind: 'secondary',
+                renderIcon: (props) => <Add size={16} {...props} />,
+                size: 'sm',
+              },
+              searchQueryUpdatedAction: (searchQuery: string) => {
+                setPatientSearchQuery(searchQuery);
+              },
+              selectPatientAction: (selectedPatientUuid: string) => {
+                setIsPatientSearchOpen(false);
+                launchWorkspace(serviceQueuesPatientSearchWorkspace, {
+                  selectedPatientUuid,
+                  currentServiceQueueUuid: selectedQueueUuid,
+                  handleBackToSearchList,
+                });
+              },
+            }}
+          />
+        </div>
+      </div>
+      <QueueTable
+        queueEntries={filteredQueueEntries ?? []}
+        isValidating={isValidating}
+        queueUuid={null}
+        statusUuid={null}
+        ExpandedRow={QueueTableExpandedRow}
+        tableFilter={[
+          <QueueDropdownFilter />,
+          <TableToolbarSearch
+            className={styles.search}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder={t('searchThisList', 'Search this list')}
+            size={isDesktop(layout) ? 'sm' : 'lg'}
+          />,
+          <ClearQueueEntries queueEntries={filteredQueueEntries} />,
+        ]}
+      />
+    </div>
+  );
+}
+
+function QueueDropdownFilter() {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const currentQueueLocation = useSelectedQueueLocationUuid();
+  const { queues } = useQueues(currentQueueLocation);
+  const currentServiceName = useSelectedServiceName();
+  const handleServiceChange = ({ selectedItem }) => {
+    updateSelectedServiceUuid(selectedItem.uuid);
+    updateSelectedServiceName(selectedItem.display);
+  };
+
+  return (
+    <>
+      <div className={styles.filterContainer}>
+        <Dropdown
+          id="serviceFilter"
+          titleText={t('showPatientsWaitingFor', 'Show patients waiting for') + ':'}
+          label={currentServiceName}
+          type="inline"
+          items={[{ display: `${t('all', 'All')}` }, ...queues]}
+          itemToString={(item) => (item ? item.display : '')}
+          onChange={handleServiceChange}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+        />
+      </div>
+    </>
+  );
+}
+
+export default DefaultQueueTable;

package/src/queue-table/default-queue-table.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { of } from 'rxjs';
+import { screen } from '@testing-library/react';
+import { useConfig, useSession, getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
+import { mockServices, mockSession, mockQueueEntries } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import { useQueueEntries } from '../hooks/useQueueEntries';
+import { useQueueRooms } from '../add-provider-queue-room/add-provider-queue-room.resource';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import DefaultQueueTable from '../queue-table/default-queue-table.component';
+import { configSchema } from '../config-schema';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockUseQueueEntries = useQueueEntries as jest.Mock;
+const mockQueueLocations = useQueueLocations as jest.Mock;
+const mockUseQueueRooms = useQueueRooms as jest.Mock;
+const mockUseSession = useSession as jest.Mock;
+
+mockedUseConfig.mockReturnValue({
+  ...getDefaultsFromConfigSchema(configSchema),
+  visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+  customPatientChartUrl: 'someUrl',
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+  };
+});
+
+jest.mock('../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({ queues: mockServices }),
+  };
+});
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => {
+  const originalModule = jest.requireActual('../patient-search/hooks/useQueueLocations');
+
+  return {
+    ...originalModule,
+    useQueueLocations: jest.fn(),
+  };
+});
+
+jest.mock('../add-provider-queue-room/add-provider-queue-room.resource', () => {
+  const originalModule = jest.requireActual('../add-provider-queue-room/add-provider-queue-room.resource');
+
+  return {
+    ...originalModule,
+    useQueueRooms: jest.fn(),
+  };
+});
+
+jest.mock('../hooks/useQueueEntries', () => {
+  const originalModule = jest.requireActual('../hooks/useQueueEntries');
+
+  return {
+    ...originalModule,
+    useQueueEntries: jest.fn(),
+  };
+});
+
+jest.mock('../helpers/helpers', () => {
+  const originalModule = jest.requireActual('../helpers/helpers');
+
+  return {
+    ...originalModule,
+    getSelectedServiceName: jest.fn().mockReturnValue(of({ serviceName: 'All' })),
+  };
+});
+
+describe('DefaultQueueTable: ', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession);
+  });
+
+  it('renders an empty state view if data is unavailable', async () => {
+    mockQueueLocations.mockReturnValue({ queueLocations: [] });
+    mockUseQueueRooms.mockReturnValue({ rooms: [] });
+    mockUseQueueEntries.mockReturnValue({ queueEntries: [], isLoading: false });
+
+    rendeDefaultQueueTable();
+
+    await screen.findByRole('table');
+
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    expect(screen.getByText(/patients currently in queue/i)).toBeInTheDocument();
+    expect(screen.getByText(/no patients to display/i)).toBeInTheDocument();
+  });
+
+  it('renders a tabular overview of visit queue entry data when available', async () => {
+    mockQueueLocations.mockReturnValue({ queueLocations: mockQueueLocations });
+    mockUseQueueRooms.mockReturnValue({ rooms: mockUseQueueRooms });
+    mockUseQueueEntries.mockReturnValue({ queueEntries: mockQueueEntries, isLoading: false });
+
+    rendeDefaultQueueTable();
+
+    await screen.findByRole('table');
+
+    expect(screen.getByText(/patients currently in queue/i)).toBeInTheDocument();
+    expect(screen.queryByText(/no patients to display/i)).not.toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Brian Johnson/i })).toBeInTheDocument();
+    const john = screen.getByRole('link', { name: /Alice Johnson/i });
+    expect(john).toBeInTheDocument();
+    expect(john).toHaveAttribute('href', 'someUrl');
+
+    const expectedColumnHeaders = [
+      /name/i,
+      /priority/i,
+      /coming from/i,
+      /status/i,
+      /^queue$/i,
+      /wait time/i,
+      /actions/i,
+    ];
+    expectedColumnHeaders.forEach((header) => {
+      expect(
+        screen.getByRole('columnheader', {
+          name: header,
+        }),
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+function rendeDefaultQueueTable() {
+  renderWithSwr(<DefaultQueueTable />);
+}

package/src/queue-table/queue-entry-actions/edit-queue-entry-modal.component.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry } from '../../types';
+import QueueEntryActionModal from './queue-entry-actions-modal.component';
+import { updateQueueEntry } from './queue-entry-actions.resource';
+import { useQueues } from '../../hooks/useQueues';
+import { convertTime12to24 } from '../../helpers/time-helpers';
+
+interface EditQueueEntryModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+}
+
+const EditQueueEntryModal: React.FC<EditQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { queues } = useQueues();
+
+  return (
+    <QueueEntryActionModal
+      queueEntry={queueEntry}
+      closeModal={closeModal}
+      modalParams={{
+        modalTitle: t('editQueueEntry', 'Edit queue entry'),
+        modalInstruction: t('editQueueEntryInstruction', 'Edit fields of existing queue entry'),
+        submitButtonText: t('editQueueEntry', 'Edit queue entry'),
+        submitSuccessTitle: t('queueEntryEdited', 'Queue entry edited'),
+        submitSuccessText: t('queueEntryEditedSuccessfully', 'Queue entry edited successfully'),
+        submitFailureTitle: t('queueEntryEditingFailed', 'Error editing queue entry'),
+        submitAction: (queueEntry, formState) => {
+          const selectedQueue = queues.find((q) => q.uuid == formState.selectedQueue);
+          const statuses = selectedQueue?.allowedStatuses;
+          const priorities = selectedQueue?.allowedPriorities;
+
+          const startAtDate = new Date(formState.transitionDate);
+          const [hour, minute] = convertTime12to24(formState.transitionTime, formState.transitionTimeFormat);
+          startAtDate.setHours(hour, minute, 0, 0);
+
+          return updateQueueEntry(queueEntry.uuid, {
+            status: statuses.find((s) => s.uuid == formState.selectedStatus),
+            priority: priorities.find((p) => p.uuid == formState.selectedPriority),
+            priorityComment: formState.prioritycomment,
+            ...(formState.modifyDefaultTransitionDateTime ? { startedAt: startAtDate.toISOString() } : {}),
+          });
+        },
+        disableSubmit: () => false,
+        isTransition: false,
+      }}
+    />
+  );
+};
+
+export default EditQueueEntryModal;

package/src/queue-table/queue-entry-actions/end-queue-entry-modal.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry } from '../../types';
+import { updateQueueEntry } from './queue-entry-actions.resource';
+import QueueEntryConfirmActionModal from './queue-entry-confirm-action-modal.component';
+
+interface EndQueueEntryModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+}
+
+const EndQueueEntryModal: React.FC<EndQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const modalInstruction = (
+    <p>{t('confirmRemovePatientFromQueue', 'Are you sure you want to remove this patient from this queue?')}</p>
+  );
+
+  return (
+    <QueueEntryConfirmActionModal
+      queueEntry={queueEntry}
+      closeModal={closeModal}
+      modalParams={{
+        modalTitle: t('removePatientFromQueue', 'Remove patient from queue'),
+        modalInstruction,
+        submitButtonText: t('removePatient', 'Remove patient'),
+        submitSuccessTitle: t('patientRemoved', 'Patient removed'),
+        submitSuccessText: t('patientRemovedSuccessfully', 'Paient removed from queue successfully'),
+        submitFailureTitle: t('patientRemovedFailed', 'Error removing patient from queue'),
+        submitAction: (queueEntry) =>
+          updateQueueEntry(queueEntry.uuid, {
+            endedAt: new Date().toISOString(),
+          }),
+      }}
+    />
+  );
+};
+
+export default EndQueueEntryModal;