Packaged data interface

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;
+  }
+
+}

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;
+  }
+
+}

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;

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;
+  }
+
+}

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;

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;
+  }
+
+}

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',
+}