@teselagen/ui 0.8.6 → 0.9.1

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -11,44 +11,57 @@ 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;
 
   if (searchTerm) {
     const searchTermFilters = [];
+    // Create a map to deduplicate fields by path
+    const uniqueFieldsByPath = {};
+
+    // Split the search term by comma to support multi-term searching
+    const searchTerms = searchTerm.split(",");
+
     schema.fields.forEach(field => {
       const { type, path, searchDisabled } = field;
+      if (uniqueFieldsByPath[path]) return; // Skip if already added
+      uniqueFieldsByPath[path] = true;
       if (searchDisabled || field.filterDisabled || type === "color") return;
-      const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
 
-      if (type === "string" || type === "lookup") {
-        const o = set({}, path, { _ilike: `%${filterValue}%` });
-        searchTermFilters.push(o);
-      } else if (type === "boolean") {
-        let regex;
-        try {
-          regex = new RegExp("^" + searchTerm, "ig");
-        } catch (error) {
-          //ignore
-        }
-        if (regex) {
-          if ("true".replace(regex, "") !== "true") {
-            const o = set({}, path, { _eq: true });
-            searchTermFilters.push(o);
-          } else if ("false".replace(regex, "") !== "false") {
-            const o = set({}, path, { _eq: false });
-            searchTermFilters.push(o);
+      // Process each search term
+      searchTerms.forEach(term => {
+        const filterValue = term.trim(); // Trim the term to handle spaces after commas
+
+        if (type === "string" || type === "lookup") {
+          const o = set({}, path, { _ilike: `%${filterValue}%` });
+          searchTermFilters.push(o);
+        } else if (type === "boolean") {
+          let regex;
+          try {
+            regex = new RegExp("^" + filterValue, "ig");
+          } catch (error) {
+            //ignore
+          }
+          if (regex) {
+            if ("true".replace(regex, "") !== "true") {
+              const o = set({}, path, { _eq: true });
+              searchTermFilters.push(o);
+            } else if ("false".replace(regex, "") !== "false") {
+              const o = set({}, path, { _eq: false });
+              searchTermFilters.push(o);
+            }
           }
+        } else if (
+          (type === "number" || type === "integer") &&
+          !isNaN(filterValue)
+        ) {
+          const o = set({}, path, { _eq: parseFloat(filterValue) });
+          searchTermFilters.push(o);
         }
-      } else if (
-        (type === "number" || type === "integer") &&
-        !isNaN(filterValue)
-      ) {
-        const o = set({}, path, { _eq: parseFloat(filterValue) });
-        searchTermFilters.push(o);
-      }
+      });
     });
+
     if (searchTermFilters.length > 0) {
       if (Object.keys(where).length > 0) {
         where = { _and: [where, { _or: searchTermFilters }] };
@@ -59,157 +72,161 @@ export function tableQueryParamsToHasuraClauses({
   }
 
   if (filters && filters.length > 0) {
-    const filterClauses = filters
-      .map(filter => {
-        let { selectedFilter, filterOn, filterValue } = filter;
-        const fieldSchema = ccFields[filterOn] || {};
+    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(";");
+      const { path, reference, type, customColumnFilter } = fieldSchema;
+      if (customColumnFilter) {
+        return customColumnFilter(filterValue);
+      }
+      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 (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 (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":
+      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]: { _nilike: `%${filterValue}%` } };
+        case "isExactly":
+          return { [filterOn]: { _eq: filterValue } };
+        case "isEmpty":
+          if (filterOn.includes(".")) {
+            // if we're filtering on a nested field, like a sequence table with parts.name
+            // we really want to just query on the top level field's existence
             return {
-              [filterOn]: {
-                _gte: new Date(arrayFilterValue[0]),
-                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+              _not: {
+                [filterOn.split(".")[0]]: {}
               }
             };
-          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])
+          }
+          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 "outsideRange":
-            return {
-              _or: [
-                {
-                  [filterOn]: {
-                    _lt: parseFloat(arrayFilterValue[0])
-                  }
-                },
-                {
-                  [filterOn]: {
-                    _gt: parseFloat(arrayFilterValue[1])
-                  }
+            ]
+          };
+        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:
-                  type === "number" || type === "integer"
-                    ? parseFloat(filterValue)
-                    : 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;
-      });
+            ]
+          };
+        case "equalTo":
+          return {
+            [filterOn]: {
+              _eq:
+                type === "number" || type === "integer"
+                  ? parseFloat(filterValue)
+                  : filterValue
+            }
+          };
+        case "regex":
+          return { [filterOn]: { _regex: filterValue } };
+        default:
+          console.warn(`Unsupported filter type: ${selectedFilter}`);
+          return {};
+      }
+    });
 
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -224,7 +241,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,46 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
+  it("should handle searchTerm with string fields with a comma in them", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test,test2",
+      schema
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [
+          { name: { _ilike: "%test%" } },
+          { name: { _ilike: "%test2%" } },
+          { email: { _ilike: "%test%" } },
+          { email: { _ilike: "%test2%" } }
+        ]
+      },
+      order_by: [],
+      limit: 25,
+      offset: 0
+    });
+  });
+  it("should flatten queries with dup paths", () => {
+    const result = tableQueryParamsToHasuraClauses({
+      searchTerm: "test",
+      schema: {
+        fields: [
+          ...schema.fields,
+          { path: "name", type: "string" },
+          { path: "name", type: "string" }
+        ]
+      }
+    });
+    expect(result).toEqual({
+      where: {
+        _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
+      },
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -58,7 +97,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%30%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -77,7 +116,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { email: { _ilike: "%true%" } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -92,7 +131,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
       where: {
         _or: [{ name: { _ilike: "%test%" } }, { email: { _ilike: "%test%" } }]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -110,7 +149,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ name: { _ilike: "%test%" } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -125,7 +164,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
     });
     expect(result).toEqual({
       where: { _and: [{ age: { _eq: 30 } }] },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });
@@ -135,7 +174,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 +207,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: { name: "asc" },
+      order_by: [{ name: "asc" }],
       limit: 10,
       offset: 10
     });
@@ -198,7 +237,7 @@ describe("tableQueryParamsToHasuraClauses", () => {
           { age: { _gt: 30 } }
         ]
       },
-      order_by: {},
+      order_by: [],
       limit: 25,
       offset: 0
     });

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())
@@ -32,7 +32,6 @@ import { branch, compose } from "recompose";
 export const useTableParams = props => {
   const {
     additionalFilter,
-    additionalOrFilter,
     controlled_pageSize,
     defaults: _defaults,
     doNotCoercePageSize,
@@ -166,16 +165,6 @@ export const useTableParams = props => {
   );
 
   const queryParams = useMemo(() => {
-    const additionalFilterToUse =
-      typeof additionalFilter === "function"
-        ? additionalFilter
-        : () => additionalFilter;
-
-    const additionalOrFilterToUse =
-      typeof additionalOrFilter === "function"
-        ? additionalOrFilter
-        : () => additionalOrFilter;
-
     return getQueryParams({
       doNotCoercePageSize,
       currentParams,
@@ -185,8 +174,7 @@ export const useTableParams = props => {
       schema: convertedSchema,
       isInfinite: isInfinite || (isSimple && !withPaging),
       isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
+      additionalFilter,
       noOrderError,
       isCodeModel,
       ownProps: passingProps
@@ -194,7 +182,6 @@ export const useTableParams = props => {
   }, [
     additionalFilter,
     passingProps,
-    additionalOrFilter,
     doNotCoercePageSize,
     currentParams,
     entities,

package/src/ExcelCell.js

@@ -0,0 +1,38 @@
+/* eslint react/jsx-no-bind: 0 */
+import { Popover } from "@blueprintjs/core";
+import React, { useState } from "react";
+
+export default function ExcelCell() {
+  const [v, setV] = useState("");
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  return (
+    <Popover
+      onClose={() => {
+        setIsPopoverOpen(false);
+      }}
+      isOpen={isPopoverOpen}
+      content={<div>Sum</div>}
+    >
+      <div
+        style={{
+          border: "1px solid #ccc",
+          padding: 5,
+          width: 100,
+          height: 30
+        }}
+        contentEditable
+        onInput={e => {
+          const text = e.currentTarget.textContent;
+
+          if (text === "=") {
+            // open a popover
+            setIsPopoverOpen(true);
+          }
+          setV(text);
+        }}
+      >
+        {v}
+      </div>
+    </Popover>
+  );
+}

package/src/FormComponents/Uploader.js

@@ -788,7 +788,11 @@ const Uploader = ({
                     .join(", ")
                 : undefined
             }
-            onDrop={async (_acceptedFiles, rejectedFiles) => {
+            onDrop={async (_acceptedFiles, rejectedFiles, e) => {
+              const parentDropzone = e.target.closest(".tg-dropzone");
+              if (parentDropzone) {
+                parentDropzone.blur();
+              }
               let acceptedFiles = [];
               for (const file of _acceptedFiles) {
                 if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {

package/src/FormComponents/index.js

@@ -114,14 +114,14 @@ function removeUnwantedProps(props) {
 
 const LabelWithTooltipInfo = ({ label, tooltipInfo, labelStyle }) =>
   tooltipInfo ? (
-    <div style={{ display: "flex", alignItems: "center", ...labelStyle }}>
+    <span style={{ display: "flex", alignItems: "center", ...labelStyle }}>
       {label}{" "}
       <InfoHelper
         style={{ marginLeft: "5px", marginTop: "-6px" }}
         size={12}
         content={tooltipInfo}
       />
-    </div>
+    </span>
   ) : (
     label || null
   );