holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get et2_grid sortable working with sortablejs

Browse Source
This commit is contained in:
Hadi Nategh 2021-08-03 15:59:22 +02:00
parent 8c8d8c2de9
commit c56812a42f
1 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
api/js/etemplate/et2_widget_grid.ts
View File

@ -117,6 +117,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
private wrapper = null;
private lastRowNode: null;
private sortablejs : Sortable = null;
/**
* Constructor
*
@ -943,56 +944,54 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
*/
set_sortable(sortable: boolean | Function)
{
const $node = jQuery(this.getDOMNode());
if(!sortable)
const self = this;
let tbody = this.getDOMNode().getElementsByTagName('tbody')[0];
if(!sortable && this.sortablejs)
{
$node.sortable("destroy");
this.sortablejs.destroy();
return;
}
// Make sure rows have IDs, so sortable has something to return
jQuery('tr', this.tbody).each(function(index) {
const $this = jQuery(this);
// Header does not participate in sorting
if($this.hasClass('th')) return;
// If row doesn't have an ID, assign the index as ID
if(!$this.attr("id")) $this.attr("id", index);
});
const self = this;
// Set up sortable
$node.sortable({
// Header does not participate in sorting
items: "> tbody > tr:not(.th)",
distance: 15,
cancel: this.options.sortable_cancel,
placeholder: this.options.sortable_placeholder,
containment: this.options.sortable_containment,
connectWith: this.options.sortable_connectWith,
update: function(event, ui) {
self.egw().json(sortable,[
self.getInstanceManager().etemplate_exec_id,
$node.sortable("toArray"),
self.id],
null,
self,
true
).sendRequest();
},
receive: function (event, ui) {
if (typeof self.sortable_recieveCallback == 'function') {
self.sortable_recieveCallback.call(self, event, ui, self.id);
}
},
start: function (event, ui) {
if (typeof self.options.sortable_startCallback == 'function') {
self.options.sortable_startCallback.call(self, event, ui, self.id);
}
for (let i =0; i < tbody.children.length; i++)
{
if (!tbody.children[i].classList.contains('th') && !tbody.children[i].id)
{
tbody.children[i].setAttribute('id', i.toString());
}
});
}
//todo: fix the sortable import statement
import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
this.sortablejs = new Sortable(tbody,{
group: this.options.sortable_connectWith,
draggable: "tr:not(.th)",
filter: this.options.sortable_cancel,
ghostClass: this.options.sortable_placeholder,
dataIdAttr: 'id',
onAdd:function (event) {
if (typeof self.options.sortable_recieveCallback == 'function') {
self.options.sortable_recieveCallback.call(self, event, this, self.id);
}
},
onStart: function (event, ui) {
if (typeof self.options.sortable_startCallback == 'function') {
self.options.sortable_startCallback.call(self, event, this, self.id);
}
},
onSort: function (event) {
self.egw().json(sortable,[
self.getInstanceManager().etemplate_exec_id,
self.sortablejs.toArray(),
self.id],
null,
self,
true
).sendRequest();
},
});
}.bind(this));
}
/**