Granular setting for edit cell, Refresh row api

lib/frappe-datatable.js

@@ -614,6 +614,17 @@ var RowManager = function () {
       this.instance.renderBody();
       this.instance.setDimensions();
     }
+  }, {
+    key: 'refreshRow',
+    value: function refreshRow(row, rowIndex) {
+      var _this2 = this;
+
+      var _row = this.datamanager.updateRow(row, rowIndex);
+
+      _row.forEach(function (cell) {
+        _this2.cellmanager.refreshCell(cell);
+      });
+    }
   }, {
     key: 'getCheckedRows',
     value: function getCheckedRows() {
@@ -629,10 +640,10 @@ var RowManager = function () {
   }, {
     key: 'highlightCheckedRows',
     value: function highlightCheckedRows() {
-      var _this2 = this;
+      var _this3 = this;
 
       this.getCheckedRows().map(function (rowIndex) {
-        return _this2.checkRow(rowIndex, true);
+        return _this3.checkRow(rowIndex, true);
       });
     }
   }, {
@@ -762,6 +773,11 @@ var RowManager = function () {
     get: function get() {
       return this.instance.datamanager;
     }
+  }, {
+    key: 'cellmanager',
+    get: function get() {
+      return this.instance.cellmanager;
+    }
   }]);
 
   return RowManager;
@@ -822,6 +838,7 @@ var CellManager = function () {
     this.bodyScrollable = this.instance.bodyScrollable;
     this.columnmanager = this.instance.columnmanager;
     this.rowmanager = this.instance.rowmanager;
+    this.datamanager = this.instance.datamanager;
 
     this.bindEvents();
   }
@@ -997,7 +1014,7 @@ var CellManager = function () {
         _this5.selectArea((0, _dom2.default)(e.delegatedTarget));
       };
 
-      _dom2.default.on(this.bodyScrollable, 'mousemove', '.data-table-col', (0, _utils.throttle)(selectArea, 100));
+      _dom2.default.on(this.bodyScrollable, 'mousemove', '.data-table-col', (0, _utils.throttle)(selectArea, 50));
     }
   }, {
     key: 'focusCell',
@@ -1214,11 +1231,15 @@ var CellManager = function () {
           colIndex = _$$data6.colIndex;
 
       var col = this.columnmanager.getColumn(colIndex);
-
       if (col && col.editable === false) {
         return;
       }
 
+      var cell = this.getCell(colIndex, rowIndex);
+      if (cell && cell.editable === false) {
+        return;
+      }
+
       if (this.$editingCell) {
         var _$$data7 = _dom2.default.data(this.$editingCell),
             _rowIndex = _$$data7._rowIndex,
@@ -1236,7 +1257,6 @@ var CellManager = function () {
       var $editCell = (0, _dom2.default)('.edit-cell', $cell);
       $editCell.innerHTML = '';
 
-      var cell = this.getCell(colIndex, rowIndex);
       var editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
 
       if (editing) {
@@ -1296,13 +1316,13 @@ var CellManager = function () {
           var oldValue = this.getCell(colIndex, rowIndex).content;
 
           // update cell immediately
-          this.updateCell(rowIndex, colIndex, value);
+          this.updateCell(colIndex, rowIndex, value);
 
           if (done && done.then) {
             // revert to oldValue if promise fails
             done.catch(function (e) {
               console.log(e);
-              _this7.updateCell(rowIndex, colIndex, oldValue);
+              _this7.updateCell(colIndex, rowIndex, oldValue);
             });
           }
         }
@@ -1354,18 +1374,14 @@ var CellManager = function () {
     }
   }, {
     key: 'updateCell',
-    value: function updateCell(rowIndex, colIndex, value) {
-      var cell = this.getCell(colIndex, rowIndex);
-
-      cell.content = value;
+    value: function updateCell(colIndex, rowIndex, value) {
+      var cell = this.datamanager.updateCell(colIndex, rowIndex, value);
       this.refreshCell(cell);
     }
   }, {
     key: 'refreshCell',
     value: function refreshCell(cell) {
-      var selector = '.data-table-col[data-row-index="' + cell.rowIndex + '"][data-col-index="' + cell.colIndex + '"]';
-      var $cell = (0, _dom2.default)(selector, this.bodyScrollable);
-
+      var $cell = (0, _dom2.default)(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
       $cell.innerHTML = getCellContent(cell);
     }
   }, {
@@ -2285,6 +2301,11 @@ var DataTable = function () {
       this.datamanager.appendRows(rows);
       this.rowmanager.refreshRows();
     }
+  }, {
+    key: 'refreshRow',
+    value: function refreshRow(row, rowIndex) {
+      this.rowmanager.refreshRow(row, rowIndex);
+    }
   }, {
     key: 'render',
     value: function render() {
@@ -2715,6 +2736,46 @@ var DataManager = function () {
         return newRow;
       });
     }
+  }, {
+    key: 'updateRow',
+    value: function updateRow(row, rowIndex) {
+      if (row.length < this.columns.length) {
+        if (this.hasColumn('Sr. No')) {
+          var val = rowIndex + 1 + '';
+
+          row = [val].concat(row);
+        }
+
+        if (this.hasColumn('Checkbox')) {
+          var _val3 = '<input type="checkbox" />';
+
+          row = [_val3].concat(row);
+        }
+      }
+
+      var _row = prepareRow(row, rowIndex);
+      var index = this.rows.findIndex(function (row) {
+        return row[0].rowIndex === rowIndex;
+      });
+      this.rows[index] = _row;
+
+      return _row;
+    }
+  }, {
+    key: 'updateCell',
+    value: function updateCell(colIndex, rowIndex, value) {
+      var cell = void 0;
+      if ((typeof colIndex === 'undefined' ? 'undefined' : _typeof(colIndex)) === 'object') {
+        // cell object was passed
+        cell = colIndex;
+        colIndex = cell.colIndex;
+        rowIndex = cell.rowIndex;
+        value = cell.content;
+      }
+      cell = this.getCell(colIndex, rowIndex);
+      cell.content = value;
+      return cell;
+    }
   }, {
     key: 'getRowCount',
     value: function getRowCount() {

src/cellmanager.js

@@ -16,6 +16,7 @@ export default class CellManager {
     this.bodyScrollable = this.instance.bodyScrollable;
     this.columnmanager = this.instance.columnmanager;
     this.rowmanager = this.instance.rowmanager;
+    this.datamanager = this.instance.datamanager;
 
     this.bindEvents();
   }
@@ -163,7 +164,7 @@ export default class CellManager {
       this.selectArea($(e.delegatedTarget));
     };
 
-    $.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle(selectArea, 100));
+    $.on(this.bodyScrollable, 'mousemove', '.data-table-col', throttle(selectArea, 50));
   }
 
   focusCell($cell, { skipClearSelection = 0 } = {}) {
@@ -331,12 +332,17 @@ export default class CellManager {
 
   activateEditing($cell) {
     const { rowIndex, colIndex } = $.data($cell);
-    const col = this.columnmanager.getColumn(colIndex);
 
+    const col = this.columnmanager.getColumn(colIndex);
     if (col && col.editable === false) {
       return;
     }
 
+    const cell = this.getCell(colIndex, rowIndex);
+    if (cell && cell.editable === false) {
+      return;
+    }
+
     if (this.$editingCell) {
       const { _rowIndex, _colIndex } = $.data(this.$editingCell);
 
@@ -352,7 +358,6 @@ export default class CellManager {
     const $editCell = $('.edit-cell', $cell);
     $editCell.innerHTML = '';
 
-    const cell = this.getCell(colIndex, rowIndex);
     const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
 
     if (editing) {
@@ -405,13 +410,13 @@ export default class CellManager {
         const oldValue = this.getCell(colIndex, rowIndex).content;
 
         // update cell immediately
-        this.updateCell(rowIndex, colIndex, value);
+        this.updateCell(colIndex, rowIndex, value);
 
         if (done && done.then) {
           // revert to oldValue if promise fails
           done.catch((e) => {
             console.log(e);
-            this.updateCell(rowIndex, colIndex, oldValue);
+            this.updateCell(colIndex, rowIndex, oldValue);
           });
         }
       }
@@ -452,17 +457,13 @@ export default class CellManager {
     copyTextToClipboard(values);
   }
 
-  updateCell(rowIndex, colIndex, value) {
-    const cell = this.getCell(colIndex, rowIndex);
-
-    cell.content = value;
+  updateCell(colIndex, rowIndex, value) {
+    const cell = this.datamanager.updateCell(colIndex, rowIndex, value);
     this.refreshCell(cell);
   }
 
   refreshCell(cell) {
-    const selector = `.data-table-col[data-row-index="${cell.rowIndex}"][data-col-index="${cell.colIndex}"]`;
-    const $cell = $(selector, this.bodyScrollable);
-
+    const $cell = $(cellSelector(cell.colIndex, cell.rowIndex), this.bodyScrollable);
     $cell.innerHTML = getCellContent(cell);
   }
 

src/datamanager.js

@@ -249,6 +249,42 @@ export default class DataManager {
     });
   }
 
+  updateRow(row, rowIndex) {
+    if (row.length < this.columns.length) {
+      if (this.hasColumn('Sr. No')) {
+        const val = (rowIndex + 1) + '';
+
+        row = [val].concat(row);
+      }
+
+      if (this.hasColumn('Checkbox')) {
+        const val = '<input type="checkbox" />';
+
+        row = [val].concat(row);
+      }
+    }
+
+    const _row = prepareRow(row, rowIndex);
+    const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
+    this.rows[index] = _row;
+
+    return _row;
+  }
+
+  updateCell(colIndex, rowIndex, value) {
+    let cell;
+    if (typeof colIndex === 'object') {
+      // cell object was passed
+      cell = colIndex;
+      colIndex = cell.colIndex;
+      rowIndex = cell.rowIndex;
+      value = cell.content;
+    }
+    cell = this.getCell(colIndex, rowIndex);
+    cell.content = value;
+    return cell;
+  }
+
   getRowCount() {
     return this.rowCount;
   }

src/datatable.js

@@ -136,6 +136,10 @@ class DataTable {
     this.rowmanager.refreshRows();
   }
 
+  refreshRow(row, rowIndex) {
+    this.rowmanager.refreshRow(row, rowIndex);
+  }
+
   render() {
     this.renderHeader();
     this.renderBody();

src/rowmanager.js

@@ -17,6 +17,10 @@ export default class RowManager {
     return this.instance.datamanager;
   }
 
+  get cellmanager() {
+    return this.instance.cellmanager;
+  }
+
   bindEvents() {
     this.bindCheckbox();
   }
@@ -45,6 +49,14 @@ export default class RowManager {
     this.instance.setDimensions();
   }
 
+  refreshRow(row, rowIndex) {
+    const _row = this.datamanager.updateRow(row, rowIndex);
+
+    _row.forEach(cell => {
+      this.cellmanager.refreshCell(cell);
+    });
+  }
+
   getCheckedRows() {
     return this.checkMap
       .map((c, rowIndex) => {