(feat) O3-3660: Show trend results view in a modal (openmrs#1948)

* O3-3660: Show trend results view in a modal * code review * Fixup --------- Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
icrc-jofrancisco · Aug 14, 2024 · 3ca484a · 3ca484a
1 parent 1d1e39c
commit 3ca484a
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 18 deletions.
diff --git a/packages/esm-patient-labs-app/src/constants.ts 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
@@ -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
@@ -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
@@ -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 (
     <div
       className={styles['row-start-cell']}
@@ -124,9 +132,12 @@ export const RowStartCell = ({ title, range, units, shadow = false, testUuid, is
     >
       <span className={styles['trendline-link']}>
         {!isString ? (
-          <ConfigurableLink to={`${testResultsBasePath(`/patient/${patientUuid}/chart`)}/trendline/${testUuid}`}>
+          <span
+            className={styles['trendline-link-view']}
+            onClick={() => launchResultsDialog(patientUuid, title, testUuid)}
+          >
             {title}
-          </ConfigurableLink>
+          </span>
         ) : (
           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
@@ -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<TimelineResultsModalProps> = ({ closeDeleteModal, patientUuid, testUuid }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <ModalHeader title={t('trendline', 'Trendline')} closeModal={closeDeleteModal} />
+      <ModalBody>
+        <Trendline basePath={basePath} conceptUuid={testUuid} patientUuid={patientUuid} />
+      </ModalBody>
+    </div>
+  );
+};
+
+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
@@ -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
@@ -38,7 +38,7 @@ const RangeSelector: React.FC<{ setLowerRange: (lowerRange: Date) => void; upper
 
   return (
     <Tabs selected={6} className={styles['range-tabs']}>
-      <TabList aria-label="Trendline range tabs">
+      <TabList aria-label="Trendline range tabs" className={styles.tabPanel}>
         {ranges.map(([label, onClick], index) => (
           <Tab onClick={onClick} key={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
@@ -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<TrendlineProps> = ({
   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<TrendlineProps> = ({
 
   const tableData: Array<{
     id: string;
-    date: string;
-    time: string;
+    dateTime: string;
     value:
       | number
       | {
@@ -138,8 +138,7 @@ const Trendline: React.FC<TrendlineProps> = ({
 
     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<TrendlineProps> = ({
   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<TrendlineProps> = ({
         <RangeSelector setLowerRange={setLowerRange} upperRange={upperRange} />
         <LineChart data={data} options={chartOptions} />
       </TrendLineBackground>
-      <DrawTable {...{ tableData, tableHeaderData }} />
+
+      {showResultsTable ? (
+        <>
+          <Button className={styles['show-hide-table']} kind="ghost" onClick={() => setShowResultsTable(false)}>
+            {t('hideResultsTable', 'Hide results table')}
+          </Button>
+          <DrawTable {...{ tableData, tableHeaderData }} />
+        </>
+      ) : (
+        <Button className={styles['show-hide-table']} kind="ghost" onClick={() => setShowResultsTable(true)}>
+          {t('showResultsTable', 'Show results table')}
+        </Button>
+      )}
     </div>
   );
 };

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
@@ -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
@@ -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",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const basePath = '/patient/:patientUuid/chart';