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

package/src/add-provider-queue-room/add-provider-queue-room.resource.ts

@@ -0,0 +1,76 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type ProvidersQueueRoom, type QueueRoom } from '../types';
+
+export function useQueueRooms(location: string, queueUuid: string) {
+  const apiUrl = queueUuid
+    ? `${restBaseUrl}/queueroom?location=${location}&queue=${queueUuid}`
+    : `${restBaseUrl}/queueroom?location=${location}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<QueueRoom> } }, Error>(
+    location ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    rooms: data ? data?.data?.results : [],
+    isError: error,
+    isLoading,
+  };
+}
+
+export function addProviderToQueueRoom(queueRoomUuid: string, providerUuid) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/roomprovidermap`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      queueRoom: {
+        uuid: queueRoomUuid,
+      },
+      provider: {
+        uuid: providerUuid,
+      },
+    },
+  });
+}
+
+export function updateProviderToQueueRoom(queueProviderMapUuid: string, queueRoomUuid: string, providerUuid) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`${restBaseUrl}/roomprovidermap/${queueProviderMapUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      queueRoom: {
+        uuid: queueRoomUuid,
+      },
+      provider: {
+        uuid: providerUuid,
+      },
+    },
+  });
+}
+
+export function useProvidersQueueRoom(providerUuid: string) {
+  const apiUrl = `${restBaseUrl}/roomprovidermap?provider=${providerUuid}`;
+
+  const { data, error, isLoading, mutate } = useSWR<{ data: { results: Array<ProvidersQueueRoom> } }, Error>(
+    providerUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  return {
+    providerRoom: data ? data?.data?.results : [],
+    isError: error,
+    isLoading,
+    mutate,
+  };
+}

package/src/add-provider-queue-room/add-provider-queue-room.scss

@@ -0,0 +1,17 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-04;
+}
+
+.checkbox {
+  padding-top: spacing.$spacing-04;
+}

package/src/add-provider-queue-room/add-provider-queue-room.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import AddProviderQueueRoom from './add-provider-queue-room.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useCurrentProvider: jest.fn(() => ({
+    currentProvider: { uuid: 'provider-uuid-1' },
+  })),
+  showSnackbar: jest.fn(),
+}));
+jest.mock('./add-provider-queue-room.resource', () => ({
+  useProvidersQueueRoom: jest.fn(() => ({
+    providerRoom: [
+      {
+        queueRoom: { uuid: 'c187d78b-5c54-49bf-a0f8-b7fb6034d36d' },
+        uuid: '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6',
+      },
+    ],
+    isLoading: false,
+    mutate: jest.fn(),
+  })),
+  updateProviderToQueueRoom: jest.fn().mockResolvedValue({ status: 200 }),
+  addProviderToQueueRoom: jest.fn(),
+  useQueueRooms: jest.fn(() => ({
+    rooms: [
+      { uuid: '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6', display: 'Room 1' },
+      { uuid: 'e7786ac0-ab62-11ec-b909-0242ac120002', display: 'Room 2' },
+    ],
+  })),
+}));
+
+jest.mock('../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({
+      queues: [
+        { uuid: 'e7786ac0-ab62-11ec-b909-0242ac120002', display: 'Service 1' },
+        { uuid: 'e7786ac0-ab62-11ec-b909-0242ac120032', display: 'Service 2' },
+      ],
+    }),
+  };
+});
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: [
+      { id: '1GHI12', name: 'Location 1' },
+      { id: '1GHI45', name: 'Location 2' },
+    ],
+  })),
+}));
+
+const providerUuid = 'cc75ad73-c24b-499c-8db9-a7ef4fc0b36d';
+
+describe('AddProviderQueueRoom', () => {
+  it('renders the form fields', () => {
+    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
+
+    expect(screen.getByText('Select a room')).toBeInTheDocument();
+    expect(screen.getByLabelText('Retain location')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('updates the queue room selection', async () => {
+    const user = userEvent.setup();
+    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
+
+    // TODO: Fix missing dropdown labels in the form
+
+    // const selectQueueRoom: HTMLInputElement = screen.getByRole('combobox');
+    // await user.selectOptions(selectQueueRoom, 'Room 1');
+
+    // expect(selectQueueRoom.value).toBe('6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
+  });
+
+  it('should update the retain location checkbox', async () => {
+    const user = userEvent.setup();
+    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={jest.fn()} />);
+
+    const retainLocationCheckbox: HTMLInputElement = screen.getByRole('checkbox');
+    await user.click(retainLocationCheckbox);
+
+    expect(retainLocationCheckbox.checked).toBe(true);
+  });
+
+  it('should submit the form and add provider to queue room when all fields are filled', async () => {
+    const user = userEvent.setup();
+    const mockCloseModal = jest.fn();
+
+    render(<AddProviderQueueRoom providerUuid={providerUuid} closeModal={mockCloseModal} />);
+
+    // TODO: Fix missing dropdown labels in the form
+
+    // const queueRoomSelect = screen.getByRole('combobox');
+    // const submitButton = screen.getByText('Save');
+
+    // await user.selectOptions(queueRoomSelect, '6b3e233d-2b44-40ca-b0c8-c5a57a8c51b6');
+    // await user.click(submitButton);
+
+    // expect(mockCloseModal).toHaveBeenCalled();
+    // expect(showSnackbar).toHaveBeenCalled();
+  });
+});

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ButtonSkeleton, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useMutateQueueEntries } from '../hooks/useQueueEntries';
+import { type QueueEntry } from '../types';
+import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
+import styles from './clear-queue-entries-dialog.scss';
+
+interface ClearQueueEntriesDialogProps {
+  queueEntries: Array<QueueEntry>;
+  closeModal: () => void;
+}
+
+const ClearQueueEntriesDialog: React.FC<ClearQueueEntriesDialogProps> = ({ queueEntries, closeModal }) => {
+  const { t } = useTranslation();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleClearQueueBatchRequest = useCallback(() => {
+    setIsSubmitting(true);
+    batchClearQueueEntries(queueEntries).then(
+      (response) => {
+        closeModal();
+        showSnackbar({
+          isLowContrast: true,
+          title: t('clearQueue', 'Clear queue'),
+          kind: 'success',
+          subtitle: t('queuesClearedSuccessfully', 'Queues cleared successfully'),
+        });
+        mutateQueueEntries();
+      },
+      (error) => {
+        showSnackbar({
+          title: t('errorClearingQueues', 'Error clearing queues'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+        closeModal();
+      },
+    );
+  }, [closeModal, mutateQueueEntries, t, queueEntries]);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('serviceQueue', 'Service queue')}
+        title={t('clearAllQueueEntries', 'Clear all queue entries?')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'clearAllQueueEntriesWarningMessage',
+            'Clearing all queue entries will remove  all the patients from the queues',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        {isSubmitting === true ? (
+          <ButtonSkeleton />
+        ) : (
+          <Button kind="danger" onClick={handleClearQueueBatchRequest}>
+            {t('clearQueue', 'Clear queue')}
+          </Button>
+        )}
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default ClearQueueEntriesDialog;

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.resource.ts

@@ -0,0 +1,7 @@
+import { endPatientStatus } from '../active-visits/active-visits-table.resource';
+import { type QueueEntry } from '../types';
+
+export async function batchClearQueueEntries(queueEntries: Array<QueueEntry>) {
+  const endedAt = new Date();
+  return await Promise.all(queueEntries.map((qe) => endPatientStatus(qe?.queue.uuid, qe?.uuid, endedAt)));
+}

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.scss

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

package/src/clear-queue-entries-dialog/clear-queue-entries-dialog.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { batchClearQueueEntries } from './clear-queue-entries-dialog.resource';
+import ClearQueueEntriesDialog from './clear-queue-entries-dialog.component';
+
+const mockBatchClearQueueEntries = batchClearQueueEntries as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  showSnackbar: jest.fn(),
+}));
+
+jest.mock('./clear-queue-entries-dialog.resource');
+
+jest.mock('../hooks/useQueueEntries', () => ({
+  useMutateQueueEntries: () => ({ mutateQueueEntries: jest.fn() }),
+}));
+
+describe('ClearQueueEntriesDialog Component', () => {
+  const visitQueueEntriesMock = [];
+
+  it('renders the component with warning message', () => {
+    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={() => {}} />);
+
+    expect(screen.getByRole('heading', { name: 'Service queue' })).toBeInTheDocument();
+    expect(screen.getByText('Clear all queue entries?')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Clear queue')).toBeInTheDocument();
+  });
+
+  it('should close modal when clicked on cancel', async () => {
+    const user = userEvent.setup();
+    const closeModalMock = jest.fn();
+
+    mockBatchClearQueueEntries.mockImplementationOnce(() => Promise.resolve());
+    render(<ClearQueueEntriesDialog visitQueueEntries={visitQueueEntriesMock} closeModal={closeModalMock} />);
+
+    await user.click(screen.getByText('Cancel'));
+
+    expect(closeModalMock).toHaveBeenCalled();
+  });
+});

package/src/clear-queue-entries-dialog/clear-queue-entries.component.tsx

@@ -0,0 +1,43 @@
+import { Button } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { isDesktop, showModal, useLayoutType } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry } from '../types';
+import styles from './clear-queue-entries-dialog.scss';
+
+interface ClearQueueEntriesProps {
+  queueEntries: Array<QueueEntry>;
+}
+
+/**
+ * Button to end queue entries of all patients in a queue table and end their visits.
+ * TODO: Remove this button once we have a better way to end queue entries.
+ * @param param0
+ * @returns
+ * @deprecated
+ */
+const ClearQueueEntries: React.FC<ClearQueueEntriesProps> = ({ queueEntries }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  const launchClearAllQueueEntriesModal = useCallback(() => {
+    const dispose = showModal('clear-all-queue-entries', {
+      closeModal: () => dispose(),
+      queueEntries,
+    });
+  }, [queueEntries]);
+
+  return (
+    <Button
+      size={isDesktop(layout) ? 'sm' : 'lg'}
+      kind="danger--tertiary"
+      renderIcon={(props) => <TrashCan size={16} {...props} />}
+      onClick={launchClearAllQueueEntriesModal}
+      iconDescription={t('clearQueue', 'Clear queue')}>
+      {t('clearQueue', 'Clear queue')}
+    </Button>
+  );
+};
+
+export default ClearQueueEntries;