(feat) O3-3080: Improvements to the location dropdown in the service …

…queues page (#1195) * Service queue data to be stored in session storage * In case of a single queue location, it should be selected by default * If the user session location is a queue location, it should be selected by default * Fix failing tests
openmrs · Jun 18, 2024 · 85fc5c9 · 85fc5c9
1 parent 116a3c1
commit 85fc5c9
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/packages/esm-service-queues-app/src/helpers/helpers.ts b/packages/esm-service-queues-app/src/helpers/helpers.ts
@@ -15,14 +15,14 @@ export const getServiceCountByAppointmentType = (
     .reduce((count, val) => count + val, 0);
 };
 
-const initialServiceNameState = { serviceName: localStorage.getItem('queueServiceName') };
-const initialServiceUuidState = { serviceUuid: localStorage.getItem('queueServiceUuid') };
+const initialServiceNameState = { serviceName: sessionStorage.getItem('queueServiceName') };
+const initialServiceUuidState = { serviceUuid: sessionStorage.getItem('queueServiceUuid') };
 const intialStatusNameState = { status: '' };
-const initialQueueLocationNameState = { queueLocationName: localStorage.getItem('queueLocationName') };
-const initialQueueLocationUuidState = { queueLocationUuid: localStorage.getItem('queueLocationUuid') };
+const initialQueueLocationNameState = { queueLocationName: sessionStorage.getItem('queueLocationName') };
+const initialQueueLocationUuidState = { queueLocationUuid: sessionStorage.getItem('queueLocationUuid') };
 const initialSelectedQueueRoomTimestamp = { providerQueueRoomTimestamp: new Date() };
 const initialPermanentProviderQueueRoomState = {
-  isPermanentProviderQueueRoom: localStorage.getItem('isPermanentProviderQueueRoom'),
+  isPermanentProviderQueueRoom: sessionStorage.getItem('isPermanentProviderQueueRoom'),
 };
 
 export function getSelectedServiceName() {
@@ -61,11 +61,13 @@ export function getIsPermanentProviderQueueRoom() {
 
 export const updateSelectedServiceName = (currentServiceName: string) => {
   const store = getSelectedServiceName();
+  sessionStorage.setItem('queueServiceName', currentServiceName);
   store.setState({ serviceName: currentServiceName });
 };
 
 export const updateSelectedServiceUuid = (currentServiceUuid: string) => {
   const store = getSelectedServiceUuid();
+  sessionStorage.setItem('queueServiceUuid', currentServiceUuid);
   store.setState({ serviceUuid: currentServiceUuid });
 };
 
@@ -76,11 +78,13 @@ export const updateSelectedAppointmentStatus = (currentAppointmentStatus: string
 
 export const updateSelectedQueueLocationName = (currentLocationName: string) => {
   const store = getSelectedQueueLocationName();
+  sessionStorage.setItem('queueLocationName', currentLocationName);
   store.setState({ queueLocationName: currentLocationName });
 };
 
 export const updateSelectedQueueLocationUuid = (currentLocationUuid: string) => {
   const store = getSelectedQueueLocationUuid();
+  sessionStorage.setItem('queueLocationUuid', currentLocationUuid);
   store.setState({ queueLocationUuid: currentLocationUuid });
 };
 
@@ -91,6 +95,7 @@ export const updatedSelectedQueueRoomTimestamp = (currentProviderRoomTimestamp:
 
 export const updateIsPermanentProviderQueueRoom = (currentIsPermanentProviderQueueRoom) => {
   const store = getIsPermanentProviderQueueRoom();
+  sessionStorage.setItem('isPermanentProviderQueueRoom', currentIsPermanentProviderQueueRoom);
   store.setState({ isPermanentProviderQueueRoom: currentIsPermanentProviderQueueRoom });
 };
 

diff --git a/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx b/packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Calendar, Location } from '@carbon/react/icons';
 import { Dropdown } from '@carbon/react';
@@ -11,6 +11,7 @@ import {
   updateSelectedQueueLocationName,
   updateSelectedServiceName,
   useSelectedQueueLocationName,
+  useSelectedQueueLocationUuid,
 } from '../helpers/helpers';
 import styles from './patient-queue-header.scss';
 
@@ -20,6 +21,7 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
   const userSession = useSession();
   const userLocation = userSession?.sessionLocation?.display;
   const currentQueueLocationName = useSelectedQueueLocationName();
+  const currentQueueLocationUuid = useSelectedQueueLocationUuid();
 
   const handleQueueLocationChange = useCallback(({ selectedItem }) => {
     if (selectedItem.id === 'all') {
@@ -32,6 +34,29 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (!isLoading && !error && !currentQueueLocationUuid) {
+      if (queueLocations.length === 1) {
+        handleQueueLocationChange({ selectedItem: queueLocations[0] });
+      }
+      if (queueLocations.some((location) => location.id === userSession?.sessionLocation?.uuid)) {
+        handleQueueLocationChange({
+          selectedItem: {
+            id: userSession?.sessionLocation?.uuid,
+            name: userSession?.sessionLocation?.display,
+          },
+        });
+      }
+    }
+  }, [
+    queueLocations,
+    currentQueueLocationName,
+    currentQueueLocationUuid,
+    isLoading,
+    error,
+    userSession?.sessionLocation?.uuid,
+  ]);
+
   return (
     <>
       <div className={styles.header} data-testid="patient-queue-header">
@@ -56,9 +81,11 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
               className={styles.dropdown}
               id="queueLocationDropdown"
               label={currentQueueLocationName ?? t('all', 'All')}
-              items={[{ id: 'all', name: t('all', 'All') }, ...queueLocations]}
+              items={
+                queueLocations.length !== 1 ? [{ id: 'all', name: t('all', 'All') }, ...queueLocations] : queueLocations
+              }
               itemToString={(item) => (item ? item.name : '')}
-              titleText={t('view', 'View')}
+              titleText={t('location', 'Location')}
               type="inline"
               onChange={handleQueueLocationChange}
             />

diff --git a/packages/esm-service-queues-app/src/queue-screen/queue-screen.test.tsx b/packages/esm-service-queues-app/src/queue-screen/queue-screen.test.tsx
@@ -6,6 +6,7 @@ import QueueScreen from './queue-screen.component';
 jest.mock('./useActiveTickets');
 jest.mock('../helpers/helpers', () => ({
   useSelectedQueueLocationName: jest.fn().mockReturnValue('Room A'),
+  useSelectedQueueLocationUuid: jest.fn().mockReturnValue(''),
 }));
 
 describe('QueueScreen component', () => {

diff --git a/packages/esm-service-queues-app/translations/en.json b/packages/esm-service-queues-app/translations/en.json
@@ -103,6 +103,7 @@
   "lastVisit": "Last Visit",
   "lastVisitDate": "Date",
   "loading": "Loading...",
+  "location": "Location",
   "male": "Male",
   "maleLabelText": "Male",
   "match": "Match",
@@ -290,7 +291,6 @@
   "updateEntry": "Update entry",
   "updateRoom": "Update room",
   "useTodaysDate": "Use today's date",
-  "view": "View",
   "visitQueueNumberAttributeUuid not configured": "visitQueueNumberAttributeUuid not configured",
   "visitStartTime": "Visit Time",
   "visitTabs": "Visit tabs",