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

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

@@ -0,0 +1,210 @@
+import React from 'react';
+import { defineConfigSchema, getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
+import { screen, within } from '@testing-library/react';
+import { mockPriorityNonUrgent, mockQueueEntries, mockSession } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import QueueTable from './queue-table.component';
+import { type ConfigObject, configSchema } from '../config-schema';
+
+const mockUseSession = jest.mocked(useSession);
+const mockUseConfig = jest.mocked(useConfig);
+const configDefaults = getDefaultsFromConfigSchema<ConfigObject>(configSchema);
+
+const configWithCustomColumns = {
+  queueTables: {
+    columnDefinitions: [
+      {
+        id: 'emr-id',
+        columnType: 'patient-identifier',
+        config: {
+          identifierType: '8d793bee-c2cc-11de-8d13-0010c6dffd0f',
+        },
+        header: 'EMR ID',
+      },
+      {
+        id: 'in-service-time',
+        columnType: 'wait-time',
+        header: 'Time in service',
+      },
+      {
+        id: 'check-in-date',
+        columnType: 'visit-start-time',
+        header: 'Check-in date',
+      },
+    ],
+    tableDefinitions: [
+      {
+        columns: ['patient-name', 'emr-id', 'patient-age', 'check-in-date', 'wait-time', 'actions'],
+        appliedTo: [
+          {
+            queue: 'triage-queue-uuid',
+            status: 'waiting-status-uuid',
+          },
+        ],
+      },
+      {
+        columns: ['patient-name', 'emr-id', 'patient-age', 'in-service-time', 'actions'],
+        appliedTo: [
+          {
+            queue: 'triage-queue-uuid',
+            status: 'in-service-status-uuid',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+describe('QueueTable', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession.data);
+    mockUseConfig.mockReturnValue(configDefaults);
+  });
+
+  it('renders an empty table with default columns when there are no queue entries', () => {
+    renderWithSwr(<QueueTable queueEntries={[]} statusUuid={null} queueUuid={null} />);
+
+    const rows = screen.queryAllByRole('row');
+    expect(rows).toHaveLength(1); // should only have the header row
+
+    const headerRow = rows[0];
+    const expectedHeaders = [/name/i, /coming from/i, /priority/i, /status/i, /queue/i, /wait time/i, /actions/i];
+    const headers = within(headerRow).getAllByRole('columnheader');
+    for (let i = 0; i < headers.length; i++) {
+      expect(headers[i]).toHaveTextContent(expectedHeaders[i]);
+    }
+  });
+
+  it('renders queue entries with default columns', () => {
+    renderWithSwr(<QueueTable queueEntries={mockQueueEntries} statusUuid={null} queueUuid={null} />);
+
+    for (const entry of mockQueueEntries) {
+      const patientName = entry.patient.display;
+      const row = screen.getByText(patientName).closest('tr');
+
+      expect(within(row).getByText(entry.status.display)).toBeInTheDocument();
+      expect(within(row).getByText(entry.priority.display)).toBeInTheDocument();
+    }
+  });
+
+  it('allows modifying the columns of the table applied to all queues and statuses', () => {
+    mockUseConfig.mockReturnValue({
+      ...configDefaults,
+      queueTables: {
+        ...configDefaults.queueTables,
+        tableDefinitions: [
+          {
+            columns: ['patient-name', 'status', 'wait-time', 'actions'],
+            appliedTo: [{ queue: null, status: null }],
+          },
+        ],
+      },
+    });
+
+    renderWithSwr(<QueueTable queueEntries={mockQueueEntries} statusUuid={'foo'} queueUuid={'bar'} />);
+
+    const rows = screen.queryAllByRole('row');
+    const headerRow = rows[0];
+    const expectedHeaders = [/name/i, /status/i, /wait time/i, /actions/i];
+    const headers = within(headerRow).getAllByRole('columnheader');
+    for (let i = 0; i < headers.length; i++) {
+      expect(headers[i]).toHaveTextContent(expectedHeaders[i]);
+    }
+  });
+
+  it('will use the correct default table even when not provided explicitly in the config', () => {
+    mockUseConfig.mockReturnValue({
+      ...configDefaults,
+      ...configWithCustomColumns,
+    });
+
+    renderWithSwr(<QueueTable queueEntries={mockQueueEntries} statusUuid={'foo'} queueUuid={'bar'} />);
+
+    const rows = screen.queryAllByRole('row');
+    const headerRow = rows[0];
+    const expectedHeaders = [/name/i, /coming from/i, /priority/i, /status/i, /queue/i, /wait time/i, /actions/i];
+    const headers = within(headerRow).getAllByRole('columnheader');
+    for (let i = 0; i < headers.length; i++) {
+      expect(headers[i]).toHaveTextContent(expectedHeaders[i]);
+    }
+  });
+
+  it('allows modifying the columns of tables by queue and status, including with custom column definitions', () => {
+    mockUseConfig.mockReturnValue({
+      ...configDefaults,
+      ...configWithCustomColumns,
+    });
+
+    renderWithSwr(
+      <QueueTable
+        queueEntries={mockQueueEntries}
+        statusUuid={'in-service-status-uuid'}
+        queueUuid={'triage-queue-uuid'}
+      />,
+    );
+
+    const rows = screen.queryAllByRole('row');
+    const headerRow = rows[0];
+    const expectedHeaders = [/name/i, /EMR ID/i, /age/i, /time in service/i, /actions/i];
+    const headers = within(headerRow).getAllByRole('columnheader');
+    for (let i = 0; i < headers.length; i++) {
+      expect(headers[i]).toHaveTextContent(expectedHeaders[i]);
+    }
+  });
+
+  it('supports custom styles for priority tags at column level', () => {
+    mockUseConfig.mockReturnValue({
+      ...configDefaults,
+      queueTables: {
+        columnDefinitions: [
+          {
+            id: 'priority',
+            config: {
+              priorityConfigs: [
+                {
+                  conceptUuid: mockPriorityNonUrgent.uuid,
+                  color: 'blue',
+                  style: 'bold',
+                },
+              ],
+            },
+          },
+        ],
+        tableDefinitions: [
+          {
+            columns: ['patient-name', 'priority'],
+          },
+        ],
+      },
+    });
+
+    renderWithSwr(<QueueTable queueEntries={mockQueueEntries} statusUuid={null} queueUuid={'triage-queue-uuid'} />);
+
+    const rows = screen.queryAllByRole('row');
+    const firstRow = rows[1];
+    const cells = within(firstRow).getAllByRole('cell');
+    expect(cells[1].childNodes[0]).toHaveClass('bold');
+  });
+
+  it('uses the visitQueueNumberAttributeUuid defined at the top level', () => {
+    mockUseConfig.mockReturnValue({
+      ...configDefaults,
+      visitQueueNumberAttributeUuid: 'queue-number-visit-attr-uuid',
+      queueTables: {
+        ...configDefaults.queueTables,
+        tableDefinitions: [
+          {
+            columns: ['patient-name', 'queue-number'],
+          },
+        ],
+      },
+    });
+
+    renderWithSwr(<QueueTable queueEntries={mockQueueEntries} statusUuid={null} queueUuid={'triage-queue-uuid'} />);
+
+    const rows = screen.queryAllByRole('row');
+    const aliceRow = rows[2];
+    const cells = within(aliceRow).getAllByRole('cell');
+    expect(cells[1].childNodes[0]).toHaveTextContent('42');
+  });
+});

package/src/remove-queue-entry-dialog/remove-queue-entry.component.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { parseDate, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { type MappedQueueEntry } from '../types';
+import { startOfDay } from '../constants';
+import { useCheckedInAppointments, endQueueEntry } from './remove-queue-entry.resource';
+import styles from './remove-queue-entry.scss';
+import { useMutateQueueEntries } from '../hooks/useQueueEntries';
+
+interface RemoveQueueEntryDialogProps {
+  queueEntry: MappedQueueEntry;
+  closeModal: () => void;
+}
+
+const RemoveQueueEntryDialog: React.FC<RemoveQueueEntryDialogProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { currentVisit } = useVisit(queueEntry.patientUuid);
+  const { mutateQueueEntries } = useMutateQueueEntries();
+
+  const { data: appointments } = useCheckedInAppointments(queueEntry.patientUuid, startOfDay);
+
+  const removeQueueEntry = () => {
+    const endCurrentVisitPayload = {
+      location: currentVisit?.location?.uuid,
+      startDatetime: parseDate(currentVisit?.startDatetime),
+      visitType: currentVisit?.visitType?.uuid,
+      stopDatetime: new Date(),
+    };
+
+    const endedAt = new Date();
+
+    endQueueEntry(
+      queueEntry.queue.uuid,
+      queueEntry.queueEntryUuid,
+      endedAt,
+      endCurrentVisitPayload,
+      queueEntry.visitUuid,
+      appointments,
+    ).then((response) => {
+      closeModal();
+      mutateQueueEntries();
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        subtitle: t('queueEntryRemovedSuccessfully', `Queue entry removed successfully`),
+        title: t('queueEntryRemoved', 'Queue entry removed'),
+      });
+      (error) => {
+        showSnackbar({
+          title: t('removeQueueEntryError', 'Error removing queue entry'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+      };
+    });
+  };
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('serviceQueue', 'Service queue')}
+        title={t('removeFromQueueAndEndVisit', 'Remove patient from queue and end active visit?')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'endVisitWarningMessage',
+            'Ending this visit will remove this patient from the queue and will not allow you to fill another encounter form for this patient',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={removeQueueEntry}>
+          {t('endVisit', 'End visit')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default RemoveQueueEntryDialog;

package/src/remove-queue-entry-dialog/remove-queue-entry.resource.ts

@@ -0,0 +1,93 @@
+import { openmrsFetch, restBaseUrl, updateVisit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { endPatientStatus } from '../active-visits/active-visits-table.resource';
+import { type AppointmentsFetchResponse, type EndVisitPayload } from '../types';
+import useSWR from 'swr';
+import { omrsDateFormat, timeZone } from '../constants';
+import { first } from 'rxjs/operators';
+
+const statusChangeTime = dayjs(new Date()).format(omrsDateFormat);
+
+export async function endQueueEntry(
+  queueUuid: string,
+
+  queueEntryUuid: string,
+  endedAt: Date,
+  endCurrentVisitPayload: EndVisitPayload,
+  visitUuid: string,
+  appointments: any,
+) {
+  const abortController = new AbortController();
+
+  if (endCurrentVisitPayload) {
+    if (appointments?.length) {
+      appointments.forEach(async (appointment) => {
+        await Promise.all([changeAppointmentStatus('Completed', appointment.uuid)]);
+      });
+    }
+
+    await Promise.all([endPatientStatus(queueUuid, queueEntryUuid, endedAt)]);
+
+    return updateVisit(visitUuid, endCurrentVisitPayload, abortController)
+      .pipe(first())
+      .subscribe(
+        (response) => {
+          return response.status;
+        },
+        (error) => {
+          return error;
+        },
+      );
+  } else {
+    return await Promise.all([endPatientStatus(queueUuid, queueEntryUuid, endedAt)])
+      .then((res) => {
+        return res;
+      })
+      .catch((error) => {
+        return error;
+      });
+  }
+}
+
+export function useCheckedInAppointments(patientUuid: string, startDate: string) {
+  const abortController = new AbortController();
+
+  const appointmentsSearchUrl = `${restBaseUrl}/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.filter((appointment) => appointment.status === 'CheckedIn')
+    : null;
+
+  return {
+    data: data ? appointments : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}
+
+export async function changeAppointmentStatus(toStatus: string, appointmentUuid: string) {
+  const url = `${restBaseUrl}/appointments/${appointmentUuid}/status-change`;
+  return openmrsFetch(url, {
+    body: { toStatus, onDate: statusChangeTime, timeZone: timeZone },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

package/src/remove-queue-entry-dialog/remove-queue-entry.scss

@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+#subHeading {
+  @include type.type-style('heading-compact-01');
+  color: $ui-05;
+}

package/src/remove-queue-entry-dialog/remove-queue-entry.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import RemoveQueueEntryDialog from './remove-queue-entry.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  voidQueueEntry: jest.fn(),
+  showNotification: jest.fn(),
+  useConfig: jest.fn(() => ({
+    visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+  })),
+}));
+
+describe('RemoveQueueEntryDialog', () => {
+  const queueEntry = {
+    queueUuid: 'fa1e98f1-f002-4174-9e55-34d60951e710',
+    queueEntryUuid: '712289ab-32c0-430f-87b6-d9c1e4e4686e',
+    visitUuid: 'c90386ff-ae85-45cc-8a01-25852099c5ae',
+    patientUuid: 'cc75ad73-c24b-499c-8db9-a7ef4fc0b36d',
+  };
+
+  it('renders dialog content', () => {
+    const closeModal = jest.fn();
+    render(<RemoveQueueEntryDialog queueEntry={queueEntry} closeModal={closeModal} />);
+
+    expect(screen.getByText('Service queue')).toBeInTheDocument();
+    expect(screen.getByText('Remove patient from queue and end active visit?')).toBeInTheDocument();
+    expect(screen.getByText(/Ending this visit will remove this patient/)).toBeInTheDocument();
+
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('End visit')).toBeInTheDocument();
+  });
+
+  it('calls closeModal when Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    const closeModal = jest.fn();
+
+    render(<RemoveQueueEntryDialog queueEntry={queueEntry} closeModal={closeModal} />);
+
+    await user.click(screen.getByText('Cancel'));
+
+    expect(closeModal).toHaveBeenCalledTimes(1);
+  });
+});

package/src/root.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import AppointmentsTable from './queue-patient-linelists/scheduled-appointments-table.component';
+import Home from './home.component';
+import ServicesTable from './queue-patient-linelists/queue-services-table.component';
+import QueueScreen from './queue-screen/queue-screen.component';
+import QueueTableByStatusView from './views/queue-table-by-status-view.component';
+
+const Root: React.FC = () => {
+  const serviceQueuesBasename = window.getOpenmrsSpaBase() + 'home/service-queues';
+
+  return (
+    <main>
+      <BrowserRouter basename={serviceQueuesBasename}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/queue-table-by-status/:queueUuid" element={<QueueTableByStatusView />} />
+          <Route path="/queue-table-by-status/:queueUuid/:statusUuid" element={<QueueTableByStatusView />} />
+          <Route path="/screen" element={<QueueScreen />} />
+          <Route path="/appointments-list/:value/" element={<AppointmentsTable />} />
+          <Route path="/queue-list/:service/:serviceUuid/:locationUuid" element={<ServicesTable />} />
+        </Routes>
+      </BrowserRouter>
+    </main>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}

package/src/root.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Root from './root.component';
+
+describe('Root Component', () => {
+  // Mock the pushState function and store the original implementation
+  const originalPushState = window.history.pushState;
+
+  // Restore the original pushState after all tests
+  afterAll(() => {
+    window.history.pushState = originalPushState;
+  });
+
+  it('renders ServicesTable component for "/service-queues/queue-list/:service/:serviceUuid/:locationUuid', () => {
+    window.history.pushState(
+      {},
+      'Queue List',
+      '/openmrs/spa/home/service-queues/queue-list/:service/:serviceUuid/:locationUuid',
+    );
+    render(<Root />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+});

package/src/routes.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0",
+    "queue": "^2.4.0-0"
+  },
+  "extensions": [
+    {
+      "name": "outpatient-side-nav-ext",
+      "component": "outpatientSideNav",
+      "slot": "outpatient-sidebar-slot",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "service-queues-dashboard-link",
+      "component": "serviceQueuesDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "service-queues",
+        "slot": "service-queues-dashboard-slot",
+        "title": "Service queues"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "queue-table-by-status-menu-dashboard-link",
+      "component": "queueTableByStatusMenu",
+      "meta": {
+        "name": "service-queues",
+        "slot": "service-queues-dashboard-slot",
+        "title": "Service queues"
+      },
+      "online": true,
+      "offline": true
+    },
+    {
+      "component": "root",
+      "name": "service-queues-dashboard",
+      "slot": "service-queues-dashboard-slot"
+    },
+    {
+      "name": "edit-queue-entry-status-modal",
+      "component": "editQueueEntryStatusModal"
+    },
+    {
+      "name": "patient-info-banner-slot",
+      "component": "patientInfoBannerSlot"
+    },
+    {
+      "name": "remove-queue-entry",
+      "component": "removeQueueEntry"
+    },
+    {
+      "name": "clear-all-queue-entries",
+      "component": "clearAllQueueEntries"
+    },
+    {
+      "name": "add-visit-to-queue-modal",
+      "component": "addVisitToQueueModal"
+    },
+    {
+      "name": "transition-queue-entry-status-modal",
+      "component": "transitionQueueEntryStatusModal"
+    },
+    {
+      "name": "previous-visit-summary-widget",
+      "component": "pastVisitSummary",
+      "slot": "previous-visit-summary-slot"
+    },
+    {
+      "name": "add-provider-to-room-modal",
+      "component": "addProviderToRoomModal"
+    },
+    {
+      "name": "transition-queue-entry-modal",
+      "component": "transitionQueueEntryModal"
+    },
+    {
+      "name": "edit-queue-entry-modal",
+      "component": "editQueueEntryModal"
+    },
+    {
+      "name": "undo-transition-queue-entry-modal",
+      "component": "undoTransitionQueueEntryModal"
+    },
+    {
+      "name": "void-queue-entry-modal",
+      "component": "voidQueueEntryModal"
+    },
+    {
+      "name": "end-queue-entry-modal",
+      "component": "endQueueEntryModal"
+    },
+    {
+      "name": "active-visits-row-actions",
+      "component": "activeVisitsRowActions",
+      "slot": "queue-table-serve-patient-slot"
+    },
+    {
+      "name": "visit-form-queue-fields",
+      "component": "visitFormQueueFields",
+      "slot":"visit-form-queue-slot"
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "service-queues-service-form",
+      "title": "addNewQueueService",
+      "component": "addNewQueueServiceWorkspace",
+      "type": "service-queues"
+    },
+    {
+      "name": "service-queues-room-form",
+      "title": "addNewQueueServiceRoom",
+      "component": "addNewQueueServiceRoomWorkspace",
+      "type": "service-queues"
+    },
+    {
+      "name": "service-queues-linelist-filter",
+      "title": "filter",
+      "component": "queueLinelistFilterWorkspace",
+      "type": "service-queues"
+    },
+    {
+      "name": "service-queues-patient-search",
+      "title": "searchPatient",
+      "component": "patientSearchWorkspace",
+      "type": "service-queues"
+    }
+  ]
+}

package/src/side-menu/nav-group/createNavGroup.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import NavGroupExtension from './nav-group.component';
+
+export const createNavGroup = ({
+  title,
+  slot,
+  renderIcon,
+}: {
+  title: string;
+  slot: string;
+  renderIcon?: React.ComponentType<any>;
+}) => {
+  const NavGroup = () => {
+    return <NavGroupExtension title={title} slotName={slot} renderIcon={renderIcon} />;
+  };
+  return NavGroup;
+};

package/src/side-menu/nav-group/nav-group.component.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import { SideNavMenu } from '@carbon/react';
+import { registerNavGroup } from './nav-group';
+
+export interface NavGroupExtensionProps {
+  title: string;
+  slotName: string;
+  renderIcon?: React.ComponentType<any>;
+}
+
+const NavGroupExtension = ({ title, slotName, renderIcon }: NavGroupExtensionProps) => {
+  useEffect(() => {
+    registerNavGroup(slotName);
+  }, [slotName]);
+
+  return (
+    <SideNavMenu renderIcon={renderIcon} title={title}>
+      <ExtensionSlot name={slotName} />
+    </SideNavMenu>
+  );
+};
+
+export default NavGroupExtension;