1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-01 07:10:55 +00:00

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>
This commit is contained in:
杨国璇 2024-07-31 21:30:09 +08:00 committed by GitHub
parent 7a43fafe37
commit ff872a7f75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 114 additions and 133 deletions

View File

@ -10,7 +10,6 @@
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
border-top: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
transform: translateZ(10px);
} }
.view-mode-container { .view-mode-container {
@ -24,6 +23,7 @@
.dir-column-view { .dir-column-view {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
position: relative; position: relative;
} }

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { ClickOutside } from '@seafile/sf-metadata-ui-component'; 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 { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
import { isCellValueChanged } from '../../../utils/cell-comparer'; import { isCellValueChanged } from '../../../utils/cell-comparer';
import { EVENT_BUS_TYPE } from '../../../constants'; import { EVENT_BUS_TYPE } from '../../../constants';
@ -206,57 +206,44 @@ class NormalEditorContainer extends React.Component {
getOldRowData = (originalOldCellValue) => { getOldRowData = (originalOldCellValue) => {
const { column } = this.props; const { column } = this.props;
const { key: columnKey, name: columnName } = column; const { key: columnKey, name: columnName } = column;
let oldRowData; let oldValue = originalOldCellValue;
if (this.getEditor().getOldValue) { if (this.getEditor().getOldValue) {
const original = this.getEditor().getOldValue(); const original = this.getEditor().getOldValue();
oldRowData = { [columnName]: original[Object.keys(original)[0]] } ; oldValue = original[Object.keys(original)[0]];
} else {
oldRowData = { [columnName]: originalOldCellValue };
} }
const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue } const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
return { oldRowData, originalOldRowData }; return { oldRowData, originalOldRowData };
}; };
commit = (args) => { commit = (args) => {
const { onCommit, record, column } = this.props; const { record, column } = this.props;
const { key: columnKey, type: columnType, name: columnName } = column; const { key: columnKey, type: columnType } = column;
const originalOldCellValue = getCellValueByColumn(record, column); const originalOldCellValue = getCellValueByColumn(record, column);
const updated = this.getEditor().getValue(); const updated = this.getEditor().getValue();
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) { if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) {
this.props.onCommitCancel(); this.props.onCommitCancel();
return; return;
} }
if (!this.isNewValueValid(updated)) { this.commitData(updated, true);
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 });
}; };
commitData = (updated) => { commitData = (updated, closeEditor = false) => {
if (!this.isNewValueValid(updated)) { if (!this.isNewValueValid(updated)) return;
return;
}
const { onCommit, record, column } = this.props; const { onCommit, record, column } = this.props;
const { key: columnKey } = column; const { key: columnKey, name: columnName } = column;
this.changeCommitted = true; this.changeCommitted = true;
const rowId = record._id; const rowId = record._id;
const originalOldCellValue = getCellValueByColumn(record, column); const originalOldCellValue = getCellValueByColumn(record, column);
const key = Object.keys(updated)[0]; const key = Object.keys(updated)[0];
const value = updated[key]; 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); 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 = () => { commitCancel = () => {

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { ClickOutside } from '@seafile/sf-metadata-ui-component'; 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 { isCellValueChanged } from '../../../utils/cell-comparer';
import { EVENT_BUS_TYPE } from '../../../constants'; import { EVENT_BUS_TYPE } from '../../../constants';
import Editor from '../editor'; import Editor from '../editor';
@ -124,48 +124,50 @@ class PopupEditorContainer extends React.Component {
getOldRowData = (originalOldCellValue) => { getOldRowData = (originalOldCellValue) => {
const { column } = this.props; const { column } = this.props;
const { key: columnKey, name: columnName, type: columnType } = column; const { key: columnKey, name: columnName, type: columnType } = column;
let oldRowData; let oldValue = originalOldCellValue;
if (this.getEditor().getOldValue) { if (this.getEditor().getOldValue) {
const original = this.getEditor().getOldValue(); const original = this.getEditor().getOldValue();
oldRowData = { [columnName]: original[Object.keys(original)[0]] } ; oldValue = original[Object.keys(original)[0]];
} else {
oldRowData = { [columnName]: originalOldCellValue };
} }
// long-text cell value need format to {text: '', links: [], ...}
if (columnType === CellType.LONG_TEXT) { if (columnType === CellType.LONG_TEXT) {
const original = this.getEditor().getValue(); oldValue = this.getEditor().getValue(); // long-text cell value need format to {text: '', links: [], ...}
oldRowData = { [columnName]: original };
} }
const oldRowData = PRIVATE_COLUMN_KEYS.includes(columnKey) ? { [columnName]: oldValue } : { [columnName]: oldValue } ;
const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue } const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
return { oldRowData, originalOldRowData }; return { oldRowData, originalOldRowData };
}; };
// The input area in the interface loses focus. Use this.getEditor().getValue() to get data. // The input area in the interface loses focus. Use this.getEditor().getValue() to get data.
commit = () => { commit = () => {
const { onCommit, column, record } = this.props; const { column, record } = this.props;
if (!record._id) return; if (!record._id) return;
const { key: columnKey, type: columnType, name: columnName } = column; const { key: columnKey, type: columnType } = column;
const originalOldCellValue = getCellValueByColumn(record, column);
const newValue = this.getEditor().getValue(); const newValue = this.getEditor().getValue();
let updated = columnType === CellType.DATE ? { [columnKey]: newValue } : newValue; 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 }; let originalUpdates = { ...updated };
if ( if (!isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) || !this.isNewValueValid(updated)) {
!isCellValueChanged(originalOldCellValue, originalUpdates[columnKey], columnType) || if (closeEditor && typeof this.editor.onClose === 'function') {
!this.isNewValueValid(updated)
) {
if (typeof this.editor.onClose === 'function') {
this.editor.onClose(); this.editor.onClose();
} }
return; return;
} }
if (columnType === CellType.SINGLE_SELECT) {
updated[columnKey] = newValue[columnKey] ? getColumnOptionNameById(column, newValue[columnKey]) : '';
}
this.changeCommitted = true; this.changeCommitted = true;
const rowId = record._id; const rowId = record._id;
const key = Object.keys(updated)[0]; const key = Object.keys(updated)[0];
const value = updated[key]; 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 // special treatment of long-text column types to keep the stored data consistent
if (columnType === CellType.LONG_TEXT) { if (columnType === CellType.LONG_TEXT) {
@ -177,30 +179,7 @@ class PopupEditorContainer extends React.Component {
// originalUpdates used for update local record data // originalUpdates used for update local record data
// oldRowData ues for undo/undo modify record // oldRowData ues for undo/undo modify record
// originalOldRowData ues for undo/undo modify record // originalOldRowData ues for undo/undo modify record
onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }); onCommit({ rowId, cellKey: columnKey, updates, originalUpdates, oldRowData, originalOldRowData }, closeEditor);
};
// 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);
}; };
commitCancel = () => { commitCancel = () => {

View File

@ -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(); toggle();
}, [nameRef, column, metadata, onChange, toggle]); }, [nameRef, column, metadata, onChange, toggle]);

