feat(tag): support display tags with tree (#7365)

frontend/src/components/sf-table/utils/cell-comparer.js

@@ -22,6 +22,7 @@ export const checkCellValueChanged = (oldVal, newVal) => {
 export const cellCompare = (props, nextProps) => {
   const {
     record: oldRecord, column, isCellSelected, isLastCell, highlightClassName, height, bgColor,
+    showRecordAsTree, nodeDepth, hasSubNodes, isFoldedNode,
   } = props;
   const {
     record: newRecord, highlightClassName: newHighlightClassName, height: newHeight, column: newColumn, bgColor: newBgColor,
@@ -47,6 +48,10 @@ export const cellCompare = (props, nextProps) => {
     column.width !== newColumn.width ||
     !ObjectUtils.isSameObject(column.data, newColumn.data) ||
     bgColor !== newBgColor ||
+    showRecordAsTree !== nextProps.showRecordAsTree ||
+    nodeDepth !== nextProps.nodeDepth ||
+    hasSubNodes !== nextProps.hasSubNodes ||
+    isFoldedNode !== nextProps.isFoldedNode ||
     props.groupRecordIndex !== nextProps.groupRecordIndex ||
     props.recordIndex !== nextProps.recordIndex
   );

frontend/src/components/sf-table/utils/record-metrics.js

@@ -42,7 +42,7 @@ function isSelectedAll(recordIds, recordMetrics) {
   return recordIds.every(recordId => isRecordSelected(recordId, recordMetrics));
 }
 
-const recordMetrics = {
+export const RecordMetrics = {
   selectRecord,
   selectRecordsById,
   deselectRecord,
@@ -52,5 +52,3 @@ const recordMetrics = {
   hasSelectedRecords,
   isSelectedAll,
 };
-
-export default recordMetrics;

frontend/src/components/sf-table/utils/tree-metrics.js

@@ -0,0 +1,62 @@
+import { getRecordsIdsByTreeNodeKeys } from './tree';
+
+const checkIsTreeNodeSelected = (nodeKey, treeMetrics) => {
+  return treeMetrics.idSelectedNodeMap[nodeKey];
+};
+
+const selectTreeNode = (nodeKey, treeMetrics) => {
+  if (checkIsTreeNodeSelected(nodeKey, treeMetrics)) {
+    return;
+  }
+  treeMetrics.idSelectedNodeMap[nodeKey] = true;
+};
+
+const selectTreeNodesByKeys = (nodeKeys, treeMetrics) => {
+  nodeKeys.forEach((nodeKey) => {
+    selectTreeNode(nodeKey, treeMetrics);
+  });
+};
+
+const deselectTreeNode = (nodeKey, treeMetrics) => {
+  if (!checkIsTreeNodeSelected(nodeKey, treeMetrics)) {
+    return;
+  }
+  delete treeMetrics.idSelectedNodeMap[nodeKey];
+};
+
+const deselectAllTreeNodes = (treeMetrics) => {
+  treeMetrics.idSelectedNodeMap = {};
+};
+
+const getSelectedTreeNodesKeys = (treeMetrics) => {
+  return Object.keys(treeMetrics.idSelectedNodeMap);
+};
+
+const getSelectedIds = (treeMetrics, treeNodeKeyRecordIdMap) => {
+  const selectedNodesKeys = getSelectedTreeNodesKeys(treeMetrics);
+  return getRecordsIdsByTreeNodeKeys(selectedNodesKeys, treeNodeKeyRecordIdMap);
+};
+
+const checkHasSelectedTreeNodes = (treeMetrics) => {
+  return getSelectedTreeNodesKeys(treeMetrics).length > 0;
+};
+
+const checkIsSelectedAll = (nodeKeys, treeMetrics) => {
+  const selectedNodesKeysLen = getSelectedTreeNodesKeys(treeMetrics).length;
+  if (selectedNodesKeysLen === 0) {
+    return false;
+  }
+  return nodeKeys.every(nodeKey => checkIsTreeNodeSelected(nodeKey, treeMetrics));
+};
+
+export const TreeMetrics = {
+  checkIsTreeNodeSelected,
+  selectTreeNode,
+  selectTreeNodesByKeys,
+  deselectTreeNode,
+  deselectAllTreeNodes,
+  getSelectedTreeNodesKeys,
+  getSelectedIds,
+  checkHasSelectedTreeNodes,
+  checkIsSelectedAll,
+};

frontend/src/components/sf-table/utils/tree.js

@@ -0,0 +1,76 @@
+import { TREE_NODE_KEY } from '../constants/tree';
+
+export const createTreeNode = (nodeId, nodeKey, depth, hasSubNodes) => {
+  return {
+    [TREE_NODE_KEY.ID]: nodeId,
+    [TREE_NODE_KEY.KEY]: nodeKey,
+    [TREE_NODE_KEY.DEPTH]: depth,
+    [TREE_NODE_KEY.HAS_SUB_NODES]: hasSubNodes,
+  };
+};
+
+/**
+ * for get row by node key from 'tree_node_key_row_id_map' directly
+ * @param {array} tree
+ * @returns tree_node_key_row_id_map
+ * tree_node_key_row_id_map: { [node_key]: _id, ... }
+ */
+export const generateKeyTreeNodeRowIdMap = (tree) => {
+  let tree_node_key_row_id_map = {};
+  tree.forEach((node) => {
+    tree_node_key_row_id_map[node[TREE_NODE_KEY.KEY]] = node[TREE_NODE_KEY.ID];
+  });
+  return tree_node_key_row_id_map;
+};
+
+
+export const getValidKeyTreeNodeFoldedMap = (keyTreeNodeFoldedMap, treeNodeKeyRecordIdMap) => {
+  if (!keyTreeNodeFoldedMap) return {};
+
+  let validKeyTreeNodeFoldedMap = {};
+  Object.keys(keyTreeNodeFoldedMap).forEach((nodeKey) => {
+    if (treeNodeKeyRecordIdMap[nodeKey]) {
+      // just keep the folded status of exist nodes
+      validKeyTreeNodeFoldedMap[nodeKey] = keyTreeNodeFoldedMap[nodeKey];
+    }
+  });
+  return validKeyTreeNodeFoldedMap;
+};
+
+export const getRecordIdByTreeNodeKey = (nodeKey, treeNodeKeyRecordIdMap) => {
+  return treeNodeKeyRecordIdMap[nodeKey];
+};
+
+export const getRecordsIdsByTreeNodeKeys = (nodesKeys, treeNodeKeyRecordIdMap) => {
+  if (!Array.isArray(nodesKeys) || nodesKeys.length === 0 || !treeNodeKeyRecordIdMap) {
+    return [];
+  }
+  let idExistMap = {};
+  let selectedIds = [];
+  nodesKeys.forEach((nodeKey) => {
+    const selectedId = treeNodeKeyRecordIdMap[nodeKey];
+    if (selectedId && !idExistMap[selectedId]) {
+      selectedIds.push(nodeKey);
+      idExistMap[selectedId] = true;
+    }
+  });
+  return selectedIds;
+};
+
+export const checkIsTreeNodeShown = (nodeKey, keyFoldedNodeMap) => {
+  const foldedNodeKeys = keyFoldedNodeMap && Object.keys(keyFoldedNodeMap);
+  if (!Array.isArray(foldedNodeKeys) || foldedNodeKeys.length === 0) {
+    return true;
+  }
+
+  // parent node is folded
+  return !foldedNodeKeys.some((foldedNodeKey) => nodeKey !== foldedNodeKey && nodeKey.includes(foldedNodeKey));
+};
+
+export const getTreeNodeId = (node) => {
+  return node ? node[TREE_NODE_KEY.ID] : '';
+};
+
+export const getTreeNodeKey = (node) => {
+  return node ? node[TREE_NODE_KEY.KEY] : '';
+};