(feat): Add ability to filter queue screen active tickets by queue location

Author: makombe

packages/esm-service-queues-app/src/modals/call-modal/call-queue-entry.modal.tsx

@@ -45,19 +45,22 @@ const CallQueueEntryModal: React.FC<CallQueueEntryModalProps> = ({ closeModal, q
       mappedQueueEntry.sortWeight,
     ).then(
       () => {
-        serveQueueEntry(mappedQueueEntry.queue.name, mappedQueueEntry.visitQueueNumber, 'serving').then(
-          ({ status }) => {
-            showSnackbar({
-              isLowContrast: true,
-              title: t('success', 'Success'),
-              kind: 'success',
-              subtitle: t('patientAttendingService', 'Patient attending service'),
-            });
-            closeModal();
-            mutateQueueEntries();
-            navigate({ to: `\${openmrsSpaBase}/patient/${mappedQueueEntry.patientUuid}/chart` });
-          },
-        );
+        serveQueueEntry(
+          mappedQueueEntry.queue.name,
+          mappedQueueEntry.visitQueueNumber,
+          'serving',
+          mappedQueueEntry?.queueLocation,
+        ).then(({ status }) => {
+          showSnackbar({
+            isLowContrast: true,
+            title: t('success', 'Success'),
+            kind: 'success',
+            subtitle: t('patientAttendingService', 'Patient attending service'),
+          });
+          closeModal();
+          mutateQueueEntries();
+          navigate({ to: `\${openmrsSpaBase}/patient/${mappedQueueEntry.patientUuid}/chart` });
+        });
       },
       (error) => {
         showSnackbar({
@@ -69,18 +72,19 @@ const CallQueueEntryModal: React.FC<CallQueueEntryModalProps> = ({ closeModal, q
       },
     );
   }, [
-    closeModal,
-    defaultTransitionStatus,
-    mutateQueueEntries,
+    mappedQueueEntry.visitUuid,
+    mappedQueueEntry.queueUuid,
+    mappedQueueEntry.queueEntryUuid,
     mappedQueueEntry.patientUuid,
     mappedQueueEntry.priority?.uuid,
-    mappedQueueEntry.queue.name,
-    mappedQueueEntry.queueEntryUuid,
-    mappedQueueEntry.queueUuid,
     mappedQueueEntry.sortWeight,
+    mappedQueueEntry.queue.name,
     mappedQueueEntry.visitQueueNumber,
-    mappedQueueEntry.visitUuid,
+    mappedQueueEntry?.queueLocation,
+    defaultTransitionStatus,
     t,
+    closeModal,
+    mutateQueueEntries,
   ]);
 
   const handleRequeuePatient = useCallback(() => {

packages/esm-service-queues-app/src/queue-screen/queue-screen.component.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 import { DataTableSkeleton } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useActiveTickets } from './useActiveTickets';
+import { useServiceQueuesStore } from '../store/store';
 import PatientQueueHeader from '../patient-queue-header/patient-queue-header.component';
 import styles from './queue-screen.scss';
 
 interface QueueScreenProps {}
 
 const QueueScreen: React.FC<QueueScreenProps> = () => {
   const { t } = useTranslation();
-  const { activeTickets, isLoading, error } = useActiveTickets();
+  const { selectedQueueLocationUuid } = useServiceQueuesStore();
+
+  const { activeTickets, isLoading, error } = useActiveTickets(selectedQueueLocationUuid);
 
   if (isLoading) {
     return <DataTableSkeleton row={5} className={styles.queueScreen} role="progressbar" />;

packages/esm-service-queues-app/src/queue-screen/useActiveTickets.ts

@@ -1,12 +1,13 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 
-export const useActiveTickets = () => {
-  const { data, isLoading, error, mutate } = useSWR<{ data: Record<string, { status: string; ticketNumber: string }> }>(
-    `${restBaseUrl}/queueutil/active-tickets`,
-    openmrsFetch,
-    { refreshInterval: 3000 },
-  );
+export const useActiveTickets = (locationUuid?: string) => {
+  const url = locationUuid
+    ? `${restBaseUrl}/queueutil/active-tickets?locationUuid=${locationUuid}`
+    : `${restBaseUrl}/queueutil/active-tickets`;
+  const { data, isLoading, error, mutate } = useSWR<{
+    data: Record<string, { status: string; ticketNumber: string; location?: string }>;
+  }>(url, openmrsFetch, { refreshInterval: 3000 });
   const activeTickets =
     Array.from(Object.entries(data?.data ?? {}).map(([key, value]) => ({ room: key, ...value }))) ?? [];
   return { activeTickets, isLoading, error, mutate };

packages/esm-service-queues-app/src/queue-table/cells/queue-table-action-cell.component.tsx

@@ -36,6 +36,7 @@ function useActionPropsByKey() {
             mappedQueueEntry.queue.name,
             mappedQueueEntry.visitQueueNumber,
             'calling',
+            mappedQueueEntry?.queueLocation,
           );
           if (callingQueueResponse.ok) {
             await mutateQueueEntries();

packages/esm-service-queues-app/src/service-queues.resource.ts

@@ -190,9 +190,8 @@ export function useServiceQueueEntries(service: string, locationUuid: string) {
   };
 }
 
-export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string) {
+export function serveQueueEntry(servicePointName: string, ticketNumber: string, status: string, locationUuid?: string) {
   const abortController = new AbortController();
-
   return openmrsFetch(`${restBaseUrl}/queueutil/assignticket`, {
     method: 'POST',
     headers: {
@@ -203,6 +202,7 @@ export function serveQueueEntry(servicePointName: string, ticketNumber: string,
       servicePointName,
       ticketNumber,
       status,
+      locationUuid: locationUuid,
     },
   });
 }