wip

packages/esm-commons-lib/src/api/types.ts

@@ -235,7 +235,7 @@ export interface OhriDashboardMeta {
    * Used to generate the menu title displayed on the sidenav
    * @example "Covid Cases"
    */
-  menuTitle: string;
+  title: string;
   slot: string;
   config: {
     columns?: number;

packages/esm-commons-lib/src/components/patient-chart/ohri-patient-chart-sidenav.meta.tsx

@@ -9,10 +9,3 @@ export const createOHRIPatientChartSideNavLink = (meta) => {
   };
   return NavItem;
 };
-
-export const patientChartDivider_dashboardMeta = {
-  name: 'clinical-views-divider',
-  slot: 'patient-chart-sidenav-divider-slot',
-  config: { columns: 1, type: 'grid' },
-  title: 'Clinical Views',
-};

packages/esm-covid-app/src/dashboard.meta.tsx

@@ -34,15 +34,15 @@ export const covidVaccinationsDashboardMeta = {
 
 // Clinical Dashboards
 export const covidClinicalViewDashboardMeta: OhriDashboardMeta = {
-  menuTitle: 'COVID',
   slot: 'ohri-covid-dashboard-slot',
   config: { columns: 1, type: 'grid', icon: Coronavirus },
   isFolder: true,
+  title: 'COVID',
 };
 
 export const covid19CasesDashboardMeta: OhriDashboardLinkMeta = {
   name: 'covid-cases',
   slot: 'covid-cases-dashboard-slot',
-  config: { columns: 1, type: 'grid', programme: 'covid', icon: Coronavirus },
+  config: { columns: 1, type: 'grid', programme: 'covid', dashboardTitle: 'Covid-19 Cases' },
   title: 'COVID-19 Cases',
 };

packages/esm-hiv-app/src/dashboard.meta.tsx

@@ -97,7 +97,7 @@ export const hivFolderDashboardMeta: OhriDashboardMeta = {
   slot: 'ohri-hiv-dashboard-slot',
   config: { columns: 1, type: 'grid', icon: Home },
   isFolder: true,
-  menuTitle: 'HIV',
+  title: 'HIV',
 };
 
 export const htsDashboardMeta: OhriDashboardLinkMeta = {

packages/esm-ohri-core-app/src/dashboard.meta.tsx

@@ -40,3 +40,10 @@ export const serviceQueuesDashboardMeta = {
   isLink: true,
   title: 'Service Queues',
 };
+
+export const patientChartDivider_dashboardMeta = {
+  name: 'clinical-views-divider',
+  slot: 'patient-chart-sidenav-divider-slot',
+  config: { columns: 1, type: 'grid' },
+  title: 'Clinical Views',
+};

packages/esm-ohri-core-app/src/dashboard/create-dashboard-link.component.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { name } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      to={spaBasePath}
+      className={`cds--side-nav__link ${navLink === 'home' && 'active-left-nav-link'}`}>
+      {name}
+    </ConfigurableLink>
+  );
+};
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => {
+  return () => (
+    <BrowserRouter>
+      <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );
+};

packages/esm-ohri-core-app/src/dashboard/dashboard-view.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './dashboard-view.scss';
+
+const DashboardView: React.FC<{ dashboardSlot: string; title: string }> = ({ dashboardSlot, title }) => {
+  return <ExtensionSlot className={styles.dashboardView} name={dashboardSlot} state={{ dashboardTitle: title }} />;
+};
+
+export default DashboardView;

packages/esm-ohri-core-app/src/dashboard/dashboard-view.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.dashboardView {
+  background-color: colors.$white-0;
+}

packages/esm-ohri-core-app/src/dashboard/home.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useLayoutType, isDesktop, useExtensionStore, ExtensionSlot } from '@openmrs/esm-framework';
+import DashboardView from './dashboard-view.component';
+import styles from './home-dashboard.scss';
+
+// TODO PIUS move this to a shared location
+export interface DashboardConfig {
+  name: string;
+  slot: string;
+  title: string;
+}
+
+export default function HomeDashboard() {
+  const params = useParams();
+  const extensionStore = useExtensionStore();
+  const layout = useLayoutType();
+  const ungroupedDashboards =
+    extensionStore.slots['ohri-dashboard-slot']?.assignedExtensions
+      .map((e) => e.meta)
+      .filter((e) => Object.keys(e).length) || [];
+  const dashboards = ungroupedDashboards as Array<DashboardConfig>;
+  const activeDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard) || dashboards[0];
+
+  return (
+    <section className={isDesktop(layout) && styles.dashboardContainer}>
+      {isDesktop(layout) && <ExtensionSlot name="ohri-sidebar-slot" key={layout} />}
+      <DashboardView title={activeDashboard?.name} dashboardSlot={activeDashboard?.slot} />
+    </section>
+  );
+}

