(feat) Left hand navigation to queue by status table component

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

@@ -9,6 +9,7 @@ import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
 import { dashboardMeta } from './dashboard.meta';
 import rootComponent from './root.component';
+import queueTableByStatusMenuComponent from './queue-table/queue-table-by-status-menu.component';
 import appointmentListComponent from './queue-patient-linelists/scheduled-appointments-table.component';
 import queueListComponent from './queue-patient-linelists/queue-services-table.component';
 import outpatientSideNavComponent from './side-menu/side-menu.component';
@@ -28,6 +29,8 @@ const options = {
 
 export const root = getSyncLifecycle(rootComponent, options);
 
+export const queueTableByStatusMenu = getSyncLifecycle(queueTableByStatusMenuComponent, options);
+
 export const appointmentsList = getSyncLifecycle(appointmentListComponent, options);
 
 export const queueList = getSyncLifecycle(queueListComponent, options);

packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx

@@ -0,0 +1,42 @@
+import { SideNavMenu } from '@carbon/react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Queue } from '../types';
+import { useQueues } from '../hooks/useQueues';
+import classNames from 'classnames';
+import { BrowserRouter, useMatch, generatePath } from 'react-router-dom';
+import styles from './queue-table-by-status-menu.scss';
+
+// (Non-standard UI) A menu in the left nav to display a list of queues. Intended to be used
+// by slotting into the left nav as an extension
+export default function QueueTableByStatusMenu() {
+  const { t } = useTranslation();
+  const { queues } = useQueues();
+
+  return (
+    <SideNavMenu title={t('serviceQueues', 'Service Queues')} className={styles.queueTableByStatusNavMenu}>
+      <BrowserRouter>
+        {queues.map((queue) => (
+          <QueueTableByStatusLink queue={queue} />
+        ))}
+      </BrowserRouter>
+    </SideNavMenu>
+  );
+}
+
+function QueueTableByStatusLink({ queue }: { queue: Queue }) {
+  const path = `${window.spaBase}/home/service-queues/queue-table-by-status/:uuid`;
+  const matcher = useMatch({ path, end: false });
+  const uuid = matcher?.params?.uuid;
+
+  return (
+    <ConfigurableLink
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': queue.uuid == uuid,
+      })}
+      to={generatePath(path, { uuid: queue.uuid })}>
+      {queue.display}
+    </ConfigurableLink>
+  );
+}

packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.scss

@@ -0,0 +1,11 @@
+.queueTableByStatusNavMenu {
+  // override `li` element styles from <SideNavMenu>
+  // (since none of the items in side nav is `li`)  
+  line-height: 0px;
+  display: block;
+
+  :global(.active-left-nav-link) {
+    // override padding for sub-menu items
+    padding-left: 1.75rem !important;
+  }
+}

packages/esm-service-queues-app/src/routes.json

@@ -10,7 +10,7 @@
       "slot": "outpatient-sidebar-slot",
       "online": true,
       "offline": true
-    }, 
+    },
     {
       "name": "service-queues-dashboard-link",
       "component": "serviceQueuesDashboardLink",
@@ -22,50 +22,61 @@
       },
       "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": "add-patient-to-queue",
       "component": "addPatientToQueue",
       "slot": "add-patient-to-queue-slot"
-    }, 
+    },
     {
       "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": "add-queue-entry-widget",
       "component": "addQueueEntry",