diff --git a/packages/esm-patient-labs-app/src/index.ts b/packages/esm-patient-labs-app/src/index.ts index 292640e8c0..d73afd09e1 100644 --- a/packages/esm-patient-labs-app/src/index.ts +++ b/packages/esm-patient-labs-app/src/index.ts @@ -54,3 +54,8 @@ export const addLabOrderWorkspace = getAsyncLifecycle( () => import('./lab-orders/add-lab-order/add-lab-order.workspace'), options, ); + +export const resultsViewerDialog = getAsyncLifecycle( + () => import('./test-results/panel-timeline/results-dialog.comoponent'), + options, +); diff --git a/packages/esm-patient-labs-app/src/routes.json b/packages/esm-patient-labs-app/src/routes.json index 0f76bbc986..8c20bbc486 100644 --- a/packages/esm-patient-labs-app/src/routes.json +++ b/packages/esm-patient-labs-app/src/routes.json @@ -35,6 +35,10 @@ "component": "labOrderPanel", "slot": "order-basket-slot", "order": 2 + }, + { + "name": "results-viewer-dialog", + "component": "resultsViewerDialog" } ], "pages": [], 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 93287df1c9..e0da9e9219 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,11 +1,11 @@ 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'; +import { Button } from '@carbon/react'; export const parseTime: (sortedTimes: Array) => ParsedTimeType = (sortedTimes) => { const yearColumns: Array<{ year: string; size: number }> = [], @@ -116,6 +116,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('results-viewer-dialog', { + 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/results-dialog.comoponent.tsx b/packages/esm-patient-labs-app/src/test-results/panel-timeline/results-dialog.comoponent.tsx new file mode 100644 index 0000000000..054151993a --- /dev/null +++ b/packages/esm-patient-labs-app/src/test-results/panel-timeline/results-dialog.comoponent.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ModalHeader } from '@carbon/react'; +import { ModalBody } from '@carbon/react'; +import Trendline from '../trendline/trendline.component'; +import { basePath } from '@openmrs/esm-patient-chart-app/src/constants'; + +interface ResultsModalProps { + closeDeleteModal: () => void; + patientUuid: string; + title: string; + testUuid: string; + range: any; + units: any; +} + +const ResultsModal: React.FC = ({ closeDeleteModal, patientUuid, testUuid }) => { + return ( +
+ + + + +
+ ); +}; + +export default ResultsModal; 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 3ef5212f1c..744f31348f 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 @@ -198,3 +198,12 @@ .recent-results-grid::-webkit-scrollbar { display: none; } + +.trendline-link-view { + color: #0f62fe; + cursor: pointer; +} + +.trendline-link-view:hover { + text-decoration: underline; +} \ No newline at end of file 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..08da077469 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 @@ -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) { @@ -235,7 +236,19 @@ const Trendline: React.FC = ({ - + + {showResultsTable ? ( + <> + + + + ) : ( + + )}
); }; diff --git a/packages/esm-patient-labs-app/translations/en.json b/packages/esm-patient-labs-app/translations/en.json index dd585b753b..8ce43d1147 100644 --- a/packages/esm-patient-labs-app/translations/en.json +++ b/packages/esm-patient-labs-app/translations/en.json @@ -19,6 +19,7 @@ "female": "Female", "full": "Full", "goToDrugOrderForm": "Order form", + "hideResultsTable": "Hide results table", "labOrders": "Lab orders", "labReferenceNumber": "Lab reference number", "male": "Male", @@ -58,6 +59,7 @@ "searchResultsMatchesForTerm_one": "{{count}} result for \"{{searchTerm}}\"", "searchResultsMatchesForTerm_other": "{{count}} results for \"{{searchTerm}}\"", "seeAllResults": "See all results", + "showResultsTable": "Show results table", "showTree": "Show tree", "split": "Split", "startDate": "Start date",