From b73c12d2fc6a26eacf917524bfaeb2dc646a686b Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 12 Feb 2024 10:48:51 +0100
Subject: [PATCH] container sorter

---
 ...nt-type-workspace-view-edit-tab.element.ts | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
index dfc538715b..a81589c5b0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
@@ -17,14 +17,27 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 		PropertyTypeContainerModelBaseModel,
 		UmbDocumentTypeWorkspaceViewEditPropertiesElement
 	>(this, {
-		getUniqueOfElement: (element) => element.getAttribute('container-id'),
+		getUniqueOfElement: (element) =>
+			element.querySelector('umb-document-type-workspace-view-edit-properties')?.containerId ?? '',
 		getUniqueOfModel: (modelEntry) => modelEntry.id,
 		identifier: 'document-type-container-sorter',
-		itemSelector: '[data-umb-group-id]',
+		itemSelector: 'span',
 		containerSelector: '#container-list',
 		onChange: ({ item, model }) => {
-			console.log('item', item);
-			console.log('model', model);
+			const modelIndex = model.findIndex((entry) => entry.id === item.id);
+			if (modelIndex === -1) return;
+			let sortOrder: number;
+
+			if (model.length > 1) {
+				sortOrder = modelIndex > 0 ? model[modelIndex - 1].sortOrder + 1 : model[modelIndex + 1].sortOrder - 1;
+			} else {
+				sortOrder = 0;
+			}
+
+			this._groupStructureHelper.partialUpdateContainer(item.id, {
+				sortOrder: sortOrder,
+			});
+
 			this._groups = model;
 		},
 	});