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

OHRI-2263 Refactor tab and use the reusable tabs component (PMTCT) #1900

Merged
merged 1 commit into from
Jul 9, 2024
Merged

OHRI-2263 Refactor tab and use the reusable tabs component (PMTCT) #1900

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
30 changes: 2 additions & 28 deletions packages/esm-ohri-pmtct-app/src/pmtct/patient-chart/child-health/child-health.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,16 @@
import React from 'react';
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 childHealthTabConfigSchema from './child-health-config.json';
import { useConfig } from '@openmrs/esm-framework';

import styles from '../common.scss';
interface OverviewListProps {
patientUuid: string;
}

const ChildHealthSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
const config = useConfig();
const tabs = getMenuItemTabConfiguration(childHealthTabConfigSchema, 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={childHealthTabConfigSchema} config={config} />
);
};

Expand Down
34 changes: 6 additions & 28 deletions .../esm-ohri-pmtct-app/src/pmtct/patient-chart/maternal-health/maternal-health.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,20 @@
import React from 'react';
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 maternalHealthTabConfigSchema from './maternal-health-config.json';
import { useConfig } from '@openmrs/esm-framework';

import styles from '../common.scss';
interface OverviewListProps {
patientUuid: string;
}

const MaternalHealthSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
const config = useConfig();
const tabs = getMenuItemTabConfiguration(maternalHealthTabConfigSchema, 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={maternalHealthTabConfigSchema}
config={config}
/>
);
};

Expand Down
16 changes: 2 additions & 14 deletions ...m-ohri-pmtct-app/src/pmtct/patient-chart/mch-summary/tabs/current-pregnancy.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import {
type PatientChartProps,
ExpandableList,
fetchPatientRelationships,
EncounterList,
basePath,
fetchPatientLastEncounter,
SummaryCard,
getMenuItemTabConfiguration,
getSummaryCardProps,
EncounterListTabsComponent,
} from '@ohri/openmrs-esm-ohri-commons-lib';
import dayjs from 'dayjs';
import { Link } from '@carbon/react';
Expand Down Expand Up @@ -49,7 +48,6 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
const [infantOutcomes, setInfantOutcomes] = useState([]);
const { encounterTypes, obsConcepts, identifiersTypes } = useConfig();
const config = useConfig();
const motherPreviousVisitTabs = getMenuItemTabConfiguration(motherPreviousVisitConfigSchema, config);
const recentPregnancyTabs = getSummaryCardProps(recentPregnancyConfigSchema, config);
const appointmentSummaryTabs = getSummaryCardProps(appointmentSummaryConfigSchema, config);
const arvTherapyTabs = getSummaryCardProps(arvTherapyColumnsConfigSchema, config);
Expand Down Expand Up @@ -274,17 +272,7 @@ const CurrentPregnancy: React.FC<PatientChartProps> = ({ patientUuid, pTrackerId
/>
</div>

{motherPreviousVisitTabs.map((tab) => (
<EncounterList
patientUuid={patientUuid}
encounterType={tab.encounterType}
columns={tab.columns}
description={tab.description}
headerTitle={tab.headerTitle}
formList={tab.formList}
launchOptions={tab.launchOptions}
/>
))}
<EncounterListTabsComponent patientUuid={patientUuid} configSchema={motherPreviousVisitConfigSchema} config={config} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CynthiaKamau this might not work because this wasn't a tab, we had such cases in the covid app and for now I would say we just leave it as it is unless we decide to render everything as a tab. if you see this has no tabs or tabPanels but if we treat it like this, it will have that blue tab design, we need to make a decision about this, personally I would say we make every menu that renders the encounter list table a tab. I don't know what you think. cc @lucyjemutai

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also realised you didn't do the same for hivExposedInfant, so let's have a sync about this and see how we wanna handle that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CynthiaKamau this might not work because this wasn't a tab, we had such cases in the covid app and for now I would say we just leave it as it is unless we decide to render everything as a tab. if you see this has no tabs or tabPanels but if we treat it like this, it will have that blue tab design, we need to make a decision about this, personally I would say we make every menu that renders the encounter list table a tab. I don't know what you think. cc @lucyjemutai

It is a list of tabs
Screenshot 2024-07-08 at 10 06 34

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is it working because in the code it doesn't look like that, we were just rendering the Encounter list

</div>
);
};
Expand Down
Loading