@teselagen/ui 0.10.4 → 0.10.6

package/src/DataTable/index.js

@@ -229,7 +229,6 @@ const DataTable = ({
   const {
     doNotCoercePageSize,
     isInfinite = isSimple && !withPaging,
-    syncDisplayOptionsToDb,
     urlConnected,
     withSelectedEntities
   } = props;
@@ -255,7 +254,7 @@ const DataTable = ({
       _defaults.order = r;
     }
 
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
+    if (userSetPageSize) {
       _defaults.pageSize = userSetPageSize;
     }
 
@@ -266,7 +265,6 @@ const DataTable = ({
     isLocalCall,
     orderByFirstColumn,
     props.defaults,
-    syncDisplayOptionsToDb,
     userSetPageSize
   ]);
 
@@ -393,8 +391,6 @@ const DataTable = ({
     controlled_setPage,
     controlled_setPageSize,
     controlled_total,
-    currentUser,
-    deleteTableConfiguration,
     disabled = false,
     disableSetPageSize,
     doNotShowEmptyRows,
@@ -471,8 +467,6 @@ const DataTable = ({
     tableConfigurations,
     tableName,
     topLeftItems,
-    upsertFieldOption,
-    upsertTableConfiguration,
     variables,
     withCheckboxes = false,
     withDisplayOptions,
@@ -537,11 +531,7 @@ const DataTable = ({
   useEffect(() => {
     if (withDisplayOptions) {
       let newTableConfig = {};
-      if (syncDisplayOptionsToDb) {
-        newTableConfig = tableConfigurations && tableConfigurations[0];
-      } else {
-        newTableConfig = getTableConfigFromStorage(formName);
-      }
+      newTableConfig = getTableConfigFromStorage(formName);
       !noExcessiveCheck &&
         isBeingCalledExcessively({ uniqName: `dt_setTableConfig_${formName}` });
       // if the tableConfig is the same as the newTableConfig, don't update
@@ -564,7 +554,6 @@ const DataTable = ({
     convertedSchema, // If the schema changes we want to take into account the synced tableConfig again
     formName,
     setTableConfig,
-    syncDisplayOptionsToDb,
     tableConfigurations,
     withDisplayOptions,
     noExcessiveCheck
@@ -628,8 +617,7 @@ const DataTable = ({
         if (noValsForField && entities.length) {
           return {
             ...field,
-            isHidden: true,
-            isForcedHidden: true
+            isHidden: true
           };
         } else if (fieldOpt) {
           return {
@@ -697,6 +685,7 @@ const DataTable = ({
     withDisplayOptions,
     recordIdToIsVisibleMap
   ]);
+  const [columns, setColumns] = useState([]);
 
   const {
     moveColumnPersist,
@@ -715,79 +704,45 @@ const DataTable = ({
 
     if (withDisplayOptions) {
       const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
-      if (syncDisplayOptionsToDb) {
-        // sync up to db
-        // There must be a better way to set this variable...
-        let tableConfigurationId;
-        resetDefaultVisibility = function () {
-          tableConfigurationId = tableConfig.id;
-          if (tableConfigurationId) {
-            deleteTableConfiguration(tableConfigurationId);
-          }
-        };
-        updateColumnVisibility = function ({ shouldShow, path }) {
-          if (tableConfigurationId) {
-            const existingFieldOpt = fieldOptsByPath[path] || {};
-            upsertFieldOption({
-              id: existingFieldOpt.id,
-              path,
-              isHidden: !shouldShow,
-              tableConfigurationId
-            });
-          } else {
-            upsertTableConfiguration({
-              userId: currentUser.user.id,
-              formName,
-              fieldOptions: [
-                {
-                  path,
-                  isHidden: !shouldShow
-                }
-              ]
-            });
-          }
-        };
-      } else {
-        const syncStorage = newTableConfig => {
-          setTableConfig(newTableConfig);
-          window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
-        };
 
-        //sync display options with localstorage
-        resetDefaultVisibility = function () {
-          setTableConfig({ fieldOptions: [] });
-          window.localStorage.removeItem(formName);
-        };
-        updateColumnVisibility = function ({ path, paths, shouldShow }) {
-          const newFieldOpts = {
-            ...fieldOptsByPath
-          };
-          const pathsToUse = paths ? paths : [path];
-          pathsToUse.forEach(path => {
-            newFieldOpts[path] = { path, isHidden: !shouldShow };
-          });
-          syncStorage({ ...tableConfig, fieldOptions: toArray(newFieldOpts) });
-        };
-        updateTableDisplayDensity = function (density) {
-          syncStorage({ ...tableConfig, density: density });
-        };
-        persistPageSize = function (pageSize) {
-          syncStorage({ ...tableConfig, userSetPageSize: pageSize });
-        };
-        moveColumnPersist = function ({ oldIndex, newIndex }) {
-          // we might already have an array of the fields [path1, path2, ..etc]
-          const columnOrderings =
-            tableConfig.columnOrderings ||
-            schema.fields.map(({ path }) => path); // columnOrderings is [path1, path2, ..etc]
-          syncStorage({
-            ...tableConfig,
-            columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
-          });
-        };
-        resizePersist = function (newResized) {
-          syncStorage({ ...tableConfig, resized: newResized });
+      const syncStorage = newTableConfig => {
+        setTableConfig(newTableConfig);
+        window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
+      };
+
+      //sync display options with localstorage
+      resetDefaultVisibility = function () {
+        setTableConfig({ fieldOptions: [] });
+        window.localStorage.removeItem(formName);
+      };
+      updateColumnVisibility = function ({ path, paths, shouldShow }) {
+        const newFieldOpts = {
+          ...fieldOptsByPath
         };
-      }
+        const pathsToUse = paths ? paths : [path];
+        pathsToUse.forEach(path => {
+          newFieldOpts[path] = { path, isHidden: !shouldShow };
+        });
+        syncStorage({ ...tableConfig, fieldOptions: toArray(newFieldOpts) });
+      };
+      updateTableDisplayDensity = function (density) {
+        syncStorage({ ...tableConfig, density: density });
+      };
+      persistPageSize = function (pageSize) {
+        syncStorage({ ...tableConfig, userSetPageSize: pageSize });
+      };
+      moveColumnPersist = function ({ oldIndex, newIndex }) {
+        // we might already have an array of the fields [path1, path2, ..etc]
+        const columnOrderings =
+          tableConfig.columnOrderings || columns.map(({ path }) => path); // columnOrderings is [path1, path2, ..etc]
+        syncStorage({
+          ...tableConfig,
+          columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
+        });
+      };
+      resizePersist = function (newResized) {
+        syncStorage({ ...tableConfig, resized: newResized });
+      };
     }
     return {
       moveColumnPersist,
@@ -797,18 +752,7 @@ const DataTable = ({
       updateColumnVisibility,
       updateTableDisplayDensity
     };
-  }, [
-    currentUser?.user?.id,
-    deleteTableConfiguration,
-    formName,
-    setTableConfig,
-    schema.fields,
-    syncDisplayOptionsToDb,
-    tableConfig,
-    upsertFieldOption,
-    upsertTableConfiguration,
-    withDisplayOptions
-  ]);
+  }, [formName, setTableConfig, columns, tableConfig, withDisplayOptions]);
 
   let compact = _compact;
   let extraCompact = _extraCompact;
@@ -1524,7 +1468,6 @@ const DataTable = ({
   );
 
   const { handleKeyDown, handleKeyUp } = useHotkeys(hotKeys);
-  const [columns, setColumns] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
   const [selectingAll, setSelectingAll] = useState(false);
 
@@ -1735,21 +1678,19 @@ const DataTable = ({
     addFilters(additionalFilters);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [additionalFilters]);
-
   useEffect(() => {
-    setColumns(
-      schema.fields
-        ? schema.fields.reduce((col, field, i) => {
-            if (field.isHidden) {
-              return col;
-            }
-            return col.concat({
-              ...field,
-              columnIndex: i
-            });
-          }, [])
-        : []
-    );
+    const newCols = schema.fields
+      ? schema.fields.reduce((columns, field, i) => {
+          if (field.isHidden) {
+            return columns.concat(field);
+          }
+          return columns.concat({
+            ...field,
+            columnIndex: i
+          });
+        }, [])
+      : [];
+    setColumns(newCols);
   }, [schema?.fields]);
 
   const setSelectedIds = useCallback(
@@ -1830,28 +1771,22 @@ const DataTable = ({
   const TheadComponent = useCallback(
     ({ className, style, children }) => {
       const moveColumn = ({ oldIndex, newIndex }) => {
-        let oldStateColumnIndex, newStateColumnIndex;
-        columns.forEach((column, i) => {
-          if (oldIndex === column.columnIndex) oldStateColumnIndex = i;
-          if (newIndex === column.columnIndex) newStateColumnIndex = i;
-        });
         // because it is all handled in state we need
         // to perform the move and update the columnIndices
         // because they are used for the sortable columns
-        const newColumns = arrayMove(
-          columns,
-          oldStateColumnIndex,
-          newStateColumnIndex
-        ).map((column, i) => {
-          return {
-            ...column,
-            columnIndex: i
-          };
-        });
+        const newColumns = arrayMove(columns, oldIndex, newIndex).map(
+          (column, i) => {
+            return {
+              ...column,
+              columnIndex: i
+            };
+          }
+        );
         setColumns(newColumns);
       };
       return (
         <SortableColumns
+          sortedItemsFull={columns.map(c => c.path)}
           className={className}
           style={style}
           moveColumn={moveColumnPersist || moveColumn}
@@ -2761,7 +2696,7 @@ const DataTable = ({
     columns,
     currentParams,
     compact,
-    // withDisplayOptions,
+    withDisplayOptions,
     resetDefaultVisibility,
     editingCellSelectAll,
     entities,
@@ -2825,6 +2760,7 @@ const DataTable = ({
         noVirtual={noVirtual}
         className={classNames({
           isCellEditable,
+          loading: isLoading,
           "tg-table-loading": isLoading,
           "tg-table-disabled": disabled
         })}
@@ -3261,6 +3197,7 @@ const DataTable = ({
                     resetDefaultVisibility={resetDefaultVisibility}
                     updateColumnVisibility={updateColumnVisibility}
                     updateTableDisplayDensity={updateTableDisplayDensity}
+                    moveColumnPersist={moveColumnPersist}
                     showForcedHiddenColumns={showForcedHiddenColumns}
                     setShowForcedHidden={setShowForcedHidden}
                     hasOptionForForcedHidden={

package/src/DataTable/style.css

@@ -253,7 +253,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);
@@ -421,10 +425,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%;
@@ -540,14 +540,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;
 }
@@ -606,3 +598,16 @@ 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;
+}

package/src/DataTable/utils/queryParams.js

@@ -311,10 +311,15 @@ export function getQueryParams({
         const ccDisplayName = orderVal.replace(/^-/gi, "");
         const schemaForField = ccFields[ccDisplayName];
         if (schemaForField) {
-          const { path } = schemaForField;
+          const { path, additionalSearchPaths } = schemaForField;
           const reversed = ccDisplayName !== orderVal;
           const prefix = reversed ? "-" : "";
           cleanedOrder.push(prefix + path);
+          if (additionalSearchPaths && additionalSearchPaths.length) {
+            additionalSearchPaths.forEach(additionalPath => {
+              cleanedOrder.push(prefix + additionalPath);
+            });
+          }
         } else {
           !noOrderError &&
             console.error(