@kenyaemr/esm-lab-manifest-app 5.4.2-pre.2577 → 5.4.2-pre.2581

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-lab-manifest-app",
-  "version": "5.4.2-pre.2577",
+  "version": "5.4.2-pre.2581",
   "description": "lab-manifest app for KenyaEMR",
   "keywords": [
     "openmrs"

package/src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type, validator } from '@openmrs/esm-framework';
+import { Type, validator, validators } from '@openmrs/esm-framework';
 
 export const configSchema = {
   labmanifestTypes: {
@@ -39,6 +39,12 @@ export const configSchema = {
       kdodIdentifierType: 'b51ffe55-3e76-44f8-89a2-14f5eaf11079',
     },
   },
+  leftNavMode: {
+    _type: Type.String,
+    _description: 'Sets the left nav mode for the home app.',
+    _validators: [validators.oneOf(['normal', 'collapsed', 'hidden'])],
+    _default: 'normal',
+  },
 };
 export interface LabManifestConfig {
   labmanifestTypes: Array<{ id: number; type: string }>;
@@ -47,4 +53,5 @@ export interface LabManifestConfig {
     cccNumberIdentifierType: string;
     kdodIdentifierType: string;
   };
+  leftNavMode: 'normal' | 'collapsed' | 'hidden';
 }

package/src/dashboard/dashboard-view.component.tsx

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

package/src/dashboard/dashboard-view.scss

@@ -0,0 +1,5 @@
+@use '@carbon/colors';
+
+.pageHeader {
+  border-bottom: 1px solid colors.$gray-20;
+}

package/src/dashboard/home-dashboard.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { ExtensionSlot, WorkspaceContainer, isDesktop, useExtensionStore, useLayoutType } from '@openmrs/esm-framework';
+import DashboardView from './dashboard-view.component';
+import styles from './home-dashboard.scss';
+
+interface DashboardConfig {
+  name: string;
+  slot: string;
+}
+
+export default function Dashboard() {
+  const params = useParams();
+  const extensionStore = useExtensionStore();
+
+  const layout = useLayoutType();
+  const ungroupedDashboards =
+    extensionStore.slots['lab-manifest-page-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 (
+    <>
+      <div cllabs-manifest-page-dasassName={styles.homePageWrapper}>
+        <section className={isDesktop(layout) ? styles.dashboardContainer : styles.dashboardContainerTablet}>
+          {isDesktop(layout) && <ExtensionSlot name="lab-manifest-side-nav-slot" key={layout} />}
+          <DashboardView title={activeDashboard?.name} dashboardSlot={activeDashboard?.slot} />
+        </section>
+        <WorkspaceContainer overlay contextKey="lab-manifest" />
+      </div>
+    </>
+  );
+}

package/src/dashboard/home-dashboard.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.homePageWrapper {
+  display: flex;
+}
+
+.dashboardContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 0;
+  margin-left: 16rem;
+  background-color: colors.$gray-10;
+
+  & a {
+    width: 100%;
+  }
+}
+
+.dashboardContainerTablet {
+  flex-grow: 1;
+}
+
+.logoSection {
+  display: flex;
+  justify-content: center;
+}

package/src/dashboard.meta.ts

@@ -0,0 +1,11 @@
+export const labManifestDashboardMeta = {
+  name: 'lab-manifest',
+  slot: 'lab-manifest-page-dashboard-slot',
+  title: 'Lab Manifest',
+};
+
+export const manifestDashboardMeta = {
+  name: 'overview',
+  slot: 'lab-manifest-page-dashboard-slot',
+  title: 'Manifest Overview',
+};

package/src/header/lab-manifest-detail-header.component.tsx

