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

package/src/queue-services/queue-service-form.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import QueueServiceForm from './queue-service-form.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useLayoutType: () => 'desktop',
+  showNotification: jest.fn(),
+  showToast: jest.fn(),
+}));
+
+jest.mock('./queue-service.resource', () => ({
+  useServiceConcepts: () => ({
+    queueConcepts: [
+      { uuid: '6f017eb0-b035-4acd-b284-da45f5067502', display: 'Concept 1' },
+      { uuid: '5f017eb0-b035-4acd-b284-da45f5067502', display: 'Concept 2' },
+    ],
+  }),
+  saveQueue: jest.fn(() => Promise.resolve({ status: 201 })),
+}));
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+  useQueueLocations: () => ({
+    queueLocations: [
+      { id: '34567eb0-b035-4acd-b284-da45f5067502', name: 'Location 1' },
+      { id: '12wi7eb0-b035-4acd-b284-da45f5067502', name: 'Location 2' },
+    ],
+  }),
+}));
+
+describe('QueueServiceForm', () => {
+  it('should display required error messages when form is submitted with missing fields', async () => {
+    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+
+    const submitButton = screen.getByText('Save');
+
+    fireEvent.click(submitButton);
+
+    expect(screen.getByText('Missing queue name')).toBeInTheDocument();
+  });
+
+  it('should submit the form when all fields are filled', async () => {
+    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+
+    const queueNameInput = screen.getByLabelText('Queue name');
+    const serviceSelect = screen.getByLabelText('Select a service type');
+    const locationSelect = screen.getByLabelText('Select a location');
+
+    fireEvent.change(queueNameInput, { target: { value: 'Test Queue' } });
+    fireEvent.change(serviceSelect, { target: { value: '6f017eb0-b035-4acd-b284-da45f5067502' } });
+    fireEvent.change(locationSelect, { target: { value: '34567eb0-b035-4acd-b284-da45f5067502' } });
+
+    expect(queueNameInput).toHaveValue('Test Queue');
+    expect(serviceSelect).toHaveValue('6f017eb0-b035-4acd-b284-da45f5067502');
+    expect(locationSelect).toHaveValue('34567eb0-b035-4acd-b284-da45f5067502');
+  });
+});

package/src/queue-services/queue-service.resource.tsx

@@ -0,0 +1,38 @@
+import useSWR from 'swr';
+import useSWRImmutable from 'swr/immutable';
+import { FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+
+export function useServiceConcepts() {
+  const config = useConfig();
+  const {
+    concepts: { serviceConceptSetUuid },
+  } = config;
+
+  const apiUrl = `/ws/rest/v1/concept/${serviceConceptSetUuid}`;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
+
+  return {
+    queueConcepts: data ? data?.data?.setMembers : [],
+    isLoading,
+  };
+}
+
+export function saveQueue(queueName: string, queueConcept: string, queueDescription: string, queueLocation: string) {
+  const abortController = new AbortController();
+
+  return openmrsFetch(`/ws/rest/v1/queue`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      name: queueName,
+      description: queueDescription,
+      service: { uuid: queueConcept },
+      location: {
+        uuid: queueLocation,
+      },
+    },
+  });
+}

package/src/queue-services/queue-service.scss

@@ -0,0 +1,54 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('productive-heading-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: spacing.$spacing-04;
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+.grid {
+  margin: 0 spacing.$spacing-05;
+  padding: 0rem;
+}
+
+.input {
+  margin-top: spacing.$spacing-04;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import {
+  parseDate,
+  showNotification,
+  showToast,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useVisit,
+} from '@openmrs/esm-framework';
+import { MappedQueueEntry } from '../types';
+import { startOfDay } from '../constants';
+import { useCheckedInAppointments, voidQueueEntry } from './remove-queue-entry.resource';
+import { useVisitQueueEntries } from '../active-visits/active-visits-table.resource';
+import styles from './remove-queue-entry.scss';
+
+interface RemoveQueueEntryDialogProps {
+  queueEntry: MappedQueueEntry;
+  closeModal: () => void;
+}
+
+const RemoveQueueEntryDialog: React.FC<RemoveQueueEntryDialogProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const { currentVisit } = useVisit(queueEntry.patientUuid);
+  const { mutate } = useVisitQueueEntries('', '');
+  const abortController = new AbortController();
+
+  const { data: appointments } = useCheckedInAppointments(queueEntry.patientUuid, startOfDay);
+
+  const removeQueueEntry = () => {
+    const endCurrentVisitPayload = {
+      location: currentVisit?.location?.uuid,
+      startDatetime: parseDate(currentVisit?.startDatetime),
+      visitType: currentVisit?.visitType?.uuid,
+      stopDatetime: new Date(),
+    };
+
+    const endedAt = toDateObjectStrict(toOmrsIsoString(new Date()));
+
+    voidQueueEntry(
+      queueEntry.queueUuid,
+      queueEntry.queueEntryUuid,
+      endedAt,
+      endCurrentVisitPayload,
+      queueEntry.visitUuid,
+      appointments,
+    ).then((response) => {
+      closeModal();
+      mutate();
+      showToast({
+        critical: true,
+        kind: 'success',
+        description: t('queueEntryRemovedSuccessfully', `Queue entry removed successfully`),
+        title: t('queueEntryRemoved', 'Queue entry removed'),
+      });
+      (error) => {
+        showNotification({
+          title: t('removeQueueEntryError', 'Error removing queue entry'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      };
+    });
+  };
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeModal}
+        label={t('serviceQueue', 'Service queue')}
+        title={t('removeFromQueueAndEndVisit', 'Remove patient from queue and end active visit?')}
+      />
+      <ModalBody>
+        <p className={styles.subHeading} id="subHeading">
+          {t(
+            'endVisitWarningMessage',
+            'Ending this visit will remove this patient from the queue and will not allow you to fill another encounter form for this patient',
+          )}
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={removeQueueEntry}>
+          {t('endVisit', 'End Visit')}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default RemoveQueueEntryDialog;

package/src/remove-queue-entry-dialog/remove-queue-entry.resource.tsx

@@ -0,0 +1,93 @@
+import { openmrsFetch, updateVisit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { endPatientStatus } from '../active-visits/active-visits-table.resource';
+import { AppointmentsFetchResponse, EndVisitPayload } from '../types';
+import useSWR from 'swr';
+import { omrsDateFormat, timeZone } from '../constants';
+import { first } from 'rxjs/operators';
+
+const statusChangeTime = dayjs(new Date()).format(omrsDateFormat);
+
+export async function voidQueueEntry(
+  queueUuid: string,
+
+  queueEntryUuid: string,
+  endedAt: Date,
+  endCurrentVisitPayload: EndVisitPayload,
+  visitUuid: string,
+  appointments: any,
+) {
+  const abortController = new AbortController();
+
+  if (endCurrentVisitPayload) {
+    if (appointments?.length) {
+      appointments.forEach(async (appointment) => {
+        await Promise.all([changeAppointmentStatus('Completed', appointment.uuid)]);
+      });
+    }
+
+    await Promise.all([endPatientStatus(queueUuid, queueEntryUuid, endedAt)]);
+
+    return updateVisit(visitUuid, endCurrentVisitPayload, abortController)
+      .pipe(first())
+      .subscribe(
+        (response) => {
+          return response.status;
+        },
+        (error) => {
+          return error;
+        },
+      );
+  } else {
+    return await Promise.all([endPatientStatus(queueUuid, queueEntryUuid, endedAt)])
+      .then((res) => {
+        return res;
+      })
+      .catch((error) => {
+        return error;
+      });
+  }
+}
+
+export function useCheckedInAppointments(patientUuid: string, startDate: string) {
+  const abortController = new AbortController();
+
+  const appointmentsSearchUrl = `/ws/rest/v1/appointments/search`;
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading, isValidating } = useSWR<AppointmentsFetchResponse, Error>(
+    appointmentsSearchUrl,
+    fetcher,
+  );
+
+  const appointments = data?.data?.length
+    ? data.data.filter((appointment) => appointment.status === 'CheckedIn')
+    : null;
+
+  return {
+    data: data ? appointments : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}
+
+export async function changeAppointmentStatus(toStatus: string, appointmentUuid: string) {
+  const url = `/ws/rest/v1/appointments/${appointmentUuid}/status-change`;
+  return openmrsFetch(url, {
+    body: { toStatus, onDate: statusChangeTime, timeZone: timeZone },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  });
+}

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import RemoveQueueEntryDialog from './remove-queue-entry.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  voidQueueEntry: jest.fn(),
+  showNotification: jest.fn(),
+  useConfig: jest.fn(() => ({
+    concepts: {
+      visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+  })),
+}));
+
+describe('RemoveQueueEntryDialog', () => {
+  const queueEntry = {
+    queueUuid: 'fa1e98f1-f002-4174-9e55-34d60951e710',
+    queueEntryUuid: '712289ab-32c0-430f-87b6-d9c1e4e4686e',
+    visitUuid: 'c90386ff-ae85-45cc-8a01-25852099c5ae',
+    patientUuid: 'cc75ad73-c24b-499c-8db9-a7ef4fc0b36d',
+  };
+
+  it('renders dialog content', () => {
+    const closeModal = jest.fn();
+    render(<RemoveQueueEntryDialog queueEntry={queueEntry} closeModal={closeModal} />);
+
+    expect(screen.getByText('Service queue')).toBeInTheDocument();
+    expect(screen.getByText('Remove patient from queue and end active visit?')).toBeInTheDocument();
+    expect(screen.getByText(/Ending this visit will remove this patient/)).toBeInTheDocument();
+
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('End Visit')).toBeInTheDocument();
+  });
+
+  it('calls closeModal when Cancel button is clicked', () => {
+    const closeModal = jest.fn();
+    render(<RemoveQueueEntryDialog queueEntry={queueEntry} closeModal={closeModal} />);
+
+    fireEvent.click(screen.getByText('Cancel'));
+
+    expect(closeModal).toHaveBeenCalledTimes(1);
+  });
+});

package/src/root.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { spaBasePath } from './constants';
+import AppointmentsTable from './queue-patient-linelists/scheduled-appointments-table.component';
+import ServicesTable from './queue-patient-linelists/queue-services-table.component';
+
+const swrConfiguration = {
+  // Maximum number of retries when the backend returns an error
+  errorRetryCount: 3,
+};
+
+const Root: React.FC = () => {
+  return (
+    <main>
+      <SWRConfig value={swrConfiguration}>
+        <BrowserRouter basename={`${spaBasePath}/service-queues`}>
+          <Routes>
+            <Route path="/appointments-list/:value/" element={<AppointmentsTable />} />
+            <Route path="/queue-list/:value/" element={<ServicesTable />} />
+          </Routes>
+        </BrowserRouter>
+      </SWRConfig>
+    </main>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}

package/src/root.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Root from './root.component';
+
+describe('Root Component', () => {
+  // Mock the pushState function and store the original implementation
+  const originalPushState = window.history.pushState;
+
+  // Restore the original pushState after all tests
+  afterAll(() => {
+    window.history.pushState = originalPushState;
+  });
+
+  it('renders AppointmentsTable component for "/appointments-list/:value/" route', () => {
+    window.history.pushState({}, 'Appointments List', '/spa/home/service-queues/appointments-list/some-value/');
+    render(<Root />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders ServicesTable component for "/queue-list/:value/" route', () => {
+    window.history.pushState({}, 'Queue List', '/spa/home/service-queues/queue-list/some-value/');
+    render(<Root />);
+
+    const servicesTable = screen.getByText('A list of clients waiting for queue-list');
+    expect(servicesTable).toBeInTheDocument();
+  });
+});

package/src/routes.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0"
+  },
+  "pages": [
+    {
+      "component": "appointmentsList",
+      "routeRegex": "^appointments-list",
+      "online": true,
+      "offline": true
+    }, 
+    {
+      "component": "queueList",
+      "routeRegex": "^queue-list",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "name": "outpatient-side-nav-ext",
+      "component": "outpatientSideNav",
+      "slot": "outpatient-sidebar-slot",
+      "online": true,
+      "offline": true
+    }, 
+    {
+      "name": "service-queues-dashboard-link",
+      "component": "serviceQueuesDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "service-queues",
+        "slot": "service-queues-dashboard-slot",
+        "title": "Service queues"
+      },
+      "online": true,
+      "offline": true
+    }, 
+    {
+      "name": "home-dashboard",
+      "component": "homeDashboard",
+      "slot": "service-queues-dashboard-slot",
+      "online": true,
+      "offline": true
+    }, 
+    {
+      "name": "edit-queue-entry-status-modal",
+      "component": "editQueueEntryStatusModal"
+    }, 
+    {
+      "name": "patient-info-banner-slot",
+      "component": "patientInfoBannerSlot"
+    }, 
+    {
+      "name": "add-patient-to-queue",
+      "component": "addPatientToQueue",
+      "slot": "add-patient-to-queue-slot"
+    }, 
+    {
+      "name": "remove-queue-entry",
+      "component": "removeQueueEntry"
+    }, 
+    {
+      "name": "clear-all-queue-entries",
+      "component": "clearAllQueueEntries"
+    }, 
+    {
+      "name": "add-visit-to-queue-modal",
+      "component": "addVisitToQueueModal"
+    }, 
+    {
+      "name": "transition-queue-entry-status-modal",
+      "component": "transitionQueueEntryStatusModal"
+    }, 
+    {
+      "name": "previous-visit-summary-widget",
+      "component": "previousVisitSummaryWidget",
+      "slot": "previous-visit-summary-slot"
+    }, 
+    {
+      "name": "add-provider-to-room-modal",
+      "component": "addProviderToRoomModal"
+    }, 
+    {
+      "name": "add-queue-entry-widget",
+      "component": "addQueueEntryWidget",
+      "slot": "add-queue-entry-slot"
+    }
+  ]
+}

package/src/side-menu/nav-group/createNavGroup.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import NavGroupExtension from './nav-group.component';
+
+export const createNavGroup = ({
+  title,
+  slot,
+  renderIcon,
+}: {
+  title: string;
+  slot: string;
+  renderIcon?: React.ComponentType<any>;
+}) => {
+  const NavGroup = () => {
+    return <NavGroupExtension title={title} slotName={slot} renderIcon={renderIcon} />;
+  };
+  return NavGroup;
+};

package/src/side-menu/nav-group/nav-group.component.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import { SideNavMenu } from '@carbon/react';
+import { registerNavGroup } from './nav-group';
+
+export interface NavGroupExtensionProps {
+  title: string;
+  slotName: string;
+  renderIcon?: React.ComponentType<any>;
+}
+
+const NavGroupExtension = ({ title, slotName, renderIcon }: NavGroupExtensionProps) => {
+  useEffect(() => {
+    registerNavGroup(slotName);
+  }, [slotName]);
+
+  return (
+    <SideNavMenu renderIcon={renderIcon} title={title}>
+      <ExtensionSlot name={slotName} />
+    </SideNavMenu>
+  );
+};
+
+export default NavGroupExtension;

package/src/side-menu/nav-group/nav-group.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NavGroupExtension from './nav-group.component';
+import { registerNavGroup } from './nav-group';
+
+jest.mock('./nav-group', () => ({
+  registerNavGroup: jest.fn(),
+}));
+
+describe('NavGroupExtension', () => {
+  const props = {
+    title: 'Test Group',
+    slotName: 'testSlot',
+    renderIcon: () => <div>Test Icon</div>,
+  };
+
+  it('registers the navigation group on mount', () => {
+    render(<NavGroupExtension {...props} />);
+
+    expect(registerNavGroup).toHaveBeenCalledWith(props.slotName);
+  });
+
+  it('renders navigation group with provided icon and title', () => {
+    render(<NavGroupExtension {...props} />);
+
+    const icon = screen.getByText('Test Icon');
+    expect(icon).toBeInTheDocument();
+
+    const title = screen.getByText(props.title);
+    expect(title).toBeInTheDocument();
+  });
+});

package/src/side-menu/nav-group/nav-group.ts

@@ -0,0 +1,10 @@
+import { createGlobalStore, createUseStore } from '@openmrs/esm-framework';
+
+const navGroupStore = createGlobalStore('outpatient-nav-groups', { navGroups: [] });
+
+export function registerNavGroup(slotName: string) {
+  const store = navGroupStore.getState();
+  navGroupStore.setState({ navGroups: [slotName, ...store.navGroups] });
+}
+
+export const useNavGroups = createUseStore(navGroupStore);

package/src/side-menu/side-menu.component.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LeftNavMenu } from '@openmrs/esm-framework';
+
+const SideMenu = () => <LeftNavMenu />;
+
+export default SideMenu;

package/src/side-menu/side-menu.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SideMenu from './side-menu.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  LeftNavMenu: () => <div data-testid="left-nav-menu">Mocked LeftNavMenu</div>,
+}));
+jest.mock('@openmrs/esm-framework');
+
+describe('SideMenu', () => {
+  it('renders the LeftNavMenu', () => {
+    render(<SideMenu />);
+
+    const leftNavMenu = screen.getByTestId('left-nav-menu');
+    expect(leftNavMenu).toBeInTheDocument();
+  });
+});