@teselagen/ui 0.8.5 → 0.8.6-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.5",
+  "version": "0.8.6-beta.3",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/DataTable/Columns.js

@@ -33,10 +33,10 @@ import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
-import { getCCDisplayName } from "./utils/queryParams";
 import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 dayjs.extend(localizedFormat);
 
@@ -104,7 +104,7 @@ const RenderColumnHeader = ({
   if (order && order.length) {
     order.forEach(order => {
       const orderField = order.replace("-", "");
-      if (orderField === ccDisplayName) {
+      if (orderField === path) {
         if (orderField === order) {
           ordering = "asc";
         } else {

package/src/DataTable/DisplayOptions.js

@@ -10,7 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/queryParams";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 const DisplayOptions = ({
   compact,

package/src/DataTable/FilterAndSortMenu.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase } from "lodash-es";
+import { camelCase, startCase } from "lodash-es";
 import classNames from "classnames";
 import {
   Menu,
@@ -349,43 +349,40 @@ function getFilterMenuItems(dataType) {
   let filterMenuItems = [];
   if (dataType === "string") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex",
-      "In List",
-      "Not In List",
-      "Is Empty",
-      "Not Empty"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex",
+      "inList",
+      "notInList",
+      "isEmpty",
+      "notEmpty"
     ];
   } else if (dataType === "lookup") {
     filterMenuItems = [
-      "Contains",
-      "Not Contains",
-      "Starts With",
-      "Ends With",
-      "Is Exactly",
-      "Regex"
+      "contains",
+      "notContains",
+      "startsWith",
+      "endsWith",
+      "isExactly",
+      "regex"
     ];
   } else if (dataType === "boolean") {
-    filterMenuItems = ["True", "False"];
+    filterMenuItems = ["true", "false"];
   } else if (dataType === "number" || dataType === "integer") {
-    // else if (dataType === "lookup") {
-    //   filterMenuItems = ["None"];
-    // }
     filterMenuItems = [
-      "Greater Than",
-      "Less Than",
-      "In Range",
-      "Outside Range",
-      "Equal To",
-      "In List",
-      "Not In List"
+      "greaterThan",
+      "lessThan",
+      "inRange",
+      "outsideRange",
+      "equalTo",
+      "inList",
+      "notInList"
     ];
   } else if (dataType === "timestamp") {
-    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
   }
-  return filterMenuItems;
+  return filterMenuItems.map(item => startCase(item));
 }

package/src/DataTable/index.js

@@ -92,7 +92,6 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
-  getCCDisplayName,
   getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
@@ -103,6 +102,7 @@ import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
 import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -337,16 +337,6 @@ const DataTable = ({
 
   const queryParams = useMemo(() => {
     if (!isTableParamsConnected) {
-      const additionalFilterToUse =
-        typeof props.additionalFilter === "function"
-          ? props.additionalFilter
-          : () => props.additionalFilter;
-
-      const additionalOrFilterToUse =
-        typeof props.additionalOrFilter === "function"
-          ? props.additionalOrFilter
-          : () => props.additionalOrFilter;
-
       return getQueryParams({
         doNotCoercePageSize,
         currentParams,
@@ -356,8 +346,7 @@ const DataTable = ({
         schema: convertedSchema,
         isInfinite,
         isLocalCall,
-        additionalFilter: additionalFilterToUse,
-        additionalOrFilter: additionalOrFilterToUse,
+        additionalFilter: props.additionalFilter,
         noOrderError: props.noOrderError,
         isCodeModel: props.isCodeModel,
         ownProps: props
@@ -614,7 +603,7 @@ const DataTable = ({
                 : !val;
           });
         }
-        if (noValsForField) {
+        if (noValsForField && entities.length) {
           return {
             ...field,
             isHidden: true,

package/src/DataTable/style.css

@@ -246,7 +246,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ReactTable {

package/src/DataTable/utils/filterLocalEntitiesToHasura.js

@@ -0,0 +1,236 @@
+import {
+  isEmpty,
+  every,
+  some,
+  isEqual,
+  isString,
+  isNull,
+  isArray,
+  includes,
+  isObject,
+  has,
+  orderBy
+} from "lodash-es";
+
+export function filterLocalEntitiesToHasura(
+  records,
+  { where, order_by, limit, offset, isInfinite } = {}
+) {
+  let filteredRecords = [...records];
+
+  // Apply where clause if it exists
+  if (where) {
+    filteredRecords = applyWhereClause(filteredRecords, where);
+  }
+
+  // Apply order_by if it exists
+  if (order_by) {
+    filteredRecords = applyOrderBy(filteredRecords, order_by);
+  }
+
+  // Store the complete filtered and ordered records for pagination info
+  const allFilteredRecords = [...filteredRecords];
+
+  // Apply limit and offset
+  if (!isInfinite && offset !== undefined) {
+    filteredRecords = filteredRecords.slice(offset);
+  }
+
+  if (!isInfinite && limit !== undefined) {
+    filteredRecords = filteredRecords.slice(0, limit);
+  }
+
+  // For consistency, always return an object with entities, entitiesAcrossPages, and entityCount
+  return {
+    entities: filteredRecords,
+    entitiesAcrossPages: allFilteredRecords,
+    entityCount: allFilteredRecords.length
+  };
+}
+
+function applyWhereClause(records, where) {
+  function applyFilter(record, filter) {
+    if (isEmpty(filter)) {
+      return true; // No filter, all records pass
+    }
+
+    for (const key in filter) {
+      if (key === "_and") {
+        if (isEmpty(filter[key])) {
+          continue;
+        }
+        if (!every(filter[key], subFilter => applyFilter(record, subFilter))) {
+          return false;
+        }
+      } else if (key === "_or") {
+        if (isEmpty(filter[key])) {
+          continue;
+        }
+        if (!some(filter[key], subFilter => applyFilter(record, subFilter))) {
+          return false;
+        }
+      } else if (key === "_not") {
+        if (applyFilter(record, filter[key])) {
+          return false;
+        }
+      } else {
+        const value = record[key];
+        const conditions = filter[key];
+
+        // Handle nested object properties
+        if (
+          isObject(value) &&
+          isObject(conditions) &&
+          !hasOperator(conditions)
+        ) {
+          return applyFilter(value, conditions);
+        }
+
+        for (const operator in conditions) {
+          const conditionValue = conditions[operator];
+
+          // Handle range conditions (_gt/_lt or _gte/_lte combinations)
+          if (operator === "_gt" && conditions._lt) {
+            if (!(value > conditionValue && value < conditions._lt))
+              return false;
+            continue;
+          }
+          if (operator === "_gte" && conditions._lte) {
+            if (!(value >= conditionValue && value <= conditions._lte))
+              return false;
+            continue;
+          }
+
+          switch (operator) {
+            case "_eq":
+              if (!isEqual(value, conditionValue)) return false;
+              break;
+            case "_neq":
+              if (isEqual(value, conditionValue)) return false;
+              break;
+            case "_gt":
+              if (!(value > conditionValue)) return false;
+              break;
+            case "_gte":
+              if (!(value >= conditionValue)) return false;
+              break;
+            case "_lt":
+              if (!(value < conditionValue)) return false;
+              break;
+            case "_lte":
+              if (!(value <= conditionValue)) return false;
+              break;
+            case "_like":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            case "_ilike":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
+              )
+                return false;
+              break;
+            case "_nlike":
+              if (
+                !isString(value) ||
+                new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            case "_nilike":
+              if (
+                !isString(value) ||
+                new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
+              )
+                return false;
+              break;
+            case "_starts_with":
+              if (!isString(value) || !value.startsWith(conditionValue))
+                return false;
+              break;
+            case "_ends_with":
+              if (!isString(value) || !value.endsWith(conditionValue))
+                return false;
+              break;
+            case "_is_null":
+              if (
+                (conditionValue && !isNull(value)) ||
+                (!conditionValue && isNull(value))
+              )
+                return false;
+              break;
+            case "_contains":
+              if (
+                !isArray(value) ||
+                !every(conditionValue, item => includes(value, item))
+              )
+                return false;
+              break;
+            case "_contained_in":
+              if (
+                !isArray(value) ||
+                !every(value, item => includes(conditionValue, item))
+              )
+                return false;
+              break;
+            case "_has_key":
+              if (!isObject(value) || !has(value, conditionValue)) return false;
+              break;
+            case "_has_keys_any":
+              if (
+                !isObject(value) ||
+                !some(conditionValue, item => has(value, item))
+              )
+                return false;
+              break;
+            case "_has_keys_all":
+              if (
+                !isObject(value) ||
+                !every(conditionValue, item => has(value, item))
+              )
+                return false;
+              break;
+            case "_similar":
+              if (
+                !isString(value) ||
+                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
+              )
+                return false;
+              break;
+            default:
+              if (operator.startsWith("_")) {
+                console.warn(`Unsupported operator: ${operator}`);
+                return false;
+              } else {
+                console.warn(`Unsupported operator: ${operator}`);
+                return false;
+              }
+          }
+        }
+      }
+    }
+
+    return true;
+  }
+
+  // Helper to check if an object contains any Hasura operators
+  function hasOperator(obj) {
+    return Object.keys(obj).some(key => key.startsWith("_"));
+  }
+
+  return records.filter(record => applyFilter(record, where));
+}
+
+function applyOrderBy(records, order_by) {
+  const keys = Object.keys(order_by);
+  if (keys.length > 0) {
+    const field = keys[0];
+    const direction = order_by[field] === "asc" ? "asc" : "desc";
+    return orderBy(records, [field], [direction]);
+  }
+  return records;
+}