diff --git a/packages/esm-cervical-cancer-app/src/views/common.scss b/packages/esm-cervical-cancer-app/src/views/common.scss index fd5ede633..b8898a44e 100644 --- a/packages/esm-cervical-cancer-app/src/views/common.scss +++ b/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; - } +} diff --git a/packages/esm-commons-lib/src/api/types.ts b/packages/esm-commons-lib/src/api/types.ts index 6f495f9d0..9e71bf993 100644 --- a/packages/esm-commons-lib/src/api/types.ts +++ b/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; +} diff --git a/packages/esm-commons-lib/src/components/patient-chart/ohri-patient-chart-sidenav.meta.tsx b/packages/esm-commons-lib/src/components/patient-chart/ohri-patient-chart-sidenav.meta.tsx index fba566e81..f99f298b9 100644 --- a/packages/esm-commons-lib/src/components/patient-chart/ohri-patient-chart-sidenav.meta.tsx +++ b/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', -}; diff --git a/packages/esm-covid-app/src/dashboard.meta.tsx b/packages/esm-covid-app/src/dashboard.meta.tsx index 769a7e59c..bb8fd421a 100644 --- a/packages/esm-covid-app/src/dashboard.meta.tsx +++ b/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, }; diff --git a/packages/esm-hiv-app/src/dashboard.meta.tsx b/packages/esm-hiv-app/src/dashboard.meta.tsx index cdbf0abc8..696c44a61 100644 --- a/packages/esm-hiv-app/src/dashboard.meta.tsx +++ b/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', +}; diff --git a/packages/esm-hiv-app/src/routes.json b/packages/esm-hiv-app/src/routes.json index de547b7ed..2854a3be7 100644 --- a/packages/esm-hiv-app/src/routes.json +++ b/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", diff --git a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/cd4-results.component.tsx b/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/cd4-results.component.tsx index 071443a81..77d4234f8 100644 --- a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/cd4-results.component.tsx +++ b/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) => { return patients.filter((patient) => patient.patientSearchName.toLowerCase().includes(searchTerm.toLowerCase())); }; -const CD4ResultsList: React.FC = ({ patientUuid }) => { +const CD4ResultsList = () => { const { t } = useTranslation(); const [patients, setPatients] = useState([]); const [patientToCd4Map, setPatientToCd4Map] = useState([]); diff --git a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/viral-load-results.component.tsx b/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/viral-load-results.component.tsx index 7aeb2b800..ef9237d83 100644 --- a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/Tabs/viral-load-results.component.tsx +++ b/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 = () => { +const ViralLoadResultsList = () => { const { t } = useTranslation(); const [patients, setPatients] = useState([]); const [patientToViralLoadMap, setPatientToViralLoadMap] = useState([]); diff --git a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/lab-results-summary.component.tsx b/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/lab-results-summary.component.tsx index 57ba2e656..be1a5500f 100644 --- a/packages/esm-hiv-app/src/views/hts/care-and-treatment/lab-results/lab-results-summary.component.tsx +++ b/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 = ({ patientUuid }) => { +const LabResultsSummary = () => { const { t } = useTranslation(); return ( @@ -19,10 +15,10 @@ const LabResultsSummary: React.FC = ({ patientUuid }) => { - + - + diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/appointments/appointments-dashboard.component.tsx b/packages/esm-ohri-core-app/src/appointments/appointments-dashboard.component.tsx similarity index 100% rename from packages/esm-ohri-core-app/src/ohri-dashboard/appointments/appointments-dashboard.component.tsx rename to packages/esm-ohri-core-app/src/appointments/appointments-dashboard.component.tsx diff --git a/packages/esm-ohri-core-app/src/dashboard.meta.tsx b/packages/esm-ohri-core-app/src/dashboard.meta.tsx index f7e2a671b..615ca0762 100644 --- a/packages/esm-ohri-core-app/src/dashboard.meta.tsx +++ b/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', +}; diff --git a/packages/esm-ohri-core-app/src/dashboard/_vars.scss b/packages/esm-ohri-core-app/src/dashboard/_vars.scss new file mode 100644 index 000000000..1f1dee69c --- /dev/null +++ b/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; diff --git a/packages/esm-ohri-core-app/src/dashboard/create-dashboard-link.component.tsx b/packages/esm-ohri-core-app/src/dashboard/create-dashboard-link.component.tsx new file mode 100644 index 000000000..8ab15c1ac --- /dev/null +++ b/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 ( + + {name} + + ); +}; + +export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => { + return () => ( + + + + ); +}; diff --git a/packages/esm-ohri-core-app/src/dashboard/dashboard-view.component.tsx b/packages/esm-ohri-core-app/src/dashboard/dashboard-view.component.tsx new file mode 100644 index 000000000..98a0254bd --- /dev/null +++ b/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 ; +}; + +export default DashboardView; diff --git a/packages/esm-ohri-core-app/src/dashboard/dashboard-view.scss b/packages/esm-ohri-core-app/src/dashboard/dashboard-view.scss new file mode 100644 index 000000000..399d01531 --- /dev/null +++ b/packages/esm-ohri-core-app/src/dashboard/dashboard-view.scss @@ -0,0 +1,5 @@ +@use '@carbon/colors'; + +.dashboardView { + background-color: colors.$white-0; +} diff --git a/packages/esm-ohri-core-app/src/dashboard/ohri-dashboard.component.tsx b/packages/esm-ohri-core-app/src/dashboard/ohri-dashboard.component.tsx new file mode 100644 index 000000000..135cf5c56 --- /dev/null +++ b/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; + + const activeDashboard = dashboards.find((dashboard) => dashboard.name === params?.dashboard) || dashboards[0]; + + return ( +
+ {isDesktop(layout) && } + +
+ ); +} diff --git a/packages/esm-ohri-core-app/src/dashboard/ohri-dashboard.scss b/packages/esm-ohri-core-app/src/dashboard/ohri-dashboard.scss new file mode 100644 index 000000000..cc5439879 --- /dev/null +++ b/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; +} diff --git a/packages/esm-ohri-core-app/src/dashboard/routes.json b/packages/esm-ohri-core-app/src/dashboard/routes.json new file mode 100644 index 000000000..c43ffe707 --- /dev/null +++ b/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 + } + ] +} diff --git a/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav-menu.tsx b/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav-menu.tsx new file mode 100644 index 000000000..c768e7252 --- /dev/null +++ b/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav-menu.tsx @@ -0,0 +1,47 @@ +/** @module @category UI */ +import React from 'react'; +import { ExtensionSlot, createGlobalStore, useStore } from '@openmrs/esm-framework'; +import { SideNav, SideNavProps } from '@carbon/react'; +import styles from './left-nav.module.scss'; +import { useTranslation } from 'react-i18next'; + +interface LeftNavStore { + slotName: string | null; + basePath: string; +} + +const leftNavStore = createGlobalStore('left-nav', { + slotName: null, + basePath: window.spaBase, +}); + +export function setLeftNav({ name, basePath }) { + leftNavStore.setState({ slotName: name, basePath }); +} + +export function unsetLeftNav(name) { + if (leftNavStore.getState().slotName == name) { + leftNavStore.setState({ slotName: null }); + } +} + +type LeftNavMenuProps = SideNavProps; + +export const LeftNavMenu = React.forwardRef((props, ref) => { + const { slotName, basePath } = useStore(leftNavStore); + const currentPath = window.location ?? { pathname: '' }; + const { t } = useTranslation(); + + return ( + + + {slotName ? : null} + + + +

{t('programmes', 'Programmes')}

+ + + + ); +}); diff --git a/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav.module.scss b/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav.module.scss new file mode 100644 index 000000000..81d882816 --- /dev/null +++ b/packages/esm-ohri-core-app/src/dashboard/side-menu/left-nav.module.scss @@ -0,0 +1,41 @@ +@use "@carbon/styles/scss/type"; +@import "../vars"; + +.leftNav { + border-right: 1px solid $ui-03; + padding-top: 1rem; + + // Left nav menu item + :global(.cds--side-nav__link) { + color: $text-02; + @include type.type-style("heading-compact-01"); + + &:focus, + &:hover { + background-color: $ui-01; + } + + // Active menu item + &:global(.active-left-nav-link) { + color: $ui-05; + border-left: 0.25rem solid var(--brand-01); + background-color: $ui-03; + outline: none; + padding: 0 0.75rem; + } + } +} + +/* Desktop */ +:global(.omrs-breakpoint-gt-tablet) { + :global(.cds--side-nav__link) { + height: 2rem; + } +} + +/* Tablet */ +:global(.omrs-breakpoint-lt-desktop) { + :global(.cds--side-nav__link) { + height: 3rem; + } +} diff --git a/packages/esm-ohri-core-app/src/dashboard/side-menu/side-menu.component.tsx b/packages/esm-ohri-core-app/src/dashboard/side-menu/side-menu.component.tsx new file mode 100644 index 000000000..bf0a1d744 --- /dev/null +++ b/packages/esm-ohri-core-app/src/dashboard/side-menu/side-menu.component.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +// import { LeftNavMenu } from '@openmrs/esm-framework'; +import { LeftNavMenu } from './left-nav-menu'; + +const SideMenu = () => ; + +export default SideMenu; diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/dispensing/dispensing-dashboard.component.tsx b/packages/esm-ohri-core-app/src/dispensing/dispensing-dashboard.component.tsx similarity index 100% rename from packages/esm-ohri-core-app/src/ohri-dashboard/dispensing/dispensing-dashboard.component.tsx rename to packages/esm-ohri-core-app/src/dispensing/dispensing-dashboard.component.tsx diff --git a/packages/esm-ohri-core-app/src/home-widgets/home-widgets.component.tsx b/packages/esm-ohri-core-app/src/home-widgets/home-widgets.component.tsx new file mode 100644 index 000000000..c01cde606 --- /dev/null +++ b/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 = () => { + return ; +}; + +export default HomeWidgets; diff --git a/packages/esm-ohri-core-app/src/home-widgets/home-widgets.scss b/packages/esm-ohri-core-app/src/home-widgets/home-widgets.scss new file mode 100644 index 000000000..abbdb91fa --- /dev/null +++ b/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; +} diff --git a/packages/esm-ohri-core-app/src/index.ts b/packages/esm-ohri-core-app/src/index.ts index a4de7a249..46b0d78ad 100644 --- a/packages/esm-ohri-core-app/src/index.ts +++ b/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,7 +9,9 @@ import { homeDashboardMeta, dispensingDashboardMeta, serviceQueuesDashboardMeta, + patientChartDivider_dashboardMeta, } from './dashboard.meta'; +import { createDashboardLink } from './dashboard/create-dashboard-link.component'; export const importTranslation = require.context('../translations', false, /.json$/, 'lazy'); @@ -21,55 +22,57 @@ const options = { moduleName, }; -export function startupApp() { - defineConfigSchema(moduleName, {}); -} +export const root = getAsyncLifecycle(() => import('./root'), options); -export const dashboard = getAsyncLifecycle(() => import('./root'), options); +export const dashboardNavMenu = getAsyncLifecycle(() => import('./dashboard/side-menu/side-menu.component'), options); -export const homeDashboard = getSyncLifecycle(createOHRIDashboardLink(homeDashboardMeta), options); +export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(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 appointmentsLink = getSyncLifecycle(createOHRIDashboardLink(appointmentsDashboardMeta), options); -export const appointmentsDashboard = getAsyncLifecycle( - () => import('./ohri-dashboard/appointments/appointments-dashboard.component'), +export const ohriNavItems = getAsyncLifecycle( + () => import('./ohri-dashboard/side-menu/ohri-dashboard-side-nav.component'), { - featureName: 'appointments-dashboard', + featureName: 'nav-items', moduleName, }, ); -export const dispensingLink = getSyncLifecycle(createOHRIDashboardLink(dispensingDashboardMeta), options); -export const dispensingDashboard = getAsyncLifecycle( - () => import('./ohri-dashboard/dispensing/dispensing-dashboard.component'), +export const appointmentsLink = getSyncLifecycle(createOHRIDashboardLink(appointmentsDashboardMeta), options); +export const appointmentsDashboard = getAsyncLifecycle( + () => import('./appointments/appointments-dashboard.component'), { - featureName: 'dispensing-dashboard', + featureName: 'appointments-dashboard', moduleName, }, ); +export const dispensingLink = getSyncLifecycle(createOHRIDashboardLink(dispensingDashboardMeta), options); +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, }, ); -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, {}); +} diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-dashboard-side-nav.component.tsx b/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-dashboard-side-nav.component.tsx index 948f0c503..60dc33c05 100644 --- a/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-dashboard-side-nav.component.tsx +++ b/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-dashboard-side-nav.component.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'; const OHRIDashboardSideNav = () => { const { t } = useTranslation(); return ( - + diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-home.component.tsx b/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-home.component.tsx new file mode 100644 index 000000000..7188e50eb --- /dev/null +++ b/packages/esm-ohri-core-app/src/ohri-dashboard/side-menu/ohri-home.component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { LeftNavMenu } from '@openmrs/esm-framework'; + +const OhriHome = () => ; + +export default OhriHome; diff --git a/packages/esm-ohri-core-app/src/root.tsx b/packages/esm-ohri-core-app/src/root.tsx index 6c7d6ac3b..4f5ed8c52 100644 --- a/packages/esm-ohri-core-app/src/root.tsx +++ b/packages/esm-ohri-core-app/src/root.tsx @@ -1,15 +1,27 @@ -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/ohri-dashboard.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 ( - - - } /> - } /> - } /> - + +
+ + } /> + } /> + } /> + +
); -} +}; + +export default Root; diff --git a/packages/esm-ohri-core-app/src/routes.json b/packages/esm-ohri-core-app/src/routes.json index 66291e14b..2fb7eb5a8 100644 --- a/packages/esm-ohri-core-app/src/routes.json +++ b/packages/esm-ohri-core-app/src/routes.json @@ -5,15 +5,44 @@ }, "pages": [ { - "component": "dashboard", + "component": "root", "route": "dashboard" }, { - "component": "dashboard", + "component": "root", "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", @@ -32,7 +61,7 @@ }, { "name": "appointments-ohri-dashboard-ext", - "slot": "dashboard-links-slot", + "slot": "ohri-dashboard-slot", "component": "appointmentsLink" }, { @@ -42,7 +71,7 @@ }, { "name": "dispensing-ohri-dashboard-ext", - "slot": "dashboard-links-slot", + "slot": "ohri-dashboard-slot", "component": "dispensingLink", "meta": { "title": "Dispensing", @@ -58,7 +87,7 @@ }, { "name": "service-queues-ohri-dashboard-ext", - "slot": "dashboard-links-slot", + "slot": "ohri-dashboard-slot", "component": "serviceQueuesLink" }, { diff --git a/packages/esm-ohri-core-app/src/ohri-dashboard/service-queues/service-queues-dashboard.component.tsx b/packages/esm-ohri-core-app/src/service-queues/service-queues-dashboard.component.tsx similarity index 100% rename from packages/esm-ohri-core-app/src/ohri-dashboard/service-queues/service-queues-dashboard.component.tsx rename to packages/esm-ohri-core-app/src/service-queues/service-queues-dashboard.component.tsx diff --git a/packages/esm-ohri-pmtct-app/src/dashboard.meta.tsx b/packages/esm-ohri-pmtct-app/src/dashboard.meta.tsx index a324ee6e3..40c5abb6c 100644 --- a/packages/esm-ohri-pmtct-app/src/dashboard.meta.tsx +++ b/packages/esm-ohri-pmtct-app/src/dashboard.meta.tsx @@ -37,6 +37,7 @@ export const childVisitsDashboardMeta = { export const motherChildDashboardMeta = { name: 'mother-child-health', slot: 'mother-child-health-dashboard-slot', + title: 'Maternal & Child Health', config: { columns: 1, type: 'grid', @@ -45,5 +46,4 @@ export const motherChildDashboardMeta = { icon: PedestrianChild, }, isLink: true, - title: 'Maternal & Child Health', };