frappe / frappe/datatable

I added an event after field edition, what do you think ?

Open
#59 8 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.3k
Forks
216
PR merge metrics
No merged PRs in 30d

Description

Hi !
I needed to save data after inline edition. seeing [https://github.com/frappe/datatable/issues/46](https://github.com/frappe/datatable/issues/46) I thought I should try my hand on it.

It's working for me, but I don't know if it's good enough for community, so, what do you think ?

in apps/frappe/node_modules/frappe-datatable/dist/frappe-datatable.cjs.js
from line 2525
`class CellManager {
constructor(instance) {
this.instance = instance;
linkProperties(this, this.instance, [
'wrapper',
'options',
'style',
'header',
'bodyScrollable',
'columnmanager',
'rowmanager',
'datamanager',
'keyboard',
'fireEvent', //<= add this
]);
this.bindEvents();
`

then, from line 3022

` submitEditing() {
if (!this.$editingCell) return;
const $cell = this.$editingCell;
const {
rowIndex,
colIndex
} = $.data($cell);
const col = this.datamanager.getColumn(colIndex);

if ($cell) {
const editor = this.currentCellEditor;

if (editor) {
let valuePromise = editor.getValue();

// convert to stubbed Promise
if (!valuePromise.then) {
valuePromise = Promise.resolve(valuePromise);
}

valuePromise.then((value) => {
const done = editor.setValue(value, rowIndex, col);
const oldValue = this.getCell(colIndex, rowIndex).content;

// update cell immediately
this.updateCell(colIndex, rowIndex, value);
$cell.focus();

// =>add this : BEGINNING OF add edit submit event
let rowData = this.datamanager.getData(rowIndex);
this.fireEvent('onSubmitEditing', [rowData, this.getCell(colIndex, rowIndex).column.id, value]);
// END OF add edit submit event

if (done && done.then) {
// revert to oldValue if promise fails
done.catch((e) => {
console.log(e);
this.updateCell(colIndex, rowIndex, oldValue);
});
}
});
}
}

this.currentCellEditor = null;
}`

Then in custom JS (associated to a report in my case)

`
frappe.query_reports["my_report"] = {
...
get_datatable_options(options) {

// loops on each column and make one ore more of them editable
options.columns.forEach(function(column, i) {
// column id i want to make editable
if(column.id == "your_editable_id") {
column.editable = true
}
});

// change datatable options
return Object.assign(options, {
checkboxColumn: true,
events: {
onSubmitEditing: function (cell) {
// rowValues : all cell values from row before edition
// cellId : key id of cell edited
// newVal : edited val
let [rowValues, cellId, newVal] = cell;
if(cellId == "your_editable_id") {
frappe.call({
method: "your.method",
type: "GET",
args: {name: rowValues.id, qty: newVal}, // for example
callback: function (r) {
if (r.message) {
frappe.msgprint(__(r.message));
}
},
});
}
},
}
});
},
};

`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.