OHRI-1350 responsive fixes to ohri dashboard

packages/esm-cervical-cancer-app/src/views/common.scss

@@ -19,7 +19,7 @@
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-01);
 }
-
+x
 .toggleButtons {
   width: fit-content;
   margin: 0 spacing.$spacing-03;
@@ -31,9 +31,4 @@
 
 .tabContainer li button {
   width: 100% !important;
-  }
-
-
-  .hivStatusTag {
-  min-width: 80px;
-  }
+}

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

@@ -219,3 +219,62 @@ export interface PatientListRow {
   lastVisit?: string;
   actions?: React.ReactNode;
 }
+
+export interface PatientChartMeta {
+  /**
+   * Defines the slot name in slug case e.g. "covid-chart-summary"
+   */
+  slot: string;
+  columns: number;
+  title: string;
+}
+
+// OHRI Dashboard Types
+export interface OhriDashboardMeta {
+  /**
+   * Used to generate the menu title displayed on the sidenav
+   * @example "Covid Cases"
+   */
+  title: string;
+  slot: string;
+  config: {
+    columns?: number;
+    type: string;
+    /**
+     * Conditionally rendor icon on menu item
+     */
+    icon?: React.Component;
+  };
+  /**
+   * Determines if the dashboard is a folder
+   */
+  isFolder?: boolean;
+}
+
+export interface OhriDashboardLinkMeta {
+  /**
+   * Used to generate route and slot names
+   * @example "covid-cases"
+   */
+  name: string;
+  slot: string;
+  /**
+   * Used to generate the menu title displayed on the sidenav
+   * @example "Covid Cases"
+   */
+  title: string;
+  config: {
+    columns?: number;
+    type?: string;
+    programme: string;
+    /**
+     * Title displayed on the welcome section of the dashboard
+     */
+    dashboardTitle?: string;
+    /**
+     * Conditionally rendor icon on menu item
+     */
+    icon?: React.Component;
+  };
+  isLink?: boolean;
+}

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

@@ -1,4 +1,5 @@
 import { Coronavirus } from '@carbon/react/icons';
