From 572908e3004c189159ca1dc75e89759b5dad9549 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Wed, 4 Aug 2021 11:26:57 +0200
Subject: [PATCH] Get favorites list sorting working with Sortablejs

---
 api/js/etemplate/et2_widget_favorites.ts | 34 +++++++++++++-----------
 api/js/jsapi/egw_app.ts                  | 33 ++++++++---------------
 2 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/api/js/etemplate/et2_widget_favorites.ts b/api/js/etemplate/et2_widget_favorites.ts
index e4a304c017..844a148138 100644
--- a/api/js/etemplate/et2_widget_favorites.ts
+++ b/api/js/etemplate/et2_widget_favorites.ts
@@ -177,21 +177,25 @@ export class et2_favorites extends et2_dropdown_button implements et2_INextmatch
 			}
 		};
 
-		//Add Sortable handler to nm fav. menu
-		jQuery(this.menu).sortable({
-
-			items:'li:not([data-id$="add"])',
-			placeholder:'ui-fav-sortable-placeholder',
-			delay: 250, //(millisecond) delay before the sorting should start
-			update: function ()
-			{
-				self.favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
-
-				self.egw().set_preference(self.options.app,'fav_sort_pref',self.favSortedList);
-
-				sideBoxDOMNodeSort(self.favSortedList);
-			}
-		});
+		//todo (@todo-jquery-ui): replace the import statement
+		/**
+		 * todo (@todo-jquery-ui): the sorting does not work at the moment becuase of jquery-ui menu being used in order to create dropdown
+		 * buttons menu. Once we replace the et2_widget_dropdown_button with web component this should be adapted
+		 * and working again.
+		 **/
+		import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
+			let sortablejs = Sortable.create(this.menu[0], {
+				ghostClass: 'ui-fav-sortable-placeholder',
+				draggable: 'li:not([data-id$="add"])',
+				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);
+				}
+			});
+		}.bind(this));
 
 		// Add a listener on the delete to remove
 		this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() {
diff --git a/api/js/jsapi/egw_app.ts b/api/js/jsapi/egw_app.ts
index 0e425e4cbd..ff796750c3 100644
--- a/api/js/jsapi/egw_app.ts
+++ b/api/js/jsapi/egw_app.ts
@@ -781,32 +781,21 @@ export abstract class EgwApp
 				})
 				.addClass("ui-helper-clearfix");
 
-			//Add Sortable handler to sideBox fav. menu
-			jQuery('ul','#favorite_sidebox_'+this.appname).sortable({
-					items:'li:not([data-id$="add"])',
-					placeholder:'ui-fav-sortable-placeholder',
-					delay:250, //(millisecond) delay before the sorting should start
-					helper: function(event, item : any) {
-						// We'll need to know which app this is for
-						item.attr('data-appname',self.appname);
-						// Create custom helper so it can be dragged to Home
-						var h_parent = item.parent().parent().clone();
-						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'});
-
+			//todo (@todo-jquery-ui): replace the import statement
+			import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
+				let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0];
+				let sortablejs = Sortable.create(el, {
+					ghostClass: 'ui-fav-sortable-placeholder',
+					draggable: 'li:not([data-id$="add"])',
+					delay: 25,
+					dataIdAttr:'data-id',
+					onSort: function(event){
+						let favSortedList = sortablejs.toArray();
 						self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList);
-
 						self._refresh_fav_nm();
 					}
 				});
+			}.bind(this));
 
 			// Bind favorite de-select
 			var egw_fw = egw_getFramework();