@@ -21,7 +21,7 @@ const LabManifestDetailHeader: React.FC<LabManifestDetailHeaderProps> = ({ manif
   const { t } = useTranslation();
 
   const handleGoBack = () => {
-    navigate({ to: window.getOpenmrsSpaBase() + `home/lab-manifest` });
+    navigate({ to: window.getOpenmrsSpaBase() + `lab-manifest` });
   };
 
   const handleEditManifest = () => {

package/src/index.ts

@@ -1,6 +1,8 @@
 import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import { createLeftPanelLink } from './nav/left-panel-link.component';
+import SideNav from './side-menu/side-menu.component';
+import { labManifestDashboardMeta, manifestDashboardMeta } from './dashboard.meta';
+import { createDashboardLink } from './nav/left-panel-link.component';
 
 const moduleName = '@kenyaemr/esm-lab-manifest-app';
 
@@ -12,24 +14,19 @@ const options = {
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
 export function startupApp() {
-  const labManifestBasepath = `${window.spaBase}/home/lab-manifest`;
+  const labManifestBasepath = `${window.spaBase}/lab-manifest`;
 
   defineConfigSchema(moduleName, configSchema);
   registerBreadcrumbs([
     {
       title: 'lab-manifest',
       path: labManifestBasepath,
-      parent: `${window.spaBase}/home`,
+      parent: `${window.spaBase}`,
     },
   ]);
 }
 
 export const root = getAsyncLifecycle(() => import('./root.component'), options);
-export const labManifestOverview = getAsyncLifecycle(
-  () => import('./component/lab-manifest-overview.component'),
-  options,
-);
-
 export const labManifestForm = getAsyncLifecycle(() => import('./forms/lab-manifest-form.workspace'), options);
 export const labManifestOrderToManifestForm = getAsyncLifecycle(
   () => import('./forms/lab-manifest-orders-to-manifest.modal'),
@@ -47,26 +44,17 @@ export const requeueLabManifestConfirmModal = getAsyncLifecycle(
   () => import('./forms/lab-manifest-requeue-confirm.modal'),
   options,
 );
-// TODO: ensure nav group is working
-// export const labManifestSideNavGroup = getSyncLifecycle(
-//   createDashboardGroup({
-//     title: 'Lab Manifest',
-//     slotName: 'lab-manifest-dashbaord-link-slot',
-//     isExpanded: false,
-//   }),
-//   options,
-// );
-export const manifestOverviewDashboardLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'lab-manifest/overview',
-    title: 'Manifest overview',
-  }),
-  options,
-);
-export const manifestsDashboardLink = getSyncLifecycle(
-  createLeftPanelLink({
-    name: 'lab-manifest',
-    title: 'Lab manifests',
-  }),
+
+// t('labManifestSideNav', 'Lab ManifestSideNav')
+export const labManifestSideNav = getSyncLifecycle(SideNav, options);
+// t('labManifestDashboard', 'Lab Manifest Dashboard')
+export const labsManifestsDashboardLink = getSyncLifecycle(createDashboardLink(labManifestDashboardMeta), options);
+// t('manifestOverviewDashboard', 'Manifest Overview Dashboard')
+export const manifestOverviewDashboardLink = getSyncLifecycle(createDashboardLink(manifestDashboardMeta), options);
+// t('labManifestComponent', 'Lab Manifest Component')
+export const labManifestComponent = getAsyncLifecycle(() => import('./component/lab-manifest.component'), options);
+export const labManifestDetail = getAsyncLifecycle(() => import('./component/lab-manifest-detail.component'), options);
+export const labManifestOverview = getAsyncLifecycle(
+  () => import('./component/lab-manifest-overview.component'),
   options,
 );

package/src/nav/left-panel-link.component.tsx

@@ -1,43 +1,95 @@
-import React, { useMemo } from 'react';
-import last from 'lodash-es/last';
-import { BrowserRouter, useLocation } from 'react-router-dom';
-import { ConfigurableLink } from '@openmrs/esm-framework';
+import React, { useMemo, useEffect, useState } from 'react';
+import { ConfigurableLink, MaybeIcon, navigate } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type CarbonIconType } from '@carbon/react/icons';
+import styles from './left-panel.scss';
 
-export interface LinkConfig {
+export interface DashboardLinkConfig {
   name: string;
   title: string;
+  icon?: string | CarbonIconType;
 }
 
-export function LinkExtension({ config }: { config: LinkConfig }) {
-  const { name, title } = config;
-  const location = useLocation();
-  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+const DashboardLink = ({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) => {
+  const { t } = useTranslation();
+  const { name, title, icon } = dashboardLinkConfig;
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
 
-  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))!), [location.pathname]);
+  useEffect(() => {
+    const handlePathChange = () => {
+      setCurrentPath(window.location.pathname);
+    };
 
-  const isUUID = (value) => {
-    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-    return regex.test(value);
-  };
+    window.addEventListener('popstate', handlePathChange);
+
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = function (...args) {
+      originalPushState.apply(history, args);
+      handlePathChange();
+    };
+
+    history.replaceState = function (...args) {
+      originalReplaceState.apply(history, args);
+      handlePathChange();
+    };
+
+    return () => {
+      window.removeEventListener('popstate', handlePathChange);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }, []);
+
+  const IconComp = typeof icon !== 'string' ? (icon as CarbonIconType) : null;
+
+  const isActive = useMemo(() => {
+    const relativePath = currentPath.replace('/openmrs/spa', '');
+
+    if (name === 'lab-manifest') {
+      return relativePath === '/lab-manifest' || relativePath === '/lab-manifest/';
+    }
 
-  if (isUUID(urlSegment)) {
-    urlSegment = location.pathname.split('/').at(-2);
-  } else if (urlSegment === 'overview' && location.pathname.includes('lab-manifest')) {
-    urlSegment = location.pathname.replace(spaBasePath + '/', '');
-  }
+    if (name === 'overview') {
+      return relativePath === `/lab-manifest/${name}` || relativePath === `/lab-manifest/${name}/`;
+    }
+
+    return relativePath === `/lab-manifest/${name}` || relativePath === `/lab-manifest/${name}/`;
+  }, [name, currentPath]);
+
+  const linkUrl = useMemo(() => {
+    const basePath = '/openmrs/spa/lab-manifest';
+    if (name === 'lab-manifest') {
+      return basePath;
+    }
+    return `${basePath}/${name}`;
+  }, [name]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    navigate({ to: linkUrl });
+  };
 
   return (
-    <ConfigurableLink
-      to={spaBasePath + '/' + name}
-      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
-      {title}
-    </ConfigurableLink>
+    <a
+      href={linkUrl}
+      onClick={handleClick}
+      className={`cds--side-nav__link ${styles.dashboardLink} ${
+        isActive ? `${styles.active} active-left-nav-link` : ''
+      }`}>
+      {typeof icon === 'string' ? (
+        <MaybeIcon icon={icon} className={styles.icon} size={16} />
+      ) : (
+        IconComp && <IconComp className={styles.icon} />
+      )}
+      <span>{t(title)}</span>
+    </a>
   );
-}
+};
 
-export const createLeftPanelLink = (config: LinkConfig) => () =>
-  (
-    <BrowserRouter>
-      <LinkExtension config={config} />
-    </BrowserRouter>
-  );
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => {
+  return <DashboardLink dashboardLinkConfig={dashboardLinkConfig} />;
+};
+
+export default DashboardLink;

package/src/nav/left-panel.scss

@@ -0,0 +1,26 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  margin-right: layout.$spacing-05;
+  fill: colors.$gray-70;
+}
+
+.dashboardLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  background-color: transparent;
+  color: var(--cds-text-secondary);
+
+  &.active {
+    background-color: var(--cds-background-active);
+    color: var(--cds-text-primary);
+  }
+}

