From 7b07ff5ada3606c0ea5c474ad1c49bd38b8534ed Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Fri, 20 Oct 2023 23:00:49 +0300
Subject: [PATCH 1/2] (fix) Tweak appearance of flagged vital signs

---
 .../src/vitals/paginated-vitals.component.tsx | 34 +++------
 .../src/vitals/paginated-vitals.scss          | 69 +++++++++----------
 2 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
index 8d11616b40..3db091b130 100644
--- a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import orderBy from 'lodash-es/orderBy';
 import {
   DataTable,
+  DataTableHeader,
+  DataTableRow,
   Table,
   TableCell,
   TableContainer,
@@ -13,12 +15,13 @@ import {
 import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import styles from './paginated-vitals.scss';
+
 interface PaginatedVitalsProps {
   pageSize: number;
   pageUrl: string;
   urlLabel: string;
-  tableRows: Array<Record<string, string>>;
-  tableHeaders: Array<Record<string, string | boolean>>;
+  tableRows: Array<typeof DataTableRow>;
+  tableHeaders: Array<typeof DataTableHeader>;
   isPrinting?: boolean;
 }
 
@@ -31,6 +34,7 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
   isPrinting,
 }) => {
   const isTablet = useLayoutType() === 'tablet';
+
   const StyledTableCell = ({ interpretation, children }: { interpretation: string; children: React.ReactNode }) => {
     switch (interpretation) {
       case 'critically_high':
@@ -62,40 +66,20 @@ const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
       ? orderBy(tableRows, [key], ['desc'])
       : orderBy(tableRows, [key], ['asc']);
 
-  function customSortRow(vitalA, vitalB, { sortDirection, sortStates, ...props }) {
-    const { key } = props;
-    setSortParams({ key, order: sortDirection });
-  }
-
   const { results: paginatedVitals, goTo, currentPage } = usePagination(sortedData, pageSize);
 
   const rows = isPrinting ? sortedData : paginatedVitals;
 
   return (
     <div>
-      <DataTable
-        rows={rows}
-        sortRow={customSortRow}
-        headers={tableHeaders}
-        isSortable
-        size={isTablet ? 'lg' : 'sm'}
-        useZebraStyles
-      >
-        {({ rows, headers, getHeaderProps, getTableProps }) => (
+      <DataTable rows={rows} headers={tableHeaders} size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+        {({ rows, headers, getTableProps }) => (
           <TableContainer>
             <Table {...getTableProps()}>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (
-                    <TableHeader
-                      className={`${styles.productiveHeading01} ${styles.text02}`}
-                      {...getHeaderProps({
-                        header,
-                        isSortable: header.isSortable,
-                      })}
-                    >
-                      {header.header?.content ?? header.header}
-                    </TableHeader>
+                    <TableHeader>{header.header?.content ?? header.header}</TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss
index f1454a0a5b..b115b6ecdc 100644
--- a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss
+++ b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.scss
@@ -4,56 +4,55 @@
 
 td {
   white-space: nowrap;
+}
 
-  &.criticallyLow, &.criticallyHigh, &.low, &.high {
-    td:nth-child(2) {
-      @include type.type-style("heading-compact-01");
-    }
+.criticallyLow, .criticallyHigh, .low, .high {
+  td:nth-child(2) {
+    @include type.type-style("heading-compact-01");
   }
+}
 
-  &.criticallyLow, &.criticallyHigh {
-    outline: 2px solid colors.$red-60;
-    outline-offset: -1px;
-  }
+.criticallyLow, .criticallyHigh {
+  border: 2px solid colors.$red-60 !important;
+}
 
-  &.low, &.high {
-    outline: 1px solid colors.$black-100;
-  }
+.low, .high {
+  border: 1.5px solid colors.$black-100 !important;
+}
 
-  &.criticallyLow {
-    td:nth-child(2)::after {
-      content: " ↓↓";
-    }
+.criticallyLow {
+  td:nth-child(2)::after {
+    content: " ↓↓";
   }
+}
 
-  &.criticallyHigh {
-    td:nth-child(2)::after {
-      content: " ↑↑";
-    }
+.criticallyHigh {
+  td:nth-child(2)::after {
+    content: " ↑↑";
   }
+}
 
-  &.low {
-    td:nth-child(2)::after {
-      content: " ↓";
-    }
+.low {
+  td:nth-child(2)::after {
+    content: " ↓";
   }
+}
 
-  &.high {
-    td:nth-child(2)::after {
-      content: " ↑";
-    }
+.high {
+  td:nth-child(2)::after {
+    content: " ↑";
   }
+}
 
-  &.off-scale-low {
-    td:nth-child(2)::after {
-      content: " ↓↓↓";
-    }
+.off-scale-low {
+  td:nth-child(2)::after {
+    content: " ↓↓↓";
   }
+}
 
-  &.off-scale-high {
-    td:nth-child(2)::after {
-      content: " ↑↑↑";
-    }
+.off-scale-high {
+  td:nth-child(2)::after {
+    content: " ↑↑↑";
   }
 }
 

From 6eed1a48fc03eb189d17aafe31c49a59d8d1af93 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Sat, 21 Oct 2023 00:08:03 +0300
Subject: [PATCH 2/2] ts-ignore unrecognized types

---
 .../src/vitals/paginated-vitals.component.tsx                   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
index 3db091b130..6a5f412360 100644
--- a/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
+++ b/packages/esm-patient-vitals-app/src/vitals/paginated-vitals.component.tsx
@@ -20,7 +20,9 @@ interface PaginatedVitalsProps {
   pageSize: number;
   pageUrl: string;
   urlLabel: string;
+  // @ts-ignore
   tableRows: Array<typeof DataTableRow>;
+  // @ts-ignore
   tableHeaders: Array<typeof DataTableHeader>;
   isPrinting?: boolean;
 }