@kenyaemr/esm-service-queues-app 8.0.1-pre.99 → 8.0.3-pre.131

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/patient-search/patient-scheduled-visits.component.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import head from 'lodash-es/head';
-import { first } from 'rxjs/operators';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -113,58 +112,50 @@ const ScheduledVisitsForVisitType: React.FC<{
         const abortController = new AbortController();
 
         saveVisit(payload, abortController)
-          .pipe(first())
-          .subscribe(
-            (response) => {
-              if (response.status === 201) {
-                postQueueEntry(
-                  response.data.uuid,
-                  patientId,
-                  priority,
-                  defaultStatus,
-                  service,
-                  appointment,
-                  selectedQueueLocation,
-                  visitQueueNumberAttributeUuid,
-                ).then(
-                  ({ status }) => {
-                    if (status === 201) {
-                      showSnackbar({
-                        kind: 'success',
-                        title: t('startAVisit', 'Start a visit'),
-                        subtitle: t(
-                          'startVisitQueueSuccessfully',
-                          'Patient has been added to active visits list and queue.',
-                          `${hours} : ${minutes}`,
-                        ),
-                      });
-                      closeWorkspace();
-                      setIsSubmitting(false);
-                      mutateQueueEntries();
-                    }
-                  },
-                  (error) => {
-                    showSnackbar({
-                      title: t('queueEntryError', 'Error adding patient to the queue'),
-                      kind: 'error',
-                      isLowContrast: false,
-                      subtitle: error?.message,
-                    });
-                    setIsSubmitting(false);
-                  },
-                );
-              }
-            },
-            (error) => {
-              showSnackbar({
-                title: t('startVisitError', 'Error starting visit'),
-                kind: 'error',
-                isLowContrast: false,
-                subtitle: error?.message,
+          .then((response) => {
+            postQueueEntry(
+              response.data.uuid,
+              patientId,
+              priority,
+              defaultStatus,
+              service,
+              appointment,
+              selectedQueueLocation,
+              visitQueueNumberAttributeUuid,
+            )
+              .then(() => {
+                showSnackbar({
+                  kind: 'success',
+                  title: t('startAVisit', 'Start a visit'),
+                  subtitle: t(
+                    'startVisitQueueSuccessfully',
+                    'Patient has been added to active visits list and queue.',
+                    `${hours} : ${minutes}`,
+                  ),
+                });
+                closeWorkspace();
+                setIsSubmitting(false);
+                mutateQueueEntries();
+              })
+              .catch((error) => {
+                showSnackbar({
+                  title: t('queueEntryError', 'Error adding patient to the queue'),
+                  kind: 'error',
+                  isLowContrast: false,
+                  subtitle: error?.message,
+                });
+                setIsSubmitting(false);
               });
-              setIsSubmitting(false);
-            },
-          );
+          })
+          .catch((error) => {
+            showSnackbar({
+              title: t('startVisitError', 'Error starting visit'),
+              kind: 'error',
+              isLowContrast: false,
+              subtitle: error?.message,
+            });
+            setIsSubmitting(false);
+          });
       }
     },
     [

package/src/patient-search/visit-form/visit-form.component.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import dayjs from 'dayjs';
-import { first } from 'rxjs/operators';
 import {
   Button,
   ButtonSet,
@@ -67,7 +66,7 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) =>
   const [visitTime, setVisitTime] = useState(dayjs(new Date()).format('hh:mm'));
   const state = useMemo(() => ({ patientUuid }), [patientUuid]);
   const [ignoreChanges, setIgnoreChanges] = useState(true);
-  const { activePatientEnrollment, isLoading } = useActivePatientEnrollment(patientUuid);
+  const { activePatientEnrollment } = useActivePatientEnrollment(patientUuid);
   const [enrollment, setEnrollment] = useState<PatientProgram>(activePatientEnrollment[0]);
   const { mutateQueueEntries } = useMutateQueueEntries();
   const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
@@ -116,56 +115,50 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) =>
 
       const abortController = new AbortController();
 
-      saveVisit(payload, abortController)
-        .pipe(first())
-        .subscribe(
-          (response) => {
-            if (response.status === 201) {
-              // add new queue entry if visit created successfully
-              postQueueEntry(
-                response.data.uuid,
-                service,
-                patientUuid,
-                priority,
-                status,
-                sortWeight,
-                queueLocation,
-                visitQueueNumberAttributeUuid,
-              ).then(
-                ({ status }) => {
-                  if (status === 201) {
-                    showSnackbar({
-                      kind: 'success',
-                      isLowContrast: true,
-                      title: t('startAVisit', 'Start a visit'),
-                      subtitle: t(
-                        'startVisitQueueSuccessfully',
-                        'Patient has been added to active visits list and queue.',
-                        `${hours} : ${minutes}`,
-                      ),
-                    });
-                    closeWorkspace();
-                    mutateQueueEntries();
-                  }
-                },
-                (error) => {
-                  showSnackbar({
-                    title: t('queueEntryError', 'Error adding patient to the queue'),
-                    kind: 'error',
-                    subtitle: error?.message,
-                  });
-                },
-              );
-            }
-          },
-          (error) => {
+      saveVisit(payload, abortController).then((response) => {
+        // add new queue entry if visit created successfully
+        postQueueEntry(
+          response.data.uuid,
+          service,
+          patientUuid,
+          priority,
+          status,
+          sortWeight,
+          queueLocation,
+          visitQueueNumberAttributeUuid,
+        )
+          .then(() => {
+            showSnackbar({
+              kind: 'success',
+              isLowContrast: true,
+              title: t('startAVisit', 'Start a visit'),
+              subtitle: t(
+                'startVisitQueueSuccessfully',
+                'Patient has been added to active visits list and queue.',
+                `${hours} : ${minutes}`,
+              ),
+            });
+            closeWorkspace();
+            setIsSubmitting(false);
+            mutateQueueEntries();
+          })
+          .catch((error) => {
+            showSnackbar({
+              title: t('queueEntryError', 'Error adding patient to the queue'),
+              kind: 'error',
+              subtitle: error?.message,
+            });
+            setIsSubmitting(false);
+          })
+          .catch((error) => {
             showSnackbar({
               title: t('startVisitError', 'Error starting visit'),
               kind: 'error',
               subtitle: error?.message,
             });
-          },
-        );
+            setIsSubmitting(false);
+          });
+      });
     },
     [
       closeWorkspace,
@@ -181,9 +174,9 @@ const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) =>
     ],
   );
 
