fix: metadata group (#6447)

* fix: metadata group * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update code * feat: optimize code * feat: optimize code --------- Co-authored-by: 杨国璇 <ygx@Hello-word.local> Co-authored-by: 杨国璇 <ygx@192.168.124.7>
2025-07-31 06:40:39 +00:00 · 2024-07-31 21:30:09 +08:00 · 2024-07-31 21:30:09 +08:00 · ff872a7f75
commit ff872a7f75
parent 7a43fafe37
17 changed files with 114 additions and 133 deletions
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@ -10,7 +10,6 @@
  width: 100%;
  height: calc(100% - 48px);
  border-top: 1px solid #e8e8e8;
-  transform: translateZ(10px);
 }

 .view-mode-container {
@ -24,6 +23,7 @@
 .dir-column-view {
  display: flex;
  width: 100%;
+  height: 100%;
  position: relative;
 }

--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/normal-editor-container.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/normal-editor-container.js
@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickOutside } from '@seafile/sf-metadata-ui-component';
-import { isFunction, Z_INDEX, getCellValueByColumn } from '../../../_basic';
+import { isFunction, Z_INDEX, getCellValueByColumn, PRIVATE_COLUMN_KEYS } from '../../../_basic';
 import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
 import { isCellValueChanged } from '../../../utils/cell-comparer';
 import { EVENT_BUS_TYPE } from '../../../constants';
@ -206,57 +206,44 @@ class NormalEditorContainer extends React.Component {
  getOldRowData = (originalOldCellValue) => {
    const { column } = this.props;
    const { key: columnKey, name: columnName } = column;
-    let oldRowData;
+    let oldValue = originalOldCellValue;
    if (this.getEditor().getOldValue) {
      const original = this.getEditor().getOldValue();
-      oldRowData = { [columnName]: original[Object.keys(original)[0]] } ;
-    } else {
-      oldRowData = { [columnName]: originalOldCellValue };
+      oldValue = original[Object.keys(original)[0]];
    }
+    const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
    const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
    return { oldRowData, originalOldRowData };
  };

  commit = (args) => {
-    const { onCommit, record, column } = this.props;
-    const { key: columnKey, type: columnType, name: columnName } = column;
+    const { record, column } = this.props;
+    const { key: columnKey, type: columnType } = column;
    const originalOldCellValue = getCellValueByColumn(record, column);
    const updated = this.getEditor().getValue();
    if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) {
      this.props.onCommitCancel();
      return;
    }
-    if (!this.isNewValueValid(updated)) {
-      return;
-    }
-    this.changeCommitted = true;
-    const rowId = record._id;
-    const key = Object.keys(updated)[0];
-    const value = updated[key];
-    const updates = { [columnName]: value };
-    const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
-
-    // updates used for update remote record data
-    // originalUpdates used for update local record data
-    // oldRowData ues for undo/undo modify record
-    // originalOldRowData ues for undo/undo modify record
-    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData });
+    this.commitData(updated, true);
  };

-  commitData = (updated) => {
-    if (!this.isNewValueValid(updated)) {
-      return;
-    }
+  commitData = (updated, closeEditor = false) => {
+    if (!this.isNewValueValid(updated)) return;
    const { onCommit, record, column } = this.props;
-    const { key: columnKey } = column;
+    const { key: columnKey, name: columnName } = column;
    this.changeCommitted = true;
    const rowId = record._id;
    const originalOldCellValue = getCellValueByColumn(record, column);
    const key = Object.keys(updated)[0];
    const value = updated[key];
-    const updates = { [column.name]: value };
+    const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: value } : { [columnName]: value };
    const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
-    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData }, false);
+    // updates used for update remote record data
+    // originalUpdates used for update local record data
+    // oldRowData ues for undo/undo modify record
+    // originalOldRowData ues for undo/undo modify record
+    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates: updated, oldRowData, originalOldRowData }, closeEditor);
  };

  commitCancel = () => {
--- a/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
+++ b/frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ClickOutside } from '@seafile/sf-metadata-ui-component';
-import { CellType, isFunction, Z_INDEX, getCellValueByColumn, getColumnOptionNameById } from '../../../_basic';
+import { CellType, isFunction, Z_INDEX, getCellValueByColumn, getColumnOptionNameById, PRIVATE_COLUMN_KEYS } from '../../../_basic';
 import { isCellValueChanged } from '../../../utils/cell-comparer';
 import { EVENT_BUS_TYPE } from '../../../constants';
 import Editor from '../editor';
