@teselagen/ui 0.5.21 → 0.5.23-beta.1

package/src/DataTable/utils/getIdOrCodeOrIndex.js

@@ -1,4 +1,4 @@
-export default (record, rowIndex) => {
+export const getIdOrCodeOrIndex = (record, rowIndex) => {
   if (record.id || record.id === 0) {
     return record.id;
   } else if (record.code) {

package/src/DataTable/utils/handleCopyTable.js

@@ -0,0 +1,16 @@
+import { getAllRows } from "./getAllRows";
+import { handleCopyRows } from "./handleCopyRows";
+
+export const handleCopyTable = (e, opts) => {
+  try {
+    const allRowEls = getAllRows(e);
+    if (!allRowEls) return;
+    handleCopyRows(allRowEls, {
+      ...opts,
+      onFinishMsg: "Table Copied"
+    });
+  } catch (error) {
+    console.error(`error:`, error);
+    window.toastr.error("Error copying rows.");
+  }
+};

package/src/DataTable/utils/index.js

@@ -2,7 +2,6 @@ import { isEntityClean } from "./isEntityClean";
 import { getSelectedRowsFromEntities } from "./selection";
 import { removeCleanRows } from "./removeCleanRows";
 import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
-import computePresets from "./computePresets";
 import { getRecordsFromIdMap } from "./withSelectedEntities";
 import { formatPasteData } from "./formatPasteData";
 import { getFieldPathToField } from "./getFieldPathToField";
@@ -23,9 +22,11 @@ import { handleCopyHelper } from "./handleCopyHelper";
 import { handleCopyRows } from "./handleCopyRows";
 import { handleCopyColumn } from "./handleCopyColumn";
 import { isBottomRightCornerOfRectangle } from "./isBottomRightCornerOfRectangle";
+import { handleCopyTable } from "./handleCopyTable";
+import { PRIMARY_SELECTED_VAL } from "./primarySelectedValue";
+import { useDeepEqualMemo } from "./useDeepEqualMemo";
 
 export {
-  computePresets,
   defaultParsePaste,
   formatPasteData,
   getAllRows,
@@ -44,8 +45,11 @@ export {
   handleCopyColumn,
   handleCopyHelper,
   handleCopyRows,
+  handleCopyTable,
   isBottomRightCornerOfRectangle,
   isEntityClean,
+  PRIMARY_SELECTED_VAL,
   removeCleanRows,
-  stripNumberAtEnd
+  stripNumberAtEnd,
+  useDeepEqualMemo
 };

package/src/DataTable/utils/primarySelectedValue.js

@@ -0,0 +1 @@
+export const PRIMARY_SELECTED_VAL = "main_cell";

package/src/DataTable/utils/queryParams.js

@@ -39,7 +39,7 @@ export function getMergedOpts(topLevel = {}, instanceLevel = {}) {
         //filters look like this:
         // {
         //   selectedFilter: 'textContains', //camel case
-        //   filterOn: ccDisplayName, //camel case display name
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
         //   filterValue: 'thomas',
         // }
       ],
@@ -63,9 +63,27 @@ function safeParse(val) {
     return val;
   }
 }
+
+/**
+ *
+ * @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
+  );
+}
+
+/**
+ * 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
+ */
 function getFieldsMappedByCCDisplayName(schema) {
   return schema.fields.reduce((acc, field) => {
-    acc[camelCase(field.displayName || field.path)] = field;
+    const ccDisplayName = getCCDisplayName(field);
+    acc[ccDisplayName] = field;
     return acc;
   }, {});
 }
@@ -75,14 +93,14 @@ function orderEntitiesLocal(orderArray, entities, schema, ownProps) {
     const orderFuncs = [];
     const ascOrDescArray = [];
     orderArray.forEach(order => {
-      const ccDisplayName = order.replace(/^-/gi, "");
+      const ccDisplayName = order.replace(/^-/gi, ""); // "-updatedAt" => "updatedAt"
       const ccFields = getFieldsMappedByCCDisplayName(schema);
       const field = ccFields[ccDisplayName];
       if (!field) {
         throw new Error(
           "Ruh roh, there should have been a column to sort on for " +
             order +
-            "but none was found in " +
+            " but none was found in " +
             schema.fields
         );
       }
@@ -234,14 +252,14 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
       isSearchTermFilter: true
     };
     schema.fields.forEach(field => {
-      const { type, displayName, path, searchDisabled } = field;
+      const { type, searchDisabled } = field;
       if (searchDisabled || field.filterDisabled || type === "color") return;
-      const nameToUse = camelCase(displayName || path);
+      const ccDisplayName = getCCDisplayName(field);
       const filterValue = cleanFilterValue(searchTerm, type);
       if (type === "string" || type === "lookup") {
         searchTermFilters.push({
           ...sharedFields,
-          filterOn: nameToUse,
+          filterOn: ccDisplayName,
           filterValue: searchTerm,
           selectedFilter: "contains"
         });
@@ -256,14 +274,14 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
           if ("true".replace(regex, "") !== "true") {
             searchTermFilters.push({
               ...sharedFields,
-              filterOn: nameToUse,
+              filterOn: ccDisplayName,
               filterValue: true,
               selectedFilter: "true"
             });
           } else if ("false".replace(regex, "") !== "false") {
             searchTermFilters.push({
               ...sharedFields,
-              filterOn: nameToUse,
+              filterOn: ccDisplayName,
               filterValue: false,
               selectedFilter: "false"
             });
@@ -278,7 +296,7 @@ function getFiltersFromSearchTerm(searchTerm, schema) {
         }
         searchTermFilters.push({
           ...sharedFields,
-          filterOn: nameToUse,
+          filterOn: ccDisplayName,
           filterValue: filterValue,
           selectedFilter: "equalTo"
         });
@@ -347,7 +365,13 @@ function getSubFilter(
           if (!fieldVal?.toString) return false;
           return (
             arrayFilterValue
-              .map(val => val && val.toLowerCase())
+              .map(val => {
+                if (val) {
+                  if (val.toString) return val.toString().toLowerCase();
+                  return val.toLowerCase();
+                }
+                return undefined;
+              })
               .indexOf(fieldVal.toString().toLowerCase()) > -1
           );
         };
@@ -359,7 +383,13 @@ function getSubFilter(
           if (!fieldVal?.toString) return false;
           return (
             arrayFilterValue
-              .map(val => val && val.toLowerCase())
+              .map(val => {
+                if (val) {
+                  if (val.toString) return val.toString().toLowerCase();
+                  return val.toLowerCase();
+                }
+                return undefined;
+              })
               .indexOf(fieldVal.toString().toLowerCase()) === -1
           );
         };
@@ -859,7 +889,6 @@ export function getQueryParams({
           }));
         });
       };
-
       const orFiltersObject = getQueries(orFilters, qb, ccFields);
       let allOrFilters = flattenFilters(orFiltersObject);
 

package/src/DataTable/utils/removeCleanRows.js

@@ -1,9 +1,9 @@
 import { isEntityClean } from "./isEntityClean";
 import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 
-export const removeCleanRows = (reduxFormEntities, reduxFormCellValidation) => {
+export const removeCleanRows = (entities, cellValidation) => {
   const toFilterOut = {};
-  const entsToUse = (reduxFormEntities || []).filter(e => {
+  const entsToUse = (entities || []).filter(e => {
     if (!(e._isClean || isEntityClean(e))) return true;
     else {
       toFilterOut[getIdOrCodeOrIndex(e)] = true;
@@ -12,7 +12,7 @@ export const removeCleanRows = (reduxFormEntities, reduxFormCellValidation) => {
   });
 
   const validationToUse = {};
-  Object.entries(reduxFormCellValidation || {}).forEach(([k, v]) => {
+  Object.entries(cellValidation || {}).forEach(([k, v]) => {
     const [rowId] = k.split(":");
     if (!toFilterOut[rowId]) {
       validationToUse[k] = v;

package/src/DataTable/utils/rowClick.js

@@ -1,17 +1,27 @@
 import { isEmpty, forEach, range } from "lodash-es";
 import { getSelectedRowsFromEntities } from "./selection";
-import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 import { getRecordsFromIdMap } from "./withSelectedEntities";
 
-export default function rowClick(e, rowInfo, entities, props) {
-  const {
+export default function rowClick(
+  e,
+  rowInfo,
+  entities,
+  {
     reduxFormSelectedEntityIdMap,
     isSingleSelect,
     noSelect,
     onRowClick,
     isEntityDisabled,
-    withCheckboxes
-  } = props;
+    withCheckboxes,
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    change
+  }
+) {
   const entity = rowInfo.original;
   onRowClick(e, entity, rowInfo);
   if (noSelect || isEntityDisabled(entity)) return;
@@ -101,7 +111,19 @@ export default function rowClick(e, rowInfo, entities, props) {
     }
   }
 
-  finalizeSelection({ idMap: newIdMap, entities, props });
+  finalizeSelection({
+    idMap: newIdMap,
+    entities,
+    props: {
+      onDeselect,
+      onSingleRowSelect,
+      onMultiRowSelect,
+      noDeselectAll,
+      onRowSelect,
+      noSelect,
+      change
+    }
+  });
 }
 
 export function changeSelectedEntities({ idMap, entities = [], change }) {
@@ -124,8 +146,10 @@ export function changeSelectedEntities({ idMap, entities = [], change }) {
   change("reduxFormSelectedEntityIdMap", newIdMap);
 }
 
-export function finalizeSelection({ idMap, entities, props }) {
-  const {
+export function finalizeSelection({
+  idMap,
+  entities,
+  props: {
     onDeselect,
     onSingleRowSelect,
     onMultiRowSelect,
@@ -133,7 +157,8 @@ export function finalizeSelection({ idMap, entities, props }) {
     onRowSelect,
     noSelect,
     change
-  } = props;
+  }
+}) {
   if (noSelect) return;
   if (
     noDeselectAll &&

package/src/DataTable/utils/selection.js

@@ -1,4 +1,4 @@
-import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
 
 export const getSelectedRowsFromEntities = (entities, idMap) => {
   if (!idMap) return [];

package/src/DataTable/utils/useDeepEqualMemo.js

@@ -0,0 +1,10 @@
+import { isEqual } from "lodash-es";
+import { useRef } from "react";
+
+export const useDeepEqualMemo = value => {
+  const ref = useRef();
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+};

package/src/DataTable/utils/useTableParams.js

@@ -0,0 +1,361 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { change } from "redux-form";
+import { useDispatch, useSelector } from "react-redux";
+import { isFunction, keyBy, get } from "lodash-es";
+import TableFormTrackerContext from "../TableFormTrackerContext";
+import { viewColumn, openColumn } from "./viewColumn";
+import convertSchema from "./convertSchema";
+import { getRecordsFromIdMap } from "./withSelectedEntities";
+import {
+  makeDataTableHandlers,
+  getQueryParams,
+  setCurrentParamsOnUrl,
+  getCurrentParamsFromUrl,
+  getCCDisplayName
+} from "./queryParams";
+import getTableConfigFromStorage from "./getTableConfigFromStorage";
+
+/*
+NOTE:
+This haven't been tested yet. It is the first version of what we should replace withTableParams
+and also the first bit of the DataTable.
+*/
+
+/**
+ *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
+ *
+ * @export
+ *
+ * @param {compOrOpts} compOrOpts
+ * @typedef {object} compOrOpts
+ * @property {*string} formName - required unique identifier for the table
+ * @property {Object | Function} schema - The data table schema or a function returning it. The function wll be called with props as the argument.
+ * @property {boolean} urlConnected - whether the table should connect to/update the URL
+ * @property {boolean} withSelectedEntities - whether or not to pass the selected entities
+ * @property {boolean} isCodeModel - whether the model is keyed by code instead of id in the db
+ * @property {object} defaults - tableParam defaults such as pageSize, filter, etc
+ * @property {boolean} noOrderError - won't console an error if an order is not found on schema
+ */
+export default function useTableParams(
+  props // This should be the same as the spread above
+) {
+  const {
+    formName,
+    isTableParamsConnected,
+    urlConnected,
+    onlyOneFilter,
+    defaults = {},
+    // WE NEED THIS HOOK TO BE WRAPPED IN A WITHROUTER OR  MOVE TO REACT-ROUTER-DOM 5
+    // BEST SOLUTION IS TO ASSUME IT IS GOING TO BE RECEIVED
+    history,
+    withSelectedEntities,
+    tableParams: _tableParams,
+    schema: __schema,
+    noForm,
+    orderByFirstColumn,
+    withDisplayOptions,
+    syncDisplayOptionsToDb,
+    tableConfigurations,
+    isViewable,
+    isOpenable,
+    showEmptyColumnsByDefault,
+    isSimple,
+    entities: _origEntities = [],
+    cellRenderer,
+    additionalFilter,
+    additionalOrFilter,
+    doNotCoercePageSize,
+    isLocalCall
+  } = props;
+  const isInfinite = props.isInfinite || isSimple || !props.withPaging;
+  const additionalFilterToUse =
+    typeof additionalFilter === "function"
+      ? additionalFilter.bind(this, props)
+      : () => additionalFilter;
+
+  const additionalOrFilterToUse =
+    typeof additionalOrFilter === "function"
+      ? additionalOrFilter.bind(this, props)
+      : () => additionalOrFilter;
+
+  let _schema;
+  if (isFunction(__schema)) _schema = __schema(props);
+  else _schema = __schema;
+  const convertedSchema = convertSchema(_schema);
+
+  if (isLocalCall) {
+    if (!noForm && (!formName || formName === "tgDataTable")) {
+      throw new Error(
+        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
+        _schema
+      );
+    }
+    if (orderByFirstColumn && !defaults?.order?.length) {
+      const r = [getCCDisplayName(convertedSchema.fields[0])];
+      defaults.order = r;
+    }
+  } else {
+    //in user instantiated withTableParams() call
+    if (!formName || formName === "tgDataTable") {
+      throw new Error(
+        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
+        _schema
+      );
+    }
+  }
+
+  const [showForcedHiddenColumns, setShowForcedHidden] = useState(() => {
+    if (showEmptyColumnsByDefault) {
+      return true;
+    }
+    return false;
+  });
+
+  const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
+
+  useEffect(() => {
+    let newTableConfig = {};
+    if (withDisplayOptions) {
+      if (syncDisplayOptionsToDb) {
+        newTableConfig = tableConfigurations && tableConfigurations[0];
+      } else {
+        newTableConfig = getTableConfigFromStorage(formName);
+      }
+      if (!newTableConfig) {
+        newTableConfig = {
+          fieldOptions: []
+        };
+      }
+    }
+    setTableConfig(newTableConfig);
+  }, [
+    formName,
+    syncDisplayOptionsToDb,
+    tableConfigurations,
+    withDisplayOptions
+  ]);
+
+  // make user set page size persist
+  const userSetPageSize =
+    tableConfig?.userSetPageSize && parseInt(tableConfig.userSetPageSize, 10);
+  if (!syncDisplayOptionsToDb && userSetPageSize) {
+    defaults.pageSize = userSetPageSize;
+  }
+
+  const {
+    reduxFormSearchInput = "",
+    onlyShowRowsWErrors,
+    reduxFormCellValidation,
+    reduxFormEntities,
+    reduxFormSelectedCells = {},
+    reduxFormSelectedEntityIdMap = {},
+    reduxFormQueryParams = {}
+  } = useSelector(state => {
+    if (!state.form[formName]) return {};
+    return state.form[formName].values || {};
+  });
+
+  const entities = reduxFormEntities || _origEntities;
+
+  const { schema } = useMemo(() => {
+    const schema = convertSchema(_schema);
+    if (isViewable) {
+      schema.fields = [viewColumn, ...schema.fields];
+    }
+    if (isOpenable) {
+      schema.fields = [openColumn, ...schema.fields];
+    }
+    // this must come before handling orderings.
+    schema.fields = schema.fields.map(field => {
+      if (field.placementPath) {
+        return {
+          ...field,
+          sortDisabled:
+            field.sortDisabled ||
+            (typeof field.path === "string" && field.path.includes(".")),
+          path: field.placementPath
+        };
+      } else {
+        return field;
+      }
+    });
+
+    if (withDisplayOptions) {
+      const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
+      schema.fields = schema.fields.map(field => {
+        const fieldOpt = fieldOptsByPath[field.path];
+        let noValsForField = false;
+        // only add this hidden column ability if no paging
+        if (
+          !showForcedHiddenColumns &&
+          withDisplayOptions &&
+          (isSimple || isInfinite)
+        ) {
+          noValsForField = entities.every(e => {
+            const val = get(e, field.path);
+            return field.render
+              ? !field.render(val, e)
+              : cellRenderer[field.path]
+                ? !cellRenderer[field.path](val, e)
+                : !val;
+          });
+        }
+        if (noValsForField) {
+          return {
+            ...field,
+            isHidden: true,
+            isForcedHidden: true
+          };
+        } else if (fieldOpt) {
+          return {
+            ...field,
+            isHidden: fieldOpt.isHidden
+          };
+        } else {
+          return field;
+        }
+      });
+
+      const columnOrderings = tableConfig.columnOrderings;
+      if (columnOrderings) {
+        const fieldsWithOrders = [];
+        const fieldsWithoutOrder = [];
+        // if a new field has been added since the orderings were set then we want
+        // it to be at the end instead of the beginning
+        schema.fields.forEach(field => {
+          if (columnOrderings.indexOf(field.path) > -1) {
+            fieldsWithOrders.push(field);
+          } else {
+            fieldsWithoutOrder.push(field);
+          }
+        });
+        schema.fields = fieldsWithOrders
+          .sort(({ path: path1 }, { path: path2 }) => {
+            return (
+              columnOrderings.indexOf(path1) - columnOrderings.indexOf(path2)
+            );
+          })
+          .concat(fieldsWithoutOrder);
+        setTableConfig(prev => ({
+          ...prev,
+          columnOrderings: schema.fields.map(f => f.path)
+        }));
+      }
+    }
+    return { schema };
+  }, [
+    _schema,
+    cellRenderer,
+    entities,
+    isInfinite,
+    isOpenable,
+    isSimple,
+    isViewable,
+    showForcedHiddenColumns,
+    tableConfig,
+    withDisplayOptions
+  ]);
+
+  const selectedEntities = withSelectedEntities
+    ? getRecordsFromIdMap(reduxFormSelectedEntityIdMap)
+    : undefined;
+
+  const currentParams = urlConnected
+    ? getCurrentParamsFromUrl(history.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
+    : reduxFormQueryParams;
+
+  currentParams.searchTerm = reduxFormSearchInput;
+
+  props = {
+    ...props,
+    ...getQueryParams({
+      doNotCoercePageSize,
+      currentParams,
+      entities: props.entities, // for local table
+      urlConnected,
+      defaults: props.defaults,
+      schema: convertedSchema,
+      isInfinite,
+      isLocalCall,
+      additionalFilter: additionalFilterToUse,
+      additionalOrFilter: additionalOrFilterToUse,
+      noOrderError: props.noOrderError,
+      isCodeModel: props.isCodeModel,
+      ownProps: props
+    })
+  };
+
+  const dispatch = useDispatch();
+  let tableParams;
+  if (!isTableParamsConnected) {
+    const updateSearch = val => {
+      setTimeout(() => {
+        dispatch(change(formName, "reduxFormSearchInput", val || ""));
+      });
+    };
+
+    let setNewParams;
+    if (urlConnected) {
+      setNewParams = newParams => {
+        setCurrentParamsOnUrl(newParams, history.replace);
+        dispatch(change(formName, "reduxFormQueryParams", newParams)); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+      };
+    } else {
+      setNewParams = function (newParams) {
+        dispatch(change(formName, "reduxFormQueryParams", newParams));
+      };
+    }
+
+    const bindThese = makeDataTableHandlers({
+      setNewParams,
+      updateSearch,
+      defaults,
+      onlyOneFilter
+    });
+
+    const boundDispatchProps = {};
+    //bind currentParams to actions
+    Object.keys(bindThese).forEach(function (key) {
+      const action = bindThese[key];
+      boundDispatchProps[key] = function (...args) {
+        action(...args, currentParams);
+      };
+    });
+
+    const changeFormValue = (...args) => dispatch(change(formName, ...args));
+
+    tableParams = {
+      changeFormValue,
+      selectedEntities,
+      ..._tableParams,
+      ...props,
+      ...boundDispatchProps,
+      form: formName, //this will override the default redux form name
+      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
+    };
+  }
+
+  const formTracker = useContext(TableFormTrackerContext);
+  useEffect(() => {
+    if (formTracker.isActive && !formTracker.formNames.includes(formName)) {
+      formTracker.pushFormName(formName);
+    }
+  }, [formTracker, formName]);
+
+  return {
+    ...props,
+    selectedEntities,
+    tableParams,
+    currentParams,
+    schema,
+    entities,
+    reduxFormSearchInput,
+    onlyShowRowsWErrors,
+    reduxFormCellValidation,
+    reduxFormSelectedCells,
+    reduxFormSelectedEntityIdMap,
+    reduxFormQueryParams,
+    showForcedHiddenColumns,
+    setShowForcedHidden
+  };
+}