Move the tabs implementation in the commons-lib -tb/tpt app (#1898)

* Move the tabs implementation in the commons-lib -tb/TPT * Remove duplication of TPT summary and program management * fix failing build
UCSF-IGHS · Jul 9, 2024 · 41f1f66 · 41f1f66
1 parent f561690
commit 41f1f66
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 128 deletions.
diff --git a/packages/esm-tb-app/src/routes.json b/packages/esm-tb-app/src/routes.json
@@ -106,42 +106,6 @@
       "slot": "tpt-program-management-summary-slot",
       "component": "tptProgramManagementDashboard"
     },
-
-
-    {
-      "name": "tpt-patient-summary",
-      "slot": "ohri-tpt-slot",
-      "component": "tptPatientSummaryDashboardLink",
-      "meta": {
-        "slot": "tpt-patient-summary-slot",
-        "columns": 1,
-        "path": "tpt-patient-summary",
-        "layoutMode": "anchored"
-      }
-    },
-    {
-      "name": "tpt-patient-summary-ext",
-      "slot": "tpt-patient-summary-slot",
-      "component": "tptPatientSummaryDashboard"
-    },
-
-    {
-      "name": "tpt-program-management-summary",
-      "slot": "ohri-tpt-slot",
-      "component": "tptProgramManagementDashboardLink",
-      "meta": {
-        "slot": "tpt-program-management-summary-slot",
-        "columns": 1,
-        "path": "tpt-program-management",
-        "layoutMode": "anchored"
-      }
-    },
-    {
-      "name": "tpt-program-management-summary-ext",
-      "slot": "tpt-program-management-summary-slot",
-      "component": "tptProgramManagementDashboard"
-    },
-
     {
       "name": "tb-treatment-follow-up-summary",
       "slot": "ohri-tb-slot",

diff --git a/packages/esm-tb-app/src/tb/program-management/tb-program-management.tsx b/packages/esm-tb-app/src/tb/program-management/tb-program-management.tsx
@@ -1,40 +1,18 @@
 import React from 'react';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { type PatientChartProps, getMenuItemTabConfiguration, EncounterList } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { type PatientChartProps } from '@ohri/openmrs-esm-ohri-commons-lib';
 import tptProgramManagemetConfigSchema from './tb-program-management-config.json';
 
-import styles from '../common.scss';
-
 const ProgramManagementSummary: React.FC<PatientChartProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(tptProgramManagemetConfigSchema, config);
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={tptProgramManagemetConfigSchema}
+      config={config}
+    />
   );
 };
 

diff --git a/packages/esm-tb-app/src/tb/tb-contact-listing/tb-contact-list.component.tsx b/packages/esm-tb-app/src/tb/tb-contact-listing/tb-contact-list.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import tbFollowupConfigSchema from './tb-contact-listing-config.json';
 
 interface OverviewListProps {
@@ -9,23 +9,8 @@ interface OverviewListProps {
 
 const TbContactTracingList: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(tbFollowupConfigSchema, config);
 
-  return (
-    <>
-      {tabs.map((tab) => (
-        <EncounterList
-          patientUuid={patientUuid}
-          encounterType={tab.encounterType}
-          formList={tab.formList}
-          columns={tab.columns}
-          description={tab.description}
-          headerTitle={tab.headerTitle}
-          launchOptions={tab.launchOptions}
-        />
-      ))}
-    </>
-  );
+  return <EncounterListTabsComponent patientUuid={patientUuid} configSchema={tbFollowupConfigSchema} config={config} />;
 };
 
 export default TbContactTracingList;
diff --git a/packages/esm-tb-app/src/tb/tpt/program-management/tpt-program-management.tsx b/packages/esm-tb-app/src/tb/tpt/program-management/tpt-program-management.tsx
@@ -1,44 +1,21 @@
 import React from 'react';
 import { useConfig } from '@openmrs/esm-framework';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import tptProgramManagemetConfigSchema from './tpt-program-management-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const TptProgramManagementSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(tptProgramManagemetConfigSchema, config);
 
   return (
-    <div className={styles.tabContainer}>
-      <Tabs>
-        <TabList contained>
-          {tabs.map((tab) => (
-            <Tab key={tab.name}>{tab.name}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel>
-              <EncounterList
-                patientUuid={patientUuid}
-                formList={tab.formList}
-                columns={tab.columns}
-                encounterType={tab.encounterType}
-                launchOptions={tab.launchOptions}
-                headerTitle={tab.headerTitle}
-                description={tab.description}
-              />
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </div>
+    <EncounterListTabsComponent
+      patientUuid={patientUuid}
+      configSchema={tptProgramManagemetConfigSchema}
+      config={config}
+    />
   );
 };
 

diff --git a/packages/esm-tb-app/src/tb/treatment-and-follow-up/tb-treatment-follow-up.component.tsx b/packages/esm-tb-app/src/tb/treatment-and-follow-up/tb-treatment-follow-up.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import tbFollowupConfigSchema from './tb-treatment-followup-config.json';
 
 interface OverviewListProps {
@@ -9,23 +9,8 @@ interface OverviewListProps {
 
 const TbTreatmentFollowUpList: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(tbFollowupConfigSchema, config);
 
-  return (
-    <>
-      {tabs.map((tab) => (
-        <EncounterList
-          patientUuid={patientUuid}
-          encounterType={tab.encounterType}
-          formList={tab.formList}
-          columns={tab.columns}
-          description={tab.description}
-          headerTitle={tab.headerTitle}
-          launchOptions={tab.launchOptions}
-        />
-      ))}
-    </>
-  );
+  return <EncounterListTabsComponent patientUuid={patientUuid} configSchema={tbFollowupConfigSchema} config={config} />;
 };
 
 export default TbTreatmentFollowUpList;