@ -124,48 +124,50 @@ class PopupEditorContainer extends React.Component {
  getOldRowData = (originalOldCellValue) => {
    const { column } = this.props;
    const { key: columnKey, name: columnName, type: columnType } = column;
-    let oldRowData;
+    let oldValue = originalOldCellValue;
    if (this.getEditor().getOldValue) {
      const original = this.getEditor().getOldValue();
-      oldRowData = { [columnName]: original[Object.keys(original)[0]] } ;
-    } else {
-      oldRowData = { [columnName]: originalOldCellValue };
+      oldValue = original[Object.keys(original)[0]];
    }
-    // long-text cell value need format to {text: '', links: [], ...}
    if (columnType === CellType.LONG_TEXT) {
-      const original = this.getEditor().getValue();
-      oldRowData = { [columnName]: original };
+      oldValue = this.getEditor().getValue(); // long-text cell value need format to {text: '', links: [], ...}
    }
+    const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
    const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
    return { oldRowData, originalOldRowData };
  };

  // The input area in the interface loses focus. Use this.getEditor().getValue() to get data.
  commit = () => {
-    const { onCommit, column, record } = this.props;
+    const { column, record } = this.props;
    if (!record._id) return;
-    const { key: columnKey, type: columnType, name: columnName } = column;
-    const originalOldCellValue = getCellValueByColumn(record, column);
+    const { key: columnKey, type: columnType } = column;
    const newValue = this.getEditor().getValue();
    let updated = columnType === CellType.DATE ? { [columnKey]: newValue } : newValue;
+    if (columnType === CellType.SINGLE_SELECT) {
+      updated[columnKey] = newValue[columnKey] ? getColumnOptionNameById(column, newValue[columnKey]) : '';
+    }
+
+    this.commitData(updated, true);
+  };
+
+  // This is the updated data obtained by manually clicking the button
+  commitData = (updated, closeEditor = false) => {
+    const { onCommit, column, record } = this.props;
+    const { key: columnKey, type: columnType, name: columnName } = column;
+    const originalOldCellValue = getCellValueByColumn(record, column);
    let originalUpdates = { ...updated };
-    if (
-      !isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) ||
-      !this.isNewValueValid(updated)
-    ) {
-      if (typeof this.editor.onClose === 'function') {
+    if (!isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) || !this.isNewValueValid(updated)) {
+      if (closeEditor && typeof this.editor.onClose === 'function') {
        this.editor.onClose();
      }
      return;
    }
-    if (columnType === CellType.SINGLE_SELECT) {
-      updated[columnKey] = newValue[columnKey] ? getColumnOptionNameById(column, newValue[columnKey]) : '';
-    }
    this.changeCommitted = true;
    const rowId = record._id;
    const key = Object.keys(updated)[0];
    const value = updated[key];
-    const updates = { [columnName]: value };
+    const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: value } : { [columnName]: value };

    // special treatment of long-text column types to keep the stored data consistent
    if (columnType === CellType.LONG_TEXT) {
@ -177,30 +179,7 @@ class PopupEditorContainer extends React.Component {
    // originalUpdates used for update local record data
    // oldRowData ues for undo/undo modify record
    // originalOldRowData ues for undo/undo modify record
-    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData });
-  };
-
-  // This is the updated data obtained by manually clicking the button
-  commitData = (updated) => {
-    if (!this.isNewValueValid(updated)) {
-      return;
-    }
-    this.changeCommitted = true;
-    const { onCommit, record, column } = this.props;
-    const { key: columnKey, type: columnType, name: columnName } = column;
-    const rowId = record._id;
-    const originalOldCellValue = getCellValueByColumn(record, column);
-    let originalUpdates = { ...updated };
-    const key = Object.keys(updated)[0];
-    const value = updated[key];
-    const updates = { [columnName]: value };
-
-    // special treatment of long-text column types to keep the stored data consistent
-    if (columnType === CellType.LONG_TEXT) {
-      originalUpdates[key] = value.text;
-    }
-    const { oldRowData, originalOldRowData } = this.getOldRowData(originalOldCellValue);
-    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }, false);
+    onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }, closeEditor);
  };

  commitCancel = () => {
--- a/frontend/src/metadata/metadata-view/components/popover/column-popover/index.js
+++ b/frontend/src/metadata/metadata-view/components/popover/column-popover/index.js
@ -80,7 +80,7 @@ const ColumnPopover = ({ target, onChange }) => {
        }
      }
    }