packages/esm-ohri-core-app/src/dashboard/routes.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "home",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "name": "home-nav-menu",
+      "slot": "home-sidebar-slot",
+      "component": "homeNavMenu",
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "home-widget-db-link",
+      "slot": "ohri-dashboard-slot",
+      "component": "homeWidgetDbLink",
+      "meta": {
+        "name": "Home",
+        "slot": "home-dashboard-slot",
+        "title": ""
+      },
+      "order": 0,
+      "online": true,
+      "offline": true
+    },
+    {
+      "name": "home-widget-dashboard",
+      "slot": "home-dashboard-slot",
+      "component": "homeWidgetDashboard",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

packages/esm-ohri-core-app/src/dashboard/side-menu.component.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LeftNavMenu } from '@openmrs/esm-framework';
+
+const SideMenu = () => <LeftNavMenu />;
+
+export default SideMenu;

packages/esm-ohri-core-app/src/index.ts

@@ -1,7 +1,6 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, provide } from '@openmrs/esm-framework';
 import {
   createOHRIPatientChartSideNavLink,
-  patientChartDivider_dashboardMeta,
   createOHRIDashboardLink,
   PatientListTable,
 } from '@ohri/openmrs-esm-ohri-commons-lib';
@@ -10,6 +9,7 @@ import {
   homeDashboardMeta,
   dispensingDashboardMeta,
   serviceQueuesDashboardMeta,
+  patientChartDivider_dashboardMeta,
 } from './dashboard.meta';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
@@ -36,25 +36,22 @@ export const patientList = getSyncLifecycle(PatientListTable, {
 
 export const appointmentsLink = getSyncLifecycle(createOHRIDashboardLink(appointmentsDashboardMeta), options);
 export const appointmentsDashboard = getAsyncLifecycle(
-  () => import('./ohri-dashboard/appointments/appointments-dashboard.component'),
+  () => import('./appointments/appointments-dashboard.component'),
   {
     featureName: 'appointments-dashboard',
     moduleName,
   },
 );
 
 export const dispensingLink = getSyncLifecycle(createOHRIDashboardLink(dispensingDashboardMeta), options);
-export const dispensingDashboard = getAsyncLifecycle(
-  () => import('./ohri-dashboard/dispensing/dispensing-dashboard.component'),
-  {
-    featureName: 'dispensing-dashboard',
-    moduleName,
-  },
-);
+export const dispensingDashboard = getAsyncLifecycle(() => import('./dispensing/dispensing-dashboard.component'), {
+  featureName: 'dispensing-dashboard',
+  moduleName,
+});
 
 export const serviceQueuesLink = getSyncLifecycle(createOHRIDashboardLink(serviceQueuesDashboardMeta), options);
 export const serviceQueuesDashboard = getAsyncLifecycle(
-  () => import('./ohri-dashboard/service-queues/service-queues-dashboard.component'),
+  () => import('./service-queues/service-queues-dashboard.component'),
   {
     featureName: 'service-queues-dashboard',
     moduleName,

packages/esm-ohri-core-app/src/root.tsx

@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import OHRIDashboard from './ohri-dashboard/ohri-dashboard.component';
+import HomeDashboard from './dashboard/home.component';
+import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
+
+const Root: React.FC = () => {
+  const spaBasePath = window.spaBase;
+
+  useEffect(() => {
+    setLeftNav({ name: 'ohri-dashboard-slot', basePath: spaBasePath });
+    return () => unsetLeftNav('ohri-dashboard-slot');
+  }, [spaBasePath]);
 
-export default function Root() {
   return (
-    <BrowserRouter basename={window['getOpenmrsSpaBase']()}>
-      <Routes>
-        <Route path="/dashboard" element={<OHRIDashboard />} />
-        <Route path="/dashboard/:view" element={<OHRIDashboard />} />
-        <Route path="/home" element={<Navigate to={'/dashboard/home'} replace />} />
-      </Routes>
+    <BrowserRouter basename={window.spaBase}>
+      <main className="omrs-main-content">
+        <Routes>
+          <Route path="/dashboard" element={<HomeDashboard />} />
+          <Route path="/dashboard/:view" element={<HomeDashboard />} />
+          <Route path="/home" element={<Navigate to={'/dashboard/home'} replace />} />
+        </Routes>
+      </main>
     </BrowserRouter>
   );
-}
+};
+
+export default Root;

packages/esm-ohri-pmtct-app/src/dashboard.meta.tsx

@@ -37,7 +37,7 @@ export const childVisitsDashboardMeta = {
 export const motherChildDashboardMeta = {
   name: 'mother-child-health',
   slot: 'mother-child-health-dashboard-slot',
-  menuTitle: 'Maternal & Child Health',
+  title: 'Maternal & Child Health',
   config: {
     columns: 1,
     type: 'grid',