wip

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

@@ -10,7 +10,7 @@ export interface DashboardLinkConfig {
 const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
   const { name } = dashboardLinkConfig;
   const location = useLocation();
-  const spaBasePath = `${window.spaBase}/home`;
+  const spaBasePath = `${window.spaBase}/dashboard`;
 
   const navLink = useMemo(() => {
     const pathArray = location.pathname.split('/');

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

@@ -2,29 +2,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';
+import styles from './ohri-dashboard.scss';
 
-// TODO PIUS move this to a shared location
 export interface DashboardConfig {
   name: string;
   slot: string;
   title: string;
 }
 
-export default function HomeDashboard() {
+export default function OhriDashboard() {
   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) || [];
+
+  // TODO Pius - add groups dashboard support
   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} />}
+      {isDesktop(layout) && <ExtensionSlot name="ohri-left-panel-slot" key={layout} />}
       <DashboardView title={activeDashboard?.name} dashboardSlot={activeDashboard?.slot} />
     </section>
   );

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

@@ -0,0 +1,31 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+
+.dashboardContainer {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  // Full vertical height minus the primary navigation menu height
+  height: calc(100vh - 3rem);
+  margin-left: 16rem;
+  background-color: colors.$white-0;
+
+  /*TO BE REMOVED ONCE WE IMPROVE LEFT SIDE NAVIGATION*/
+  & li {
+    display: flex;
+  }
+
+  & a {
+    width: 100%;
+  }
+}
+
+/*TO BE REMOVED ONCE WE IMPROVE LEFT SIDE NAVIGATION*/
+li::marker {
+  font-size: 0px;
+}
+
+.logoSection {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,11 @@
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import styles from './home-widgets.scss';
+
+interface HomeWidgetsProps {}
+
+const HomeWidgets: React.FC<HomeWidgetsProps> = () => {
+  return <ExtensionSlot className={styles.homePageWidget} name="home-widgets-slot" />;
+};
+
+export default HomeWidgets;

packages/esm-ohri-core-app/src/home-widgets/home-widgets.scss

@@ -0,0 +1,5 @@
+@use '@carbon/styles/scss/spacing';
+
+.homePageWidget {
+  padding: spacing.$spacing-05;
+}

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

@@ -11,6 +11,7 @@ import {
   serviceQueuesDashboardMeta,
   patientChartDivider_dashboardMeta,
 } from './dashboard.meta';
+import { createDashboardLink } from './dashboard/create-dashboard-link.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -21,19 +22,33 @@ const options = {
   moduleName,
 };
 
-export function startupApp() {
-  defineConfigSchema(moduleName, {});
-}
+export const root = getAsyncLifecycle(() => import('./root'), options);
+
+export const dashboardNavMenu = getAsyncLifecycle(() => import('./dashboard/side-menu.component'), options);
 
-export const dashboard = getAsyncLifecycle(() => import('./root'), options);
+export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(homeDashboardMeta), options);
 
-export const homeDashboard = getSyncLifecycle(createOHRIDashboardLink(homeDashboardMeta), options);
+export const homeWidgetDashboard = getAsyncLifecycle(() => import('./home-widgets/home-widgets.component'), options);
+
+export const ohriClinicalViewsDivider = getSyncLifecycle(
+  createOHRIPatientChartSideNavLink(patientChartDivider_dashboardMeta),
+  options,
+);
 
+// Audit these
 export const patientList = getSyncLifecycle(PatientListTable, {
   featureName: 'home',
   moduleName,
 });
 
+export const ohriNavItems = getAsyncLifecycle(
+  () => import('./ohri-dashboard/side-menu/ohri-dashboard-side-nav.component'),
+  {
+    featureName: 'nav-items',
+    moduleName,
+  },
+);
+
 export const appointmentsLink = getSyncLifecycle(createOHRIDashboardLink(appointmentsDashboardMeta), options);
 export const appointmentsDashboard = getAsyncLifecycle(
   () => import('./appointments/appointments-dashboard.component'),
@@ -58,15 +73,6 @@ export const serviceQueuesDashboard = getAsyncLifecycle(
   },
 );
 
-export const ohriNavItems = getAsyncLifecycle(
-  () => import('./ohri-dashboard/side-menu/ohri-dashboard-side-nav.component'),
-  {
-    featureName: 'nav-items',
-    moduleName,
-  },
-);
-
-export const ohriClinicalViewsDivider = getSyncLifecycle(
-  createOHRIPatientChartSideNavLink(patientChartDivider_dashboardMeta),
-  options,
-);
+export function startupApp() {
+  defineConfigSchema(moduleName, {});
+}

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

@@ -1,7 +1,6 @@
 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 HomeDashboard from './dashboard/ohri-dashboard.component';
 import { setLeftNav, unsetLeftNav } from '@openmrs/esm-framework';
 
 const Root: React.FC = () => {
@@ -17,8 +16,8 @@ const Root: React.FC = () => {
       <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 />} />
+          <Route path="/dashboard/:view/*" element={<HomeDashboard />} />
+          <Route path="/home" element={<Navigate replace to="/dashboard" />} />
         </Routes>
       </main>
     </BrowserRouter>

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

@@ -5,15 +5,40 @@
   },
   "pages": [
     {
-      "component": "dashboard",
+      "component": "root",
       "route": "dashboard"
-    },
-    {
-      "component": "dashboard",
-      "route": "home"
     }
   ],
   "extensions": [
+    {
+      "name": "dashboard-nav-menu",
+      "slot": "ohri-left-panel-slot",
+      "component": "dashboardNavMenu",
+      "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
+    },
+
+
     {
       "name": "home-dashboard-ext",
       "slot": "dashboard-links-slot",