-    onChange(columnName, column.type, { key: column.unique ? column.key : '', data });
+    onChange(column.unique ? column.key : columnName, column.type, { key: column.unique ? column.key : '', data });
    toggle();
  }, [nameRef, column, metadata, onChange, toggle]);

--- a/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
+++ b/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
@ -147,10 +147,10 @@ const GroupbyItem = memo(({
    onUpdate(newGroupby, index);
  }, [groupby, index, onUpdate]);

-  const selectSortType = useCallback((sortType) => {
+  const selectSortType = useCallback((option) => {
    const { count_type } = groupby;
-    if (sortType === count_type) return;
-    const newGroupby = { ...groupby, sort_type: sortType };
+    if (option.sortType === count_type) return;
+    const newGroupby = { ...groupby, sort_type: option.sortType };
    onUpdate(newGroupby, index);
  }, [groupby, index, onUpdate]);

--- a/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/index.js
+++ b/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/index.js
@ -45,8 +45,8 @@ Groupbys.propTypes = {
  onMove: PropTypes.func,
 };

-const DndOptionsContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
+const DndGroupbysContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
  connectDropTarget: connect.dropTarget()
 }))(Groupbys);

-export default html5DragDropContext(DndOptionsContainer);
+export default html5DragDropContext(DndGroupbysContainer);
--- a/frontend/src/metadata/metadata-view/components/table/index.css
+++ b/frontend/src/metadata/metadata-view/components/table/index.css
@ -419,6 +419,7 @@
  height: 100%;
  width: 100%;
  overflow: hidden;
