@kenyaemr/esm-service-queues-app 8.1.1-pre.116 → 8.1.1-pre.119

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"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":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"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":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"transition-patient-to-latest-queue-modal","component":"transitionPatientToLatestQueue"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"8.1.1-pre.116"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0","queue":"^2.4.0-0"},"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":"queue-table-by-status-menu-dashboard-link","component":"queueTableByStatusMenu","meta":{"name":"service-queues","slot":"service-queues-dashboard-slot","title":"Service queues"},"online":true,"offline":true},{"component":"root","name":"service-queues-dashboard","slot":"service-queues-dashboard-slot"},{"name":"patient-info-banner-slot","component":"patientInfoBannerSlot"},{"name":"remove-queue-entry","component":"removeQueueEntry"},{"name":"clear-all-queue-entries","component":"clearAllQueueEntries"},{"name":"previous-visit-summary-widget","component":"pastVisitSummary","slot":"previous-visit-summary-slot"},{"name":"active-visits-row-actions","component":"activeVisitsRowActions","slot":"queue-table-serve-patient-slot"},{"name":"visit-form-queue-fields","component":"visitFormQueueFields","slot":"visit-form-queue-slot"}],"modals":[{"name":"add-visit-to-queue-modal","component":"addVisitToQueueModal"},{"name":"add-provider-to-room-modal","component":"addProviderToRoomModal"},{"name":"edit-queue-entry-modal","component":"editQueueEntryModal"},{"name":"edit-queue-entry-status-modal","component":"editQueueEntryStatusModal"},{"name":"end-queue-entry-modal","component":"endQueueEntryModal"},{"name":"transition-patient-to-latest-queue-modal","component":"transitionPatientToLatestQueue"},{"name":"transition-queue-entry-modal","component":"transitionQueueEntryModal"},{"name":"transition-queue-entry-status-modal","component":"transitionQueueEntryStatusModal"},{"name":"undo-transition-queue-entry-modal","component":"undoTransitionQueueEntryModal"},{"name":"void-queue-entry-modal","component":"voidQueueEntryModal"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-form","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"service-queues-linelist-filter","title":"filter","component":"queueLinelistFilterWorkspace","type":"service-queues"},{"name":"service-queues-patient-search","title":"searchPatient","component":"patientSearchWorkspace","type":"service-queues"}],"version":"8.1.1-pre.119"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-service-queues-app",
-  "version": "8.1.1-pre.116",
+  "version": "8.1.1-pre.119",
   "description": "Outpatient front-end module for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-service-queues-app.js",
   "main": "src/index.ts",

package/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@carbon/react';
-import MetricsCard from './metrics-card.component';
-import MetricsHeader from './metrics-header.component';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import { updateSelectedService, useSelectedService, useSelectedQueueLocationUuid } from '../helpers/helpers';
 import { useActiveVisits, useAverageWaitTime } from './clinic-metrics.resource';
 import { useServiceMetricsCount } from './queue-metrics.resource';
-import styles from './clinic-metrics.scss';
+import MetricsCard from './metrics-card.component';
+import MetricsHeader from './metrics-header.component';
 import { useMutateQueueEntries, useQueueEntries } from '../hooks/useQueueEntries';
 import useQueueServices from '../hooks/useQueueService';
