@teselagen/ui 0.10.4 → 0.10.6

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -1,4 +1,4 @@
-import { camelCase, set } from "lodash-es";
+import { camelCase, flatMap, set } from "lodash-es";
 
 export function tableQueryParamsToHasuraClauses({
   page,
@@ -24,42 +24,62 @@ export function tableQueryParamsToHasuraClauses({
     const searchTerms = searchTerm.split(",");
 
     schema.fields.forEach(field => {
-      const { type, path, searchDisabled, isHidden } = field;
-      if (uniqueFieldsByPath[path]) return; // Skip if already added
-      uniqueFieldsByPath[path] = true;
-      if (searchDisabled || field.filterDisabled || type === "color" || isHidden) return;
+      const {
+        type,
+        path,
+        additionalSearchPaths = [],
+        searchDisabled,
+        isHidden
+      } = field;
+      const allPaths = [path, ...additionalSearchPaths];
+      allPaths.forEach(path => {
+        addSearchTermFilters(path);
+      });
 
-      // Process each search term
-      searchTerms.forEach(term => {
-        const filterValue = term.trim(); // Trim the term to handle spaces after commas
+      function addSearchTermFilters(path) {
+        if (uniqueFieldsByPath[path]) return; // Skip if already added
+        uniqueFieldsByPath[path] = true;
+        if (
+          searchDisabled ||
+          field.filterDisabled ||
+          type === "color" ||
+          isHidden ||
+          !path
+        )
+          return;
 
-        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);
+        // 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) {
@@ -72,11 +92,18 @@ export function tableQueryParamsToHasuraClauses({
   }
 
   if (filters && filters.length > 0) {
-    const filterClauses = filters.map(filter => {
+    const filterClauses = flatMap(filters, filter => {
       let { selectedFilter, filterOn, filterValue } = filter;
       const fieldSchema = ccFields[filterOn] || {};
 
-      const { path, reference, type, customColumnFilter } = fieldSchema;
+      const {
+        path,
+        additionalSearchPaths = [],
+        reference,
+        type,
+        customColumnFilter
+      } = fieldSchema;
+
       if (customColumnFilter) {
         return customColumnFilter(filterValue);
       }
@@ -110,121 +137,132 @@ export function tableQueryParamsToHasuraClauses({
 
       if (reference) {
         filterOn = reference.sourceField;
+        return addColumnFilters(filterOn);
       } else {
-        filterOn = path || filterOn;
+        if (path) {
+          const allPaths = [path, ...additionalSearchPaths];
+          return allPaths.map(p => addColumnFilters(p));
+        } else {
+          return addColumnFilters(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
+
+      function addColumnFilters(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 {
+                _not: {
+                  [filterOn.split(".")[0]]: {}
+                }
+              };
+            }
             return {
-              _not: {
-                [filterOn.split(".")[0]]: {}
-              }
+              _or: [
+                { [filterOn]: { _eq: "" } },
+                { [filterOn]: { _is_null: true } }
+              ]
             };
-          }
-          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 "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 "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 "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 "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 {};
+            };
+          case "regex":
+            return { [filterOn]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
       }
     });
 

package/src/DataTable/utils/withTableParams.js

@@ -49,7 +49,6 @@ export const useTableParams = props => {
     orderByFirstColumn,
     pageSize,
     schema,
-    syncDisplayOptionsToDb,
     tableParams: _tableParams,
     urlConnected,
     withDisplayOptions,
@@ -164,13 +163,13 @@ export const useTableParams = props => {
       _tableConfig?.userSetPageSize &&
       parseInt(_tableConfig.userSetPageSize, 10);
     let _defaultsToUse = defaults;
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
+    if (userSetPageSize) {
       _defaultsToUse = _defaultsToUse || {};
       _defaultsToUse.pageSize = userSetPageSize;
     }
 
     return _defaultsToUse;
-  }, [defaults, formName, syncDisplayOptionsToDb]);
+  }, [defaults, formName]);
 
   const passingProps = useMemo(
     () => ({

package/src/DataTable/viewColumn.js

@@ -5,7 +5,6 @@ import { reduce } from "lodash-es";
 export const viewColumn = {
   width: 35,
   noEllipsis: true,
-  hideInMenu: true,
   immovable: true,
   type: "action",
   render: () => {

package/src/TgSelect/index.js

@@ -429,6 +429,8 @@ class TgSelect extends React.Component {
               }
             },
             inputProps: {
+              autoComplete: "off",
+              name: "tg-multiselect-input",
               autoFocus: autoFocus || autoOpen,
               onBlur,
               ...(tagInputProps && tagInputProps.inputProps)

package/ui.css

@@ -9721,7 +9721,11 @@ body:not(.drag-active)
   user-select: none;
   background: #f7f7f7;
 }
-
+/* disable the table header interactions while the table is loading */
+.ReactTable.loading .rt-thead {
+  opacity: 0.7;
+  pointer-events: none;
+}
 .ReactTable .rt-thead {
   box-shadow: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -9889,10 +9893,6 @@ body:not(.drag-active)
   padding-left: 2px;
 }
 
-.ReactTable .-loading.disabled {
-  cursor: not-allowed;
-}
-
 /* to get the height to resize based on its container:  */
 .ReactTable {
   height: 100%;
@@ -10008,14 +10008,6 @@ body:not(.drag-active)
   color: inherit !important;
 }
 
-.bp3-dark .ReactTable .-loading {
-  background: #30404d !important;
-}
-
-.bp3-dark .ReactTable .-loading > div {
-  color: #f5f8fa !important;
-}
-
 .bp3-dark .ReactTable .rt-tr-group.selected {
   background: #26738cb0 !important;
 }
@@ -10074,6 +10066,19 @@ body:not(.drag-active)
   display: flex;
   flex-direction: column;
 }
+.th-dragging {
+  z-index: 999 !important;
+  cursor: grabbing !important;
+  opacity: 0.8;
+  background-color: #f5f8fa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.bp3-dark .th-dragging {
+  background-color: #30404d;
+  box-shadow: 0 2px 8px rgba(250, 245, 245, 0.15);
+  outline: 1px solid #48aff0;
+}
 .dna-loader {
   display: inline-block;
   position: relative;