diff --git a/packages/esm-patient-labs-app/src/constants.ts b/packages/esm-patient-labs-app/src/constants.ts new file mode 100644 index 0000000000..ba283e9af2 --- /dev/null +++ b/packages/esm-patient-labs-app/src/constants.ts @@ -0,0 +1 @@ +export const basePath = '/patient/:patientUuid/chart'; diff --git a/packages/esm-patient-labs-app/src/index.ts b/packages/esm-patient-labs-app/src/index.ts index 292640e8c0..2a027504b6 100644 --- a/packages/esm-patient-labs-app/src/index.ts +++ b/packages/esm-patient-labs-app/src/index.ts @@ -54,3 +54,11 @@ export const addLabOrderWorkspace = getAsyncLifecycle( () => import('./lab-orders/add-lab-order/add-lab-order.workspace'), options, ); + +export const timelineResultsModal = getAsyncLifecycle( + () => import('./test-results/panel-timeline/timeline-results.modal'), + { + featureName: 'Timeline results', + moduleName, + }, +); diff --git a/packages/esm-patient-labs-app/src/routes.json b/packages/esm-patient-labs-app/src/routes.json index 0f76bbc986..6da2192390 100644 --- a/packages/esm-patient-labs-app/src/routes.json +++ b/packages/esm-patient-labs-app/src/routes.json @@ -37,6 +37,12 @@ "order": 2 } ], + "modals": [ + { + "name": "timeline-results-modal", + "component": "timelineResultsModal" + } + ], "pages": [], "workspaces": [ { diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx b/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx index 01ca1098aa..9b47014ace 100644 --- a/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx +++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/helpers.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import classNames from 'classnames'; -import { ConfigurableLink, formatDate, formatTime, parseDate } from '@openmrs/esm-framework'; +import { formatDate, formatTime, parseDate, showModal } from '@openmrs/esm-framework'; import { type OBSERVATION_INTERPRETATION, getPatientUuidFromUrl } from '@openmrs/esm-patient-common-lib'; import { type ParsedTimeType } from '../filter/filter-types'; -import { testResultsBasePath } from '../helpers'; import type { ObsRecord } from '../../types'; import styles from './timeline.scss'; @@ -115,6 +114,15 @@ export const TimelineCell: React.FC<{ export const RowStartCell = ({ title, range, units, shadow = false, testUuid, isString = false }) => { const patientUuid = getPatientUuidFromUrl(); + const launchResultsDialog = (patientUuid: string, title: string, testUuid: string) => { + const dispose = showModal('timeline-results-modal', { + closeDeleteModal: () => dispose(), + patientUuid, + title, + testUuid, + }); + }; + return (
{!isString ? ( - + launchResultsDialog(patientUuid, title, testUuid)} + > {title} - + ) : ( title )} diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx new file mode 100644 index 0000000000..0d554d38b4 --- /dev/null +++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline-results.modal.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ModalHeader, ModalBody } from '@carbon/react'; +import { useTranslation } from 'react-i18next'; +import { basePath } from '../../constants'; +import Trendline from '../trendline/trendline.component'; + +interface TimelineResultsModalProps { + closeDeleteModal: () => void; + patientUuid: string; + testUuid: string; + title: string; +} + +const TimelineResultsModal: React.FC = ({ closeDeleteModal, patientUuid, testUuid }) => { + const { t } = useTranslation(); + + return ( +
+ + + + +
+ ); +}; + +export default TimelineResultsModal; diff --git a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss index 252e999ac9..ec0b385e6e 100644 --- a/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss +++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/timeline.scss @@ -206,3 +206,13 @@ .recent-results-grid::-webkit-scrollbar { display: none; } + +.trendline-link-view { + @include type.type-style('helper-text-01'); + color: colors.$blue-60; + cursor: pointer; +} + +.trendline-link-view:hover { + text-decoration: underline; +} diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx b/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx index d7a5c133eb..9f15d8e73b 100644 --- a/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx +++ b/packages/esm-patient-labs-app/src/test-results/trendline/range-selector.component.tsx @@ -38,7 +38,7 @@ const RangeSelector: React.FC<{ setLowerRange: (lowerRange: Date) => void; upper return ( - + {ranges.map(([label, onClick], index) => ( {label} diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx index 060021e070..b0275346cf 100644 --- a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx +++ b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.component.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import { Button, InlineLoading, SkeletonText } from '@carbon/react'; import { ArrowLeft } from '@carbon/react/icons'; import { LineChart } from '@carbon/charts-react'; -import { formatDate, formatTime, parseDate, ConfigurableLink } from '@openmrs/esm-framework'; +import { formatDate, ConfigurableLink } from '@openmrs/esm-framework'; import { EmptyState, type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib'; import { useObstreeData } from './trendline-resource'; import { testResultsBasePath } from '../helpers'; @@ -71,6 +71,7 @@ const Trendline: React.FC = ({ const { obs, display: chartTitle, hiNormal, lowNormal, units: leftAxisTitle, range: referenceRange } = trendlineData; const bottomAxisTitle = t('date', 'Date'); const [range, setRange] = useState<[Date, Date]>(); + const [showResultsTable, setShowResultsTable] = useState(false); const [upperRange, lowerRange] = useMemo(() => { if (obs.length === 0) { @@ -108,8 +109,7 @@ const Trendline: React.FC = ({ const tableData: Array<{ id: string; - date: string; - time: string; + dateTime: string; value: | number | { @@ -138,8 +138,7 @@ const Trendline: React.FC = ({ tableData.push({ id: `${idx}`, - date: formatDate(parseDate(obs.obsDatetime)), - time: formatTime(parseDate(obs.obsDatetime)), + dateTime: obs.obsDatetime, value: { value: parseFloat(obs.value), interpretation: obs.interpretation, @@ -197,12 +196,8 @@ const Trendline: React.FC = ({ const tableHeaderData = useMemo( () => [ { - header: t('date', 'Date'), - key: 'date', - }, - { - header: t('timeOfTest', 'Time of Test'), - key: 'time', + header: t('dateTime', 'Date and time'), + key: 'dateTime', }, { header: `${t('value', 'Value')} (${leftAxisTitle})`, @@ -235,7 +230,19 @@ const Trendline: React.FC = ({ - + + {showResultsTable ? ( + <> + + + + ) : ( + + )}
); }; diff --git a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss index 252413c228..95b04264f1 100644 --- a/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss +++ b/packages/esm-patient-labs-app/src/test-results/trendline/trendline.scss @@ -86,3 +86,9 @@ .range-tabs :global(.cds--tabs--scrollable__nav-link) { width: 7rem; } + +.tabPanel { + :global(.cds--tab--list) { + width: 100%; + } +} diff --git a/packages/esm-patient-labs-app/translations/en.json b/packages/esm-patient-labs-app/translations/en.json index 9c9bf3935a..7590a896c6 100644 --- a/packages/esm-patient-labs-app/translations/en.json +++ b/packages/esm-patient-labs-app/translations/en.json @@ -15,6 +15,7 @@ "dataTimelineText": "Data timeline", "date": "Date", "dateCollected": "Displaying date collected", + "dateTime": "Date and time", "directlyAddToBasket": "Add to basket", "discard": "Discard", "endDate": "End date", @@ -24,6 +25,7 @@ "female": "Female", "full": "Full", "goToDrugOrderForm": "Order form", + "hideResultsTable": "Hide results table", "labOrders": "Lab orders", "labReferenceNumber": "Lab reference number", "male": "Male", @@ -71,6 +73,7 @@ "searchResultsTextFor_one": "{{count}} search result for {{searchTerm}}", "searchResultsTextFor_other": "{{count}} search results for {{searchTerm}}", "seeAllResults": "See all results", + "showResultsTable": "Show results table", "showTree": "Show tree", "split": "Split", "startDate": "Start date", @@ -80,7 +83,6 @@ "testResultsData": "Test results data", "testType": "Test type", "timeline": "Timeline", - "timeOfTest": "Time of Test", "tree": "Tree", "trend": "Trend", "trendline": "Trendline",