Get favorites list sorting working with Sortablejs

This commit is contained in:
Hadi Nategh 2021-08-04 11:26:57 +02:00
parent 5777ebeb75
commit 572908e300
2 changed files with 30 additions and 37 deletions

View File

@ -177,21 +177,25 @@ export class et2_favorites extends et2_dropdown_button implements et2_INextmatch
} }
}; };
//Add Sortable handler to nm fav. menu //todo (@todo-jquery-ui): replace the import statement
jQuery(this.menu).sortable({ /**
* todo (@todo-jquery-ui): the sorting does not work at the moment becuase of jquery-ui menu being used in order to create dropdown
items:'li:not([data-id$="add"])', * buttons menu. Once we replace the et2_widget_dropdown_button with web component this should be adapted
placeholder:'ui-fav-sortable-placeholder', * and working again.
delay: 250, //(millisecond) delay before the sorting should start **/
update: function () import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
{ let sortablejs = Sortable.create(this.menu[0], {
self.favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'}); ghostClass: 'ui-fav-sortable-placeholder',
draggable: 'li:not([data-id$="add"])',
self.egw().set_preference(self.options.app,'fav_sort_pref',self.favSortedList); delay: 25,
dataIdAttr:'data-id',
onSort: function(event){
self.favSortedList = sortablejs.toArray();
self.egw.set_preference(self.options.app,'fav_sort_pref', self.favSortedList );
sideBoxDOMNodeSort(self.favSortedList); sideBoxDOMNodeSort(self.favSortedList);
} }
}); });
}.bind(this));
// Add a listener on the delete to remove // Add a listener on the delete to remove
this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() { this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() {

View File

@ -781,32 +781,21 @@ export abstract class EgwApp
}) })
.addClass("ui-helper-clearfix"); .addClass("ui-helper-clearfix");
//Add Sortable handler to sideBox fav. menu //todo (@todo-jquery-ui): replace the import statement
jQuery('ul','#favorite_sidebox_'+this.appname).sortable({ import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
items:'li:not([data-id$="add"])', let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0];
placeholder:'ui-fav-sortable-placeholder', let sortablejs = Sortable.create(el, {
delay:250, //(millisecond) delay before the sorting should start ghostClass: 'ui-fav-sortable-placeholder',
helper: function(event, item : any) { draggable: 'li:not([data-id$="add"])',
// We'll need to know which app this is for delay: 25,
item.attr('data-appname',self.appname); dataIdAttr:'data-id',
// Create custom helper so it can be dragged to Home onSort: function(event){
var h_parent = item.parent().parent().clone(); let favSortedList = sortablejs.toArray();
h_parent.find('li').not('[data-id="'+item.attr('data-id')+'"]').remove();
h_parent.appendTo('body');
return h_parent;
},
// @ts-ignore
refreshPositions: true,
update: function (event, ui)
{
// @ts-ignore
var favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList); self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList);
self._refresh_fav_nm(); self._refresh_fav_nm();
} }
}); });
}.bind(this));
// Bind favorite de-select // Bind favorite de-select
var egw_fw = egw_getFramework(); var egw_fw = egw_getFramework();