View File

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

View File

@ -45,8 +45,8 @@ Groupbys.propTypes = {
onMove: PropTypes.func, onMove: PropTypes.func,
}; };
const DndOptionsContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({ const DndGroupbysContainer = DropTarget('sfMetadataGroupbyItem', {}, connect => ({
connectDropTarget: connect.dropTarget() connectDropTarget: connect.dropTarget()
}))(Groupbys); }))(Groupbys);
export default html5DragDropContext(DndOptionsContainer); export default html5DragDropContext(DndGroupbysContainer);

View File

@ -419,6 +419,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
transform: translateZ(10px);
} }
.table-header-top { .table-header-top {

View File

@ -157,9 +157,9 @@ class RecordsBody extends Component {
this.resultContentRef.scrollTop = scrollTop; this.resultContentRef.scrollTop = scrollTop;
}; };
setScrollLeft = (scrollLeft) => { setScrollLeft = (scrollLeft, scrollTop) => {
const { interactionMask } = this; const { interactionMask } = this;
interactionMask && interactionMask.setScrollLeft(scrollLeft); interactionMask && interactionMask.setScrollLeft(scrollLeft, scrollTop);
}; };
cancelSetScrollLeft = () => { cancelSetScrollLeft = () => {

View File

@ -109,6 +109,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
background-color: #fff; background-color: #fff;
opacity: 1;
} }
/* group-header-left */ /* group-header-left */
@ -222,7 +223,7 @@
} }
.canvas-groups-rows .sf-metadata-ui.cell-formatter-container { .canvas-groups-rows .sf-metadata-ui.cell-formatter-container {
overflow: unset; overflow: hidden;
} }
/* group rows count */ /* group rows count */