-  const handleOnChange = () => {
+  const handleOnChange = useCallback(() => {
     setIgnoreChanges((prevState) => !prevState);
-  };
+  }, []);
 
   return (
     <Form className={styles.form} onChange={handleOnChange} onSubmit={handleSubmit}>

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/queue-table/cells/columns.resource.ts

@@ -83,9 +83,9 @@ export function useColumns(queue: string, status: string): QueueTableColumn[] {
 }
 
 function getColumnFromDefinition(t: TFunction, columnDef: ColumnDefinition): QueueTableColumn {
-  const { id, header, headerI18nModule, columnType } = columnDef;
+  const { id, header, columnType } = columnDef;
 
-  const translatedHeader = header ? translateFrom(headerI18nModule ?? '@openmrs/esm-service-queues-app', header) : null;
+  const translatedHeader = header ? t(header) : null;
 
   switch (columnType ?? id) {
     case 'patient-name': {

package/src/queue-table/default-queue-table.component.tsx

@@ -133,17 +133,18 @@ function DefaultQueueTable() {
               queueUuid={null}
               statusUuid={null}
               ExpandedRow={QueueTableExpandedRow}
-              tableFilter={[
-                <QueueDropdownFilter />,
-                <StatusDropdownFilter />,
-                <TableToolbarSearch
-                  className={styles.search}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  placeholder={t('searchThisList', 'Search this list')}
-                  size={isDesktop(layout) ? 'sm' : 'lg'}
-                />,
-                <ClearQueueEntries queueEntries={filteredQueueEntries} />,
-              ]}
+              tableFilters={
+                <>
+                  <QueueDropdownFilter /> <StatusDropdownFilter />
+                  <TableToolbarSearch
+                    className={styles.search}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder={t('searchThisList', 'Search this list')}
+                    size={isDesktop(layout) ? 'sm' : 'lg'}
+                  />
+                  <ClearQueueEntries queueEntries={filteredQueueEntries} />
+                </>
+              }
             />
           </div>
         ) : (
@@ -160,17 +161,18 @@ function QueueDropdownFilter() {
   const layout = useLayoutType();
   const { services } = useQueueServices();
   const selectedService = useSelectedService();
-  const handleServiceChange = ({ selectedItem }) => {
+
+  const handleServiceChange = useCallback(({ selectedItem }) => {
     updateSelectedService(selectedItem.uuid, selectedItem?.display);
     mutateQueueEntries.mutateQueueEntries();
-  };
+  }, []);
 
   return (
     <>
       <div className={styles.filterContainer}>
         <Dropdown
           id="serviceFilter"
-          titleText={t('filterByService', 'Filter by service :')}
+          titleText={t('filterByService', 'Filter by service:')}
           label={selectedService?.serviceDisplay ?? t('all', 'All')}
           type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
@@ -197,7 +199,7 @@ function StatusDropdownFilter() {
       <div className={styles.filterContainer}>
         <Dropdown
           id="statusFilter"
-          titleText={t('filterByStatus', 'Filter by status :')}
+          titleText={t('filterByStatus', 'Filter by status:')}
           label={queueStatus?.statusDisplay ?? t('all', 'All')}
           type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(statuses ?? [])]}

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

@@ -8,16 +8,21 @@ import { convertTime12to24 } from '../../helpers/time-helpers';
 interface TransitionQueueEntryModalProps {
   queueEntry: QueueEntry;
   closeModal: () => void;
+  modalTitle?: string;
 }
 
-const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({ queueEntry, closeModal }) => {
+const TransitionQueueEntryModal: React.FC<TransitionQueueEntryModalProps> = ({
+  queueEntry,
+  closeModal,
+  modalTitle,
+}) => {
   const { t } = useTranslation();
   return (
     <QueueEntryActionModal
       queueEntry={queueEntry}
       closeModal={closeModal}
       modalParams={{
-        modalTitle: t('transitionPatient', 'Transition patient'),
+        modalTitle: modalTitle || t('transitionPatient', 'Transition patient'),
         modalInstruction: t(
           'transitionPatientStatusOrQueue',
           'Select a new status or queue for patient to transition to.',

package/src/queue-table/queue-table-by-status-menu.component.tsx

@@ -18,7 +18,7 @@ export default function QueueTableByStatusMenu() {
     <SideNavMenu title={t('serviceQueues', 'Service queues')} className={styles.queueTableByStatusNavMenu}>
       <BrowserRouter>
         {queues.map((queue) => (
-          <QueueTableByStatusLink queue={queue} />
+          <QueueTableByStatusLink key={queue.uuid} queue={queue} />
         ))}
       </BrowserRouter>
     </SideNavMenu>

package/src/queue-table/queue-table-metrics.component.tsx

@@ -20,7 +20,12 @@ function QueueTableMetrics({ selectedQueue }: QueueTableMetricsProps) {
       <QueueTableMetricsCard value={count} headerLabel={t('totalPatients', 'Total Patients')} />
       {allowedStatuses?.map((status) => {
         return (
-          <QueueTableMetricsCard queueUuid={selectedQueue.uuid} status={status.uuid} headerLabel={status.display} />
+          <QueueTableMetricsCard
+            headerLabel={status.display}
+            key={status.uuid}
+            queueUuid={selectedQueue.uuid}
+            status={status.uuid}
+          />
         );
       })}
     </div>

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

@@ -46,7 +46,7 @@ interface QueueTableProps {
   ExpandedRow?: FC<{ queueEntry: QueueEntry }>;
 
   // if provided, adds addition table toolbar elements
-  tableFilter?: React.ReactNode[];
+  tableFilters?: React.ReactNode;
 
   isLoading?: boolean;
 }
@@ -58,7 +58,7 @@ function QueueTable({
   statusUuid,
   queueTableColumnsOverride,
   ExpandedRow,
-  tableFilter,
+  tableFilters,
   isLoading,
 }: QueueTableProps) {
   const { t } = useTranslation();
@@ -80,7 +80,7 @@ function QueueTable({
     paginatedQueueEntries?.map((queueEntry) => {
       const row: Record<string, JSX.Element | string> = { id: queueEntry.uuid };
       columns.forEach(({ key, CellComponent }) => {
-        row[key] = <CellComponent queueEntry={queueEntry} />;
+        row[key] = <CellComponent key={key} queueEntry={queueEntry} />;
       });
       return row;
     }) ?? [];
@@ -111,9 +111,9 @@ function QueueTable({
                 </span>
               ) : null}
 
-              {tableFilter && (
+              {tableFilters && (
                 <TableToolbar {...getToolbarProps()}>
-                  <TableToolbarContent className={styles.toolbarContent}>{tableFilter}</TableToolbarContent>
+                  <TableToolbarContent className={styles.toolbarContent}>{tableFilters}</TableToolbarContent>
                 </TableToolbar>
               )}
             </div>
@@ -121,8 +121,8 @@ function QueueTable({
               <TableHead>
                 <TableRow>
                   {ExpandedRow && <TableExpandHeader enableToggle {...getExpandHeaderProps()} />}
-                  {headers.map((header, i) => (
-                    <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
                       {header.header}
                     </TableHeader>
                   ))}
@@ -146,7 +146,10 @@ function QueueTable({
                         ))}
                       </Row>
                       {ExpandedRow && row.isExpanded && (
-                        <TableExpandedRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 1}>
+                        <TableExpandedRow
+                          key={i}
+                          className={styles.expandedActiveVisitRow}
+                          colSpan={headers.length + 1}>
                           <ExpandedRow queueEntry={paginatedQueueEntries[i]} />
                         </TableExpandedRow>
                       )}

package/src/queue-table/queue-table.scss

@@ -28,6 +28,10 @@
 }
 
 .filterContainer {
+  label {
+    margin-right: layout.$spacing-03 !important;
+  }
+
   :global(.cds--dropdown__wrapper--inline) {
     gap: 0;
   }
@@ -97,6 +101,7 @@
   .toolbarContent {
     display: flex;
     z-index: 1; // prevent dropdown from getting covered by table elements
+    column-gap: layout.$spacing-03;
   }
 
   :global(.cds--table-toolbar) {