OHRI-1994 Add TB Program menu and tabs shell on the patient chart (#1695

)

* OHRI-1994 Add TB Program menu and tabs shell on the patient chart

* PR comments

* Use PatientChartProps from commons lib

package.json

@@ -19,6 +19,7 @@
     "start:cervical-cancer": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-cervical-cancer-app",
     "start:pmtct": "openmrs develop --backend https://ohri-namibia-dev.globalhealthapp.net --sources 'packages/esm-ohri-pmtct-app/'",
     "start:form-render": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-form-render-app",
+    "start:tb": "openmrs develop --backend https://ohri-dev.globalhealthapp.net --sources packages/esm-tb-app",
     "prettier": "prettier --fix --config prettier.config.js --write \"packages/**/*.{ts,tsx}\"",
     "prepare": "husky install",
     "test": "jest --config jest.config.js --verbose false --passWithNoTests",

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

@@ -1,4 +1,37 @@
-export const tuberclosisMeta = {
-  title: 'Tuberclosis',
-  slotName: 'tuberclosis-slot',
+export const tbPatientChartMeta = {
+  title: 'TB Program',
+  slotName: 'ohri-tb-slot',
+  isExpanded: false,
+};
+
+export const tbPatientSummaryDashboardMeta = {
+  slot: 'tb-patient-summary-dashboard-slot',
+  columns: 1,
+  title: 'Patient Summary',
+  path: 'tb-patient-summary',
+  layoutMode: 'anchored',
+};
+
+export const tbProgramManagementDashboardMeta = {
+  slot: 'tb-program-management-summary-slot',
+  columns: 1,
+  title: 'Program Management',
+  path: 'tb-program-management',
+  layoutMode: 'anchored',
+};
+
+export const tbTreatmentFollowUpDashboardMeta = {
+  slot: 'tb-treatment-follow-up-summary-slot',
+  columns: 1,
+  title: 'Treatment and follow-up',
+  path: 'tb-treatment-follow-up',
+  layoutMode: 'anchored',
+};
+
+export const tbContactListingDashboardMeta = {
+  slot: 'tb-contact-listing-summary-slot',
+  columns: 1,
+  title: 'Tb Contact Listing',
+  path: 'tb-contact-listing',
+  layoutMode: 'anchored',
 };

packages/esm-tb-app/src/index.ts

@@ -1,5 +1,12 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { createDashboardGroup, createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import {
+  tbPatientChartMeta,
+  tbContactListingDashboardMeta,
+  tbPatientSummaryDashboardMeta,
+  tbProgramManagementDashboardMeta,
+  tbTreatmentFollowUpDashboardMeta,
+} from './dashboard.meta';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -15,3 +22,53 @@ const options = {
 export function startupApp() {
   defineConfigSchema(moduleName, {});
 }
+
+export const patientChartTbDashboard = getSyncLifecycle(createDashboardGroup(tbPatientChartMeta), options);
+
+export const tbPatientSummaryDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...tbPatientSummaryDashboardMeta, moduleName }),
+  options,
+);
+export const tbPatientSummaryList = getAsyncLifecycle(
+  () => import('./views/patient-summary/tb-patient-summary.component'),
+  {
+    featureName: 'hts-service-summary-list',
+    moduleName,
+  },
+);
+
+export const tbProgramManagementDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...tbProgramManagementDashboardMeta, moduleName }),
+  options,
+);
+export const tbProgramManagementDashboard = getAsyncLifecycle(
+  () => import('./views/program-management/maternal-health.component'),
+  {
+    featureName: 'tb-program-management-summary',
+    moduleName,
+  },
+);
+
+export const tbTreatmentFollowUpDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...tbTreatmentFollowUpDashboardMeta, moduleName }),
+  options,
+);
+export const tbTreatmentFollowUpDashboard = getAsyncLifecycle(
+  () => import('./views/treatment-and-follow-up/tb-treatment-follow-up.component'),
+  {
+    featureName: 'tb-treatment-follow-up-summary',
+    moduleName,
+  },
+);
+
+export const tbContactListingDashboardLink = getSyncLifecycle(
+  createDashboardLink({ ...tbContactListingDashboardMeta, moduleName }),
+  options,
+);
+export const tbContactListingDashboard = getAsyncLifecycle(
+  () => import('./views/tb-contact-listing/tb-contact-list.component'),
+  {
+    featureName: 'tb-contact-listing-summary',
+    moduleName,
+  },
+);

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

