diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css index 4754dd9b87..2f721858f7 100644 --- 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; } diff --git 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 index 32bfd9ba4c..12dded65bb 100644 --- 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 = () => { diff --git 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 index beeb1840b6..137d5169e8 100644 --- 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 = () => { diff --git a/frontend/src/metadata/metadata-view/components/popover/column-popover/index.js b/frontend/src/metadata/metadata-view/components/popover/column-popover/index.js index 30de575607..00f8b41721 100644 --- 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]); diff --git 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 index 2c27ffa63d..a445d10646 100644 --- 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]); diff --git 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 index 2a7d2cdda2..dbebd237c8 100644 --- 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); diff --git a/frontend/src/metadata/metadata-view/components/table/index.css b/frontend/src/metadata/metadata-view/components/table/index.css index a87f9364d3..6c09089217 100644 --- 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 { diff --git 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 index 8df7b97b6a..04ee6ee92f 100644 --- 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 = () => { diff --git 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 index 211398d729..c81e11e4ac 100644 --- 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 */ diff --git 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 index b4f949830e..0d7736a3a3 100644 --- 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'; } diff --git 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 index 61f5d8d2d0..78425cfa66 100644 --- 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 = () => { diff --git 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 index 9a64c0e0e1..2b01e00b28 100644 --- 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); diff --git 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 index 7ce80b6807..ac9c9a8457 100644 --- 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 diff --git 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 index 1ec0d2da83..836f02779c 100644 --- 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; diff --git a/frontend/src/metadata/metadata-view/model/metadata/column.js b/frontend/src/metadata/metadata-view/model/metadata/column.js index 73835666f1..394fce2b95 100644 --- 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; diff --git a/frontend/src/metadata/metadata-view/store/data-processor.js b/frontend/src/metadata/metadata-view/store/data-processor.js index 8daa1577eb..1c38ca0814 100644 --- 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; } diff --git a/frontend/src/metadata/metadata-view/utils/column-utils.js b/frontend/src/metadata/metadata-view/utils/column-utils.js index 9f5d19d016..0d1ea3f792 100644 --- 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));