@teselagen/ui 0.8.6-beta.5 → 0.8.6-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.5",
+  "version": "0.8.6-beta.7",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -55,7 +55,8 @@
     "chance": "^1.1.11",
     "@dnd-kit/utilities": "3.2.2",
     "@teselagen/file-utils": "0.3.20",
-    "@blueprintjs/icons": "3.33.0"
+    "@blueprintjs/icons": "3.33.0",
+    "jszip": "3.10.1"
   },
   "license": "MIT"
 }

package/src/DataTable/utils/filterLocalEntitiesToHasura.js

@@ -1,3 +1,4 @@
+import {} from "jszip";
 import {
   isEmpty,
   every,
@@ -225,12 +226,27 @@ function applyWhereClause(records, where) {
   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]);
+// takes in an array of records and an order_by clause
+// 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) {
+  const order_by = isArray(_order_by)
+    ? _order_by
+    : isEmpty(_order_by)
+      ? []
+      : [_order_by];
+
+  if (order_by.length > 0) {
+    const fields = [];
+    const directions = [];
+    order_by.forEach(item => {
+      // Hasura-style: { field: "asc" }
+      const field = Object.keys(item)[0];
+      const direction = item[field];
+      fields.push(field);
+      directions.push(direction);
+    });
+    records = orderBy(records, fields, directions);
   }
   return records;
 }

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

@@ -536,7 +536,25 @@ describe("filterLocalEntitiesToHasura", () => {
     expect(result.entitiesAcrossPages).toEqual([records[0], records[2]]);
     expect(result.entityCount).toBe(2);
   });
