@teselagen/ui 0.6.5 → 0.7.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 { useTableEntities } from "./useTableEntities";
 
 export {
-  computePresets,
   defaultParsePaste,
   formatPasteData,
   getAllRows,
@@ -44,8 +45,11 @@ export {
   handleCopyColumn,
   handleCopyHelper,
   handleCopyRows,
+  handleCopyTable,
   isBottomRightCornerOfRectangle,
   isEntityClean,
+  PRIMARY_SELECTED_VAL,
   removeCleanRows,
-  stripNumberAtEnd
+  stripNumberAtEnd,
+  useTableEntities
 };

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
           );
         };
@@ -573,49 +603,45 @@ function buildRef(qb, reference, searchField, expression) {
 
 export function makeDataTableHandlers({
   setNewParams,
-  updateSearch,
   defaults,
   onlyOneFilter
 }) {
   //all of these actions have currentParams bound to them as their last arg in withTableParams
-  function setSearchTerm(searchTerm, currentParams) {
-    const newParams = {
-      ...currentParams,
+  const setSearchTerm = searchTerm => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
       page: undefined, //set page undefined to return the table to page 1
       searchTerm: searchTerm === defaults.searchTerm ? undefined : searchTerm
-    };
-    setNewParams(newParams);
-    updateSearch(searchTerm);
+    }));
     onlyOneFilter && clearFilters();
-  }
-  function addFilters(newFilters, currentParams) {
+  };
+
+  const addFilters = newFilters => {
     if (!newFilters) return;
-    const filters = uniqBy(
-      [...newFilters, ...(onlyOneFilter ? [] : currentParams.filters || [])],
-      "filterOn"
-    );
+    setNewParams(prev => {
+      const filters = uniqBy(
+        [...newFilters, ...(onlyOneFilter ? [] : prev?.filters || [])],
+        "filterOn"
+      );
+      return {
+        ...(prev ?? {}),
+        page: undefined, //set page undefined to return the table to page 1
+        filters
+      };
+    });
+  };
 
-    const newParams = {
-      ...currentParams,
-      page: undefined, //set page undefined to return the table to page 1
-      filters
-    };
-    setNewParams(newParams);
-    onlyOneFilter && updateSearch();
-  }
-  function removeSingleFilter(filterOn, currentParams) {
-    const filters = currentParams.filters
-      ? currentParams.filters.filter(filter => {
-          return filter.filterOn !== filterOn;
-        })
-      : undefined;
-    const newParams = {
-      ...currentParams,
-      filters
-    };
-    setNewParams(newParams);
-  }
-  function clearFilters(additionalFilterKeys = []) {
+  const removeSingleFilter = filterOn =>
+    setNewParams(prev => {
+      const filters = prev?.filters
+        ? prev.filters.filter(filter => {
+            return filter.filterOn !== filterOn;
+          })
+        : undefined;
+      return { ...(prev ?? {}), filters };
+    });
+
+  const clearFilters = (additionalFilterKeys = []) => {
     const toClear = {
       filters: undefined,
       searchTerm: undefined,
@@ -625,49 +651,49 @@ export function makeDataTableHandlers({
       toClear[key] = undefined;
     });
     setNewParams(toClear);
-    updateSearch();
-  }
-  function setPageSize(pageSize, currentParams) {
-    const newParams = {
-      ...currentParams,
+  };
+
+  const setPageSize = pageSize =>
+    setNewParams(prev => ({
+      ...(prev ?? {}),
       pageSize: pageSize === defaults.pageSize ? undefined : pageSize,
       page: undefined //set page undefined to return the table to page 1
-    };
-    setNewParams(newParams);
-  }
-  function setOrder(order, isRemove, shiftHeld, currentParams) {
-    let newOrder = [];
-    if (shiftHeld) {
-      //first remove the old order
-      newOrder = [...(currentParams.order || [])].filter(value => {
-        const shouldRemove =
-          value.replace(/^-/, "") === order.replace(/^-/, "");
-        return !shouldRemove;
-      });
-      //then, if we are adding, pop the order onto the array
-      if (!isRemove) {
-        newOrder.push(order);
-      }
-    } else {
-      if (isRemove) {
-        newOrder = [];
+    }));
+
+  const setOrder = (order, isRemove, shiftHeld) =>
+    setNewParams(prev => {
+      let newOrder = [];
+      if (shiftHeld) {
+        //first remove the old order
+        newOrder = [...(prev?.order || [])].filter(value => {
+          const shouldRemove =
+            value.replace(/^-/, "") === order.replace(/^-/, "");
+          return !shouldRemove;
+        });
+        //then, if we are adding, pop the order onto the array
+        if (!isRemove) {
+          newOrder.push(order);
+        }
       } else {
-        newOrder = [order];
+        if (isRemove) {
+          newOrder = [];
+        } else {
+          newOrder = [order];
+        }
       }
-    }
-    const newParams = {
-      ...currentParams,
-      order: newOrder
-    };
-    setNewParams(newParams);
-  }
-  function setPage(page, currentParams) {
-    const newParams = {
-      ...currentParams,
+      return {
+        ...(prev ?? {}),
+        order: newOrder
+      };
+    });
+
+  const setPage = page => {
+    setNewParams(prev => ({
+      ...(prev ?? {}),
       page: page === defaults.page ? undefined : page
-    };
-    setNewParams(newParams);
-  }
+    }));
+  };
+
   return {
     setSearchTerm,
     addFilters,
@@ -859,7 +885,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/useTableEntities.js

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { change, initialize } from "redux-form";
+
+export const useTableEntities = tableFormName => {
+  const dispatch = useDispatch();
+  const selectTableEntities = useCallback(
+    (entities = []) => {
+      initialize(tableFormName, {}, true, {
+        keepDirty: true,
+        updateUnregisteredFields: true,
+        keepValues: true
+      });
+      const selectedEntityIdMap = {};
+      entities.forEach(entity => {
+        selectedEntityIdMap[entity.id] = {
+          entity,
+          time: Date.now()
+        };
+      });
+      dispatch(
+        change(
+          tableFormName,
+          "reduxFormSelectedEntityIdMap",
+          selectedEntityIdMap
+        )
+      );
+    },
+    [dispatch, tableFormName]
+  );
+
+  const { allOrderedEntities, selectedEntities } = useSelector(state => ({
+    allOrderedEntities: state.form?.[tableFormName]?.values?.allOrderedEntities,
+    selectedEntities:
+      state.form?.[tableFormName]?.values?.reduxFormSelectedEntityIdMap
+  }));
+  return { selectTableEntities, allOrderedEntities, selectedEntities };
+};