-import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './clinic-metrics.scss';
 
 export interface Service {
   uuid: string;

package/src/patient-queue-metrics/metrics-header.component.tsx

@@ -1,3 +1,5 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ComboButton, MenuItem } from '@carbon/react';
 import {
   UserHasAccess,
@@ -8,22 +10,29 @@ import {
   useLayoutType,
   useSession,
 } from '@openmrs/esm-framework';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { spaBasePath } from '../constants';
 import styles from './metrics-header.scss';
 
 const MetricsHeader = () => {
   const { t } = useTranslation();
+  const currentUserSession = useSession();
+  const layout = useLayoutType();
+
   const metricsTitle = t('clinicMetrics', 'Clinic metrics');
   const queueScreenText = t('queueScreen', 'Queue screen');
-  const currentUserSession = useSession();
   const providerUuid = currentUserSession?.currentProvider?.uuid;
-  const layout = useLayoutType();
 
-  const navigateToQueueScreen = () => {
+  const launchAddProviderToRoomModal = useCallback(() => {
+    const dispose = showModal('add-provider-to-room-modal', {
+      closeModal: () => dispose(),
+      providerUuid,
+    });
+  }, [providerUuid]);
+
+  const navigateToQueueScreen = useCallback(() => {
     navigate({ to: `${spaBasePath}/service-queues/screen` });
-  };
+  }, []);
+
   return (
     <div className={styles.metricsContainer}>
       <span className={styles.metricsTitle}>{metricsTitle}</span>
@@ -44,15 +53,7 @@ const MetricsHeader = () => {
             onClick={() => launchWorkspace('service-queues-room-form')}
           />
         </UserHasAccess>
-        <MenuItem
-          label={t('addProviderQueueRoom', 'Add provider queue room')}
-          onClick={() => {
-            const dispose = showModal('add-provider-to-room-modal', {
-              closeModal: () => dispose(),
-              providerUuid,
-            });
-          }}
-        />
+        <MenuItem label={t('addProviderQueueRoom', 'Add provider queue room')} onClick={launchAddProviderToRoomModal} />
       </ComboButton>
     </div>
   );

package/src/queue-screen/queue-screen.component.tsx

@@ -1,31 +1,87 @@
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { DataTableSkeleton } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useActiveTickets } from './useActiveTickets';
 import PatientQueueHeader from '../patient-queue-header/patient-queue-header.component';
 import styles from './queue-screen.scss';
+import { useSelectedQueueLocationUuid } from '../helpers/helpers';
+import { ErrorState } from '@openmrs/esm-framework';
 
 interface QueueScreenProps {}
 
 const QueueScreen: React.FC<QueueScreenProps> = () => {
-  const { t } = useTranslation();
-  const { activeTickets, isLoading, error } = useActiveTickets();
+  const { t, i18n } = useTranslation();
+  const { activeTickets, isLoading, error, mutate } = useActiveTickets();
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const selectedLocation = useSelectedQueueLocationUuid();
+
+  const rowData = useMemo(
+    () =>
+      activeTickets.map((ticket, index) => ({
+        id: `${index}`,
+        room: ticket.room,
+        ticketNumber: ticket.ticketNumber,
+        status: ticket.status,
+      })),
+    [activeTickets],
+  );
+
+  const readTicket = useCallback(
+    (queue) => {
+      if ('speechSynthesis' in window) {
+        window.speechSynthesis.cancel();
+
+        const message = new SpeechSynthesisUtterance();
+        const [prefix, suffix] = queue.ticketNumber.split('-');
+        const utterance = t(
+          'ticketAnnouncement',
+          'Ticket number: {{prefix}}, - {{suffix}}, please proceed to room {{room}}',
+          {
+            prefix: prefix.split(''),
+            suffix: suffix.split(''),
+            room: queue.room,
+          },
+        );
+        message.rate = 1;
+        message.pitch = 1;
+        message.text = utterance;
+        message.lang = i18n.language;
+
+        return new Promise<void>((resolve) => {
+          message.onend = () => resolve();
+          window.speechSynthesis.speak(message);
+        });
+      }
+      return Promise.resolve();
+    },
+    [i18n.language, t],
+  );
+
+  useEffect(() => {
+    const ticketsToCallOut = activeTickets.filter((item) => item.status.toLowerCase() === 'calling');
+
+    if (ticketsToCallOut.length > 0 && !isSpeaking) {
+      setIsSpeaking(true);
+      const readTickets = async () => {
+        for (const ticket of ticketsToCallOut) {
+          await readTicket(ticket);
+        }
+        setIsSpeaking(false);
+        mutate?.();
+      };
+
+      readTickets();
+    }
+  }, [activeTickets, isSpeaking, readTicket, mutate]);
 
   if (isLoading) {
     return <DataTableSkeleton row={5} className={styles.queueScreen} role="progressbar" />;
   }
 
   if (error) {
-    return <div>Error</div>;
+    return <ErrorState error={error} headerTitle={t('queueScreenError', 'Queue screen error')} />;
   }
 
-  const rowData = activeTickets.map((ticket, index) => ({
-    id: `${index}}`,
-    room: ticket.room,
-    ticketNumber: ticket.ticketNumber,
-    status: ticket.status,
-  }));
-
   return (
     <div>
       <PatientQueueHeader title={t('queueScreen', 'Queue screen')} showLocationDropdown />

package/src/queue-screen/queue-screen.test.tsx

@@ -26,7 +26,7 @@ describe('QueueScreen component', () => {
       mutate: jest.fn(),
     });
     render(<QueueScreen />);
-    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText(/Error State/i)).toBeInTheDocument();
   });
 
   test('renders table with active tickets when data is loaded', () => {

package/src/queue-screen/useActiveTickets.tsx

@@ -5,7 +5,7 @@ export const useActiveTickets = () => {
   const { data, isLoading, error, mutate } = useSWR<{ data: Record<string, { status: string; ticketNumber: string }> }>(
     `${restBaseUrl}/queueutil/active-tickets`,
     openmrsFetch,
-    { refreshInterval: 3000 },
+    { refreshInterval: 30000 },
   );
   const activeTickets =
     Array.from(Object.entries(data?.data ?? {}).map(([key, value]) => ({ room: key, ...value }))) ?? [];

package/src/routes.json

@@ -40,10 +40,6 @@
       "name": "service-queues-dashboard",
       "slot": "service-queues-dashboard-slot"
     },
-    {
-      "name": "edit-queue-entry-status-modal",
-      "component": "editQueueEntryStatusModal"
-    },
     {
       "name": "patient-info-banner-slot",
       "component": "patientInfoBannerSlot"
@@ -57,55 +53,62 @@
       "component": "clearAllQueueEntries"
     },
     {
-      "name": "add-visit-to-queue-modal",
-      "component": "addVisitToQueueModal"
+      "name": "previous-visit-summary-widget",
+      "component": "pastVisitSummary",
+      "slot": "previous-visit-summary-slot"
     },
+
     {
-      "name": "transition-queue-entry-status-modal",
-      "component": "transitionQueueEntryStatusModal"
+      "name": "active-visits-row-actions",
+      "component": "activeVisitsRowActions",
+      "slot": "queue-table-serve-patient-slot"
     },
     {
-      "name": "previous-visit-summary-widget",
-      "component": "pastVisitSummary",
-      "slot": "previous-visit-summary-slot"
+      "name": "visit-form-queue-fields",
+      "component": "visitFormQueueFields",
+      "slot":"visit-form-queue-slot"
+    }
+  ],
+  "modals": [
+    {
+      "name": "add-visit-to-queue-modal",
+      "component": "addVisitToQueueModal"
     },
     {
       "name": "add-provider-to-room-modal",
       "component": "addProviderToRoomModal"
     },
     {
-      "name": "transition-queue-entry-modal",
-      "component": "transitionQueueEntryModal"
+      "name": "edit-queue-entry-modal",
+      "component": "editQueueEntryModal"
     },
     {
-      "name": "transition-patient-to-latest-queue-modal",
-      "component": "transitionPatientToLatestQueue"
+      "name": "edit-queue-entry-status-modal",
+      "component": "editQueueEntryStatusModal"
     },
     {
-      "name": "edit-queue-entry-modal",
-      "component": "editQueueEntryModal"
+      "name": "end-queue-entry-modal",
+      "component": "endQueueEntryModal"
     },
     {
-      "name": "undo-transition-queue-entry-modal",
-      "component": "undoTransitionQueueEntryModal"
+      "name": "transition-patient-to-latest-queue-modal",
+      "component": "transitionPatientToLatestQueue"
     },
     {
-      "name": "void-queue-entry-modal",
-      "component": "voidQueueEntryModal"
+      "name": "transition-queue-entry-modal",
+      "component": "transitionQueueEntryModal"
     },
     {
-      "name": "end-queue-entry-modal",
-      "component": "endQueueEntryModal"
+      "name": "transition-queue-entry-status-modal",
+      "component": "transitionQueueEntryStatusModal"
     },
     {
-      "name": "active-visits-row-actions",
-      "component": "activeVisitsRowActions",
-      "slot": "queue-table-serve-patient-slot"
+      "name": "undo-transition-queue-entry-modal",
+      "component": "undoTransitionQueueEntryModal"
     },
     {
-      "name": "visit-form-queue-fields",
-      "component": "visitFormQueueFields",
-      "slot":"visit-form-queue-slot"
+      "name": "void-queue-entry-modal",
+      "component": "voidQueueEntryModal"
     }
   ],
   "workspaces": [

package/translations/en.json

@@ -215,6 +215,7 @@
   "queueRoomUpdatedSuccessfully": "Queue room updated successfully",
   "queuesClearedSuccessfully": "Queues cleared successfully",
   "queueScreen": "Queue screen",
+  "queueScreenError": "Queue screen error",
   "queueService": "Queue service",
   "queueStatus": "Queue status",
   "recentScheduledVisits_one": "{{count}} visit scheduled for +/- 7 days",
@@ -272,6 +273,7 @@
   "submitting": "Submitting...",
   "success": "Success",
   "temperature": "Temperature",
+  "ticketAnnouncement": "Ticket number: {{prefix}}, - {{suffix}}, please proceed to room {{room}}",
   "ticketNumber": "Ticket Number",
   "time": "Time",
   "timeCannotBeInFuture": "Time cannot be in the future",