-
+  it("should order by multiple fields (age asc, name desc)", () => {
+    // Make two of the ages the same for testing secondary sort
+    const modifiedRecords = [
+      records[1], // Jane Smith, age 25
+      { ...records[0], age: 25 }, // John Doe, age 25
+      records[2], // Alice Johnson, age 35
+      records[3] // Bob Williams, age 20
+    ];
+    const result = filterLocalEntitiesToHasura(modifiedRecords, {
+      order_by: [{ age: "asc" }, { name: "desc" }]
+    });
+    expect(result.entities).toEqual([
+      modifiedRecords[3], // age 20, name "Bob Williams"
+      modifiedRecords[1], // age 25, name "John Doe" (name desc)
+      modifiedRecords[0], // age 25, name "Jane Smith"
+      modifiedRecords[2] // age 35, name "Alice Johnson"
+    ]);
+    expect(result.entityCount).toBe(4);
+  });
   it("should apply limit and offset to filtered and ordered results", () => {
     const result = filterLocalEntitiesToHasura(records, {
       where: { city: { _eq: "London" } },

package/src/DataTable/utils/queryParams.js

@@ -244,7 +244,7 @@ export function makeDataTableHandlers({
 
 export function getQueryParams({
   currentParams,
-  // urlConnected,
+  urlConnected,
   defaults,
   schema,
   isInfinite,
@@ -253,98 +253,130 @@ export function getQueryParams({
   additionalFilter,
   doNotCoercePageSize,
   noOrderError,
-  // isCodeModel,
+  isCodeModel,
   ownProps
 }) {
-  Object.keys(currentParams).forEach(function (key) {
-    if (currentParams[key] === undefined) {
-      delete currentParams[key]; //we want to use the default value if any of these are undefined
-    }
-  });
-  const tableQueryParams = {
-    ...defaults,
-    ...currentParams
-  };
-  let { page, pageSize, searchTerm, filters, order } = tableQueryParams;
-  if (page <= 0 || isNaN(page)) {
-    page = undefined;
-  }
-  if (isInfinite) {
-    page = undefined;
-    pageSize = undefined;
-  }
-  if (pageSize !== undefined && !doNotCoercePageSize) {
-    //pageSize might come in as an unexpected number so we coerce it to be one of the nums in our pageSizes array
-    const closest = clone(window.tgPageSizes || defaultPageSizes).sort(
-      (a, b) => Math.abs(pageSize - a) - Math.abs(pageSize - b)
-    )[0];
-    pageSize = closest;
-  }
+  let errorParsingUrlString;
 
-  const cleanedOrder = [];
-  if (order && order.length) {
-    const ccFields = getFieldsMappedByCCDisplayName(schema);
-    order.forEach(orderVal => {
-      const ccDisplayName = orderVal.replace(/^-/gi, "");
-      const schemaForField = ccFields[ccDisplayName];
-      if (schemaForField) {
-        const { path } = schemaForField;
-        const reversed = ccDisplayName !== orderVal;
-        const prefix = reversed ? "-" : "";
-        cleanedOrder.push(prefix + path);
-      } else {
-        !noOrderError &&
-          console.error(
-            "No schema for field found!",
-            ccDisplayName,
-            JSON.stringify(schema.fields, null, 2)
-          );
+  try {
+    Object.keys(currentParams).forEach(function (key) {
+      if (currentParams[key] === undefined) {
+        delete currentParams[key]; //we want to use the default value if any of these are undefined
       }
     });
-  }
+    const tableQueryParams = {
+      ...defaults,
+      ...currentParams
+    };
+    let { page, pageSize, searchTerm, filters, order } = tableQueryParams;
+    if (page <= 0 || isNaN(page)) {
+      page = undefined;
+    }
+    if (isInfinite) {
+      page = undefined;
+      pageSize = undefined;
+    }
+    if (pageSize !== undefined && !doNotCoercePageSize) {
+      //pageSize might come in as an unexpected number so we coerce it to be one of the nums in our pageSizes array
+      const closest = clone(window.tgPageSizes || defaultPageSizes).sort(
+        (a, b) => Math.abs(pageSize - a) - Math.abs(pageSize - b)
+      )[0];
+      pageSize = closest;
+    }
 
-  let toRet = {
-    //these are values that might be generally useful for the wrapped component
-    page,
-    pageSize: ownProps.controlled_pageSize || pageSize,
-    order: cleanedOrder,
-    filters,
-    searchTerm
-  };
+    const cleanedOrder = [];
+    if (order && order.length) {
+      const ccFields = getFieldsMappedByCCDisplayName(schema);
+      order.forEach(orderVal => {
+        const ccDisplayName = orderVal.replace(/^-/gi, "");
+        const schemaForField = ccFields[ccDisplayName];
+        if (schemaForField) {
+          const { path } = schemaForField;
+          const reversed = ccDisplayName !== orderVal;
+          const prefix = reversed ? "-" : "";
+          cleanedOrder.push(prefix + path);
+        } else {
+          !noOrderError &&
+            console.error(
+              "No schema for field found!",
+              ccDisplayName,
+              JSON.stringify(schema.fields, null, 2)
+            );
+        }
+      });
+    }
+    // by default make sort by updated at
+    if (!cleanedOrder.length) {
+      cleanedOrder.push("-updatedAt");
+    }
 
-  const { where, order_by, limit, offset } = tableQueryParamsToHasuraClauses({
-    page,
-    pageSize,
-    searchTerm,
-    filters,
-    order: cleanedOrder,
-    schema
-  });
-  initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
-  addCustomColumnFilters(where, schema.fields, currentParams);
-  if (isLocalCall) {
-    //if the table is local (aka not directly connected to a db) then we need to
-    //handle filtering/paging/sorting all on the front end
-    toRet = {
-      ...toRet,
-      ...filterLocalEntitiesToHasura(entities, {
-        where,
-        order_by,
-        limit,
-        offset,
-        isInfinite
-      })
-    };
-    return toRet;
-  } else {
-    return {
-      ...toRet,
-      variables: {
-        where,
-        order_by,
-        limit,
-        offset
-      }
+    // in case entries that have the same value in the column being sorted on
+    // fall back to id as a secondary sort to make sure ordering happens correctly
+    cleanedOrder.push(isCodeModel ? "code" : window.__sortId || "id");
+
+    let toRet = {
+      //these are values that might be generally useful for the wrapped component
+      page,
+      pageSize: ownProps.controlled_pageSize || pageSize,
+      order: cleanedOrder,
+      filters,
+      searchTerm
     };
+
+    const { where, order_by, limit, offset } = tableQueryParamsToHasuraClauses({
+      page,
+      pageSize,
+      searchTerm,
+      filters,
+      order: cleanedOrder,
+      schema
+    });
+    initializeHasuraWhereAndFilter(additionalFilter, where, currentParams);
+    addCustomColumnFilters(where, schema.fields, currentParams);
+    if (isLocalCall) {
+      //if the table is local (aka not directly connected to a db) then we need to
+      //handle filtering/paging/sorting all on the front end
+      toRet = {
+        ...toRet,
+        ...filterLocalEntitiesToHasura(entities, {
+          where,
+          order_by,
+          limit,
+          offset,
+          isInfinite
+        })
+      };
+      return toRet;
+    } else {
+      return {
+        ...toRet,
+        variables: {
+          where,
+          order_by,
+          limit,
+          offset
+        }
+      };
+    }
+  } catch (e) {
+    if (urlConnected) {
+      errorParsingUrlString = e;
+      console.error(
+        "The following error occurred when trying to build the query params. This is probably due to a malformed URL:",
+        e
+      );
+      return {
+        errorParsingUrlString,
+        variables: {
+          where: {},
+          order_by: [],
+          limit: 0,
+          offset: 0
+        }
+      };
+    } else {
+      console.error("Error building query params from filter:");
+      throw e;
+    }
   }
 }

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -11,7 +11,7 @@ export function tableQueryParamsToHasuraClauses({
 }) {
   const ccFields = getFieldsMappedByCCDisplayName(schema);
   let where = {};
-  const order_by = {};
+  const order_by = [];
   const limit = pageSize || 25;
   const offset = page && pageSize ? (page - 1) * pageSize : 0;
 
@@ -108,7 +108,7 @@ export function tableQueryParamsToHasuraClauses({
           case "contains":
             return { [filterOn]: { _ilike: `%${filterValue}%` } };
           case "notContains":
-            return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+            return { [filterOn]: { _nilike: `%${filterValue}%` } };
           case "isExactly":
             return { [filterOn]: { _eq: filterValue } };
           case "isEmpty":
@@ -224,7 +224,7 @@ export function tableQueryParamsToHasuraClauses({
     order.forEach(item => {
       const field = item.startsWith("-") ? item.substring(1) : item;
       const direction = item.startsWith("-") ? "desc" : "asc";
-      order_by[field] = direction;
+      order_by.push({ [field]: direction });
     });
   }
 

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

@@ -14,7 +14,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({});
     expect(result).toEqual({
       where: {},
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -24,7 +24,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({ page: 2, pageSize: 10 });
     expect(result).toEqual({
       where: {},
-      order_by: {},
+      order_by: [],
       limit: 10,
       offset: 10
     });
@@ -39,7 +39,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -58,7 +58,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%30%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -77,7 +77,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%true%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -92,7 +92,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -110,7 +110,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ name: { _ilike: "%test%" } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -125,7 +125,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ age: { _eq: 30 } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -135,7 +135,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     const result = tableQueryParamsToHasuraClauses({ order: ["name", "-age"] });
     expect(result).toEqual({
       where: {},
-      order_by: { name: "asc", age: "desc" },
+      order_by: [{ name: "asc" }, { age: "desc" }],
       limit: 25,
       offset: 0
     });
@@ -168,7 +168,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: { name: "asc" },
+      order_by: [{ name: "asc" }],
       limit: 10,
       offset: 10
     });
@@ -198,7 +198,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });