refactor tabs for hct, hp and covid (#1899)

UCSF-IGHS · Jul 8, 2024 · 893a650 · 893a650
1 parent a5b1671
commit 893a650
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 210 deletions.
diff --git a/...sm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx b/...sm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
 import cacxConfigSchema from './cacx-config.json';
 
@@ -10,7 +10,7 @@ interface OverviewListProps {
 const CaCxCervicalCancerServices: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
 
-  return <TabsComponent patientUuid={patientUuid} configSchema={cacxConfigSchema} config={config} />;
+  return <EncounterListTabsComponent patientUuid={patientUuid} configSchema={cacxConfigSchema} config={config} />;
 };
 
 export default CaCxCervicalCancerServices;
diff --git a/...ages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx b/...ages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx
@@ -3,13 +3,19 @@ import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import styles from './encounter-list-tabs.scss';
 
-interface TabsComponentProps {
+interface EncounterListTabsComponentProps {
   patientUuid: string;
   configSchema: any;
   config: any;
+  filter?: (encounter: any, formName?: string) => boolean;
 }
 
-export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, configSchema, config }) => {
+export const EncounterListTabsComponent: React.FC<EncounterListTabsComponentProps> = ({
+  patientUuid,
+  configSchema,
+  config,
+  filter,
+}) => {
   const tabsConfig = getMenuItemTabConfiguration(configSchema, config);
 
   return (
@@ -24,6 +30,7 @@ export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, confi
           {tabsConfig.map((tab) => (
             <TabPanel key={tab.name}>
               <EncounterList
+                filter={tab.hasFilter ? (encounter) => filter(encounter, tab.formList[0].name) : null}
                 patientUuid={patientUuid}
                 formList={tab.formList}
                 columns={tab.columns}
@@ -40,4 +47,4 @@ export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, confi
   );
 };
 
-export default TabsComponent;
+export default EncounterListTabsComponent;
diff --git a/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx
@@ -3,12 +3,6 @@ import { useConfig } from '@openmrs/esm-framework';
 import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import caseAssessmentSchemaConfig from './case-assessment-schema-config.json';
 
-export const covidFormSlot = 'hts-encounter-form-slot';
-export const covidEncounterRepresentation =
-  'custom:(uuid,encounterDatetime,location:(uuid,name),' +
-  'encounterProviders:(uuid,provider:(uuid,name)),' +
-  'obs:(uuid,obsDatetime,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name))))';
-
 interface CovidAssessmentWidgetProps {
   patientUuid: string;
 }

diff --git a/packages/esm-covid-app/src/covid/patient-chart/common.scss b/packages/esm-covid-app/src/covid/patient-chart/common.scss
diff --git a/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx
@@ -7,8 +7,6 @@ interface CovidVaccinationsWidgetProps {
   patientUuid: string;
 }
 
-export const covidFormSlot = 'hts-encounter-form-slot';
-
 const CovidVaccinations: React.FC<CovidVaccinationsWidgetProps> = ({ patientUuid }) => {
   const config = useConfig();
   const tabs = getMenuItemTabConfiguration(covidVaccinationsSchemaConfig, config);

diff --git a/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx b/packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx
@@ -1,56 +1,26 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
-import { EncounterList, getObsFromEncounter, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
+import { getObsFromEncounter, EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 import { useConfig } from '@openmrs/esm-framework';
 import covidLabTestSchemaConfig from './lab-results-schema-config.json';
 
-import styles from './common.scss';
-
-export const covidFormSlot = 'hts-encounter-form-slot';
-export const covidEncounterRepresentation =
-  'custom:(uuid,encounterDatetime,location:(uuid,name),' +
-  'encounterProviders:(uuid,provider:(uuid,name)),' +
-  'obs:(uuid,obsDatetime,concept:(uuid,name:(uuid,name)),value:(uuid,name:(uuid,name))))';
-
 interface CovidLabWidgetProps {
   patientUuid: string;
 }
 
 const CovidLabResults: React.FC<CovidLabWidgetProps> = ({ patientUuid }) => {
   const config = useConfig();
 
-  const tabs = getMenuItemTabConfiguration(covidLabTestSchemaConfig, config);
-
   let pendingLabOrdersFilter = (encounter) => {
     return getObsFromEncounter(encounter, config.obsConcepts.covidTestStatusConcept_UUID) === 'Pending';
   };
 
   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
-                filter={tab.hasFilter ? (encounter) => pendingLabOrdersFilter(encounter) : null}
-                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={covidLabTestSchemaConfig}
+      config={config}
+      filter={pendingLabOrdersFilter}
+    />
   );
 };
 

diff --git a/...re-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json b/...re-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json
@@ -6,6 +6,7 @@
       "headerTitle": "Mental Health Assessment",
       "displayText": "Mental Health Assessment",
       "encounterType": "MentalHealthAssessmentEncounter_UUID",
+      "hasFilter": true,
       "columns": [
         {
           "id": "screeningDate",
@@ -68,6 +69,7 @@
       "headerTitle": "Intimate Partner Violence",
       "displayText": "Intimate Partner Violence",
       "encounterType": "IntimatePartnerEncounterType_UUID",
+      "hasFilter": true,
       "columns": [
         {
           "id": "screeningDate",
@@ -126,6 +128,7 @@
     {
       "tabName": "Disclosure",
       "headerTitle": "Disclosure",
+      "hasFilter": true,
       "displayText": "Disclosure",
       "encounterType": "PeadsDisclosureEncounterType_UUID",
       "columns": [

diff --git a/...t-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx b/...t-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx
@@ -1,49 +1,26 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/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 generalConsellingConfigSchema from './general-conselling-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const GeneralCounsellingSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(generalConsellingConfigSchema, config);
 
   const tabFilter = (encounter, formName) => {
     return encounter?.form?.name === formName;
   };
 
   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
-                filter={(encounter) => tabFilter(encounter, tab.formList[0].name)}
-                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={generalConsellingConfigSchema}
+      config={config}
+      filter={tabFilter}
+    />
   );
 };
 

diff --git a/...t/patient-chart/partner-notification-services/partner-notification-services.component.tsx b/...t/patient-chart/partner-notification-services/partner-notification-services.component.tsx
@@ -1,49 +1,26 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/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 partnerNotificationsConfigSchema from './patner-notification-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const PartnerNotificationServices: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(partnerNotificationsConfigSchema, config);
 
   const tabFilter = (encounter, formName) => {
     return encounter?.form?.name === formName;
   };
 
   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
-                filter={tab.hasFilter ? (encounter) => tabFilter(encounter, tab.formList[0].name) : null}
-                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={partnerNotificationsConfigSchema}
+      config={config}
+      filter={tabFilter}
+    />
   );
 };
 

diff --git a/...ent-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx b/...ent-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx
@@ -1,44 +1,21 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/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 programManagementTabConfigSchema from './program-management-config.json';
 
-import styles from '../../common.scss';
-
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const ProgramManagementSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(programManagementTabConfigSchema, 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={programManagementTabConfigSchema}
+      config={config}
+    />
   );
 };
 

diff --git a/...ages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx b/...ages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx
@@ -1,44 +1,17 @@
 import React from 'react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { EncounterList, getMenuItemTabConfiguration } from '@ohri/openmrs-esm-ohri-commons-lib';
 import clinicalVisitConfigSchema from './clinical-visit-config.json';
-
-import styles from '../../common.scss';
+import { EncounterListTabsComponent } from '@ohri/openmrs-esm-ohri-commons-lib';
 
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const VisitsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const tabs = getMenuItemTabConfiguration(clinicalVisitConfigSchema, 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={clinicalVisitConfigSchema} config={config} />
   );
 };