View File

@ -7,7 +7,6 @@ import { isMobile } from '../../../../../../utils';
import { isFrozen } from '../../../../../../utils/column-utils'; import { isFrozen } from '../../../../../../utils/column-utils';
import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants'; import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
import { Z_INDEX } from '../../../../../../_basic'; import { Z_INDEX } from '../../../../../../_basic';
import { SIDE_PANEL_FOLDED_WIDTH } from '../../../../../../../../constants';
import './index.css'; import './index.css';
@ -42,9 +41,8 @@ class GroupContainer extends Component {
fixedFrozenDOMs = (scrollLeft, scrollTop) => { fixedFrozenDOMs = (scrollLeft, scrollTop) => {
if (this.backDrop) { if (this.backDrop) {
const { left: tableContentLeft } = this.props.getTableContentRect();
this.backDrop.style.position = 'fixed'; 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'; this.backDrop.style.marginTop = (-scrollTop) + 'px';
} }

View File

@ -153,8 +153,8 @@ class GroupBody extends Component {
this.resultContentRef.scrollTop = scrollTop; this.resultContentRef.scrollTop = scrollTop;
}; };
setScrollLeft = (scrollLeft) => { setScrollLeft = (scrollLeft, scrollTop) => {
this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft); this.interactionMask && this.interactionMask.setScrollLeft(scrollLeft, scrollTop);
}; };
cancelSetScrollLeft = () => { cancelSetScrollLeft = () => {
@ -192,9 +192,7 @@ class GroupBody extends Component {
getRowTop = (groupRecordIndex) => { getRowTop = (groupRecordIndex) => {
const { groupMetrics } = this.state; const { groupMetrics } = this.state;
const groupRow = getGroupRecordByIndex(groupRecordIndex, groupMetrics); const groupRow = getGroupRecordByIndex(groupRecordIndex, groupMetrics);
if (!groupRow) { if (!groupRow) return 0;
return 0;
}
return groupRow.top || 0; return groupRow.top || 0;
}; };
@ -306,6 +304,7 @@ class GroupBody extends Component {
onCellMouseEnter: this.onCellMouseEnter, onCellMouseEnter: this.onCellMouseEnter,
onCellMouseMove: this.onCellMouseMove, onCellMouseMove: this.onCellMouseMove,
onDragEnter: this.handleDragEnter, onDragEnter: this.handleDragEnter,
modifyRecord: this.props.modifyRecord,
}; };
return this.cellMetaData; return this.cellMetaData;
}; };
@ -589,10 +588,8 @@ class GroupBody extends Component {
getFoldedGroups = () => { getFoldedGroups = () => {
const localConfigs = window.sfMetadataContext.localStorage.getItem(LOCAL_FOLDED_GROUP_KEY); const localConfigs = window.sfMetadataContext.localStorage.getItem(LOCAL_FOLDED_GROUP_KEY);
if (!localConfigs) { if (!localConfigs) return {};
return {}; return localConfigs;
}
return localConfigs[LOCAL_FOLDED_GROUP_KEY] || {};
}; };
getVisibleIndex = () => { getVisibleIndex = () => {

View File

@ -6,7 +6,7 @@ import GroupBody from './group-body';
import RecordsFooter from './record-footer'; import RecordsFooter from './record-footer';
import { HorizontalScrollbar } from '../../../scrollbar'; import { HorizontalScrollbar } from '../../../scrollbar';
import { recalculate, setColumnOffsets } from '../../../../utils/column-utils'; 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 { import {
isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName, isWindowsBrowser, isWebkitBrowser, isMobile, getEventClassName,
addClassName, removeClassName, addClassName, removeClassName,
@ -200,7 +200,7 @@ class Records extends Component {
this.handleScrollbarScroll(scrollLeft); this.handleScrollbarScroll(scrollLeft);
} }
if (this.bodyRef && this.bodyRef.interactionMask) { if (this.bodyRef && this.bodyRef.interactionMask) {
this.bodyRef.setScrollLeft(scrollLeft); this.bodyRef.setScrollLeft(scrollLeft, scrollTop);
} }
this.updateHorizontalScrollState({ this.updateHorizontalScrollState({
@ -633,7 +633,7 @@ class Records extends Component {
deleteColumn } = this.props; deleteColumn } = this.props;
const { recordMetrics, columnMetrics, selectedRange, colOverScanStartIdx, colOverScanEndIdx } = this.state; const { recordMetrics, columnMetrics, selectedRange, colOverScanStartIdx, colOverScanEndIdx } = this.state;
const { columns, totalWidth, lastFrozenColumnKey } = columnMetrics; 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 hasSelectedRecord = this.hasSelectedRecord();
const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics); const isSelectedAll = RecordMetrics.isSelectedAll(recordIds, recordMetrics);

View File

@ -1,7 +1,7 @@
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; 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 { TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
import { isCellValueChanged } from '../../../../../../utils/cell-comparer'; import { isCellValueChanged } from '../../../../../../utils/cell-comparer';
import CellOperationBtn from './operation-btn'; import CellOperationBtn from './operation-btn';
@ -116,7 +116,7 @@ const Cell = React.memo(({
const getOldRowData = useCallback((originalOldCellValue) => { const getOldRowData = useCallback((originalOldCellValue) => {
const { key: columnKey, name: columnName } = column; 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 } const originalOldRowData = { [columnKey]: originalOldCellValue }; // { [column.key]: cellValue }
return { oldRowData, originalOldRowData }; return { oldRowData, originalOldRowData };
}, [column]); }, [column]);
@ -128,10 +128,8 @@ const Cell = React.memo(({
if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) return; if (!isCellValueChanged(originalOldCellValue, updated[columnKey], columnType)) return;
const rowId = record._id; const rowId = record._id;
const key = Object.keys(updated)[0]; const key = Object.keys(updated)[0];
const value = updated[key]; const updates = PRIVATE_COLUMN_KEYS.includes(columnKey) ? updated : { [columnName]: updated[key] };
const updates = { [columnName]: value };
const { oldRowData, originalOldRowData } = getOldRowData(originalOldCellValue); const { oldRowData, originalOldRowData } = getOldRowData(originalOldCellValue);
// updates used for update remote record data // updates used for update remote record data
// originalUpdates used for update local record data // originalUpdates used for update local record data
// oldRowData ues for undo/undo modify record // oldRowData ues for undo/undo modify record

View File

@ -7,8 +7,12 @@ import {
NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP, NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP,
KeyCodes, KeyCodes,
isFunction, isFunction,
isEmptyObject,
HEADER_HEIGHT_TYPE,
} from '../../../../_basic'; } 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 { import {
getNewSelectedRange, getSelectedDimensions, selectedRangeIsSingleCell, getNewSelectedRange, getSelectedDimensions, selectedRangeIsSingleCell,
getSelectedRangeDimensions, getSelectedRow, getSelectedColumn, getSelectedRangeDimensions, getSelectedRow, getSelectedColumn,
@ -358,12 +362,22 @@ class InteractionMasks extends React.Component {
}) }; }) };
}; };
setScrollLeft = (scrollLeft) => { setScrollLeft = (scrollLeft, scrollTop) => {
const { selectionMask, state: { selectedPosition } } = this; 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) { if (mask) {
const { idx, rowIdx, groupRecordIndex } = position; const { idx, rowIdx, groupRecordIndex } = position;
if (idx >= 0 && rowIdx >= 0) { if (idx >= 0 && rowIdx >= 0) {
@ -372,10 +386,8 @@ class InteractionMasks extends React.Component {
const frozen = !!column.frozen; const frozen = !!column.frozen;
if (frozen) { if (frozen) {
// use fixed // use fixed
const { top: containerTop } = this.container.getClientRects()[0]; let top = -scrollTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx) + headerHeight;
const { left: tableContentLeft } = this.props.getTableContentRect(); let left = column.left;
let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx);
let left = tableContentLeft + column.left;
if (isGroupView) { if (isGroupView) {
top += 1; top += 1;
left += groupOffsetLeft; left += groupOffsetLeft;

View File

@ -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'; import { CellType, PRIVATE_COLUMN_KEYS, EDITABLE_PRIVATE_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../_basic';
class Column { class Column {
constructor(object) { constructor(object) {
this.key = object.key || ''; this.key = object.key || '';
this.name = object.name || ''; this.name = getColumnName(this.key, object.name) || '';
this.type = object.type || ''; this.type = object.type || '';
this.data = object.data || null; this.data = object.data || null;
this.width = object.width || 200; this.width = object.width || 200;

View File

@ -43,6 +43,14 @@ class DataProcessor {
// todo // 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) { static hasRelatedGroupby(groupbys, updatedColumnKeyMap) {
return groupbys.some(groupby => updatedColumnKeyMap[groupby.column_key]); return groupbys.some(groupby => updatedColumnKeyMap[groupby.column_key]);
} }
@ -99,8 +107,14 @@ class DataProcessor {
table.view.groups = groups; table.view.groups = groups;
} }
static updateDataWithModifyRecords(table, relatedColumnKeyMap) { static updateDataWithModifyRecords(table, relatedColumnKeyMap, rowIds, { collaborators }) {
// todo 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) { static handleReloadedRecords(table, reloadedRecords, relatedColumnKeyMap) {
@ -140,12 +154,7 @@ class DataProcessor {
this.updateSummaries(); this.updateSummaries();
} }
static updatePageDataWithCommonOperations(table, value) {
// todo
}
static syncOperationOnData(table, operation, { collaborators }) { static syncOperationOnData(table, operation, { collaborators }) {
switch (operation.op_type) { switch (operation.op_type) {
case OPERATION_TYPE.MODIFY_RECORD: case OPERATION_TYPE.MODIFY_RECORD:
case OPERATION_TYPE.MODIFY_RECORDS: { case OPERATION_TYPE.MODIFY_RECORDS: {
@ -167,7 +176,7 @@ class DataProcessor {
} }
} }
}); });
this.updateDataWithModifyRecords(); this.updateDataWithModifyRecords(table, relatedColumnKeyMap, row_ids, { collaborators });
this.updateSummaries(); this.updateSummaries();
break; break;
} }
@ -205,25 +214,28 @@ class DataProcessor {
}); });
} }
table.view.rows = updatedRowIds; table.view.rows = updatedRowIds;
this.updatePageDataWithCommonOperations(); this.updateDataWithModifyRecords(table, { collaborators });
this.updateSummaries(); this.updateSummaries();
break; break;
} }
case OPERATION_TYPE.MODIFY_HIDDEN_COLUMNS:
case OPERATION_TYPE.MODIFY_FILTERS: { case OPERATION_TYPE.MODIFY_FILTERS: {
this.run(table, { collaborators }); this.run(table, { collaborators });
break; break;
} }
case OPERATION_TYPE.MODIFY_SORTS: { case OPERATION_TYPE.MODIFY_SORTS: {
const { sorts, rows } = table.view; const { sorts, groupbys, rows } = table.view;
const availableColumns = table.view.available_columns || table.columns; const availableColumns = table.view.available_columns || table.columns;
if (!isSortView({ sorts }, availableColumns)) { const _isSortView = isSortView({ sorts }, availableColumns);
if (!_isSortView) {
this.run(table, { collaborators }); this.run(table, { collaborators });
break; return;
} }
table.view.rows = this.getSortedRows(table, rows, sorts, { collaborators }); const _isGroupView = isGroupView({ groupbys }, availableColumns);
this.updatePageDataWithCommonOperations(); 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; break;
} }
case OPERATION_TYPE.MODIFY_GROUPBYS: { case OPERATION_TYPE.MODIFY_GROUPBYS: {
@ -235,9 +247,6 @@ class DataProcessor {
table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators }); table.view.groups = this.getGroupedRows(table, rows, groupbys, { collaborators });
break; break;
} }
case OPERATION_TYPE.INSERT_COLUMN: {
break;
}
default: { default: {
break; break;
} }

View File

@ -294,7 +294,6 @@ export const normalizeColumns = (columns) => {
...params, ...params,
key, key,
type: columnType, type: columnType,
name: getColumnName(key, name),
width: columnsWidth[key] || 200, width: columnsWidth[key] || 200,
}; };
}).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key)); }).filter(column => !NOT_DISPLAY_COLUMN_KEYS.includes(column.key));