diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometric.resource.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometric.resource.tsx deleted file mode 100644 index 26bdf580b0..0000000000 --- a/packages/esm-patient-biometrics-app/src/biometrics/biometric.resource.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { openmrsObservableFetch, fhirBaseUrl, FHIRResource } from '@openmrs/esm-framework'; -import { map } from 'rxjs/operators'; -import { calculateBMI } from './biometric.helper'; - -export function getPatientBiometrics(patientUuid: string, weightUuid: string, heightUuid: string, muacUuid: string) { - return getPatientBiometricObservations(patientUuid, weightUuid, heightUuid, muacUuid).pipe( - map((data) => (data ? formatDimensions(data.weights, data.heights, data.muac) : [])), - ); -} - -function getPatientBiometricObservations( - patientUuid: string, - weightUuid: string, - heightUuid: string, - muacUuid: string, -) { - const DEFAULT_PAGE_SIZE = 100; - return openmrsObservableFetch( - `${fhirBaseUrl}/Observation?subject:Patient=${patientUuid}&code=${weightUuid},${heightUuid},${muacUuid}&_count=${DEFAULT_PAGE_SIZE}`, - ).pipe( - map(({ data }) => data.entry), - map((entries) => entries?.map((entry) => entry.resource)), - map((dimensions) => { - return { - muac: dimensions?.filter((dimension) => dimension.code.coding.some((sys) => sys.code === muacUuid)), - heights: dimensions?.filter((dimension) => dimension.code.coding.some((sys) => sys.code === heightUuid)), - weights: dimensions?.filter((dimension) => dimension.code.coding.some((sys) => sys.code === weightUuid)), - }; - }), - ); -} -function formatDimensions(weights, heights, muacs) { - const weightDates = getDatesIssued(weights); - const heightDates = getDatesIssued(heights); - const uniqueDates = Array.from(new Set(weightDates?.concat(heightDates))).sort(latestFirst); - - return uniqueDates.map((date) => { - const muac = muacs.find((muac) => muac.issued === date); - const weight = weights.find((weight) => weight.issued === date); - const height = heights.find((height) => height.issued === date); - return { - id: weight && weight?.encounter?.reference?.replace('Encounter/', ''), - weight: weight ? weight.valueQuantity.value : weight, - height: height ? height.valueQuantity.value : height, - date: date, - bmi: weight && height ? calculateBMI(weight.valueQuantity.value, height.valueQuantity.value) : null, - obsData: { - weight: weight, - height: height, - }, - muac: muac?.valueQuantity.value, - }; - }); -} - -function latestFirst(a, b) { - return new Date(b).getTime() - new Date(a).getTime(); -} - -function getDatesIssued(dimensionArray): string[] { - return dimensionArray?.map((dimension) => dimension.issued); -} - -type DimensionFetchResponse = { - entry: Array; - id: string; - resourceType: string; - total: number; - type: string; -}; diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx index 601e3c0d50..7e15c26a12 100644 --- a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx +++ b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx @@ -3,62 +3,78 @@ import dayjs from 'dayjs'; import Add16 from '@carbon/icons-react/es/add/16'; import ChartLineSmooth16 from '@carbon/icons-react/es/chart--line-smooth/16'; import Table16 from '@carbon/icons-react/es/table/16'; -import styles from './biometrics-overview.scss'; import BiometricsChart from './biometrics-chart.component'; -import BiometricsPagination from './biometricsPagination.component'; -import { Button, DataTableSkeleton } from 'carbon-components-react'; +import BiometricsPagination from './biometrics-pagination.component'; +import { Button, DataTableSkeleton, InlineLoading } from 'carbon-components-react'; import { useTranslation } from 'react-i18next'; -import { EmptyState, ErrorState, useVitalsConceptMetadata } from '@openmrs/esm-patient-common-lib'; +import { EmptyState, ErrorState, useVitalsConceptMetadata, withUnit } from '@openmrs/esm-patient-common-lib'; import { attach, useConfig } from '@openmrs/esm-framework'; -import { getPatientBiometrics } from './biometric.resource'; +import { useBiometrics } from './biometrics.resource'; import { ConfigObject } from '../config-schema'; import { patientVitalsBiometricsFormWorkspace } from '../constants'; +import styles from './biometrics-overview.scss'; -interface RenderBiometricsProps { - headerTitle: string; - tableRows: Array; - bmiUnit: string; - biometrics: Array; +interface BiometricsBaseProps { + patientUuid: string; showAddBiometrics: boolean; pageSize: number; urlLabel: string; pageUrl: string; } -const RenderBiometrics: React.FC = ({ - headerTitle, - tableRows, - bmiUnit, +const BiometricsBase: React.FC = ({ + patientUuid, showAddBiometrics, - biometrics, pageSize, urlLabel, pageUrl, }) => { const { t } = useTranslation(); const displayText = t('biometrics', 'biometrics'); + const headerTitle = t('biometrics', 'Biometrics'); const [chartView, setChartView] = React.useState(false); + const config = useConfig() as ConfigObject; + const { bmiUnit } = config.biometrics; + const { data: conceptData } = useVitalsConceptMetadata(); const conceptUnits = conceptData ? conceptData.conceptUnits : null; - const tableHeaders = [ - { key: 'date', header: 'Date and time' }, - { key: 'weight', header: `Weight (${conceptUnits?.[3]})` }, - { key: 'height', header: `Height (${conceptUnits?.[4]})` }, - { key: 'bmi', header: `BMI (${bmiUnit})` }, - { key: 'muac', header: `MUAC (${conceptUnits?.[7]})` }, - ]; + const { data: biometrics, isLoading, isError, isValidating } = useBiometrics(patientUuid); const launchBiometricsForm = React.useCallback(() => { attach('patient-chart-workspace-slot', patientVitalsBiometricsFormWorkspace); }, []); - if (tableRows.length) { + const tableHeaders = [ + { key: 'date', header: 'Date and time' }, + { key: 'weight', header: withUnit('Weight', conceptUnits?.[3] ?? '') }, + { key: 'height', header: withUnit('Weight', conceptUnits?.[4] ?? '') }, + { key: 'bmi', header: `BMI (${bmiUnit})` }, + { key: 'muac', header: withUnit('MUAC', conceptUnits?.[7] ?? '') }, + ]; + const tableRows = React.useMemo( + () => + biometrics?.map((data, index) => { + return { + ...data, + id: `${index}`, + date: dayjs(data.date).format(`DD - MMM - YYYY, hh:mm`), + }; + }), + [biometrics], + ); + + if (isLoading) return ; + if (isError) return ; + if (biometrics?.length) { return (

{headerTitle}

+
+ {isValidating ? : null} +