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

package/src/active-visits/active-visits-table.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { ConfigObject, useConfig, usePagination, useSession } from '@openmrs/esm-framework';
+import { of } from 'rxjs';
+import { renderWithSwr } from '../../../../tools/test-helpers';
+import { mockServices, mockVisitQueueEntries } from '../../__mocks__/active-visits.mock';
+import { mockMappedQueueEntries } from '../../../../__mocks__/queue-entry.mock';
+import { useVisitQueueEntries } from './active-visits-table.resource';
+import { useQueueRooms } from '../add-provider-queue-room/add-provider-queue-room.resource';
+import { mockSession } from '../../../../__mocks__/session.mock';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import ActiveVisitsTable from './active-visits-table.component';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockUsePagination = usePagination as jest.Mock;
+const mockGoToPage = jest.fn();
+const mockUseVisitQueueEntries = useVisitQueueEntries as jest.Mock;
+const mockQueueLocations = useQueueLocations as jest.Mock;
+const mockUseQueueRooms = useQueueRooms as jest.Mock;
+const mockUseSession = useSession as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+  };
+});
+
+jest.mock('./active-visits-table.resource', () => {
+  const originalModule = jest.requireActual('./active-visits-table.resource');
+
+  return {
+    ...originalModule,
+    useServices: jest.fn().mockReturnValue({ services: mockServices }),
+    useVisitQueueEntries: jest.fn(),
+  };
+});
+
+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('../helpers/helpers', () => {
+  const originalModule = jest.requireActual('../helpers/helpers');
+
+  return {
+    ...originalModule,
+    getSelectedServiceName: jest.fn().mockReturnValue(of({ serviceName: 'All' })),
+  };
+});
+
+jest.setTimeout(20000);
+
+describe('ActiveVisitsTable: ', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession),
+      mockedUseConfig.mockReturnValue({
+        concepts: {
+          priorityConceptSetUuid: '96105db1-abbf-48d2-8a52-a1d561fd8c90',
+          serviceConceptSetUuid: '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a',
+          visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+        },
+        showQueueTableTab: false,
+      } as ConfigObject);
+  });
+
+  it('renders an empty state view if data is unavailable', async () => {
+    mockQueueLocations.mockReturnValueOnce({ queueLocations: [] });
+    mockUseQueueRooms.mockReturnValue({ rooms: [] });
+    mockUseVisitQueueEntries.mockReturnValueOnce({ visitQueueEntries: [], isLoading: false });
+
+    renderActiveVisitsTable();
+
+    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.mockReturnValueOnce({ queueLocations: mockQueueLocations });
+    mockUseQueueRooms.mockReturnValue({ rooms: mockUseQueueRooms });
+    mockUseVisitQueueEntries.mockReturnValue({ visitQueueEntries: mockVisitQueueEntries, isLoading: false });
+    mockUsePagination.mockReturnValue({
+      results: mockMappedQueueEntries.data.slice(0, 2),
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    renderActiveVisitsTable();
+
+    await waitFor(() => screen.getByRole('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: /eric test ric/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /john smith/i })).toBeInTheDocument();
+
+    const expectedColumnHeaders = [/name/, /priority/, /status/, /wait time/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const expectedTableRows = [
+      /Eric Test Ric Not Urgent Waiting For Triage 206 hours and 2 minutes/,
+      /John Smith Emergency Attending Clinical Consultation 206 hours and 2 minutes/,
+    ];
+
+    expectedTableRows.forEach((row) => {
+      expect(screen.getByRole('row', { name: new RegExp(row, 'i') })).toBeInTheDocument();
+    });
+  });
+});
+
+function renderActiveVisitsTable() {
+  renderWithSwr(<ActiveVisitsTable />);
+}

package/src/active-visits/change-status-dialog.component.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useState } from 'react';
+import {
+  Button,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Form,
+  ContentSwitcher,
+  Switch,
+  Select,
+  SelectItem,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ConfigObject,
+  navigate,
+  showNotification,
+  showToast,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useConfig,
+} from '@openmrs/esm-framework';
+import { MappedQueueEntry } from '../types';
+import {
+  updateQueueEntry,
+  usePriority,
+  useServices,
+  useStatus,
+  useVisitQueueEntries,
+} from './active-visits-table.resource';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import styles from './change-status-dialog.scss';
+
+interface ChangeStatusDialogProps {
+  queueEntry: MappedQueueEntry;
+  closeModal: () => void;
+}
+
+const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const [priority, setPriority] = useState(queueEntry?.priorityUuid);
+  const [newQueueUuid, setNewQueueUuid] = useState('');
+  const { priorities } = usePriority();
+  const config = useConfig() as ConfigObject;
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState(queueEntry?.queueLocation);
+  const { services } = useServices(selectedQueueLocation);
+  const { queueLocations } = useQueueLocations();
+  const [editLocation, setEditLocation] = useState(false);
+  const { mutate } = useVisitQueueEntries('', selectedQueueLocation);
+  const { statuses } = useStatus();
+  const [queueStatus, setQueueStatus] = useState(queueEntry?.statusUuid);
+
+  const changeQueueStatus = useCallback(
+    (event) => {
+      event.preventDefault();
+      const defaultPriority = config.concepts.defaultPriorityConceptUuid;
+      setEditLocation(false);
+      const queuePriority = priority === '' ? defaultPriority : priority;
+      const emergencyPriorityConceptUuid = config.concepts.emergencyPriorityConceptUuid;
+      const sortWeight = priority === emergencyPriorityConceptUuid ? 1.0 : 0.0;
+      const endDate = toDateObjectStrict(toOmrsIsoString(new Date()));
+      updateQueueEntry(
+        queueEntry?.visitUuid,
+        queueEntry?.queueUuid,
+        event?.target['service']?.value,
+        queueEntry?.queueEntryUuid,
+        queueEntry?.patientUuid,
+        queuePriority,
+        queueStatus,
+        endDate,
+        sortWeight,
+      ).then(
+        ({ status }) => {
+          if (status === 201) {
+            showToast({
+              critical: true,
+              title: t('updateEntry', 'Update entry'),
+              kind: 'success',
+              description: t('queueEntryUpdateSuccessfully', 'Queue Entry Updated Successfully'),
+            });
+            closeModal();
+            mutate();
+            navigate({ to: `${window.spaBase}/home/service-queues` });
+          }
+        },
+        (error) => {
+          showNotification({
+            title: t('queueEntryUpdateFailed', 'Error updating queue entry status'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+        },
+      );
+    },
+    [
+      config.concepts.defaultPriorityConceptUuid,
+      config.concepts.emergencyPriorityConceptUuid,
+      priority,
+      queueEntry?.visitUuid,
+      queueEntry?.queueUuid,
+      queueEntry?.queueEntryUuid,
+      queueEntry?.patientUuid,
+      queueStatus,
+      t,
+      closeModal,
+      mutate,
+    ],
+  );
+
+  if (Object.keys(queueEntry)?.length === 0) {
+    return <ModalHeader closeModal={closeModal} title={t('patientNotInQueue', 'The patient is not in the queue')} />;
+  }
+
+  if (Object.keys(queueEntry)?.length > 0) {
+    return (
+      <div>
+        <Form onSubmit={changeQueueStatus}>
+          <ModalHeader
+            closeModal={closeModal}
+            title={t('movePatientToNextService', 'Move patient to the next service?')}
+          />
+          <ModalBody>
+            <div className={styles.modalBody}>
+              <h5>
+                {queueEntry.name} &nbsp; · &nbsp;{queueEntry.patientSex} &nbsp; · &nbsp;{queueEntry.patientAge}&nbsp;
+                {t('years', 'Years')}
+              </h5>
+            </div>
+            <section>
+              <Select
+                labelText={t('selectQueueLocation', 'Select a queue location')}
+                id="location"
+                invalidText="Required"
+                value={selectedQueueLocation}
+                onChange={(event) => {
+                  setSelectedQueueLocation(event.target.value);
+                  setEditLocation(true);
+                }}>
+                {!selectedQueueLocation ? <SelectItem text={t('selectOption', 'Select an option')} value="" /> : null}
+                {queueLocations?.length > 0 &&
+                  queueLocations.map((location) => (
+                    <SelectItem key={location.id} text={location.name} value={location.id}>
+                      {location.name}
+                    </SelectItem>
+                  ))}
+              </Select>
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
+              <Select
+                labelText={t('selectService', 'Select a service')}
+                id="service"
+                invalidText="Required"
+                value={newQueueUuid}
+                onChange={(event) => setNewQueueUuid(event.target.value)}>
+                {!newQueueUuid && editLocation === true ? (
+                  <SelectItem text={t('selectService', 'Select a service')} value="" />
+                ) : null}
+                {!queueEntry.queueUuid ? <SelectItem text={t('selectService', 'Select a service')} value="" /> : null}
+                {services?.length > 0 &&
+                  services.map((service) => (
+                    <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                      {service.display}
+                    </SelectItem>
+                  ))}
+              </Select>
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
+              {!statuses?.length ? (
+                <InlineNotification
+                  className={styles.inlineNotification}
+                  kind={'error'}
+                  lowContrast
+                  subtitle={t('configureStatus', 'Please configure status to continue.')}
+                  title={t('noStatusConfigured', 'No status configured')}
+                />
+              ) : (
+                <RadioButtonGroup
+                  className={styles.radioButtonWrapper}
+                  name="status"
+                  defaultSelected={queueStatus}
+                  onChange={(uuid) => {
+                    setQueueStatus(uuid);
+                  }}>
+                  {statuses?.length > 0 &&
+                    statuses.map(({ uuid, display }) => <RadioButton key={uuid} labelText={display} value={uuid} />)}
+                </RadioButtonGroup>
+              )}
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queuePriority', 'Queue priority')}</div>
+              <ContentSwitcher
+                size="sm"
+                selectedIndex={1}
+                onChange={(event) => {
+                  setPriority(event.name as any);
+                }}>
+                {priorities?.length > 0 ? (
+                  priorities.map(({ uuid, display }) => {
+                    return <Switch name={uuid} text={display} key={uuid} value={uuid} />;
+                  })
+                ) : (
+                  <Switch
+                    name={t('noPriorityFound', 'No priority found')}
+                    text={t('noPriorityFound', 'No priority found')}
+                    value={null}
+                  />
+                )}
+              </ContentSwitcher>
+            </section>
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary" onClick={closeModal}>
+              {t('cancel', 'Cancel')}
+            </Button>
+            <Button type="submit">{t('moveToNextService', 'Move to next service')}</Button>
+          </ModalFooter>
+        </Form>
+      </div>
+    );
+  }
+};
+
+export default ChangeStatus;

package/src/active-visits/change-status-dialog.scss

@@ -0,0 +1,32 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-03;
+  min-height: spacing.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-02;
+  margin: spacing.$spacing-03 0;
+}
+
+section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: spacing.$spacing-05;
+}

package/src/active-visits/change-status-dialog.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { screen, render, waitFor, within } from '@testing-library/react';
+import { mockServices } from '../../__mocks__/active-visits.mock';
+import { mockPriorities, mockStatus } from '../../../../__mocks__/metrics.mock';
+import { mockSession } from '../../../../__mocks__/session.mock';
+import { mockLocations } from '../../../../__mocks__/locations.mock';
+import { ConfigObject, showToast, useConfig, showNotification } from '@openmrs/esm-framework';
+import ChangeStatus from './change-status-dialog.component';
+import { mockQueueEntry } from '../../../../__mocks__/queue-entry.mock';
+import userEvent from '@testing-library/user-event';
+import { updateQueueEntry } from './active-visits-table.resource';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockShowToast = showToast as jest.Mock;
+const mockUpdateQueueEntry = updateQueueEntry as jest.Mock;
+const mockShowNotification = showNotification as jest.Mock;
+
+jest.mock('./active-visits-table.resource.ts', () => {
+  const originalModule = jest.requireActual('./active-visits-table.resource.ts');
+
+  return {
+    ...originalModule,
+    useServices: jest.fn().mockReturnValue({ services: mockServices }),
+    usePriority: jest.fn().mockReturnValue({ priorities: mockPriorities }),
+    useStatus: jest.fn().mockReturnValue({ statuses: mockStatus }),
+    updateQueueEntry: jest.fn(),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+    toOmrsIsoString: jest.fn(),
+    toDateObjectStrict: jest.fn(),
+    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
+    useSession: jest.fn().mockImplementation(() => mockSession.data),
+  };
+});
+
+describe('Queue entry details', () => {
+  beforeEach(() =>
+    mockedUseConfig.mockReturnValue({
+      concepts: {
+        priorityConceptSetUuid: '96105db1-abbf-48d2-8a52-a1d561fd8c90',
+        serviceConceptSetUuid: '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a',
+        statusConceptSetUuid: 'd60ffa60-fca6-4c60-aea9-a79469ae65c7',
+      },
+    } as ConfigObject),
+  );
+
+  it('should update a queue entry and display toast message', async () => {
+    const user = userEvent.setup();
+
+    mockUpdateQueueEntry.mockResolvedValueOnce({ data: mockQueueEntry, status: 201, statusText: 'Updated' });
+
+    renderUpdateQueueEntryDialog();
+    expect(screen.getByText(/queue service/i)).toBeInTheDocument();
+    expect(screen.getByText(/queue priority/i)).toBeInTheDocument();
+
+    await waitFor(() => user.click(screen.getByRole('button', { name: /move to next service/i })));
+
+    expect(mockShowToast).toHaveBeenCalledTimes(1);
+    expect(mockShowToast).toHaveBeenCalledWith({
+      critical: true,
+      kind: 'success',
+      title: 'Update entry',
+      description: 'Queue Entry Updated Successfully',
+    });
+  });
+  it('should display error message when rest api call to update queue entry fails', async () => {
+    const user = userEvent.setup();
+
+    mockUpdateQueueEntry.mockRejectedValue({
+      message: 'Internal Server Error',
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+      },
+    });
+
+    renderUpdateQueueEntryDialog();
+
+    expect(screen.getByText(/move patient to the next service?/i)).toBeInTheDocument();
+    expect(screen.getByText(/queue service/i)).toBeInTheDocument();
+    expect(screen.getByText(/queue priority/i)).toBeInTheDocument();
+    const queueServiceTypes = screen.getByLabelText('Select a service');
+
+    expect(within(queueServiceTypes).getAllByRole('option')).toHaveLength(2);
+    expect(within(queueServiceTypes).getAllByRole('option')[0]).toHaveValue('176052c7-5fd4-4b33-89cc-7bae6848c65a');
+    expect(within(queueServiceTypes).getAllByRole('option')[1]).toHaveValue('d80ff12a-06a7-11ed-b939-0242ac120002');
+
+    await waitFor(() => user.click(screen.getByRole('button', { name: /move to next service/i })));
+
+    expect(mockShowNotification).toHaveBeenCalledWith({
+      description: 'Internal Server Error',
+      kind: 'error',
+      title: 'Error updating queue entry status',
+      critical: true,
+    });
+  });
+});
+
+const renderUpdateQueueEntryDialog = () => {
+  render(<ChangeStatus queueEntry={mockQueueEntry} closeModal={() => false} />);
+};