@openmrs/esm-generic-patient-widgets-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/obs-table/obs-table.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import {
   DataTable,
   Table,
@@ -8,6 +8,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type DataTableSortState,
 } from '@carbon/react';
 import { usePagination, useConfig, formatDatetime, formatDate, formatTime } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
@@ -20,35 +21,77 @@ interface ObsTableProps {
   patientUuid: string;
 }
 
+interface Row {
+  id: string;
+  date: string;
+  rawDate: string;
+  encounter: string;
+  [conceptUuid: string]: string | number;
+}
+
+interface Header {
+  key: string;
+  header: string;
+  sortFunc: (rowA: Row, rowB: Row) => number;
+}
+
 const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObjectSwitchable>();
   const {
     data: { observations, concepts },
   } = useObs(patientUuid);
+
   const uniqueEncounterReferences = [...new Set(observations.map((o) => o.encounter.reference))].sort();
   const obssGroupedByEncounters = uniqueEncounterReferences.map((reference) =>
     observations.filter((o) => o.encounter.reference === reference),
   );
 
-  const tableHeaders = [
-    { key: 'date', header: t('dateAndTime', 'Date and time'), isSortable: true },
-    ...config.data.map(({ concept, label }) => ({
-      key: concept,
-      header: label || concepts.find((c) => c.uuid == concept)?.display,
-    })),
-  ];
-
-  if (config.showEncounterType) {
-    tableHeaders.splice(1, 0, { key: 'encounter', header: t('encounterType', 'Encounter type'), isSortable: true });
-  }
+  const tableHeaders: Array<Header> = useMemo(() => {
+    const headers: Array<Header> = [
+      {
+        key: 'date',
+        header: t('dateAndTime', 'Date and time'),
+        sortFunc: (rowA: Row, rowB: Row) => new Date(rowB.rawDate).getTime() - new Date(rowA.rawDate).getTime(),
+      },
+    ];
+    if (config.showEncounterType) {
+      headers.splice(1, 0, {
+        key: 'encounter',
+        header: t('encounterType', 'Encounter type'),
+        sortFunc: (rowA: Row, rowB: Row) => rowA.encounter.localeCompare(rowB.encounter) as 1 | -1,
+      });
+    }
+    headers.push(
+      ...config.data.map(({ concept, label }) => ({
+        key: concept,
+        header: label || concepts.find((c) => c.uuid == concept)?.display,
+        sortFunc: (rowA: Row, rowB: Row) => {
+          const a = rowA[concept];
+          const b = rowB[concept];
+          if (a === b) {
+            return 0;
+          }
+          if (a == null) {
+            return 1;
+          }
+          if (b == null) {
+            return -1;
+          }
+          return a < b ? 1 : -1;
+        },
+      })),
+    );
+    return headers;
+  }, [t, config.data, config.showEncounterType, concepts]);
 
-  const tableRows = React.useMemo(
+  const tableRows: Array<Row> = React.useMemo(
     () =>
       obssGroupedByEncounters?.map((obss, index) => {
         const rowData = {
           id: `${index}`,
           date: formatDatetime(new Date(obss[0].effectiveDateTime), { mode: 'wide' }),
+          rawDate: obss[0].effectiveDateTime,
           encounter: obss[0].encounter.name,
         };
 
@@ -58,7 +101,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
               rowData[obs.conceptUuid] = obs.valueString;
               break;
 
-            case 'Number': {
+            case 'Numeric': {
               const decimalPlaces: number | undefined = config.data.find(
                 (ele: any) => ele.concept === obs.conceptUuid,
               )?.decimalPlaces;
@@ -100,11 +143,50 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
     [config.data, config?.dateFormat, obssGroupedByEncounters],
   );
 
-  const { results, goTo, currentPage } = usePagination(tableRows, config.table.pageSize);
+  const [sortParams, setSortParams] = useState<{ key: string; sortDirection: 'ASC' | 'DESC' | 'NONE' }>({
+    key: 'date',
+    sortDirection: config.tableSortOldestFirst ? 'ASC' : 'DESC',
+  });
+
+  const handleSorting = useCallback(
+    (cellA: any, cellB: any, { key, sortDirection }: { key: string; sortDirection: DataTableSortState }) => {
+      // Use setTimeout to avoid setState during render
+      setTimeout(() => {
+        if (sortDirection === 'NONE') {
+          setSortParams({ key: '', sortDirection });
+        } else {
+          setSortParams({ key, sortDirection });
+        }
+      }, 0);
+      return 0;
+    },
+    [],
+  );
+
+  const sortedData: Array<any> = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    const header = tableHeaders.find((header) => header.key === sortParams.key);
+
+    if (!header) {
+      return tableRows;
+    }
+
+    const sortedRows = tableRows.slice().sort((rowA, rowB) => {
+      const sortingNum = header.sortFunc(rowA, rowB);
+      return sortParams.sortDirection === 'DESC' ? sortingNum : -sortingNum;
+    });
+
+    return sortedRows;
+  }, [tableHeaders, tableRows, sortParams]);
+
+  const { results, goTo, currentPage } = usePagination(sortedData, config.table.pageSize);
 
   return (
     <div>
-      <DataTable rows={results} headers={tableHeaders} isSortable size="sm" useZebraStyles>
+      <DataTable rows={results} headers={tableHeaders} isSortable sortRow={handleSorting} size="sm" useZebraStyles>
         {({ rows, headers, getHeaderProps, getTableProps }) => (
           <TableContainer>
             <Table {...getTableProps()} className={styles.customRow}>
@@ -137,7 +219,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
       </DataTable>
       <PatientChartPagination
         pageNumber={currentPage}
-        totalItems={tableRows.length}
+        totalItems={sortedData.length}
         currentItems={results.length}
         pageSize={config.table.pageSize}
         onPageNumberChange={({ page }) => goTo(page)}