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

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

@@ -0,0 +1,362 @@
+import {
+  Button,
+  Checkbox,
+  ContentSwitcher,
+  DatePicker,
+  DatePickerInput,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  RadioButton,
+  RadioButtonGroup,
+  Select,
+  SelectItem,
+  Stack,
+  Switch,
+  TextArea,
+  TimePicker,
+  TimePickerSelect,
+} from '@carbon/react';
+import { showSnackbar, type FetchResponse } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { datePickerFormat, datePickerPlaceHolder, time12HourFormatRegexPattern } from '../../constants';
+import { convertTime12to24, type amPm } from '../../helpers/time-helpers';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+import { useQueues } from '../../hooks/useQueues';
+import { type QueueEntry } from '../../types';
+import styles from './queue-entry-actons-modal.scss';
+
+interface QueueEntryActionModalProps {
+  queueEntry: QueueEntry;
+  closeModal: () => void;
+  modalParams: ModalParams;
+}
+
+interface FormState {
+  selectedQueue: string;
+  selectedPriority: string;
+  selectedStatus: string;
+  prioritycomment: string;
+  modifyDefaultTransitionDateTime: boolean;
+  transitionDate: Date;
+  transitionTime: string;
+  transitionTimeFormat: amPm;
+}
+
+interface ModalParams {
+  modalTitle: string;
+  modalInstruction: string;
+  submitButtonText: string;
+  submitSuccessTitle: string;
+  submitSuccessText: string;
+  submitFailureTitle: string;
+  submitAction: (queueEntry: QueueEntry, formState: FormState) => Promise<FetchResponse<any>>;
+  disableSubmit: (queueEntry, formState) => boolean;
+  isTransition: boolean; // is transition or edit?
+}
+
+// Modal for performing a queue entry action that requires additional form fields / inputs from user
+// Used by EditQueueEntryModal and TransitionQueueEntryModal
+export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
+  queueEntry,
+  closeModal,
+  modalParams,
+}) => {
+  const { t } = useTranslation();
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const {
+    modalTitle,
+    modalInstruction,
+    submitButtonText,
+    submitSuccessTitle,
+    submitSuccessText,
+    submitFailureTitle,
+    submitAction,
+    disableSubmit,
+    isTransition,
+  } = modalParams;
+
+  const initialTransitionDate = isTransition ? new Date() : new Date(queueEntry.startedAt);
+  const [formState, setFormState] = useState<FormState>({
+    selectedQueue: queueEntry.queue.uuid,
+    selectedPriority: queueEntry.priority.uuid,
+    selectedStatus: queueEntry.status.uuid,
+    prioritycomment: queueEntry.priorityComment ?? '',
+    modifyDefaultTransitionDateTime: false,
+    transitionDate: initialTransitionDate,
+    transitionTime: dayjs(initialTransitionDate).format('hh:mm'),
+    transitionTimeFormat: dayjs(initialTransitionDate).hour() < 12 ? 'AM' : 'PM',
+  });
+  const { queues } = useQueues();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const selectedQueue = queues.find((q) => q.uuid == formState.selectedQueue);
+
+  const statuses = selectedQueue?.allowedStatuses;
+  const hasNoStatusesConfigured = selectedQueue && statuses.length == 0;
+  const priorities = selectedQueue?.allowedPriorities;
+  const hasNoPrioritiesConfigured = selectedQueue && priorities.length == 0;
+
+  const setSelectedQueueUuid = (selectedQueueUuid: string) => {
+    const newSelectedQueue = queues.find((q) => q.uuid == selectedQueueUuid);
+    const { allowedStatuses, allowedPriorities } = newSelectedQueue;
+    const newQueueHasCurrentStatus = allowedStatuses.find((s) => s.uuid == formState.selectedStatus);
+    const newQueueHasCurrentPriority = allowedPriorities.find((s) => s.uuid == formState.selectedPriority);
+    setFormState({
+      ...formState,
+      selectedQueue: selectedQueueUuid,
+      selectedStatus: newQueueHasCurrentStatus ? formState.selectedStatus : allowedStatuses[0]?.uuid,
+      selectedPriority: newQueueHasCurrentPriority ? formState.selectedPriority : allowedPriorities[0]?.uuid,
+    });
+  };
+
+  const setSelectedPriorityUuid = (selectedPriorityUuid: string) => {
+    setFormState({ ...formState, selectedPriority: selectedPriorityUuid });
+  };
+
+  const setSelectedStatusUuid = (selectedStatusUuid: string) => {
+    setFormState({ ...formState, selectedStatus: selectedStatusUuid });
+  };
+
+  const setPriorityComment = (prioritycomment: string) => {
+    setFormState({ ...formState, prioritycomment });
+  };
+
+  const setTransitionDate = (transitionDate: Date) => {
+    setFormState({ ...formState, transitionDate });
+  };
+
+  const setTransitionTime = (transitionTime: string) => {
+    setFormState({ ...formState, transitionTime });
+  };
+
+  const setTransitionTimeFormat = (transitionTimeFormat: amPm) => {
+    setFormState({ ...formState, transitionTimeFormat });
+  };
+
+  const setModifyDefaultTransitionDateTime = (modifyDefaultTransitionDateTime) => {
+    setFormState({ ...formState, modifyDefaultTransitionDateTime });
+  };
+
+  const submitForm = (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    submitAction(queueEntry, formState)
+      .then(({ status }) => {
+        if (status === 200) {
+          showSnackbar({
+            isLowContrast: true,
+            title: submitSuccessTitle,
+            kind: 'success',
+            subtitle: submitSuccessText,
+          });
+          mutateQueueEntries();
+          closeModal();
+        } else {
+          throw { message: t('unexpectedServerResponse', 'Unexpected Server Response') };
+        }
+      })
+      .catch((error) => {
+        showSnackbar({
+          title: submitFailureTitle,
+          kind: 'error',
+          subtitle: error?.message,
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+
+  const isTimeInvalid = useMemo(() => {
+    const now = new Date();
+    const startAtDate = new Date(formState.transitionDate);
+    const [hour, minute] = convertTime12to24(formState.transitionTime, formState.transitionTimeFormat);
+    startAtDate.setHours(hour, minute, 0, 0);
+    return startAtDate > now;
+  }, [formState.transitionDate, formState.transitionTime, formState.transitionTimeFormat]);
+
+  const selectedPriorityIndex = priorities.findIndex((p) => p.uuid == formState.selectedPriority);
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={modalTitle} />
+      <ModalBody>
+        <div className={styles.queueEntryActionModalBody}>
+          <Stack gap={4}>
+            <h5>{queueEntry.display}</h5>
+            <p>{modalInstruction}</p>
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('serviceQueue', 'Service queue')}</div>
+              <Select
+                labelText={t('selectQueue', 'Select a queue')}
+                id="queue"
+                invalidText="Required"
+                value={formState.selectedQueue}
+                onChange={(event) => setSelectedQueueUuid(event.target.value)}>
+                {queues?.map(({ uuid, display, location }) => (
+                  <SelectItem
+                    key={uuid}
+                    text={
+                      uuid == queueEntry.queue.uuid
+                        ? t('currentValueFormatted', '{{value}} (Current)', {
+                            value: `${display} - ${location?.display}`,
+                            interpolation: { escapeValue: false },
+                          })
+                        : `${display} - ${location?.display}`
+                    }
+                    value={uuid}
+                  />
+                ))}
+              </Select>
+            </section>
+
+            <section>
+              <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
+              {hasNoStatusesConfigured ? (
+                <InlineNotification
+                  kind={'error'}
+                  lowContrast
+                  subtitle={t('configureStatus', 'Please configure status to continue.')}
+                  title={t('noStatusConfigured', 'No status configured')}
+                />
+              ) : (
+                <RadioButtonGroup
+                  name="status"
+                  valueSelected={formState.selectedStatus}
+                  onChange={(uuid) => {
+                    setSelectedStatusUuid(uuid);
+                  }}>
+                  {statuses?.map(({ uuid, display }) => (
+                    <RadioButton
+                      key={uuid}
+                      name={display}
+                      labelText={
+                        uuid == queueEntry.status.uuid
+                          ? t('currentValueFormatted', '{{value}} (Current)', {
+                              value: display,
+                              interpolation: { escapeValue: false },
+                            })
+                          : display
+                      }
+                      value={uuid}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              )}
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('queuePriority', 'Queue priority')}</div>
+              {hasNoPrioritiesConfigured ? (
+                <InlineNotification
+                  className={styles.inlineNotification}
+                  kind={'error'}
+                  lowContrast
+                  subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
+                  title={t('noPrioritiesConfigured', 'No priorities configured')}
+                />
+              ) : (
+                <ContentSwitcher
+                  size="sm"
+                  selectedIndex={selectedPriorityIndex}
+                  onChange={(event) => {
+                    setSelectedPriorityUuid(event.name as string);
+                  }}>
+                  {priorities?.map(({ uuid, display }) => (
+                    <Switch
+                      role="radio"
+                      name={uuid}
+                      text={
+                        uuid == queueEntry.priority.uuid
+                          ? t('currentValueFormatted', '{{value}} (Current)', {
+                              value: display,
+                              interpolation: { escapeValue: false },
+                            })
+                          : display
+                      }
+                      key={uuid}
+                      value={uuid}
+                    />
+                  ))}
+                </ContentSwitcher>
+              )}
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('priorityComment', 'Priority comment')}</div>
+              <TextArea
+                labelText=""
+                value={formState.prioritycomment}
+                onChange={(e) => setPriorityComment(e.target.value)}
+                placeholder={t('enterCommentHere', 'Enter comment here')}
+              />
+            </section>
+
+            <section className={styles.section}>
+              <div className={styles.sectionTitle}>{t('timeOfTransition', 'Time of transition')}</div>
+              <Checkbox
+                labelText={t('modifyDefaultValue', 'Modify default value')}
+                id={'modifyTransitionTime'}
+                checked={formState.modifyDefaultTransitionDateTime}
+                onChange={(_, { checked }) => {
+                  setModifyDefaultTransitionDateTime(checked);
+                }}
+              />
+              <div className={styles.dateTimeFields}>
+                <DatePicker
+                  datePickerType="single"
+                  dateFormat={datePickerFormat}
+                  value={formState.transitionDate}
+                  maxDate={new Date().setHours(23, 59, 59, 59)}
+                  onChange={([date]) => {
+                    setTransitionDate(date);
+                  }}>
+                  <DatePickerInput
+                    id="datePickerInput"
+                    labelText={t('date', 'Date')}
+                    placeholder={datePickerPlaceHolder}
+                    disabled={!formState.modifyDefaultTransitionDateTime}
+                  />
+                </DatePicker>
+
+                <TimePicker
+                  labelText={t('time', 'Time')}
+                  onChange={(event) => setTransitionTime(event.target.value)}
+                  pattern={time12HourFormatRegexPattern}
+                  value={formState.transitionTime}
+                  invalid={isTimeInvalid}
+                  invalidText={t('timeCannotBeInFuture', 'Time cannot be in the future')}
+                  disabled={!formState.modifyDefaultTransitionDateTime}>
+                  <TimePickerSelect
+                    id="visitStartTimeSelect"
+                    onChange={(event) => setTransitionTimeFormat(event.target.value as amPm)}
+                    value={formState.transitionTimeFormat}
+                    labelText={t('time', 'Time')}
+                    aria-label={t('time', 'Time')}>
+                    <SelectItem value="AM" text="AM" />
+                    <SelectItem value="PM" text="PM" />
+                  </TimePickerSelect>
+                </TimePicker>
+              </div>
+            </section>
+          </Stack>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button disabled={isSubmitting || disableSubmit(queueEntry, formState)} onClick={submitForm}>
+          {submitButtonText}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default QueueEntryActionModal;

package/src/queue-table/queue-entry-actions/queue-entry-actions-modal.test.tsx

@@ -0,0 +1,152 @@
+import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+import { mockQueueEntryBrian, mockQueueSurgery, mockStatusInService, mockQueues } from '__mocks__';
+import React from 'react';
+import { renderWithSwr } from 'tools';
+import TransitionQueueEntryModal from './transition-queue-entry-modal.component';
+import userEvent from '@testing-library/user-event';
+import EditQueueEntryModal from './edit-queue-entry-modal.component';
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock('../../hooks/useQueues', () => {
+  return {
+    useQueues: jest.fn().mockReturnValue({
+      queues: mockQueues,
+    }),
+  };
+});
+
+describe('TransitionQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryBrian;
+  const { queue } = queueEntry;
+  const { allowedStatuses, allowedPriorities } = queue;
+
+  const nextQueue = mockQueueSurgery;
+
+  it('renders the dialog with the right status and priority options', () => {
+    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+    expect(screen.getByText(queueEntry.patient.display)).toBeInTheDocument();
+
+    for (const status of allowedStatuses) {
+      const expectedStatusDisplay =
+        queueEntry.status.uuid == status.uuid ? `${status.display} (Current)` : status.display;
+      expect(screen.getByRole('radio', { name: expectedStatusDisplay })).toBeInTheDocument();
+    }
+
+    for (const pri of allowedPriorities) {
+      const expectedPriorityDisplay = queueEntry.priority.uuid == pri.uuid ? `${pri.display} (Current)` : pri.display;
+      expect(screen.getByRole('radio', { name: expectedPriorityDisplay })).toBeInTheDocument();
+    }
+  });
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has a disabled submit button when selected queue and status is same as before', () => {
+    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+    const submitButton = screen.getByRole('button', { name: /Transition patient/ });
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('has an working submit button when selected queue and status is different from before', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    // change queue
+    const queueDropdown = screen.getByRole('combobox', { name: /Select a queue/ });
+    await queueDropdown.click();
+    const queueSelection = screen.getByRole('option', {
+      name: `${nextQueue.display} - ${nextQueue.location?.display}`,
+    });
+    await user.selectOptions(queueDropdown, queueSelection);
+
+    // change status
+    const inServiceRadioButton = screen.getByText(mockStatusInService.display);
+    await inServiceRadioButton.click();
+
+    const submitButton = screen.getByRole('button', { name: /Transition patient/ });
+    expect(submitButton).not.toBeDisabled();
+    await submitButton.click();
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});
+
+describe('EditQueueEntryModal: ', () => {
+  const queueEntry = mockQueueEntryBrian;
+  const { queue } = queueEntry;
+  const { allowedStatuses, allowedPriorities } = queue;
+
+  const nextQueue = mockQueueSurgery;
+
+  it('renders the dialog with the right status and priority options', () => {
+    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+    expect(screen.getByText(queueEntry.patient.display)).toBeInTheDocument();
+
+    for (const status of allowedStatuses) {
+      const expectedStatusDisplay =
+        queueEntry.status.uuid == status.uuid ? `${status.display} (Current)` : status.display;
+      expect(screen.getByRole('radio', { name: expectedStatusDisplay })).toBeInTheDocument();
+    }
+
+    for (const pri of allowedPriorities) {
+      const expectedPriorityDisplay = queueEntry.priority.uuid == pri.uuid ? `${pri.display} (Current)` : pri.display;
+      expect(screen.getByRole('radio', { name: expectedPriorityDisplay })).toBeInTheDocument();
+    }
+  });
+
+  it('has a cancel button that closes the modal', async () => {
+    const closeModal = jest.fn();
+    const user = userEvent.setup();
+
+    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+    expect(closeModal).toHaveBeenCalled();
+  });
+
+  it('has a enabled submit button when selected queue and status is same as before', () => {
+    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+    const submitButton = screen.getByRole('button', { name: /Edit queue entry/ });
+    expect(submitButton).toBeEnabled();
+  });
+
+  it('has an working submit button when selected queue and status is different from before', async () => {
+    mockedOpenmrsFetch.mockResolvedValue({
+      status: 200,
+    });
+    const user = userEvent.setup();
+    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+
+    // change queue
+    const queueDropdown = screen.getByRole('combobox', { name: /Select a queue/ });
+    await queueDropdown.click();
+    const queueSelection = screen.getByRole('option', {
+      name: `${nextQueue.display} - ${nextQueue.location?.display}`,
+    });
+    await user.selectOptions(queueDropdown, queueSelection);
+
+    // change status
+    const inServiceRadioButton = screen.getByText(mockStatusInService.display);
+    await inServiceRadioButton.click();
+
+    const submitButton = screen.getByRole('button', { name: /Edit queue entry/ });
+    expect(submitButton).not.toBeDisabled();
+    await submitButton.click();
+
+    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalled();
+  });
+});

package/src/queue-table/queue-entry-actions/queue-entry-actions.resource.ts

@@ -0,0 +1,83 @@
+import { openmrsFetch, restBaseUrl, type Location } from '@openmrs/esm-framework';
+import { type Concept, type QueueEntry } from '../../types';
+
+// see QueueEntryTransition.java in openmrs-module-queue
+interface TransitionQueueEntryParams {
+  queueEntryToTransition: string;
+  transitionDate?: string;
+  newQueue?: string;
+  newStatus?: string;
+  newPriority?: string;
+  newPriorityComment?: string;
+}
+
+/**
+ * A transition is defined as an action that ends a current queue entry and immediately starts a new one
+ * with (slightly) different values. For now, this could be used to transition the queue entry's status,
+ * priority or queue. This allows us to keep a history of queue entries through a patient's visit.
+ * Note that there are some use cases (like RDE or data correction) where a transition is NOT appropriate.
+ * @param params
+ * @param abortController
+ * @returns
+ */
+export function transitionQueueEntry(params: TransitionQueueEntryParams, abortController?: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/transition`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: params,
+  });
+}
+
+// see QueueEntryResource.java#getUpdatableProperties() in openmrs-module-queue
+interface UpdateQueueEntryParams {
+  status?: Concept;
+  priority?: Concept;
+  priorityComment?: string;
+  sortWeight?: number;
+  startedAt?: string;
+  endedAt?: string;
+  loationWaitingFor?: Location;
+  providerWaitingFor?: Location;
+}
+
+export function updateQueueEntry(
+  queueEntryUuid: string,
+  params: UpdateQueueEntryParams,
+  abortController?: AbortController,
+) {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: params,
+  });
+}
+interface UndoTransitionParams {
+  queueEntry: string;
+}
+
+export function undoTransition(params: UndoTransitionParams, abortController?: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/transition`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: params,
+  });
+}
+
+export function voidQueueEntry(queueEntryUuid: string, abortController?: AbortController) {
+  return openmrsFetch(`${restBaseUrl}/queue-entry/${queueEntryUuid}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+  });
+}

package/src/queue-table/queue-entry-actions/queue-entry-actons-modal.scss

@@ -0,0 +1,36 @@
+@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;
+}
+
+.queueEntryActionModalBody {
+  padding-bottom: spacing.$spacing-05;
+}
+
+.dateTimeFields {
+  display: flex;
+}