Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Refactor): Refactor tab and use the reusable tabs component (HCT, HP, Covid) #1899

Merged
merged 1 commit into from
Jul 8, 2024
Merged

(Refactor): Refactor tab and use the reusable tabs component (HCT, HP, Covid) #1899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...sm-cervical-cancer-app/src/cervical-cancer/cacx-visits/cacx-visits-services.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
13 changes: 10 additions & 3 deletions ...ages/esm-commons-lib/src/components/encounter-list-tabs/encounter-list-tabs.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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}
Expand All @@ -40,4 +47,4 @@ export const TabsComponent: React.FC<TabsComponentProps> = ({ patientUuid, confi
);
};

export default TabsComponent;
export default EncounterListTabsComponent;
6 changes: 0 additions & 6 deletions packages/esm-covid-app/src/covid/patient-chart/case-assessment.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
11 changes: 0 additions & 11 deletions packages/esm-covid-app/src/covid/patient-chart/common.scss
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions packages/esm-covid-app/src/covid/patient-chart/covid-vaccinations.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
44 changes: 7 additions & 37 deletions packages/esm-covid-app/src/covid/patient-chart/lab-results.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
};

Expand Down
3 changes: 3 additions & 0 deletions ...re-treatment-app/src/hct/patient-chart/general-counselling/general-conselling-config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"headerTitle": "Mental Health Assessment",
"displayText": "Mental Health Assessment",
"encounterType": "MentalHealthAssessmentEncounter_UUID",
"hasFilter": true,
"columns": [
{
"id": "screeningDate",
Expand Down Expand Up @@ -68,6 +69,7 @@
"headerTitle": "Intimate Partner Violence",
"displayText": "Intimate Partner Violence",
"encounterType": "IntimatePartnerEncounterType_UUID",
"hasFilter": true,
"columns": [
{
"id": "screeningDate",
Expand Down Expand Up @@ -126,6 +128,7 @@
{
"tabName": "Disclosure",
"headerTitle": "Disclosure",
"hasFilter": true,
"displayText": "Disclosure",
"encounterType": "PeadsDisclosureEncounterType_UUID",
"columns": [
Expand Down
37 changes: 7 additions & 30 deletions ...t-app/src/hct/patient-chart/general-counselling/general-counselling-summary.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
};

Expand Down
37 changes: 7 additions & 30 deletions ...t/patient-chart/partner-notification-services/partner-notification-services.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
};

Expand Down
35 changes: 6 additions & 29 deletions ...ent-app/src/hct/patient-chart/program-management/program-management-summary.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
};

Expand Down
31 changes: 2 additions & 29 deletions ...ages/esm-hiv-care-treatment-app/src/hct/patient-chart/visits/visits-summary.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />
);
};

Expand Down
Loading
Loading