package/src/root.component.tsx

@@ -1,20 +1,48 @@
-import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import LabManifestComponent from './component/lab-manifest.component';
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
 import LabManifestDetail from './component/lab-manifest-detail.component';
-import LabManifestOverview from './component/lab-manifest-overview.component';
+import { useConfig, useLeftNav } from '@openmrs/esm-framework';
+import { LabManifestConfig } from './config-schema';
+import Dashboard from './dashboard/home-dashboard.component';
 
-const Root: React.FC = () => {
-  const baseName = window.getOpenmrsSpaBase() + 'home/lab-manifest';
+const LeftNavController: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/lab-manifest`;
+  const { leftNavMode: configLeftNavMode } = useConfig<LabManifestConfig>();
+  const [currentLeftNavMode, setCurrentLeftNavMode] = useState<'normal' | 'collapsed' | 'hidden'>(configLeftNavMode);
+
+  useEffect(() => {
+    const isDetailPage = location.pathname.includes('/lab-manifest/detail/');
+
+    if (isDetailPage) {
+      setCurrentLeftNavMode('hidden');
+    } else {
+      setCurrentLeftNavMode(configLeftNavMode);
+    }
+  }, [location.pathname, configLeftNavMode]);
+
+  useLeftNav({
+    name: 'lab-manifest-page-dashboard-slot',
+    basePath: spaBasePath,
+    mode: currentLeftNavMode,
+  });
 
+  return <>{children}</>;
+};
+
+const Root: React.FC = () => {
   return (
-    <BrowserRouter basename={baseName}>
-      <Routes>
-        <Route path="/" element={<LabManifestComponent />} />
-        <Route path="/overview" element={<LabManifestOverview />} />
-        <Route path="/:manifestUuid" element={<LabManifestDetail />} />
-      </Routes>
-    </BrowserRouter>
+    <main>
+      <BrowserRouter basename={window.spaBase}>
+        <LeftNavController>
+          <Routes>
+            <Route path="/lab-manifest/detail/:manifestUuid" element={<LabManifestDetail />} />
+            <Route path="/lab-manifest/:dashboard" element={<Dashboard />} />
+            <Route path="/lab-manifest" element={<Dashboard />} />
+          </Routes>
+        </LeftNavController>
+      </BrowserRouter>
+    </main>
   );
 };
 

package/src/routes.json

@@ -5,12 +5,28 @@
   },
   "extensions": [
     {
-      "component": "labManifestSideNavGroup",
-      "name": "lab-manifest-dashboard-link",
+      "name": "lab-manifest-side-nav",
+      "slot": "lab-manifest-side-nav-slot",
+      "component": "labManifestSideNav"
+    },
+    {
+      "name": "lab-manifest-dashboard-db-link",
+      "slot": "lab-manifest-page-dashboard-slot",
+      "component": "labsManifestsDashboardLink",
       "meta": {
         "name": "lab-manifest",
-        "title": "Lab manifest Overview",
-        "slot": "lab-manifest-slot"
+        "title": "Lab manifest",
+        "slot": "labs-manifest-homepage-dashboard-slot"
+      }
+    },
+    {
+      "name": "manifest-overview-dashboard-db-link",
+      "slot": "lab-manifest-page-dashboard-slot",
+      "component": "manifestOverviewDashboardLink",
+      "meta": {
+        "name": "overview",
+        "title": "Manifest Overview",
+        "slot": "labs-overview-homepage-dashboard-slot"
       }
     },
     {
@@ -19,21 +35,14 @@
       "slot": "lab-manifest-slot"
     },
     {
-      "component": "labManifestOverview",
-      "name": "lab-manifest-overview",
-      "slot": "lab-manifest-overview-slot"
+      "component": "labManifestComponent",
+      "name": "lab-manifest-dashboard",
+      "slot": "labs-manifest-homepage-dashboard-slot"
     },
     {
-      "component": "manifestOverviewDashboardLink",
-      "name": "manifest-overview-link",
-      "order": 1,
-      "slot": "diagnostics-group-nav-slot"
-    },
-    {
-      "component": "manifestsDashboardLink",
-      "name": "manifests-dashboard-link",
-      "order": 2,
-      "slot": "diagnostics-group-nav-slot"
+      "component": "labManifestOverview",
+      "name": "lab-manifest-overview",
+      "slot": "labs-overview-homepage-dashboard-slot"
     },
     {
       "name": "lab-manifest-form",
@@ -52,7 +61,7 @@
       "component": "manifestStatusChangeConfirmModal"
     },
     {
-      "name": "lab-manifest-requeue-confirn-modal",
+      "name": "lab-manifest-requeue-confirm-modal",
       "component": "requeueLabManifestConfirmModal"
     }
   ],
@@ -60,10 +69,6 @@
     {
       "component": "root",
       "route": "lab-manifest"
-    },
-    {
-      "component": "labManifestOverview",
-      "route": "lab-manifest-overview"
     }
   ]
 }

package/src/side-menu/side-menu.component.tsx

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

package/src/tables/lab-manifest-table.component.tsx

@@ -104,7 +104,7 @@ const LabManifestsTable = () => {
   );
 
   const handleViewManifestSamples = (manifestUuid: string) => {
-    navigate({ to: window.getOpenmrsSpaBase() + `home/lab-manifest/${manifestUuid}` });
+    navigate({ to: window.getOpenmrsSpaBase() + `lab-manifest/detail/${manifestUuid}` });
   };
 
   const handleEditManifest = (manifest: MappedLabManifest) => {
@@ -221,53 +221,55 @@ const LabManifestsTable = () => {
   }
   return (
     <div className={styles.widgetContainer}>
-      <LabManifestTableFilterHeader filter={currFilter} onFilterChange={setCurrFilter} title={headerTitle} />
-      <DataTable
-        useZebraStyles
-        size="sm"
-        rows={tableRows ?? []}
-        sortRow={customSortRow}
-        headers={headers}
-        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
-          <TableContainer {...getTableContainerProps()}>
-            <Table {...getTableProps()}>
-              <TableHead>
-                <TableRow>
-                  {headers.map((header) => (
-                    <TableHeader
-                      {...getHeaderProps({
-                        header,
-                        isSortable: true,
-                      })}>
-                      {header.header}
-                    </TableHeader>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row) => (
-                  <TableRow key={row.id}>
-                    {row.cells.map((cell) => {
-                      const value = cell.value instanceof Date ? formatDate(cell.value) : cell.value;
-                      return <TableCell key={cell.id}>{value}</TableCell>;
-                    })}
+      <main className="omrs-main-content">
+        <LabManifestTableFilterHeader filter={currFilter} onFilterChange={setCurrFilter} title={headerTitle} />
+        <DataTable
+          useZebraStyles
+          size="sm"
+          rows={tableRows ?? []}
+          sortRow={customSortRow}
+          headers={headers}
+          render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+            <TableContainer {...getTableContainerProps()}>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader
+                        {...getHeaderProps({
+                          header,
+                          isSortable: true,
+                        })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
-      />
-      <Pagination
-        page={currentPage}
-        pageSize={pageSize}
-        pageSizes={pageSizes}
-        totalItems={manifests.length}
-        onChange={({ page, pageSize }) => {
-          goTo(page);
-          setPageSize(pageSize);
-        }}
-      />
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.cells.map((cell) => {
+                        const value = cell.value instanceof Date ? formatDate(cell.value) : cell.value;
+                        return <TableCell key={cell.id}>{value}</TableCell>;
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        />
+        <Pagination
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={manifests.length}
+          onChange={({ page, pageSize }) => {
+            goTo(page);
+            setPageSize(pageSize);
+          }}
+        />
+      </main>
     </div>
   );
 };

package/translations/am.json

@@ -17,10 +17,13 @@
   "errorRemovingSample": "ናሙና {{sample}} ከማኒፌስት በማስወገድ ላይ ስህተት",
   "lab Manifest": "የላብራቶሪ ማኒፌስት",
   "labManifest": "የላብራቶሪ ማኒፌስት",
+  "labManifestComponent": "Lab Manifest Component",
   "labManifestDashboard": "የላብራቶሪ ማኒፌስት ዳሽቦርድ",
   "labManifestSamples": "የላብራቶሪ ማኒፌስት ናሙናዎች",
+  "labManifestSideNav": "Lab ManifestSideNav",
   "labPersonContact": "የላብራቶሪ ሰው ግንኙነት",
   "manifestId": "የማኒፌስት መለያ",
+  "manifestOverviewDashboard": "Manifest Overview Dashboard",
   "manifestSamples": "የማኒፌስት ናሙናዎች",
   "notLabManifetToDisplay": "ምንም {{status}} የላብራቶሪ ማኒፌስት ዳታ የለም።",
   "patient": "ታካሚ",