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

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

@@ -0,0 +1,174 @@
+import React, { useCallback } from 'react';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import {
+  ConfigObject,
+  ExtensionSlot,
+  formatDatetime,
+  navigate,
+  parseDate,
+  showNotification,
+  showToast,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useConfig,
+} from '@openmrs/esm-framework';
+import {
+  MappedVisitQueueEntry,
+  serveQueueEntry,
+  updateQueueEntry,
+  useVisitQueueEntries,
+} from '../active-visits/active-visits-table.resource';
+import { findObsByConceptUUID } from '../helpers/functions';
+import { requeueQueueEntry } from './transition-queue-entry.resource';
+import { usePastVisits } from '../past-visit/past-visit.resource';
+import { usePatientAppointments } from '../queue-patient-linelists/queue-linelist.resource';
+import styles from './transition-queue-entry-dialog.scss';
+
+interface TransitionQueueEntryModalProps {
+  queueEntry: MappedVisitQueueEntry;
+  closeModal: () => void;
+}
+
+enum priorityComment {
+  REQUEUED = 'Requeued',
+}
+
+const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const config = useConfig() as ConfigObject;
+  const defaultTransitionStatus = config.concepts.defaultTransitionStatus;
+
+  const preferredIdentifiers = queueEntry?.identifiers.filter((identifier) =>
+    config.defaultIdentifierTypes.includes(identifier?.identifierType?.uuid),
+  );
+
+  const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+  const { upcomingAppointment, isLoading } = usePatientAppointments(queueEntry?.patientUuid, startDate);
+  const { visits, isLoading: loading } = usePastVisits(queueEntry?.patientUuid);
+  const obsToDisplay =
+    !loading && visits ? findObsByConceptUUID(visits?.encounters, config.concepts.historicalObsConceptUuid) : [];
+  const { mutate } = useVisitQueueEntries('', '');
+
+  const launchEditPriorityModal = useCallback(() => {
+    const endedAt = toDateObjectStrict(toOmrsIsoString(new Date()));
+    updateQueueEntry(
+      queueEntry?.visitUuid,
+      queueEntry?.queueUuid,
+      queueEntry?.queueUuid,
+      queueEntry?.queueEntryUuid,
+      queueEntry?.patientUuid,
+      queueEntry?.priorityUuid,
+      defaultTransitionStatus,
+      endedAt,
+      queueEntry?.sortWeight,
+    ).then(
+      ({ status }) => {
+        if (status === 201) {
+          serveQueueEntry(queueEntry?.service, queueEntry?.visitQueueNumber, 'serving').then(({ status }) => {
+            if (status === 200) {
+              showToast({
+                critical: true,
+                title: t('success', 'Success'),
+                kind: 'success',
+                description: t('patientAttendingService', 'Patient attending service'),
+              });
+              closeModal();
+              mutate();
+              navigate({ to: `\${openmrsSpaBase}/patient/${queueEntry?.patientUuid}/chart` });
+            }
+          });
+        }
+      },
+      (error) => {
+        showNotification({
+          title: t('queueEntryUpdateFailed', 'Error updating queue entry'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  }, [queueEntry]);
+
+  const handleRequeuePatient = useCallback(() => {
+    requeueQueueEntry(priorityComment.REQUEUED, queueEntry?.queueUuid, queueEntry?.queueEntryUuid).then(
+      ({ status }) => {
+        if (status === 200) {
+          showToast({
+            critical: true,
+            title: t('success', 'Success'),
+            kind: 'success',
+            description: t('patientRequeued', 'Patient has been requeued'),
+          });
+          closeModal();
+          mutate();
+        }
+      },
+      (error) => {
+        showNotification({
+          title: t('queueEntryUpdateFailed', 'Error updating queue entry'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+  }, []);
+
+  return (
+    <div>
+      <ModalHeader closeModal={closeModal} title={t('servePatient', 'Serve patient')} />
+      <ModalBody className={styles.modalBody}>
+        <div>
+          <section className={styles.modalBody}>
+            <p className={styles.p}>
+              {t('patientName', 'Patient name')} : &nbsp; {queueEntry?.name}
+            </p>
+            {preferredIdentifiers?.length
+              ? preferredIdentifiers.map((identifier) => (
+                  <p className={styles.p}>
+                    {identifier?.identifierType?.display} : &nbsp; {identifier?.identifier}
+                  </p>
+                ))
+              : ''}
+            <p className={styles.p}>
+              {t('lastClinicalVisit', 'Last clinical visit')} : &nbsp; {loading && t('loading', 'Loading...')}
+              {!loading && !visits && t('none', 'None')}
+              {visits && formatDatetime(parseDate(visits?.startDatetime))}
+            </p>
+            {obsToDisplay?.length
+              ? obsToDisplay.map((o) => (
+                  <p className={styles.p}>
+                    {o.concept.display} : &nbsp; {o.value.display}
+                  </p>
+                ))
+              : ''}
+            <p className={styles.p}>
+              {t('tcaDate', 'Tca date')} : &nbsp; {isLoading && t('loading', 'Loading...')}
+              {!isLoading && !upcomingAppointment && t('none', 'None')}
+              {upcomingAppointment && formatDatetime(parseDate(upcomingAppointment?.startDateTime))}
+            </p>
+          </section>
+          <ExtensionSlot
+            className={styles.visitSummaryContainer}
+            name="previous-visit-summary-slot"
+            state={{
+              patientUuid: queueEntry?.patientUuid,
+            }}
+          />
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => handleRequeuePatient()}>
+          {t('requeue', 'Requeue')}
+        </Button>
+        <Button onClick={() => launchEditPriorityModal()}>{t('serve', 'Serve')}</Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default TransitionQueueEntryModal;

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

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.modalBody {
+  padding-bottom: spacing.$spacing-03;
+  margin-bottom: 0rem;
+}
+
+.p {
+  margin-bottom: spacing.$spacing-02;
+  @include type.type-style('body-01');
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import TransitionQueueEntryModal from './transition-queue-entry-dialog.component';
+import { navigate } from '@openmrs/esm-framework';
+import { serveQueueEntry, updateQueueEntry } from '../active-visits/active-visits-table.resource';
+import { requeueQueueEntry } from './transition-queue-entry.resource';
+
+const mockedNavigate = navigate as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useTranslation: () => ({ t: jest.fn((key) => key) }),
+  navigate: jest.fn(),
+  toOmrsIsoString: jest.fn(),
+  toDateObjectStrict: jest.fn(),
+  useConfig: jest.fn(() => ({
+    concepts: {
+      defaultTransitionStatus: 'some-default-transition-status',
+    },
+    defaultIdentifierTypes: [
+      {
+        fieldName: 'openMrsId',
+        format: null,
+        identifierSources: [
+          {
+            uuid: '8549f706-7e85-4c1d-9424-217d50a2988b',
+            name: 'Generator for OpenMRS ID',
+            description: 'Generator for OpenMRS ID',
+            baseCharacterSet: '0123456789ACDEFGHJKLMNPRTUVWXY',
+            prefix: '',
+          },
+        ],
+        isPrimary: true,
+        name: 'OpenMRS ID',
+        required: true,
+        uniquenessBehavior: 'UNIQUE',
+        uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+      },
+    ],
+  })),
+}));
+
+jest.mock('../active-visits/active-visits-table.resource', () => ({
+  useVisitQueueEntries: jest.fn(() => ({ mutate: jest.fn() })),
+  serveQueueEntry: jest.fn(() => Promise.resolve({ status: 200 })),
+  updateQueueEntry: jest.fn(() => Promise.resolve({ status: 201 })),
+}));
+
+jest.mock('./transition-queue-entry.resource', () => ({
+  requeueQueueEntry: jest.fn(() => Promise.resolve({ status: 200 })),
+}));
+
+describe('TransitionQueueEntryModal', () => {
+  const queueEntry = {
+    visitUuid: 'c90386ff-ae85-45cc-8a01-25852099c5ae',
+    identifiers: ['100GEJ'],
+    queueUuid: 'fa1e98f1-f002-4174-9e55-34d60951e710',
+    queueEntryUuid: '712289ab-32c0-430f-87b6-d9c1e4e4686e',
+    patientUuid: 'cc75ad73-c24b-499c-8db9-a7ef4fc0b36d',
+    priorityUuid: 'f9684018-a4d3-4d6f-9dd5-b4b1e89af3e7',
+    name: 'John Doe',
+  };
+
+  it('renders modal content', () => {
+    const closeModal = jest.fn();
+    render(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+
+    expect(screen.getByText('Serve patient')).toBeInTheDocument();
+    expect(screen.getByText(/Patient name :/i)).toBeInTheDocument();
+  });
+
+  it('handles requeueing patient', async () => {
+    const closeModal = jest.fn();
+    render(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+
+    fireEvent.click(screen.getByText('Requeue'));
+
+    await waitFor(() => {
+      expect(requeueQueueEntry).toHaveBeenCalledWith('Requeued', queueEntry.queueUuid, queueEntry.queueEntryUuid);
+    });
+  });
+
+  it('handles serving patient', async () => {
+    const closeModal = jest.fn();
+    render(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+
+    fireEvent.click(screen.getByText('Serve'));
+
+    await waitFor(() => {
+      expect(updateQueueEntry).toHaveBeenCalled();
+      expect(serveQueueEntry).toHaveBeenCalled();
+      expect(mockedNavigate).toHaveBeenCalled();
+    });
+  });
+});

package/src/transition-queue-entry/transition-queue-entry.resource.ts

@@ -0,0 +1,16 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export function requeueQueueEntry(priorityComment: string, queueUuid: string, queueEntryUuid: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/queue/${queueUuid}/entry/${queueEntryUuid}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      priorityComment: priorityComment,
+    },
+  });
+}