(feat) U4X-741 : Add Feature in patient queues to toggle viewing of all patients queued in the parent location with tag clinical room (#258)

(feat)  U4X-741 : Add Feature in patient queues to toggle viewing of all patients queued in the parent location with tag clinical room  (#258)

Author: jabahum

packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx

@@ -32,12 +32,11 @@ import StatusIcon from '../queue-entry-table-components/status-icon.component';
 import { getOriginFromPathName } from './active-visits-table.resource';
 import styles from './active-visits-table.scss';
 import EditActionsMenu from './edit-action-menu.components';
-import { usePatientQueuesList } from './patient-queues.resource';
+import { useParentLocation, usePatientQueuesList } from './patient-queues.resource';
 import PickPatientActionMenu from '../queue-entry-table-components/pick-patient-queue-entry-menu.component';
 import ViewActionsMenu from './view-action-menu.components';
 import NotesActionsMenu from './notes-action-menu.components';
 import { PRIVILEGE_ENABLE_EDIT_DEMOGRAPHICS } from '../constants';
-import PatientSearch from '../patient-search/patient-search.component';
 import { QueueStatus } from '../utils/utils';
 import MovetoNextPointAction from './move-patient-to-next-action-menu.components';
 
@@ -54,18 +53,18 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
   const { t } = useTranslation();
   const session = useSession();
   const layout = useLayoutType();
+  const [isToggled, setIsToggled] = useState(false);
 
-  const { patientQueueEntries, isLoading } = usePatientQueuesList(
-    session?.sessionLocation?.uuid,
-    status,
-    session.user.systemId,
-  );
+  const handleToggleChange = () => {
+    setIsToggled(!isToggled);
+  };
+  const { location } = useParentLocation(session?.sessionLocation?.uuid);
+
+  const activeLocationUuid = isToggled ? location?.parentLocation?.uuid : session?.sessionLocation?.uuid;
+
+  const { patientQueueEntries, isLoading } = usePatientQueuesList(activeLocationUuid || '', status, isToggled);
 
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [view, setView] = useState('');
-  const [viewState, setViewState] = useState<{ selectedPatientUuid: string }>(null);
   const [searchTerm, setSearchTerm] = useState('');
-  const [overlayHeader, setOverlayTitle] = useState('');
 
   const currentPathName: string = window.location.pathname;
   const fromPage: string = getOriginFromPathName(currentPathName);
@@ -227,17 +226,34 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
       >
         {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
           <TableContainer className={styles.tableContainer}>
-            <TableToolbar style={{ position: 'static', height: '3rem', overflow: 'visible', backgroundColor: 'color' }}>
-              <TableToolbarContent className={styles.toolbarContent}>
-                <Layer className={styles.toolbarContentLayer}>
-                  <TableToolbarSearch
-                    expanded
-                    className={styles.search}
-                    onChange={handleSearchInputChange}
-                    placeholder={t('searchThisList', 'Search this list')}
-                    size="sm"
-                  />
-                </Layer>
+            <TableToolbar
+              style={{
+                position: 'static',
+                overflow: 'visible',
+                backgroundColor: 'color',
+              }}
+            >
+              <TableToolbarContent
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <TableToolbarSearch
+                  expanded
+                  className={styles.search}
+                  onChange={handleSearchInputChange}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size="sm"
+                />
+                <Toggle
+                  className={styles.toggle}
+                  labelA="Off"
+                  labelB="On"
+                  id="toggle-1"
+                  toggled={isToggled}
+                  onToggle={handleToggleChange}
+                />
               </TableToolbarContent>
             </TableToolbar>
             <Table {...getTableProps()} className={styles.activeVisitsTable}>
@@ -292,16 +308,6 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
           </TableContainer>
         )}
       </DataTable>
-      {showOverlay && (
-        <PatientSearch
-          view={view}
-          closePanel={() => setShowOverlay(false)}
-          viewState={{
-            selectedPatientUuid: viewState.selectedPatientUuid,
-          }}
-          headerTitle={overlayHeader}
-        />
-      )}
     </div>
   );
 };

packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss

@@ -119,6 +119,16 @@
   }
 }
 
+.tableFilter {
+  display: flex;
+  flex-direction: row;
+  margin: 4rem;
+}
+
+.toggle {
+  margin: 2rem;
+}
+
 .emptyRow {
   padding: 0 1rem;
   display: flex;

packages/esm-patient-queues-app/src/active-visits/patient-queues.resource.ts

@@ -86,12 +86,18 @@ export interface ChildLocation {
   links: Link[];
 }
 
-export function usePatientQueuesList(currentQueueLocationUuid: string, status: string, provider: string) {
-  const apiUrl = `/ws/rest/v1/patientqueue?v=full&status=${status}&room=${currentQueueLocationUuid}`;
-  return usePatientQueueRequest(apiUrl, provider);
+export function usePatientQueuesList(currentQueueLocationUuid: string, status: string, isToggled: boolean) {
+  let url = '';
+
+  if (isToggled) {
+    url = `/ws/rest/v1/patientqueue?v=full&status=${status}&parentLocation=${currentQueueLocationUuid}`;
+  } else {
+    url = `/ws/rest/v1/patientqueue?v=full&status=${status}&room=${currentQueueLocationUuid}`;
+  }
+  return usePatientQueueRequest(url);
 }
 
-export function usePatientQueueRequest(apiUrl: string, provider) {
+export function usePatientQueueRequest(apiUrl: string) {
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientQueue> } }, Error>(
     apiUrl,
     openmrsFetch,

packages/esm-patient-queues-app/src/queue-board/queue-board.resource.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 
 export function usePatientQueuesListByStatus(status: string) {
   const apiUrl = `/ws/rest/v1/patientqueue?v=full&status=${status}`;
-  return usePatientQueueRequest(apiUrl, '');
+  return usePatientQueueRequest(apiUrl);
 }
 
 export function usePatientQueuesByParentLocation(status: string) {