From abdaeb8683fa4b4a6c700ca13fe1b596b953cb84 Mon Sep 17 00:00:00 2001 From: shanshuirenjia <978987373@qq.com> Date: Mon, 6 May 2019 13:22:43 +0800 Subject: [PATCH] Packaged data interface --- .../src/pages/data-grid/model/GridColumn.js | 12 ++++ frontend/src/pages/data-grid/model/GridRow.js | 7 ++ frontend/src/pages/data-grid/store/Apply.js | 54 ++++++++++++++ .../src/pages/data-grid/store/DTableStore.js | 71 +++++++++++++++++++ frontend/src/pages/data-grid/store/Invert.js | 35 +++++++++ .../src/pages/data-grid/store/Operation.js | 20 ++++++ .../pages/data-grid/store/OperationTypes.js | 8 +++ 7 files changed, 207 insertions(+) create mode 100644 frontend/src/pages/data-grid/model/GridColumn.js create mode 100644 frontend/src/pages/data-grid/model/GridRow.js create mode 100644 frontend/src/pages/data-grid/store/Apply.js create mode 100644 frontend/src/pages/data-grid/store/DTableStore.js create mode 100644 frontend/src/pages/data-grid/store/Invert.js create mode 100644 frontend/src/pages/data-grid/store/Operation.js create mode 100644 frontend/src/pages/data-grid/store/OperationTypes.js diff --git a/frontend/src/pages/data-grid/model/GridColumn.js b/frontend/src/pages/data-grid/model/GridColumn.js new file mode 100644 index 0000000000..526bc9ba29 --- /dev/null +++ b/frontend/src/pages/data-grid/model/GridColumn.js @@ -0,0 +1,12 @@ +export default class GridColumn { + + constructor(object) { + this.key = object.columnName || object.name; + this.name = object.columnName || object.name; + this.type = object.columnType || null; + this.editable = object.editable || true; + this.width = object.width || 200; + this.resizable = object.resizable || true; + } + +} diff --git a/frontend/src/pages/data-grid/model/GridRow.js b/frontend/src/pages/data-grid/model/GridRow.js new file mode 100644 index 0000000000..e5b54ebcd7 --- /dev/null +++ b/frontend/src/pages/data-grid/model/GridRow.js @@ -0,0 +1,7 @@ +export default class GridRow { + + constructor(object) { + this.name = object.name || 'name_' + object.newRowIdx; + } + +} diff --git a/frontend/src/pages/data-grid/store/Apply.js b/frontend/src/pages/data-grid/store/Apply.js new file mode 100644 index 0000000000..da5d623ccb --- /dev/null +++ b/frontend/src/pages/data-grid/store/Apply.js @@ -0,0 +1,54 @@ +import OperationTypes from './OperationTypes'; +import GridColumn from '../model/GridColumn'; +import GridRow from '../model/GridRow'; + +function apply(value, op) { + + let { type } = op; + value = value.slice(0); // clone a copy + + switch(type) { + case OperationTypes.DELETE_ROW : { + let { rowIdx } = op; + let next = value.splice(rowIdx, 1); + return next; + } + + case OperationTypes.INSERT_ROW : { + let { newRowIdx } = op; + let row = new GridRow({newRowIdx}); + let next = value.push(row); + return next; + } + + case OperationTypes.DELETE_COLUMN : { + let { idx } = op; + let next = value.splice(idx, 1); + return next; + } + + case OperationTypes.INSERT_COLUMN : { + let { idx, columnName, columnType } = op; + let column = new GridColumn({idx, columnName, columnType}); + let next = value.push(column); + return next; + } + + case OperationTypes.MODIFY_CELL : { + let { rowIdx, key, newCellValue } = op; + let next = value; + next[rowIdx][key] = newCellValue; + return next; + } + + case OperationTypes.MODIFY_COLUMN : { + let { idx, newColumnName } = op; + let next = value; + next[idx]['key'] = newColumnName; + next[idx]['name'] = newColumnName; + return next; + } + } +} + +export default apply; diff --git a/frontend/src/pages/data-grid/store/DTableStore.js b/frontend/src/pages/data-grid/store/DTableStore.js new file mode 100644 index 0000000000..416a510569 --- /dev/null +++ b/frontend/src/pages/data-grid/store/DTableStore.js @@ -0,0 +1,71 @@ +import Operation from './Operation'; +import OperationTypes from './OperationTypes'; +// todo Immutable +// Implement the current version with an array +export default class DTableStore { + + constructor(value) { + this.operations = []; + this.columns = value.columns || []; + this.rows = value.rows || []; + } + + updateStoreValues({ columns, rows }) { + this.columns = columns; + this.rows = rows; + } + + createOperation(op) { + return new Operation(op); + } + + deleteRow(rowIdx) { + let type = OperationTypes.DELETE_ROW; + let operation = this.createOperation({type, rowIdx}); + let next = operation.apply(type); + this.operations.push(operation); + return next; + } + + insertRow(newRowIdx) { + let type = OperationTypes.INSERT_ROW; + let operation = this.createOperation({type, newRowIdx}); + let next = operation.apply(type); + this.operations.push(operation); + return next; + } + + deleteColumn(idx) { + let type = OperationTypes.INSERT_COLUMN; + let operation = this.createOperation({type, idx}); + let next = operation.apply(this.columns); + this.operations.push(operation); + return next; + } + + insertColumn(idx, columnName, columnType) { + let type = OperationTypes.INSERT_COLUMN; + let operation = this.createOperation({type, idx, columnName, columnType}); + let next = operation.apply(this.columns); + this.operations.push(operation); + return next; + } + + modifyColumn(idx, oldColumnName, newColumnName) { + let type = OperationTypes.MODIFY_COLUMN; + let operation = this.createOperation({type, idx, oldColumnName, newColumnName}); + let next = operation.apply(this.columns); + this.operations.push(operation); + return next; + } + + modifyCell(idx, rowIdx, oldCellValue, newCellValue) { + let type = OperationTypes.MODIFY_CELL; + let key = this.columns[idx].key; + let operation = this.createOperation({type, rowIdx, key, oldCellValue, newCellValue}); + let next = operation.apply(this.rows); + this.operations.push(operation); + return next; + } + +} diff --git a/frontend/src/pages/data-grid/store/Invert.js b/frontend/src/pages/data-grid/store/Invert.js new file mode 100644 index 0000000000..9008952b6a --- /dev/null +++ b/frontend/src/pages/data-grid/store/Invert.js @@ -0,0 +1,35 @@ +import Operation from './Operation'; +import OperationTypes from './OperationTypes'; + +function invert(operation) { + + let op = new Operation(operation); + let { type } = operation; + switch(type) { + + case OperationTypes.DELETE_COLUMN : { + op.type = OperationTypes.INSERT_COLUMN; + return op; + } + + case OperationTypes.INSERT_COLUMN : { + op.type = OperationTypes.DELETE_COLUMN; + return op; + } + + case OperationTypes.DELETE_ROW : { + op.type = OperationTypes.INSERT_ROW; + return op; + } + + case OperationTypes.INSERT_ROW : { + op.type = OperationTypes.DELETE_ROW; + return op; + } + + default : + break; + } +} + +export default invert; diff --git a/frontend/src/pages/data-grid/store/Operation.js b/frontend/src/pages/data-grid/store/Operation.js new file mode 100644 index 0000000000..580de15834 --- /dev/null +++ b/frontend/src/pages/data-grid/store/Operation.js @@ -0,0 +1,20 @@ +import apply from './Apply'; +import invert from './Invert'; + +export default class Operation { + + constructor(operation) { + this.operation = operation; + } + + apply(value) { + let next = apply(value, this.operation); + return next; + } + + invert() { + let inverted = invert(this); + return inverted; + } + +} diff --git a/frontend/src/pages/data-grid/store/OperationTypes.js b/frontend/src/pages/data-grid/store/OperationTypes.js new file mode 100644 index 0000000000..c66cb5f458 --- /dev/null +++ b/frontend/src/pages/data-grid/store/OperationTypes.js @@ -0,0 +1,8 @@ +export default OperationTypes = { + DELETE_ROW: 'DELETE_NODE', + INSERT_ROW: 'INSERT_ROW', + DELETE_COLUMN: 'DELETE_COLUMN', + INSERT_COLUMN: 'INSERT_COLUMN', + MODIFY_CELL: 'MODIFY_CELL', + MODIFY_COLUMN: 'MODIFY_COLUMN', +}