@@ -6,5 +6,89 @@
   "pages": [
   ],
   "extensions": [
+    {
+      "name": "tb-dashboard-link",
+      "slot": "dashboard-slot",
+      "component": "tbFolderLink",
+      "meta": {
+        "slot": "ohri-tb-dashboard-slot",
+        "isFolder": true,
+        "title": "TB Program"
+      }
+    },
+    {
+      "name": "ohri-tb",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "patientChartTbDashboard",
+      "order": 24
+    },
+
+    {
+      "name": "tb-summary-dashboard",
+      "slot": "ohri-tb-slot",
+      "component": "tbPatientSummaryDashboardLink",
+      "meta": {
+        "slot": "tb-patient-summary-dashboard-slot",
+        "columns": 1,
+        "path": "tb-patient-summary",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "tb-patient-summary-ext",
+      "slot": "tb-patient-summary-dashboard-slot",
+      "component": "tbPatientSummaryList"
+    },
+
+    {
+      "name": "tb-program-management-summary",
+      "slot": "ohri-tb-slot",
+      "component": "tbProgramManagementDashboardLink",
+      "meta": {
+        "slot": "tb-program-management-summary-slot",
+        "columns": 1,
+        "path": "tb-program-management",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "tb-program-management-summary-ext",
+      "slot": "tb-program-management-summary-slot",
+      "component": "tbProgramManagementDashboard"
+    },
+
+    {
+      "name": "tb-treatment-follow-up-summary",
+      "slot": "ohri-tb-slot",
+      "component": "tbTreatmentFollowUpDashboardLink",
+      "meta": {
+        "slot": "tb-treatment-follow-up-summary-slot",
+        "columns": 1,
+        "path": "tb-treatment-follow-up",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "tb-treatment-follow-up-summary-ext",
+      "slot": "tb-treatment-follow-up-summary-slot",
+      "component": "tbTreatmentFollowUpDashboard"
+    },
+
+    {
+      "name": "tb-contact-listing-summary",
+      "slot": "ohri-tb-slot",
+      "component": "tbContactListingDashboardLink",
+      "meta": {
+        "slot": "tb-contact-listing-summary-slot",
+        "columns": 1,
+        "path": "tb-contact-listing",
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "tb-contact-listing-summary-ext",
+      "slot": "tb-contact-listing-summary-slot",
+      "component": "tbContactListingDashboard"
+    }
   ]
 }

packages/esm-tb-app/src/views/patient-summary/tb-patient-summary.component.tsx

@@ -0,0 +1,21 @@
+import { EmptyStateComingSoon, PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const TBSummaryOverviewList: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const headerRecentTB = t('recentTuberculosis', 'Recent Tuberculosis');
+  const headerPreviousCases = t('previousCases', 'Previous Cases');
+  const headerVisit = t('visits', 'Visits');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerRecentTB} headerTitle={headerRecentTB} />
+      <EmptyStateComingSoon displayText={headerPreviousCases} headerTitle={headerPreviousCases} />
+      <EmptyStateComingSoon displayText={headerVisit} headerTitle={headerVisit} />
+    </>
+  );
+};
+
+export default TBSummaryOverviewList;

packages/esm-tb-app/src/views/program-management/maternal-health.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
+import styles from '../common.scss';
+import { useTranslation } from 'react-i18next';
+import MdrTbList from './tabs/mdr-tb.component';
+import TbPatientTracing from './tabs/tb-patient-tracing.component';
+import { PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const ProgramManagementSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.tabContainer}>
+      <Tabs>
+        <TabList contained>
+          <Tab>{t('MdrTbEnrolment', 'TB/MDR TB Enrolment')}</Tab>
+          <Tab>{t('PatientTracing', 'Patient Tracing')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <MdrTbList patientUuid={patientUuid} />
+          </TabPanel>
+          <TabPanel>
+            <TbPatientTracing patientUuid={patientUuid} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ProgramManagementSummary;

packages/esm-tb-app/src/views/program-management/tabs/mdr-tb.component.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon, PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const MdrTbList: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('MdrTbEnrolment', 'TB/MDR TB Enrolment');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default MdrTbList;

packages/esm-tb-app/src/views/program-management/tabs/tb-patient-tracing.component.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon, PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const TbPatientTracing: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('PatientTracing', 'Patient Tracing');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default TbPatientTracing;

packages/esm-tb-app/src/views/tb-contact-listing/tb-contact-list.component.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon, PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const TbContactTracingList: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('TbContactListing', 'TB Contact Listing');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default TbContactTracingList;

packages/esm-tb-app/src/views/treatment-and-follow-up/tb-treatment-follow-up.component.tsx

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmptyStateComingSoon, PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
+
+const TbTreatmentFollowUpList: React.FC<PatientChartProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const headerTitle = t('TbTreatmentFollowUp');
+
+  return (
+    <>
+      <EmptyStateComingSoon displayText={headerTitle} headerTitle={headerTitle} />
+    </>
+  );
+};
+
+export default TbTreatmentFollowUpList;

packages/esm-tb-app/translations/en.json

@@ -1,3 +1,10 @@
 {
-  "tuberclosis": "Tuberclosis"
+  "tuberclosis": "Tuberclosis",
+  "MdrTbEnrolment": "TB/MDR TB Enrolment",
+  "PatientTracing": "Patient Tracing",
+  "TbTreatmentFollowUp": "TB Follow Up",
+  "TbContactListing": "TB Contact Listing",
+  "recentTuberculosis": "Recent Tuberclosis",
+  "previousCases": "Previous Case",
+  "visits": "Visits"
 }