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

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render, within } from '@testing-library/react';
+import { mockServices, mockPriorities, mockStatus, mockSession, mockLocations, mockMappedQueueEntry } from '__mocks__';
+import { type ConfigObject, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { updateQueueEntry } from './active-visits-table.resource';
+import ChangeStatus from './change-status-dialog.component';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockShowSnackbar = showSnackbar as jest.Mock;
+const mockUpdateQueueEntry = updateQueueEntry as jest.Mock;
+
+jest.mock('./active-visits-table.resource', () => {
+  const originalModule = jest.requireActual('./active-visits-table.resource');
+
+  return {
+    ...originalModule,
+    updateQueueEntry: jest.fn(),
+  };
+});
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => {
+  return {
+    useQueueLocations: jest.fn().mockReturnValue({
+      queueLocations: mockLocations.data?.results.map((location) => ({ ...location, id: location.uuid })),
+    }),
+  };
+});
+
+jest.mock('../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({ queues: mockServices }),
+  };
+});
+
+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: {},
+    } as ConfigObject),
+  );
+
+  it('should update a queue entry and display toast message', async () => {
+    const user = userEvent.setup();
+
+    mockUpdateQueueEntry.mockResolvedValueOnce({ data: mockMappedQueueEntry, status: 201, statusText: 'Updated' });
+
+    renderUpdateQueueEntryDialog();
+    expect(screen.getByText(/queue service/i)).toBeInTheDocument();
+    expect(screen.getByText(/queue priority/i)).toBeInTheDocument();
+
+    // user selects a service
+    const queueServiceTypes = screen.getByRole('combobox', { name: /select a service/i });
+    await user.selectOptions(queueServiceTypes, '176052c7-5fd4-4b33-89cc-7bae6848c65a');
+
+    // user selects queue location
+    const queueLocation = screen.getByRole('combobox', { name: /Select a queue location/i });
+    await user.selectOptions(queueLocation, 'some-uuid1');
+
+    // user selects queue status
+    const queueStatus = screen.getByRole('radio', { name: /Waiting/i });
+    await user.click(queueStatus);
+
+    // user selects a priority
+    const urgentPriority = screen.getByRole('tab', { name: 'Urgent' });
+    await user.click(urgentPriority);
+
+    await user.click(screen.getByRole('button', { name: /move to next service/i }));
+
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      title: 'Update entry',
+      subtitle: '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.getByRole('combobox', { name: /select a service/i });
+
+    // should have 3 queue services options
+    const options = within(queueServiceTypes).getAllByRole('option');
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveValue('');
+    expect(options[1]).toHaveValue('176052c7-5fd4-4b33-89cc-7bae6848c65a');
+    expect(options[2]).toHaveValue('d80ff12a-06a7-11ed-b939-0242ac120002');
+
+    // user selects a service
+    await user.selectOptions(queueServiceTypes, '176052c7-5fd4-4b33-89cc-7bae6848c65a');
+
+    // user selects queue location
+    const queueLocation = screen.getByRole('combobox', { name: /Select a queue location/i });
+    await user.selectOptions(queueLocation, 'some-uuid1');
+
+    // user selects queue status
+    const queueStatus = screen.getByRole('radio', { name: /Waiting/i });
+    await user.click(queueStatus);
+
+    // user selects a priority
+    const urgentPriority = screen.getByRole('tab', { name: 'Urgent' });
+    await user.click(urgentPriority);
+
+    await user.click(screen.getByRole('button', { name: /move to next service/i }));
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      subtitle: 'Internal Server Error',
+      kind: 'error',
+      title: 'Error updating queue entry status',
+    });
+  });
+
+  test('should show error message when user tries to update queue entry without selecting required fields', async () => {
+    const user = userEvent.setup();
+    mockUpdateQueueEntry.mockResolvedValueOnce({ data: mockMappedQueueEntry, status: 201, statusText: 'Updated' });
+
+    renderUpdateQueueEntryDialog();
+
+    await user.click(screen.getByRole('button', { name: /move to next service/i }));
+    expect(screen.getByText(/Queue location is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/service is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/status is required/i)).toBeInTheDocument();
+  });
+});
+
+const renderUpdateQueueEntryDialog = () => {
+  render(<ChangeStatus queueEntry={mockMappedQueueEntry} closeModal={() => false} />);
+};

package/src/add-patient-toqueue/add-patient-toqueue-dialog.component.tsx

