@teselagen/ui 0.7.33-beta.4 → 0.7.33-beta.6

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -1,3 +1,5 @@
+import { camelCase, set } from "lodash-es";
+
 export function tableQueryParamsToHasuraClauses({
   page,
   pageSize,
@@ -7,6 +9,7 @@ export function tableQueryParamsToHasuraClauses({
   schema, // Add schema as a parameter
   additionalFilter
 }) {
+  const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
   const order_by = {};
   const limit = pageSize || 25;
@@ -20,9 +23,8 @@ export function tableQueryParamsToHasuraClauses({
       const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
 
       if (type === "string" || type === "lookup") {
-        searchTermFilters.push({
-          [path]: { _ilike: `%${filterValue}%` }
-        });
+        const o = set({}, path, { _ilike: `%${filterValue}%` });
+        searchTermFilters.push(o);
       } else if (type === "boolean") {
         let regex;
         try {
@@ -32,22 +34,19 @@ export function tableQueryParamsToHasuraClauses({
         }
         if (regex) {
           if ("true".replace(regex, "") !== "true") {
-            searchTermFilters.push({
-              [path]: { _eq: true }
-            });
+            const o = set({}, path, { _eq: true });
+            searchTermFilters.push(o);
           } else if ("false".replace(regex, "") !== "false") {
-            searchTermFilters.push({
-              [path]: { _eq: false }
-            });
+            const o = set({}, path, { _eq: false });
+            searchTermFilters.push(o);
           }
         }
       } else if (
         (type === "number" || type === "integer") &&
         !isNaN(filterValue)
       ) {
-        searchTermFilters.push({
-          [path]: { _eq: parseFloat(filterValue) }
-        });
+        const o = set({}, path, { _eq: parseFloat(filterValue) });
+        searchTermFilters.push(o);
       }
     });
     if (searchTermFilters.length > 0) {
@@ -60,34 +59,150 @@ export function tableQueryParamsToHasuraClauses({
   }
 
   if (filters && filters.length > 0) {
-    const filterClauses = filters.map(filter => {
-      const { selectedFilter, filterOn, filterValue } = filter;
-      switch (selectedFilter) {
-        case "textContains":
-          return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "textEquals":
-          return { [filterOn]: { _eq: filterValue } };
-        case "textNotEquals":
-          return { [filterOn]: { _neq: filterValue } };
-        case "numberEquals":
-          return { [filterOn]: { _eq: parseFloat(filterValue) } };
-        case "numberGreaterThan":
-          return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "numberLessThan":
-          return { [filterOn]: { _lt: parseFloat(filterValue) } };
-        case "numberGreaterThanEquals":
-          return { [filterOn]: { _gte: parseFloat(filterValue) } };
-        case "numberLessThanEquals":
-          return { [filterOn]: { _lte: parseFloat(filterValue) } };
-        case "isNull":
-          return { [filterOn]: { _is_null: true } };
-        case "isNotNull":
-          return { [filterOn]: { _is_null: false } };
-        default:
-          console.warn(`Unsupported filter type: ${selectedFilter}`);
-          return {};
-      }
-    });
+    const filterClauses = filters
+      .map(filter => {
+        let { selectedFilter, filterOn, filterValue } = filter;
+        const fieldSchema = ccFields[filterOn] || {};
+
+        const { path, reference, type } = fieldSchema;
+        let stringFilterValue =
+          filterValue && filterValue.toString
+            ? filterValue.toString()
+            : filterValue;
+        if (stringFilterValue === false) {
+          // we still want to be able to search for the string "false" which will get parsed to false
+          stringFilterValue = "false";
+        } else {
+          stringFilterValue = stringFilterValue || "";
+        }
+        const arrayFilterValue = Array.isArray(filterValue)
+          ? filterValue
+          : stringFilterValue.split(";");
+
+        if (type === "number" || type === "integer") {
+          filterValue = Array.isArray(filterValue)
+            ? filterValue.map(val => Number(val))
+            : Number(filterValue);
+        }
+
+        if (fieldSchema.normalizeFilter) {
+          filterValue = fieldSchema.normalizeFilter(
+            filterValue,
+            selectedFilter,
+            filterOn
+          );
+        }
+
+        if (reference) {
+          filterOn = reference.sourceField;
+        } else {
+          filterOn = path || filterOn;
+        }
+        switch (selectedFilter) {
+          case "none":
+            return {};
+          case "startsWith":
+            return { [filterOn]: { _ilike: `${filterValue}%` } };
+          case "endsWith":
+            return { [filterOn]: { _ilike: `%${filterValue}` } };
+          case "contains":
+            return { [filterOn]: { _ilike: `%${filterValue}%` } };
+          case "notContains":
+            return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+          case "isExactly":
+            return { [filterOn]: { _eq: filterValue } };
+          case "isEmpty":
+            return {
+              _or: [
+                { [filterOn]: { _eq: "" } },
+                { [filterOn]: { _is_null: true } }
+              ]
+            };
+          case "notEmpty":
+            return {
+              _and: [
+                { [filterOn]: { _neq: "" } },
+                { [filterOn]: { _is_null: false } }
+              ]
+            };
+          case "inList":
+            return { [filterOn]: { _in: filterValue } };
+          case "notInList":
+            return { [filterOn]: { _nin: filterValue } };
+          case "true":
+            return { [filterOn]: { _eq: true } };
+          case "false":
+            return { [filterOn]: { _eq: false } };
+          case "dateIs":
+            return { [filterOn]: { _eq: filterValue } };
+          case "notBetween":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: new Date(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: new Date(
+                      new Date(arrayFilterValue[1]).setHours(23, 59)
+                    )
+                  }
+                }
+              ]
+            };
+          case "isBetween":
+            return {
+              [filterOn]: {
+                _gte: new Date(arrayFilterValue[0]),
+                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+              }
+            };
+          case "isBefore":
+            return { [filterOn]: { _lt: new Date(filterValue) } };
+          case "isAfter":
+            return { [filterOn]: { _gt: new Date(filterValue) } };
+          case "greaterThan":
+            return { [filterOn]: { _gt: parseFloat(filterValue) } };
+          case "lessThan":
+            return { [filterOn]: { _lt: parseFloat(filterValue) } };
+          case "inRange":
+            return {
+              [filterOn]: {
+                _gte: parseFloat(arrayFilterValue[0]),
+                _lte: parseFloat(arrayFilterValue[1])
+              }
+            };
+          case "outsideRange":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: parseFloat(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: parseFloat(arrayFilterValue[1])
+                  }
+                }
+              ]
+            };
+          case "equalTo":
+            return { [filterOn]: { _eq: parseFloat(filterValue) } };
+          case "regex":
+            return { [filterOn]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
+      })
+      .map(filter => {
+        const o = {};
+        set(o, Object.keys(filter)[0], filter[Object.keys(filter)[0]]);
+        return o;
+      });
 
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -111,3 +226,28 @@ export function tableQueryParamsToHasuraClauses({
   }
   return { where, order_by, limit, offset };
 }
+
+/**
+ * Takes a schema and returns an object with the fields mapped by their camelCased display name.
+ * If the displayName is not set or is a jsx element, the path is used instead.
+ * The same conversion must be done when using the result of this method
+ */
+export function getFieldsMappedByCCDisplayName(schema) {
+  if (!schema || !schema.fields) return {};
+  return schema.fields.reduce((acc, field) => {
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
+    return acc;
+  }, {});
+}
+
+/**
+ *
+ * @param {object} field
+ * @returns the camelCase display name of the field, to be used for filters, sorting, etc
+ */
+export function getCCDisplayName(field) {
+  return camelCase(
+    typeof field.displayName === "string" ? field.displayName : field.path
+  );
+}

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.test.js

@@ -98,11 +98,11 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
   });
 
-  it("should handle textContains filter", () => {
+  it("should handle contains filter", () => {
     const result = tableQueryParamsToHasuraClauses({
       filters: [
         {
-          selectedFilter: "textContains",
+          selectedFilter: "contains",
           filterOn: "name",
           filterValue: "test"
         }
@@ -116,25 +116,12 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
   });
 
-  it("should handle textEquals filter", () => {
+  it("should handle equalTo filter for number", () => {
     const result = tableQueryParamsToHasuraClauses({
       filters: [
-        { selectedFilter: "textEquals", filterOn: "name", filterValue: "test" }
-      ]
-    });
-    expect(result).toEqual({
-      where: { _and: [{ name: { _eq: "test" } }] },
-      order_by: {},
-      limit: 25,
-      offset: 0
-    });
-  });
-
-  it("should handle numberEquals filter", () => {
-    const result = tableQueryParamsToHasuraClauses({
-      filters: [
-        { selectedFilter: "numberEquals", filterOn: "age", filterValue: "30" }
-      ]
+        { selectedFilter: "equalTo", filterOn: "age", filterValue: "30" }
+      ],
+      schema
     });
     expect(result).toEqual({
       where: { _and: [{ age: { _eq: 30 } }] },
@@ -161,7 +148,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       searchTerm: "test",
       filters: [
         {
-          selectedFilter: "numberGreaterThan",
+          selectedFilter: "greaterThan",
           filterOn: "age",
           filterValue: "30"
         }
@@ -192,7 +179,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       searchTerm: "test",
       filters: [
         {
-          selectedFilter: "numberGreaterThan",
+          selectedFilter: "greaterThan",
           filterOn: "age",
           filterValue: "30"
         }

package/src/DataTable/utils/withTableParams.js

@@ -6,13 +6,13 @@ import {
   makeDataTableHandlers,
   getQueryParams,
   setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl,
-  getCCDisplayName
+  getCurrentParamsFromUrl
 } from "./queryParams";
 import { withRouter } from "react-router-dom";
 import getTableConfigFromStorage from "./getTableConfigFromStorage";
 import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
 import { branch, compose } from "recompose";
+import { getCCDisplayName } from "./tableQueryParamsToHasuraClauses";
 
 /**
  *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())

package/DataTable/utils/simplifyHasuraWhere.d.ts

@@ -1 +0,0 @@
-export function simplifyHasuraWhere(whereClause: any): {};

package/src/DataTable/utils/simplifyHasuraWhere.js

@@ -1,80 +0,0 @@
-export function simplifyHasuraWhere(whereClause) {
-  const simplifiedWhere = {};
-
-  for (const key in whereClause) {
-    // eslint-disable-next-line no-prototype-builtins
-    if (whereClause.hasOwnProperty(key)) {
-      const value = whereClause[key];
-
-      if (
-        typeof value === "object" &&
-        value !== null &&
-        !Array.isArray(value)
-      ) {
-        if (key.includes(".")) {
-          // Handle dot-nested where clauses
-          const keys = key.split(".");
-          let currentObj = simplifiedWhere;
-          for (let i = 0; i < keys.length - 1; i++) {
-            const nestedKey = keys[i];
-            if (!currentObj[nestedKey]) {
-              currentObj[nestedKey] = {};
-            }
-            currentObj = currentObj[nestedKey];
-          }
-          if (typeof value === "object" && value !== null && "_eq" in value) {
-            currentObj[keys[keys.length - 1]] = value;
-          } else {
-            currentObj[keys[keys.length - 1]] = { _eq: value };
-          }
-        } else {
-          // Handle regular Hasura operators or already nested objects.
-          if (
-            typeof value === "object" &&
-            value !== null &&
-            !("_eq" in value) &&
-            !("_gt" in value) &&
-            !("_lt" in value) &&
-            !("_gte" in value) &&
-            !("_lte" in value) &&
-            !("_in" in value) &&
-            !("_nin" in value) &&
-            !("_neq" in value) &&
-            !("_like" in value) &&
-            !("_nlike" in value) &&
-            !("_ilike" in value) &&
-            !("_nilike" in value) &&
-            !("_similar" in value) &&
-            !("_nsimilar" in value) &&
-            !("_regex" in value) &&
-            !("_nregex" in value) &&
-            !("_iregex" in value) &&
-            !("_niregex" in value)
-          ) {
-            simplifiedWhere[key] = simplifyHasuraWhere(value);
-          } else {
-            simplifiedWhere[key] = value;
-          }
-        }
-      } else {
-        // Handle simplified _eq where clauses
-        if (key.includes(".")) {
-          const keys = key.split(".");
-          let currentObj = simplifiedWhere;
-          for (let i = 0; i < keys.length - 1; i++) {
-            const nestedKey = keys[i];
-            if (!currentObj[nestedKey]) {
-              currentObj[nestedKey] = {};
-            }
-            currentObj = currentObj[nestedKey];
-          }
-          currentObj[keys[keys.length - 1]] = { _eq: value };
-        } else {
-          simplifiedWhere[key] = { _eq: value };
-        }
-      }
-    }
-  }
-
-  return simplifiedWhere;
-}

package/src/DataTable/utils/simplifyHasuraWhere.test.js

@@ -1,73 +0,0 @@
-import { simplifyHasuraWhere } from "./simplifyHasuraWhere";
-
-describe("simplifyHasuraWhere", () => {
-  it("should handle empty where clause", () => {
-    expect(simplifyHasuraWhere({})).toEqual({});
-  });
-
-  it("should simplify simple _eq where clauses", () => {
-    const input = { id: 123, name: "John Doe" };
-    const expected = { id: { _eq: 123 }, name: { _eq: "John Doe" } };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle existing _eq where clauses without simplification", () => {
-    const input = { id: { _eq: 123 }, name: { _eq: "John Doe" } };
-    const expected = { id: { _eq: 123 }, name: { _eq: "John Doe" } };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle other Hasura operators", () => {
-    const input = { age: { _gt: 30 }, isActive: { _eq: true } };
-    const expected = { age: { _gt: 30 }, isActive: { _eq: true } };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle dot-nested where clauses", () => {
-    const input = { "address.city": { _eq: "New York" }, "address.zip": 10001 };
-    const expected = {
-      address: { city: { _eq: "New York" }, zip: { _eq: 10001 } }
-    };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle deeply nested dot-nested where clauses", () => {
-    const input = { "nested.prop.value": { _eq: "test" } };
-    const expected = { nested: { prop: { value: { _eq: "test" } } } };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle a mix of simple, nested, and operator clauses", () => {
-    const input = {
-      id: 123,
-      name: "John Doe",
-      "address.city": { _eq: "New York" },
-      age: { _gt: 30 },
-      "nested.prop.value": { _eq: "test" }
-    };
-    const expected = {
-      id: { _eq: 123 },
-      name: { _eq: "John Doe" },
-      address: { city: { _eq: "New York" } },
-      age: { _gt: 30 },
-      nested: { prop: { value: { _eq: "test" } } }
-    };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-
-  it("should handle already nested objects with operators", () => {
-    const input = {
-      address: {
-        city: { _eq: "London" },
-        country: "UK"
-      }
-    };
-    const expected = {
-      address: {
-        city: { _eq: "London" },
-        country: { _eq: "UK" }
-      }
-    };
-    expect(simplifyHasuraWhere(input)).toEqual(expected);
-  });
-});