From d7be6f3e4d50553f663a35379cd01c4fac1908e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 18 Jan 2024 13:10:52 +0100
Subject: [PATCH] implement sorting

---
 .../property-editor-ui-block-list.element.ts  | 25 ++++++++++++++++++-
 .../packages/core/sorter/sorter.controller.ts | 18 ++++++-------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
index 23c9bd25ab..b9ef84cf8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
@@ -1,5 +1,6 @@
 import { UmbBlockListManagerContext } from '../../manager/block-list-manager.context.js';
 import '../../components/block-list-block/index.js';
+import { type UmbPropertyEditorUIBlockListBlockElement } from '../../components/block-list-block/index.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
 import { html, customElement, property, state, repeat, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -15,16 +16,37 @@ import {
 import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import { UmbModalRouteBuilder, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 
 export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {}
 
 export interface UmbBlockListValueModel extends UmbBlockValueType<UmbBlockListLayoutModel> {}
 
+const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbPropertyEditorUIBlockListBlockElement> = {
+	compareElementToModel: (element, model) => {
+		return element.getAttribute('data-udi') === model.contentUdi;
+	},
+	querySelectModelToElement: (container, modelEntry) => {
+		return container.querySelector("umb-property-editor-ui-block-list-block[data-udi='" + modelEntry.contentUdi + "']");
+	},
+	identifier: 'block-list-editor',
+	itemSelector: 'umb-property-editor-ui-block-list-block',
+	//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
+};
+
 /**
  * @element umb-property-editor-ui-block-list
  */
 @customElement('umb-property-editor-ui-block-list')
 export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	//
+	#sorter = new UmbSorterController<UmbBlockListLayoutModel, UmbPropertyEditorUIBlockListBlockElement>(this, {
+		...SORTER_CONFIG,
+		onChange: ({ model }) => {
+			this.#context.setLayouts(model);
+		},
+	});
+
 	private _value: UmbBlockListValueModel = {
 		layout: {},
 		contentData: [],
@@ -89,6 +111,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 			//console.log('layout changed', this._value);
 			// TODO: idea: consider inserting an await here, so other changes could appear first? Maybe some mechanism to only fire change event onces?
 			this._layouts = layouts;
+			this.#sorter.setModel(layouts);
 			this.dispatchEvent(new UmbChangeEvent());
 		});
 		this.observe(this.#context.contents, (contents) => {
@@ -123,7 +146,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 				(x) => x.contentUdi,
 				(layoutEntry) =>
 					html`<uui-button-inline-create></uui-button-inline-create>
-						<umb-property-editor-ui-block-list-block .layout=${layoutEntry}>
+						<umb-property-editor-ui-block-list-block data-udi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
 						</umb-property-editor-ui-block-list-block> `,
 			)}
 			<uui-button-group>
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 8c4923b9f4..8768697b56 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
@@ -185,25 +185,25 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 				? this.#host.shadowRoot!.querySelector(this.#config.containerSelector)
 				: this.#host) ?? this.#host;
 
+		this.#containerElement = containerEl as HTMLElement;
 		this.#useContainerShadowRoot = this.#containerElement === this.#host;
 
 		if (!this.#currentContainerElement || this.#currentContainerElement === this.#containerElement) {
 			this.#currentContainerElement = containerEl;
 		}
-		this.#containerElement = containerEl as HTMLElement;
-		this.#containerElement.addEventListener('dragover', preventDragOver);
-
-		(this.#containerElement as any)['__umbBlockGridSorterController'] = () => {
-			return this;
-		};
-
-		// TODO: Clean up??
-		this.#observer.disconnect();
 
 		// Only look at the shadowRoot if the containerElement is host.
 		const containerElement = this.#useContainerShadowRoot
 			? this.#containerElement.shadowRoot ?? this.#containerElement
 			: this.#containerElement;
+		containerElement.addEventListener('dragover', preventDragOver);
+
+		(this.#containerElement as any)['__umbBlockGridSorterController'] = () => {
+			return this;
+		};
+
+		this.#observer.disconnect();
+
 		containerElement.querySelectorAll(this.#config.itemSelector).forEach((child) => {
 			if (child.matches && child.matches(this.#config.itemSelector)) {
 				this.setupItem(child as ElementType);