From 5d0452037994fbabaf826a93d8f27338cd7f5595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 12 Jan 2024 20:11:12 +0100
Subject: [PATCH] refactor

---
 .../sorter-group.ts                           |  4 +--
 .../packages/core/sorter/sorter.controller.ts | 35 ++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index f62a5f0410..70c077ee6f 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -68,9 +68,9 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			this.requestUpdate('_items', oldValue);
 			return true;
 		},*/
-		onChange: (newModel) => {
+		onChange: ({ model }) => {
 			const oldValue = this._items;
-			this.items = newModel;
+			this.items = model;
 			this.requestUpdate('_items', oldValue);
 		},
 	});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
index 65ce46da5b..f6c49d2869 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/sorter/sorter.controller.ts
@@ -75,7 +75,7 @@ type INTERNAL_UmbSorterConfig<T, ElementType extends HTMLElement> = {
 	boundarySelector?: string;
 	dataTransferResolver?: (dataTransfer: DataTransfer | null, currentItem: T) => void;
 	onStart?: (argument: { item: T; element: ElementType }) => void;
-	onChange?: (argument: { item: T; element: ElementType; model: Array<T> }) => void;
+	onChange?: (argument: { item: T; model: Array<T> }) => void;
 	onContainerChange?: (argument: { item: T; element: ElementType }) => void;
 	onEnd?: (argument: { item: T; element: ElementType }) => void;
 	itemHasNestedContainersResolver?: (element: HTMLElement) => boolean;
@@ -93,7 +93,7 @@ type INTERNAL_UmbSorterConfig<T, ElementType extends HTMLElement> = {
 		placeholderIsInThisRow: boolean;
 		horizontalPlaceAfter: boolean;
 	}) => void;
-	performItemMove?: (argument: { item: T; newIndex: number }) => Promise<boolean> | boolean;
+	performItemMove?: (argument: { item: T; newIndex: number; oldIndex: number }) => Promise<boolean> | boolean;
 	performItemInsert?: (argument: { item: T; newIndex: number }) => Promise<boolean> | boolean;
 	performItemRemove?: (argument: { item: T }) => Promise<boolean> | boolean;
 };
@@ -262,7 +262,6 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		}
 	}
 	#removePlaceholderStyle() {
-		console.log('remove placeholder style', this.#currentElement);
 		if (this.#config.placeholderClass) {
 			this.#currentElement?.classList.remove(this.#config.placeholderClass);
 		}
@@ -294,10 +293,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		const element = (event.target as HTMLElement).closest(this.#config.itemSelector);
 		if (!element) return;
 
-		console.log('#drag start!');
-
 		if (this.#currentElement && this.#currentElement !== element) {
-			console.log('#drag start, calls END!!!!!');
 			this.#handleDragEnd();
 		}
 
@@ -347,7 +343,6 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 	};
 
 	#handleDragEnd = async () => {
-		console.log('#drag end!');
 		window.removeEventListener('dragover', this.#handleDragMove);
 		window.removeEventListener('dragend', this.#handleDragEnd);
 
@@ -663,24 +658,24 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 				const newModel = [...this.#model];
 				newModel.splice(oldIndex, 1);
 				this.#model = newModel;
-				this.#config.onChange?.(newModel);
+				this.#config.onChange?.({ model: newModel, item });
 				return true;
 			}
 		}
 		return false;
 	}
 
-	hasOtherItemsThan(item: T) {
+	public hasOtherItemsThan(item: T) {
 		return this.#model.filter((x) => x !== item).length > 0;
 	}
 
 	public async moveItemInModel(newIndex: number, element: ElementType, fromCtrl: UmbSorterController<T, ElementType>) {
-		const movingItem = fromCtrl.getItemOfElement(element);
-		if (!movingItem) {
+		const item = fromCtrl.getItemOfElement(element);
+		if (!item) {
 			console.error('Could not find item of sync item');
 			return false;
 		}
-		if (this.notifyRequestDrop({ item: movingItem }) === false) {
+		if (this.notifyRequestDrop({ item }) === false) {
 			return false;
 		}
 
@@ -690,10 +685,10 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			// Local move:
 
 			// TODO: Maybe this should be replaceable/configurable:
-			const oldIndex = this.#model.indexOf(movingItem);
+			const oldIndex = this.#model.indexOf(item);
 
 			if (this.#config.performItemMove) {
-				const result = await this.#config.performItemMove({ item: movingItem, newIndex, oldIndex });
+				const result = await this.#config.performItemMove({ item, newIndex, oldIndex });
 				if (result === false) {
 					return false;
 				}
@@ -703,28 +698,28 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 				if (oldIndex <= newIndex) {
 					newIndex--;
 				}
-				newModel.splice(newIndex, 0, movingItem);
+				newModel.splice(newIndex, 0, item);
 				this.#model = newModel;
-				this.#config.onChange?.(newModel);
+				this.#config.onChange?.({ model: newModel, item });
 			}
 		} else {
 			// Not a local move:
 
-			if ((await fromCtrl.removeItem(movingItem)) !== true) {
+			if ((await fromCtrl.removeItem(item)) !== true) {
 				console.error('Sync could not remove item');
 				return false;
 			}
 
 			if (this.#config.performItemInsert) {
-				const result = await this.#config.performItemInsert({ item: movingItem, newIndex });
+				const result = await this.#config.performItemInsert({ item, newIndex });
 				if (result === false) {
 					return false;
 				}
 			} else {
 				const newModel = [...this.#model];
-				newModel.splice(newIndex, 0, movingItem);
+				newModel.splice(newIndex, 0, item);
 				this.#model = newModel;
-				this.#config.onChange?.(newModel);
+				this.#config.onChange?.({ model: newModel, item });
 			}
 		}