@teselagen/ui 0.8.6-beta.13 → 0.8.6-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.13",
+  "version": "0.8.6-beta.15",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -17,6 +17,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@teselagen/react-table": "6.10.16",
     "classnames": "^2.3.2",
     "color": "^3.2.1",
     "copy-to-clipboard": "^3.3.1",
@@ -54,8 +55,7 @@
     "chance": "^1.1.11",
     "@dnd-kit/utilities": "3.2.2",
     "@teselagen/file-utils": "0.3.20",
-    "@blueprintjs/icons": "3.33.0",
-    "jszip": "3.10.1"
+    "@blueprintjs/icons": "3.33.0"
   },
   "license": "MIT"
 }

package/src/DataTable/index.js

@@ -92,9 +92,9 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
-  getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
+  getCurrentParamsFromUrl,
   setCurrentParamsOnUrl
 } from "./utils/queryParams";
 import { useColumns } from "./Columns";
@@ -3078,7 +3078,7 @@ const DataTable = ({
                     try {
                       const allEntities = await safeQuery(fragment, {
                         variables: {
-                          filter: variables.filter,
+                          where: variables.where,
                           sort: variables.sort
                         },
                         canCancel: true

package/src/DataTable/utils/filterLocalEntitiesToHasura.js

@@ -1,4 +1,3 @@
-import {} from "jszip";
 import {
   isEmpty,
   every,
@@ -10,7 +9,9 @@ import {
   includes,
   isObject,
   has,
-  orderBy
+  orderBy,
+  endsWith,
+  get
 } from "lodash-es";
 
 export function filterLocalEntitiesToHasura(
@@ -230,8 +231,6 @@ function applyWhereClause(records, where) {
 // order_by looks like this: [{ some_field: "asc" }, { some_other_field: "desc" }] or {some_field: "asc"}
 // returns the records sorted by the order_by clause
 function applyOrderBy(records, _order_by) {
-  // console.log('records start:', records)
-  // console.log('_order_by:', _order_by)
   const order_by = isArray(_order_by)
     ? _order_by
     : isEmpty(_order_by)
@@ -239,53 +238,104 @@ function applyOrderBy(records, _order_by) {
       : [_order_by];
 
   if (order_by.length > 0) {
-    const fields = [];
-    const directions = [];
-    const iteratees = [];
+    const orderFuncs = [];
+    const ascOrDescArray = [];
 
-    order_by.forEach(item => {
-      // Hasura-style: { field: "asc" }
-      const field = Object.keys(item)[0];
-      const direction = item[field];
-      fields.push(field);
-      directions.push(direction);
+    order_by.forEach(
+      ({ path, direction, type, sortFn, getValueToFilterOn, ownProps }) => {
+        // Default direction is "desc" if not specified
+        direction = direction || "desc";
 
-      // Create a custom iteratee function for natural sorting
-      iteratees.push(record => {
-        const value = record[field];
-        // Handle null values based on sort direction
-        if (isNull(value) || value === undefined) {
-          return direction === 'asc' ? -Infinity : -Infinity;
-        }
-        // Use natural sorting only for strings that contain numbers
-        if (isString(value) && /\d/.test(value)) {
-          // Return the value in a format that can be naturally sorted
-          // This effectively creates a sort key that respects natural ordering
-          return value.replace(/(\d+)/g, num => num.padStart(10, "0"));
+        if (sortFn) {
+          // Handle specifically custom sort functions
+          // First make sure we have an array of sort functions
+          const sortFnArray = Array.isArray(sortFn) ? sortFn : [sortFn];
+
+          // For each sort function
+          sortFnArray.forEach(fn => {
+            // First handle null check for this function's values
+            orderFuncs.push(r => {
+              const val = fn(r);
+              return val !== null && val !== undefined ? 1 : 0;
+            });
+            ascOrDescArray.push("desc"); // Always push nulls to the bottom
+
+            // Then the actual sort function
+            orderFuncs.push(fn);
+            ascOrDescArray.push(direction);
+          });
+        } else if (getValueToFilterOn) {
+          // Custom getValue function
+          // First handle null check
+          orderFuncs.push(r => {
+            const val = getValueToFilterOn(r, ownProps);
+            return val !== null && val !== undefined ? 1 : 0;
+          });
+          ascOrDescArray.push("desc"); // Always push nulls to the bottom
+
+          // Then the actual value getter function
+          orderFuncs.push(r => getValueToFilterOn(r, ownProps));
+          ascOrDescArray.push(direction);
+        } else if (type === "timestamp") {
+          // Sort nulls/undefined to the bottom regardless of sort direction
+          orderFuncs.push(r => {
+            const val = get(r, path);
+            // First check if value exists, this ensures nulls go to the bottom
+            return val ? 1 : 0;
+          });
+          ascOrDescArray.push("desc"); // always put nulls at the bottom
+
+          // Then actual timestamp sorting
+          orderFuncs.push(r => {
+            const val = get(r, path);
+            return val ? new Date(val).getTime() : -Infinity;
+          });
+          ascOrDescArray.push(direction);
+        } else if (path && endsWith(path.toLowerCase(), "id")) {
+          // Handle ID fields - sort numerically
+          // First handle null check
+          orderFuncs.push(r => {
+            const val = get(r, path);
+            return val !== null && val !== undefined ? 1 : 0;
+          });
+          ascOrDescArray.push("desc"); // Always push nulls to the bottom
+
+          // Then the actual ID parsing
+          orderFuncs.push(o => {
+            const val = get(o, path);
+            if (val === null || val === undefined) return -Infinity;
+            return parseInt(val, 10) || 0;
+          });
+          ascOrDescArray.push(direction);
+        } else {
+          // Default sorting
+          // First sort by existence (non-nulls first)
+          orderFuncs.push(r => {
+            const val = get(r, path);
+            return val !== null && val !== undefined ? 1 : 0;
+          });
+          ascOrDescArray.push("desc"); // Always put nulls at the bottom
+
+          // Then sort by actual value
+          orderFuncs.push(r => {
+            const val = get(r, path);
+            if (val === null || val === undefined) return -Infinity;
+
+            // For string sorting, implement natural sort
+            if (isString(val)) {
+              return val.toLowerCase().replace(/(\d+)/g, num =>
+                // Pad numbers with leading zeros for proper natural sort
+                num.padStart(10, "0")
+              );
+            }
+            return val;
+          });
+          ascOrDescArray.push(direction);
         }
-        return value;
-      });
-    });
-    
-    // First sort normally
-    let sortedRecords = orderBy(records, iteratees, directions);
-    
-    // Then ensure entries with a value for the field come before entries without a value
-    // for any field sorted in descending order
-    order_by.forEach((item) => {
-      const field = Object.keys(item)[0];
-      const direction = item[field];
-      
-      if (direction === 'desc') {
-        // For descending sorts, we want entries with values to appear before entries without values
-        sortedRecords = [
-          ...sortedRecords.filter(record => !isNull(record[field]) && record[field] !== undefined),
-          ...sortedRecords.filter(record => isNull(record[field]) || record[field] === undefined)
-        ];
       }
-    });
-    
-    records = sortedRecords;
+    );
+
+    records = orderBy(records, orderFuncs, ascOrDescArray);
   }
   return records;
 }