+import { OhriDashboardLinkMeta, OhriDashboardMeta } from '@ohri/openmrs-esm-ohri-commons-lib';
 
 // Patient Chart Dashboards
 export const covidPatientChartMeta = {
@@ -32,17 +33,16 @@ export const covidVaccinationsDashboardMeta = {
 };
 
 // Clinical Dashboards
-export const covidClinicalViewDashboardMeta = {
+export const covidClinicalViewDashboardMeta: OhriDashboardMeta = {
   slot: 'ohri-covid-dashboard-slot',
   config: { columns: 1, type: 'grid', icon: Coronavirus },
   isFolder: true,
   title: 'COVID',
 };
 
-export const covid19CasesDashboardMeta = {
+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',
-  dashboardIcon: Coronavirus,
 };

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

@@ -1,4 +1,5 @@
 import { Home, Pills } from '@carbon/react/icons';
+import { OhriDashboardLinkMeta, OhriDashboardMeta } from '@ohri/openmrs-esm-ohri-commons-lib';
 
 // Patient Chart Dashboards
 export const hivPreventionDashboardMeta = {
@@ -92,16 +93,30 @@ export const hivPreventionFolderDashboardMeta = {
   title: 'HIV Prevention',
 };
 
-export const htsDashboardMeta = {
+export const hivFolderDashboardMeta: OhriDashboardMeta = {
+  slot: 'ohri-hiv-dashboard-slot',
+  config: { columns: 1, type: 'grid', icon: Home },
+  isFolder: true,
+  title: 'HIV',
+};
+
+export const htsDashboardMeta: OhriDashboardLinkMeta = {
   name: 'hts',
   slot: 'hts-dashboard-slot',
   config: { columns: 1, type: 'grid', programme: 'hts', dashboardTitle: 'HTS Home Page' },
   title: 'HIV Testing Services',
 };
 
-export const careAndTreatmentDashboardMeta = {
+export const careAndTreatmentDashboardMeta: OhriDashboardLinkMeta = {
   name: 'care-and-treatment',
   slot: 'ct-dashboard-slot',
   config: { columns: 1, type: 'grid', programme: 'ct', dashboardTitle: 'C&T Home Page' },
   title: 'Care and Treatment',
 };
+
+export const labResultsDashboardMeta: OhriDashboardLinkMeta = {
+  name: 'lab-results',
+  slot: 'lab-results-dashboard-slot',
+  config: { columns: 1, type: 'grid', programme: 'lab-results', dashboardTitle: 'Lab Results Home Page' },
+  title: 'Lab Results',
+};

packages/esm-hiv-app/src/routes.json

@@ -13,7 +13,7 @@
     },
     {
       "name": "hiv-prevention-dashboard-link",
-      "slot": "dashboard-slot",
+      "slot": "ohri-dashboard-slot",
       "component": "hivPreventionFolderLink",
       "meta": {
         "slot": "ohri-hiv-prevention-dashboard-slot",

packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/cd4-results.component.tsx

@@ -15,15 +15,11 @@ import { capitalize } from 'lodash-es';
 import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { LabresultsFormViewer } from '../lab-results-form-viewer';
 
-interface CD4ResultsListProps {
-  patientUuid: string;
-}
-
 export const filterPatientsByName = (searchTerm: string, patients: Array<any>) => {
   return patients.filter((patient) => patient.patientSearchName.toLowerCase().includes(searchTerm.toLowerCase()));
 };
 
-const CD4ResultsList: React.FC<CD4ResultsListProps> = ({ patientUuid }) => {
+const CD4ResultsList = () => {
   const { t } = useTranslation();
   const [patients, setPatients] = useState([]);
   const [patientToCd4Map, setPatientToCd4Map] = useState([]);

packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/viral-load-results.component.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
-
 import styles from './patient-list.scss';
 import { useTranslation } from 'react-i18next';
 import { age, navigate, openmrsFetch } from '@openmrs/esm-framework';
@@ -11,7 +10,6 @@ import {
   fetchPatientList,
   encounterRepresentation,
   getObsFromEncounter,
-  fetchLastVisit,
 } from '@ohri/openmrs-esm-ohri-commons-lib';
 import {
   ViralLoadResultDate_UUID,
@@ -22,11 +20,7 @@ import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { filterPatientsByName } from './cd4-results.component';
 import { LabresultsFormViewer } from '../lab-results-form-viewer';
 
-interface ViralLoadResultsListProps {
-  patientUuid: string;
-}
-
-const ViralLoadResultsList: React.FC<ViralLoadResultsListProps> = () => {
+const ViralLoadResultsList = () => {
   const { t } = useTranslation();
   const [patients, setPatients] = useState([]);
   const [patientToViralLoadMap, setPatientToViralLoadMap] = useState([]);

packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/lab-results-summary.component.tsx

@@ -5,11 +5,7 @@ import CD4ResultsList from './Tabs/cd4-results.component';
 import ViralLoadResultsList from './Tabs/viral-load-results.component';
 import { useTranslation } from 'react-i18next';
 
-interface OverviewListProps {
-  patientUuid: string;
-}
-
-const LabResultsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
+const LabResultsSummary = () => {
   const { t } = useTranslation();
   return (
     <Tabs type="container" className={styles.tabContainer}>
@@ -19,10 +15,10 @@ const LabResultsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
       </TabList>
       <TabPanels>
         <TabPanel>
-          <CD4ResultsList patientUuid={patientUuid} />
+          <CD4ResultsList />
         </TabPanel>
         <TabPanel>
-          <ViralLoadResultsList patientUuid={patientUuid} />
+          <ViralLoadResultsList />
         </TabPanel>
       </TabPanels>
     </Tabs>

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { Home, ListBulleted, Calendar, Medication, Events } from '@carbon/react/icons';
 
 export const homeDashboardMeta = {
-  name: 'home',
-  slot: 'ohri-home-dashboard-slot',
+  name: 'Home',
+  slot: 'home-dashboard-slot',
   config: { columns: 1, type: 'grid', icon: Home },
   isLink: true,
   title: 'Home',
@@ -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/_vars.scss

@@ -0,0 +1,34 @@
+$ui-01: #f4f4f4;
+$ui-02: #ffffff;
+$ui-03: #e0e0e0;
+$ui-04: #8d8d8d;
+$ui-05: #161616;
+$text-02: #525252;
+$text-03: #a8a8a8;
+$ui-background: #ffffff;
+$color-gray-30: #c6c6c6;
+$color-gray-70: #525252;
+$color-gray-100: #161616;
+$color-blue-60-2: #0f62fe;
+$color-blue-10: #edf5ff;
+$color-yellow-50: #feecae;
+$carbon--red-50: #fa4d56;
+$inverse-link: #78a9ff;
+$support-02: #24a148;
+$inverse-support-03: #f1c21b;
+$warning-background: #fff8e1;
+$openmrs-background-grey: #f4f4f4;
+$danger: #da1e28;
+$interactive-01: #0f62fe;
+$field-01: #f4f4f4;
+$grey-2: #e0e0e0;
+$labeldropdown: #c6c6c6;
+
+$breakpoint-phone-min: 0px;
+$breakpoint-phone-max: 600px;
+$breakpoint-tablet-min: 601px;
+$breakpoint-tablet-max: 1023px;
+$breakpoint-small-desktop-min: 1024px;
+$breakpoint-small-desktop-max: 1439px;
+$breakpoint-large-desktop-min: 1440px;
+$breakpoint-large-desktop-max: 99999999px;

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}/dashboard`;
+
+  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/ohri-dashboard.component.tsx

@@ -0,0 +1,33 @@
+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 './ohri-dashboard.scss';
+
+export interface DashboardConfig {
+  name: string;
+  slot: string;
+  title: string;
+}
+
+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-left-panel-slot" key={layout} />}
+      <DashboardView title={activeDashboard?.name} dashboardSlot={activeDashboard?.slot} />
+    </section>
+  );
+}