Merge pull request #2003 from umbraco/v14/feature/sorter-nested-example

Improved example + minor code refactor

Author: nielslyngsoe

examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -1,7 +1,7 @@
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
-import type { ModelEntryType } from './sorter-group.js';
+import type { ExampleSorterGroup, ModelEntryType } from './sorter-group.js';
 
 import './sorter-group.js';
 @customElement('example-sorter-dashboard')
@@ -57,9 +57,16 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 		return html`
 			<uui-box class="uui-text">
 				<div class="outer-wrapper">
-					<h5>Notice this example still only support single group of Sorter.</h5>
-					<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
-					<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupOneItems}
+						@change=${(e: Event) => {
+							this.groupOneItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
+					<example-sorter-group
+						.value=${this.groupTwoItems}
+						@change=${(e: Event) => {
+							this.groupTwoItems = (e.target as ExampleSorterGroup).value;
+						}}></example-sorter-group>
 				</div>
 			</uui-box>
 		`;

examples/sorter-with-nested-containers/sorter-group.ts

@@ -13,28 +13,8 @@ export type ModelEntryType = {
 
 @customElement('example-sorter-group')
 export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
-	@property({ type: Array, attribute: false })
-	public get initialItems(): ModelEntryType[] {
-		return this.items;
-	}
-	public set initialItems(value: ModelEntryType[]) {
-		// Only want to set the model initially, cause any re-render should not set this again.
-		if (this._items !== undefined) return;
-		this.items = value;
-	}
-
-	@property({ type: Array, attribute: false })
-	public get items(): ModelEntryType[] {
-		return this._items ?? [];
-	}
-	public set items(value: ModelEntryType[]) {
-		const oldValue = this._items;
-		this._items = value;
-		this.#sorter.setModel(this._items);
-		this.requestUpdate('items', oldValue);
-	}
-	private _items?: ModelEntryType[];
-
+	//
+	// Sorter setup:
 	#sorter = new UmbSorterController<ModelEntryType, ExampleSorterItem>(this, {
 		getUniqueOfElement: (element) => {
 			return element.name;
@@ -46,26 +26,45 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 		itemSelector: 'example-sorter-item',
 		containerSelector: '.sorter-container',
 		onChange: ({ model }) => {
-			const oldValue = this._items;
-			this._items = model;
-			this.requestUpdate('items', oldValue);
+			const oldValue = this._value;
+			this._value = model;
+			this.requestUpdate('value', oldValue);
+			// Fire an event for the parent to know that the model has changed.
+			this.dispatchEvent(new CustomEvent('change'));
 		},
 	});
 
+	@property({ type: Array, attribute: false })
+	public get value(): ModelEntryType[] {
+		return this._value ?? [];
+	}
+	public set value(value: ModelEntryType[]) {
+		const oldValue = this._value;
+		this._value = value;
+		this.#sorter.setModel(this._value);
+		this.requestUpdate('value', oldValue);
+	}
+	private _value?: ModelEntryType[];
+
 	removeItem = (item: ModelEntryType) => {
-		this.items = this.items.filter((r) => r.name !== item.name);
+		this.value = this.value.filter((r) => r.name !== item.name);
 	};
 
 	render() {
 		return html`
 			<div class="sorter-container">
 				${repeat(
-					this.items,
+					this.value,
+					// Note: ideally you have an unique identifier for each item, but for this example we use the `name` as identifier.
 					(item) => item.name,
 					(item) =>
 						html`<example-sorter-item name=${item.name}>
 							<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
-							${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
+							<example-sorter-group
+								.value=${item.children ?? []}
+								@change=${(e: Event) => {
+									item.children = (e.target as ExampleSorterGroup).value;
+								}}></example-sorter-group>
 						</example-sorter-item>`,
 				)}
 			</div>

src/packages/core/sorter/sorter.controller.ts

@@ -387,16 +387,23 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 		}
 	};
 
+	#getDraggableElement(element: HTMLElement) {
+		if (this.#config.draggableSelector) {
+			// Concept for enabling getting element within ShadowRoot: (But it might need to be configurable, so its still possible to get light dom element(slotted), despite the host is a web-component with shadow-dom.) [NL]
+			//const queryFromEl = element.shadowRoot ?? element;
+			return (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element;
+		}
+		return element;
+	}
+
 	setupItem(element: ElementType) {
 		if (this.#config.ignorerSelector) {
 			setupIgnorerElements(element, this.#config.ignorerSelector);
 		}
 
 		if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
 			// Idea: to make sure on does not get initialized twice: if ((element as HTMLElement).draggable === true) return;
-			const draggableElement = this.#config.draggableSelector
-				? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
-				: element;
+			const draggableElement = this.#getDraggableElement(element);
 			(draggableElement as HTMLElement).draggable = true;
 			draggableElement.addEventListener('dragstart', this.#handleDragStart);
 			draggableElement.addEventListener('dragend', this.#handleDragEnd);
@@ -419,9 +426,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			destroyIgnorerElements(element, this.#config.ignorerSelector);
 		}
 
-		const draggableElement = this.#config.draggableSelector
-			? (element.querySelector(this.#config.draggableSelector) as HTMLElement | undefined) ?? element
-			: element;
+		const draggableElement = this.#getDraggableElement(element);
 		draggableElement.removeEventListener('dragstart', this.#handleDragStart);
 		// We are not ready to remove the dragend or drop, as this is might be the active one just moving container:
 		//draggableElement.removeEventListener('dragend', this.#handleDragEnd);
@@ -447,9 +452,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 	#setCurrentElement(element: ElementType) {
 		UmbSorterController.activeElement = element;
 
-		UmbSorterController.activeDragElement = this.#config.draggableSelector
-			? element.querySelector(this.#config.draggableSelector) ?? undefined
-			: element;
+		UmbSorterController.activeDragElement = this.#getDraggableElement(element);
 
 		if (!UmbSorterController.activeDragElement) {
 			throw new Error(
@@ -629,7 +632,7 @@ export class UmbSorterController<T, ElementType extends HTMLElement = HTMLElemen
 			const elRect = el.getBoundingClientRect();
 			// gather elements on the same row.
 			if (this.#dragY >= elRect.top && this.#dragY <= elRect.bottom) {
-				const dragElement = this.#config.draggableSelector ? el.querySelector(this.#config.draggableSelector) : el;
+				const dragElement = this.#getDraggableElement(el as unknown as HTMLElement);
 				if (dragElement) {
 					const dragElementRect = dragElement.getBoundingClientRect();
 					if (el !== UmbSorterController.activeElement) {