+  transform: translateZ(10px);
 }

 .table-header-top {
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/body.js
@ -157,9 +157,9 @@ class RecordsBody extends Component {
    this.resultContentRef.scrollTop = scrollTop;
  };

-  setScrollLeft = (scrollLeft) => {
+  setScrollLeft = (scrollLeft, scrollTop) => {
    const { interactionMask } = this;
-    interactionMask && interactionMask.setScrollLeft(scrollLeft);
+    interactionMask && interactionMask.setScrollLeft(scrollLeft, scrollTop);
  };

  cancelSetScrollLeft = () => {
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/group-container/index.css
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/group-container/index.css
@ -109,6 +109,7 @@
  position: absolute;
  left: 0;
  background-color: #fff;
+  opacity: 1;
 }

 /* group-header-left */
@ -222,7 +223,7 @@
 }

 .canvas-groups-rows .sf-metadata-ui.cell-formatter-container {
-  overflow: unset;
+  overflow: hidden;
 }

 /* group rows count */
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/group-container/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/group-container/index.js
@ -7,7 +7,6 @@ import { isMobile } from '../../../../../../utils';
 import { isFrozen } from '../../../../../../utils/column-utils';
 import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
 import { Z_INDEX } from '../../../../../../_basic';
-import { SIDE_PANEL_FOLDED_WIDTH } from '../../../../../../../../constants';

 import './index.css';

@ -42,9 +41,8 @@ class GroupContainer extends Component {

  fixedFrozenDOMs = (scrollLeft, scrollTop) => {
    if (this.backDrop) {
-      const { left: tableContentLeft } = this.props.getTableContentRect();
      this.backDrop.style.position = 'fixed';
-      this.backDrop.style.marginLeft = (tableContentLeft - SIDE_PANEL_FOLDED_WIDTH) + 'px';
+      this.backDrop.style.marginLeft = '0px';
      this.backDrop.style.marginTop = (-scrollTop) + 'px';
    }

--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
@ -153,8 +153,8 @@ class GroupBody extends Component {
    this.resultContentRef.scrollTop = scrollTop;
  };

-  setScrollLeft = (scrollLeft) => {
-    this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft);
+  setScrollLeft = (scrollLeft, scrollTop) => {
+    this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft, scrollTop);
  };

  cancelSetScrollLeft = () => {
@ -192,9 +192,7 @@ class GroupBody extends Component {
  getRowTop = (groupRecordIndex) => {
    const { groupMetrics } = this.state;
    const groupRow = getGroupRecordByIndex(groupRecordIndex, groupMetrics);
-    if (!groupRow) {
-      return 0;
-    }
+    if (!groupRow) return 0;
    return groupRow.top || 0;
  };

@ -306,6 +304,7 @@ class GroupBody extends Component {
      onCellMouseEnter: this.onCellMouseEnter,
      onCellMouseMove: this.onCellMouseMove,
      onDragEnter: this.handleDragEnter,
+      modifyRecord: this.props.modifyRecord,
    };
    return this.cellMetaData;
  };
@ -589,10 +588,8 @@ class GroupBody extends Component {

  getFoldedGroups = () => {
    const localConfigs = window.sfMetadataContext.localStorage.getItem(LOCAL_FOLDED_GROUP_KEY);
-    if (!localConfigs) {
-      return {};
-    }
-    return localConfigs[LOCAL_FOLDED_GROUP_KEY] || {};
+    if (!localConfigs) return {};
+    return localConfigs;
  };

  getVisibleIndex = () => {
--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js
@ -6,7 +6,7 @@ import GroupBody from './group-body';
 import RecordsFooter from './record-footer';
 import { HorizontalScrollbar } from '../../../scrollbar';
 import { recalculate, setColumnOffsets } from '../../../../utils/column-utils';
-import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE } from '../../../../constants';
+import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, GROUP_ROW_TYPE, EVENT_BUS_TYPE, GROUP_VIEW_OFFSET } from '../../../../constants';
 import {
  isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
  addClassName, removeClassName,
@ -200,7 +200,7 @@ class Records extends Component {
      this.handleScrollbarScroll(scrollLeft);
    }
    if (this.bodyRef && this.bodyRef.interactionMask) {
-      this.bodyRef.setScrollLeft(scrollLeft);
+      this.bodyRef.setScrollLeft(scrollLeft, scrollTop);
    }

    this.updateHorizontalScrollState({
@ -633,7 +633,7 @@ class Records extends Component {
      deleteColumn } = this.props;
    const { recordMetrics, columnMetrics, selectedRange, colOverScanStartIdx, colOverScanEndIdx } = this.state;
    const { columns, totalWidth, lastFrozenColumnKey } = columnMetrics;
-    const containerWidth = totalWidth + SEQUENCE_COLUMN_WIDTH + CANVAS_RIGHT_INTERVAL;
+    const containerWidth = totalWidth + SEQUENCE_COLUMN_WIDTH + CANVAS_RIGHT_INTERVAL + (isGroupView ? GROUP_VIEW_OFFSET : 0);
    const hasSelectedRecord = this.hasSelectedRecord();
    const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics);

--- a/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/record/cell/index.js
@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { PRIVATE_COLUMN_KEY, isFunction, getCellValueByColumn } from '../../../../../../_basic';
+import { PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, isFunction, getCellValueByColumn } from '../../../../../../_basic';
 import { TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
 import { isCellValueChanged } from '../../../../../../utils/cell-comparer';
 import CellOperationBtn from './operation-btn';
@ -116,7 +116,7 @@ const Cell = React.memo(({

  const getOldRowData = useCallback((originalOldCellValue) => {
    const { key: columnKey, name: columnName } = column;
-    const oldRowData = { [columnName]: originalOldCellValue };
+    const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnKey]: originalOldCellValue } : { [columnName]: originalOldCellValue };
    const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
    return { oldRowData, originalOldRowData };
  }, [column]);
@ -128,10 +128,8 @@ const Cell = React.memo(({
    if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) return;
    const rowId = record._id;
    const key = Object.keys(updated)[0];
-    const value = updated[key];
-    const updates = { [columnName]: value };
+    const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? updated : { [columnName]: updated[key] };
    const { oldRowData, originalOldRowData } = getOldRowData(originalOldCellValue);
-
    // updates used for update remote record data
    // originalUpdates used for update local record data
    // oldRowData ues for undo/undo modify record
--- a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js
+++ b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js
@ -7,8 +7,12 @@ import {
  NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
  KeyCodes,
  isFunction,
+  isEmptyObject,
+  HEADER_HEIGHT_TYPE,
 } from '../../../../_basic';
-import { EVENT_BUS_TYPE, GROUP_ROW_TYPE, TRANSFER_TYPES, EDITOR_TYPE } from '../../../../constants';
+import { EVENT_BUS_TYPE, GROUP_ROW_TYPE, TRANSFER_TYPES, EDITOR_TYPE,
+  GRID_HEADER_DOUBLE_HEIGHT, GRID_HEADER_DEFAULT_HEIGHT,
+} from '../../../../constants';
 import {
  getNewSelectedRange, getSelectedDimensions, selectedRangeIsSingleCell,
  getSelectedRangeDimensions, getSelectedRow, getSelectedColumn,
@ -358,12 +362,22 @@ class InteractionMasks extends React.Component {
    }) };
  };

-  setScrollLeft = (scrollLeft) => {
+  setScrollLeft = (scrollLeft, scrollTop) => {
    const { selectionMask, state: { selectedPosition } } = this;
-    this.setMaskScrollLeft(selectionMask, selectedPosition, scrollLeft);
+    this.setMaskScrollLeft(selectionMask, selectedPosition, scrollLeft, scrollTop);
  };

-  setMaskScrollLeft = (mask, position, scrollLeft) => {
+  geHeaderHeight = () => {
+    const { table } = this.props;
+    const settings = table.header_settings || {};
+    const heightMode = isEmptyObject(settings) ? HEADER_HEIGHT_TYPE.DEFAULT : settings.header_height;
+    const containerHeight = heightMode === HEADER_HEIGHT_TYPE.DOUBLE ? GRID_HEADER_DOUBLE_HEIGHT : GRID_HEADER_DEFAULT_HEIGHT;
+    // 1: header border-bottom
+    return containerHeight + 1;
+  };
+
+  setMaskScrollLeft = (mask, position, scrollLeft, scrollTop) => {
+    const headerHeight = this.geHeaderHeight();
    if (mask) {
      const { idx, rowIdx, groupRecordIndex } = position;
      if (idx >= 0 && rowIdx >= 0) {
@ -372,10 +386,8 @@ class InteractionMasks extends React.Component {
        const frozen = !!column.frozen;
        if (frozen) {
          // use fixed
-          const { top: containerTop } = this.container.getClientRects()[0];
-          const { left: tableContentLeft } = this.props.getTableContentRect();
-          let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx);
-          let left = tableContentLeft + column.left;
+          let top = -scrollTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx) + headerHeight;
+          let left = column.left;
          if (isGroupView) {
            top += 1;
            left += groupOffsetLeft;
--- a/frontend/src/metadata/metadata-view/model/metadata/column.js
+++ b/frontend/src/metadata/metadata-view/model/metadata/column.js
@ -1,10 +1,10 @@
-import { normalizeColumnData } from '../../utils/column-utils';
+import { normalizeColumnData, getColumnName } from '../../utils/column-utils';
 import { CellType, PRIVATE_COLUMN_KEYS, EDITABLE_PRIVATE_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../_basic';

 class Column {
  constructor(object) {
    this.key = object.key || '';
-    this.name = object.name || '';
+    this.name = getColumnName(this.key, object.name) || '';
    this.type = object.type || '';
    this.data = object.data || null;
    this.width = object.width || 200;
--- a/frontend/src/metadata/metadata-view/store/data-processor.js
+++ b/frontend/src/metadata/metadata-view/store/data-processor.js
@ -43,6 +43,14 @@ class DataProcessor {
    // todo
  }

+  static hasRelatedFilters = (filters, updatedColumnKeyMap) => {
+    return filters.some(filter => updatedColumnKeyMap[filter.column_key]);
+  };
+
+  static hasRelatedSort = (sorts, updatedColumnKeyMap) => {
+    return sorts.some(sort => updatedColumnKeyMap[sort.column_key]);
+  };
+
  static hasRelatedGroupby(groupbys, updatedColumnKeyMap) {
    return groupbys.some(groupby => updatedColumnKeyMap[groupby.column_key]);
  }
@ -99,8 +107,14 @@ class DataProcessor {
    table.view.groups = groups;
  }

-  static updateDataWithModifyRecords(table, relatedColumnKeyMap) {
-    // todo
+  static updateDataWithModifyRecords(table, relatedColumnKeyMap, rowIds, { collaborators }) {
+    const { available_columns, groupbys, row_ids } = table.view;
+    const _isGroupView = isGroupView({ groupbys }, available_columns);
+    const isRegroup = _isGroupView && this.hasRelatedGroupby(groupbys, relatedColumnKeyMap);
+    if (isRegroup) {
+      table.view.groups = this.getGroupedRows(table, row_ids, groupbys, { collaborators });
+    }
+    // todo update sort and filter and ui change
  }

  static handleReloadedRecords(table, reloadedRecords, relatedColumnKeyMap) {
@ -140,12 +154,7 @@ class DataProcessor {
    this.updateSummaries();
  }

-  static updatePageDataWithCommonOperations(table, value) {
-    // todo
-  }
-
  static syncOperationOnData(table, operation, { collaborators }) {
-
    switch (operation.op_type) {
      case OPERATION_TYPE.MODIFY_RECORD:
      case OPERATION_TYPE.MODIFY_RECORDS: {
@ -167,7 +176,7 @@ class DataProcessor {
            }
          }
        });
-        this.updateDataWithModifyRecords();
+        this.updateDataWithModifyRecords(table, relatedColumnKeyMap, row_ids, { collaborators });
        this.updateSummaries();
        break;
      }
@ -205,25 +214,28 @@ class DataProcessor {
          });
        }
        table.view.rows = updatedRowIds;
-        this.updatePageDataWithCommonOperations();
+        this.updateDataWithModifyRecords(table, { collaborators });
        this.updateSummaries();
        break;
      }
-      case OPERATION_TYPE.MODIFY_HIDDEN_COLUMNS:
      case OPERATION_TYPE.MODIFY_FILTERS: {
        this.run(table, { collaborators });
        break;
      }
-
      case OPERATION_TYPE.MODIFY_SORTS: {
-        const { sorts, rows } = table.view;
+        const { sorts, groupbys, rows } = table.view;
        const availableColumns = table.view.available_columns || table.columns;
-        if (!isSortView({ sorts }, availableColumns)) {
+        const _isSortView = isSortView({ sorts }, availableColumns);
+        if (!_isSortView) {
          this.run(table, { collaborators });
-          break;
+          return;
        }
-        table.view.rows = this.getSortedRows(table, rows, sorts, { collaborators });
-        this.updatePageDataWithCommonOperations();
+        const _isGroupView = isGroupView({ groupbys }, availableColumns);
+        const renderedRows = this.getSortedRows(table, rows, sorts, { collaborators });
+        const groups = _isGroupView ? this.getGroupedRows(table, renderedRows, groupbys, { collaborators }) : [];
+        const row_ids = isTableRows(renderedRows) ? renderedRows.map(row => row._id) : renderedRows;
+        table.view.rows = row_ids;
+        table.view.groups = groups;
        break;
      }
      case OPERATION_TYPE.MODIFY_GROUPBYS: {
@ -235,9 +247,6 @@ class DataProcessor {
        table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators });
        break;
      }
-      case OPERATION_TYPE.INSERT_COLUMN: {
-        break;
-      }
      default: {
        break;
      }
--- a/frontend/src/metadata/metadata-view/utils/column-utils.js
+++ b/frontend/src/metadata/metadata-view/utils/column-utils.js
@ -294,7 +294,6 @@ export const normalizeColumns = (columns) => {
      ...params,
      key,
      type: columnType,
-      name: getColumnName(key, name),
      width: columnsWidth[key] || 200,
    };
  }).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));