-
Notifications
You must be signed in to change notification settings - Fork 204
/
external-overview.extension.tsx
108 lines (98 loc) · 3.93 KB
/
external-overview.extension.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useCallback, useMemo } from 'react';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Button, DataTableSkeleton } from '@carbon/react';
import { ArrowRight } from '@carbon/react/icons';
import { navigate } from '@openmrs/esm-framework';
import {
EmptyState,
type ExternalOverviewProps,
type PanelFilterProps,
type PatientData,
} from '@openmrs/esm-patient-common-lib';
import { parseSingleEntry, type OverviewPanelEntry } from './useOverviewData';
import usePatientResultsData from '../loadPatientTestData/usePatientResultsData';
import CommonOverview from './common-overview.component';
import styles from './external-overview.scss';
const resultsToShow = 3;
function getFilteredOverviewData(sortedObs: PatientData, filter) {
return Object.entries(sortedObs)
.flatMap(([panelName, { entries, type, uuid }]) => {
return entries.map((e) => [e, uuid, type, panelName] as PanelFilterProps);
})
.filter(filter)
.map(([entry, uuid, type, panelName]: PanelFilterProps): OverviewPanelEntry => {
return [
panelName,
type,
parseSingleEntry(entry, type, panelName),
new Date(entry.effectiveDateTime),
new Date(entry.issued),
uuid,
];
})
.sort(([, , , date1], [, , , date2]) => date2.getTime() - date1.getTime());
}
function useFilteredOverviewData(patientUuid: string, filter: (filterProps: PanelFilterProps) => boolean = () => true) {
const { sortedObs, loaded, error } = usePatientResultsData(patientUuid);
const overviewData = useMemo(() => getFilteredOverviewData(sortedObs, filter), [filter, sortedObs]);
return { overviewData, loaded, error };
}
const ExternalOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter }) => {
const { t } = useTranslation();
const { overviewData, loaded, error } = useFilteredOverviewData(patientUuid, filter);
const cardTitle = t('recentResults', 'Recent Results');
const handleSeeAll = useCallback(() => {
navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart/Results Viewer` });
}, [patientUuid]);
return (
<RecentResultsGrid>
{loaded ? (
<>
{(() => {
if (overviewData.length) {
return (
<div className={styles.widgetCard}>
<div className={styles.externalOverviewHeader}>
<h4 className={classNames(styles.productiveHeading03, styles.text02)}>{cardTitle}</h4>
<Button
kind="ghost"
renderIcon={(props) => <ArrowRight size={16} {...props} />}
iconDescription="See all results"
onClick={handleSeeAll}
>
{t('seeAllResults', 'See all results')}
</Button>
</div>
<CommonOverview
{...{
patientUuid,
overviewData: overviewData.slice(0, resultsToShow),
insertSeparator: true,
deactivateToolbar: true,
isPatientSummaryDashboard: false,
hideToolbar: true,
}}
/>
{overviewData.length > resultsToShow && (
<Button onClick={handleSeeAll} kind="ghost">
{t('moreResultsAvailable', 'More results available')}
</Button>
)}
</div>
);
} else {
return <EmptyState headerTitle={cardTitle} displayText={t('recentTestResults', 'recent test results')} />;
}
})()}
</>
) : (
<DataTableSkeleton columnCount={3} />
)}
</RecentResultsGrid>
);
};
export default ExternalOverview;
const RecentResultsGrid = (props) => {
return <div {...props} className={styles['recent-results-grid']} />;
};