@@ -0,0 +1,228 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Form,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+  RadioButtonGroup,
+  RadioButton,
+} from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { postQueueEntry } from '../active-visits/active-visits-table.resource';
+import styles from './add-patient-toqueue-dialog.scss';
+import { type ActiveVisit, useMissingQueueEntries } from '../visits-missing-inqueue/visits-missing-inqueue.resource';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueues } from '../hooks/useQueues';
+import { useMutateQueueEntries } from '../hooks/useQueueEntries';
+import { type ConfigObject } from '../config-schema';
+import { RadioButtonSkeleton } from '@carbon/react';
+import { SelectSkeleton } from '@carbon/react';
+
+interface AddVisitToQueueDialogProps {
+  visitDetails: ActiveVisit;
+  closeModal: () => void;
+}
+
+const AddVisitToQueue: React.FC<AddVisitToQueueDialogProps> = ({ visitDetails, closeModal }) => {
+  const { t } = useTranslation();
+
+  const visitUuid = visitDetails?.visitUuid;
+  const [queueUuid, setQueueUuid] = useState('');
+  const patientUuid = visitDetails?.patientUuid;
+  const patientName = visitDetails?.name;
+  const patientAge = visitDetails?.age;
+  const patientSex = visitDetails?.gender;
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState('');
+  const { queues, isLoading: isLoadingQueues } = useQueues(selectedQueueLocation);
+  const { queueLocations, isLoading: isLoadingQueueLocations } = useQueueLocations();
+  const [isMissingPriority, setIsMissingPriority] = useState(false);
+  const [isMissingService, setIsMissingService] = useState(false);
+  const config = useConfig<ConfigObject>();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const [priority, setPriority] = useState(config.concepts.defaultPriorityConceptUuid);
+  const priorities = queues.find((q) => q.uuid === queueUuid)?.allowedPriorities ?? [];
+
+  const addVisitToQueue = useCallback(() => {
+    if (!queueUuid) {
+      setIsMissingService(true);
+      return;
+    }
+    setIsMissingService(false);
+
+    if (!priority) {
+      setIsMissingPriority(true);
+      return;
+    }
+    setIsMissingPriority(false);
+    const emergencyPriorityConceptUuid = config.concepts.emergencyPriorityConceptUuid;
+    const sortWeight = priority === emergencyPriorityConceptUuid ? 1.0 : 0.0;
+    const status = config.concepts.defaultStatusConceptUuid;
+    const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
+
+    postQueueEntry(
+      visitUuid,
+      queueUuid,
+      patientUuid,
+      priority,
+      status,
+      sortWeight,
+      selectedQueueLocation,
+      visitQueueNumberAttributeUuid,
+    ).then(
+      ({ status }) => {
+        if (status === 201) {
+          showSnackbar({
+            isLowContrast: true,
+            title: t('addEntry', 'Add entry'),
+            kind: 'success',
+            subtitle: t('queueEntryAddedSuccessfully', 'Queue entry added successfully'),
+          });
+          closeModal();
+          mutateQueueEntries();
+        }
+      },
+      (error) => {
+        showSnackbar({
+          title: t('queueEntryAddFailed', 'Error adding queue entry status'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+      },
+    );
+  }, [
+    queueUuid,
+    priority,
+    config.concepts.emergencyPriorityConceptUuid,
+    config.concepts.defaultStatusConceptUuid,
+    config.visitQueueNumberAttributeUuid,
+    visitUuid,
+    patientUuid,
+    selectedQueueLocation,
+    t,
+    closeModal,
+    mutateQueueEntries,
+  ]);
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('addVisitToQueue', 'Add Visit To Queue?')} />
+      <ModalBody>
+        <Form onSubmit={addVisitToQueue}>
+          <div className={styles.modalBody}>
+            <h5>
+              {patientName} &nbsp; · &nbsp;{patientSex} &nbsp; · &nbsp;{patientAge}&nbsp;{t('years', 'Years')}
+            </h5>
+          </div>
+          <section>
+            {isLoadingQueueLocations ? (
+              <SelectSkeleton />
+            ) : (
+              <Select
+                labelText={t('selectQueueLocation', 'Select a queue location')}
+                id="location"
+                invalidText="Required"
+                value={selectedQueueLocation}
+                onChange={(event) => setSelectedQueueLocation(event.target.value)}>
+                {!selectedQueueLocation ? (
+                  <SelectItem text={t('selectQueueLocation', 'Select a queue location')} 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>
+            {isLoadingQueues ? (
+              <SelectSkeleton />
+            ) : (
+              <Select
+                labelText={t('selectService', 'Select a service')}
+                id="service"
+                invalidText="Required"
+                value={queueUuid}
+                onChange={(event) => setQueueUuid(event.target.value)}>
+                {!queueUuid ? <SelectItem text={t('chooseService', 'Select a service')} value="" /> : null}
+                {queues?.length > 0 &&
+                  queues.map((service) => (
+                    <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
+                      {service.display}
+                    </SelectItem>
+                  ))}
+              </Select>
+            )}
+          </section>
+          {isMissingService && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('pleaseSelectService', 'Please select a service')}
+              />
+            </section>
+          )}
+
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
+            {isLoadingQueues ? (
+              <RadioButtonGroup>
+                <RadioButtonSkeleton />
+                <RadioButtonSkeleton />
+                <RadioButtonSkeleton />
+              </RadioButtonGroup>
+            ) : !priorities?.length ? (
+              <InlineNotification
+                className={styles.inlineNotification}
+                kind={'error'}
+                lowContrast
+                subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
+                title={t('noPriorityFound', 'No priority found')}
+              />
+            ) : (
+              <RadioButtonGroup
+                className={styles.radioButtonWrapper}
+                name="priority"
+                defaultSelected={priority}
+                onChange={(uuid) => {
+                  setPriority(uuid);
+                }}>
+                {priorities?.length > 0 &&
+                  priorities.map(({ uuid, display }) => <RadioButton key={uuid} labelText={display} value={uuid} />)}
+              </RadioButtonGroup>
+            )}
+          </section>
+          {isMissingPriority && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('missingPriority', 'Please select a priority')}
+              />
+            </section>
+          )}
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={addVisitToQueue}>{t('save', 'Save')}</Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default AddVisitToQueue;

package/src/add-patient-toqueue/add-patient-toqueue-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/add-provider-queue-room/add-provider-queue-room.component.tsx

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Checkbox,
+  Dropdown,
+  Form,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+} from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import {
+  addProviderToQueueRoom,
+  updateProviderToQueueRoom,
+  useProvidersQueueRoom,
+  useQueueRooms,
+} from './add-provider-queue-room.resource';
+import {
+  updatedSelectedQueueRoomTimestamp,
+  updateIsPermanentProviderQueueRoom,
+  updateSelectedQueueLocationName,
+  updateSelectedQueueLocationUuid,
+  updateSelectedServiceName,
+  updateSelectedServiceUuid,
+  useIsPermanentProviderQueueRoom,
+  useSelectedQueueLocationUuid,
+  useSelectedServiceName,
+  useSelectedServiceUuid,
+} from '../helpers/helpers';
+import styles from './add-provider-queue-room.scss';
+import { useQueues } from '../hooks/useQueues';
+
+interface AddProviderQueueRoomProps {
+  providerUuid: string;
+  closeModal: () => void;
+}
+
+const AddProviderQueueRoom: React.FC<AddProviderQueueRoomProps> = ({ providerUuid, closeModal }) => {
+  const { t } = useTranslation();
+
+  const currentLocationName = useSelectedServiceName();
+  const currentLocationUuid = useSelectedQueueLocationUuid();
+  const currentServiceUuid = useSelectedServiceUuid();
+  const currentServiceName = useSelectedServiceName();
+  const currentIsPermanentProviderQueueRoom = useIsPermanentProviderQueueRoom();
+  const { providerRoom, isLoading: loading } = useProvidersQueueRoom(providerUuid);
+  const [queueRoomUuid, setQueueRoomUuid] = useState('');
+  const [queueProviderMapUuid, setQueueProviderMapUuid] = useState('');
+
+  useEffect(() => {
+    if (providerRoom?.length > 0) {
+      setQueueRoomUuid(providerRoom?.[0].queueRoom?.uuid);
+      setQueueProviderMapUuid(providerRoom?.[0].uuid);
+    }
+  }, [providerRoom]);
+
+  const { mutate } = useProvidersQueueRoom(providerUuid);
+  const { queues } = useQueues(currentLocationUuid);
+  const { rooms } = useQueueRooms(currentLocationUuid, currentServiceUuid);
+  const { queueLocations } = useQueueLocations();
+  const [isMissingQueueRoom, setIsMissingQueueRoom] = useState(false);
+
+  const handleServiceChange = ({ selectedItem }) => {
+    localStorage.setItem('queueServiceName', selectedItem.name);
+    localStorage.setItem('queueServiceUuid', selectedItem.uuid);
+    updateSelectedServiceName(selectedItem.name);
+    updateSelectedServiceUuid(selectedItem.uuid);
+  };
+
+  const handleQueueLocationChange = ({ selectedItem }) => {
+    localStorage.setItem('queueLocationUuid', selectedItem.id);
+    localStorage.setItem('queueLocationName', selectedItem.name);
+    updateSelectedQueueLocationName(selectedItem.name);
+    updateSelectedQueueLocationUuid(selectedItem.id);
+  };
+
+  const handleRetainLocation = (e) => {
+    localStorage.setItem('isPermanentProviderQueueRoom', JSON.parse(e.target.checked));
+    updateIsPermanentProviderQueueRoom(JSON.parse(e.target.checked));
+  };
+
+  const onSubmit = useCallback(() => {
+    if (!queueRoomUuid) {
+      setIsMissingQueueRoom(true);
+      return;
+    }
+    setIsMissingQueueRoom(false);
+
+    if (providerRoom?.length > 0) {
+      updateProviderToQueueRoom(queueProviderMapUuid, queueRoomUuid, providerUuid).then(
+        ({ status }) => {
+          if (status === 200) {
+            showSnackbar({
+              isLowContrast: true,
+              title: t('updateRoom', 'Update room'),
+              kind: 'success',
+              subtitle: t('queueRoomUpdatedSuccessfully', 'Queue room updated successfully'),
+            });
+            closeModal();
+            localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
+            updatedSelectedQueueRoomTimestamp(new Date());
+            mutate();
+          }
+        },
+        (error) => {
+          showSnackbar({
+            title: t('queueRoomAddFailed', 'Error adding queue room'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+          closeModal();
+        },
+      );
+    } else {
+      addProviderToQueueRoom(queueRoomUuid, providerUuid).then(
+        ({ status }) => {
+          if (status === 201) {
+            showSnackbar({
+              isLowContrast: true,
+              title: t('addRoom', 'Add room'),
+              kind: 'success',
+              subtitle: t('queueRoomAddedSuccessfully', 'Queue room added successfully'),
+            });
+            closeModal();
+            localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
+            updatedSelectedQueueRoomTimestamp(new Date());
+            mutate();
+          }
+        },
+        (error) => {
+          showSnackbar({
+            title: t('queueRoomAddFailed', 'Error adding queue room'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        },
+      );
+    }
+  }, [queueRoomUuid, providerRoom?.length, queueProviderMapUuid, providerUuid, t, closeModal, mutate]);
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('addAProviderQueueRoom', 'Add a provider queue room?')} />
+      <ModalBody>
+        <Form onSubmit={onSubmit}>
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('queueLocation', 'Queue location')}</div>
+            <Dropdown
+              id="queueLocation"
+              aria-label={t('selectQueueLocation', 'Select a queue location')}
+              label=""
+              type="default"
+              items={queueLocations}
+              itemToString={(item) => (item ? item.name : '')}
+              onChange={handleQueueLocationChange}
+              size="md"
+              initialSelectedItem={{ uuid: currentLocationUuid, name: currentLocationName }}
+            />
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
+            <Dropdown
+              id="service"
+              aria-label={t('selectService', 'Select a service')}
+              type="default"
+              label=""
+              items={queues}
+              itemToString={(item) => (item ? item.display : '')}
+              onChange={handleServiceChange}
+              size="md"
+              initialSelectedItem={{ uuid: currentServiceUuid, display: currentServiceName }}
+            />
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('queueRoom', 'Queue room')}</div>
+            <div className={styles.filterContainer}>
+              <Select
+                labelText={t('selectRoom', 'Select a room')}
+                id="service"
+                invalidText="Required"
+                value={queueRoomUuid}
+                defaultValue={queueRoomUuid}
+                onChange={(event) => {
+                  setQueueRoomUuid(event.target.value);
+                  localStorage.setItem('lastUpdatedQueueRoomTimestamp', new Date().toString());
+                }}>
+                {!queueRoomUuid ? <SelectItem text={t('chooseRoom', 'Select a room')} value="" /> : null}
+                {rooms?.length > 0 &&
+                  rooms.map((room) => (
+                    <SelectItem key={room.uuid} text={room.display} value={room.uuid}>
+                      {room.display}
+                    </SelectItem>
+                  ))}
+              </Select>
+            </div>
+          </section>
+          {isMissingQueueRoom && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('missingQueueRoom', 'Please select a queue room')}
+              />
+            </section>
+          )}
+
+          <section className={styles.section}>
+            <Checkbox
+              onChange={handleRetainLocation}
+              checked={currentIsPermanentProviderQueueRoom}
+              labelText={t('retainLocation', 'Retain location')}
+              id="retianLocation"
+              className={styles.checkbox}
+            />
+          </section>
+        </Form>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button onClick={onSubmit}>{t('save', 'Save')}</Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default AddProviderQueueRoom;