(refactor) O3-3655 Change the behaviour of the results view switchers

openmrs · Sep 10, 2024 · 4e8e6c3 · 4e8e6c3
1 parent 05dc488
commit 4e8e6c3
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/packages/esm-patient-labs-app/src/routes.json b/packages/esm-patient-labs-app/src/routes.json
@@ -11,7 +11,7 @@
       "slot": "patient-chart-dashboard-slot",
       "meta": {
         "slot": "patient-chart-test-results-dashboard-slot",
-        "path": "Results Viewer",
+        "path": "Results",
         "hideDashboardTitle": true
       },
       "order": 4

diff --git a/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts b/packages/esm-patient-labs-app/src/test-results/dashboard.meta.ts
@@ -1,7 +1,7 @@
 export const dashboardMeta = {
   slot: 'patient-chart-test-results-dashboard-slot',
   columns: 1,
-  path: 'Results Viewer',
-  title: 'Results Viewer',
+  path: 'Results',
+  title: 'Results',
   hideDashboardTitle: true,
 };
diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { type TFunction, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -65,6 +65,54 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
   const isExpanded = view === 'full';
   const trendlineView = testUuid && type === 'trendline';
   const responsiveSize = isTablet ? 'lg' : 'md';
+  const headerRef = useRef(null);
+
+  useEffect(() => {
+    const headerElement = headerRef.current;
+
+    if (!headerElement) {
+      const fallbackElement = document.querySelector(`.${styles.resultsHeader}`);
+      if (fallbackElement) {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            if (!entry.isIntersecting) {
+              (fallbackElement as HTMLElement).style.borderBottom = '0px';
+            } else {
+              (fallbackElement as HTMLElement).style.borderBottom = '1px solid #e0e0e0';
+            }
+          },
+          {
+            rootMargin: '0px 0px -80% 0px',
+            threshold: [1],
+          },
+        );
+        observer.observe(fallbackElement);
+      }
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          headerElement.style.borderBottom = '1px solid #e0e0e0';
+        } else {
+          headerElement.style.borderBottom = '0px';
+        }
+      },
+      {
+        rootMargin: '0px 0px -80% 0px',
+        threshold: [1],
+      },
+    );
+
+    observer.observe(headerElement);
+
+    return () => {
+      if (headerElement) {
+        observer.unobserve(headerElement);
+      }
+    };
+  }, []);
 
   const navigateBackFromTrendlineView = useCallback(() => {
     navigate({
@@ -75,7 +123,7 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
   if (isTablet) {
     return (
       <div className={styles.resultsContainer}>
-        <div className={styles.resultsHeader}>
+        <div ref={headerRef} className={styles.resultsHeader}>
           <h4 style={{ flexGrow: 1 }}>{`${t('results', 'Results')} ${
             totalResultsCount ? `(${totalResultsCount})` : ''
           }`}</h4>

diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss
@@ -104,6 +104,7 @@
   grid-template-columns: 1fr 1fr;
   width: max-content;
   justify-content: flex-start;
+  height: 32px;
 }
 
 .trendlineOverlayHeader {