wip sort controller

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/sort-children-of/modal/sort-children-of-modal.element.ts

@@ -1,7 +1,12 @@
 import type { UmbSortChildrenOfModalData, UmbSortChildrenOfModalValue } from './sort-children-of-modal.token.js';
-import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, css, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { createExtensionApiByAlias } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbTreeRepository, UmbUniqueTreeItemModel } from '@umbraco-cms/backoffice/tree';
+import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
 
 const elementName = 'umb-sort-children-of-modal';
 
@@ -10,16 +15,86 @@ export class UmbSortChildrenOfModalElement extends UmbModalBaseElement<
 	UmbSortChildrenOfModalData,
 	UmbSortChildrenOfModalValue
 > {
+	@state()
+	_items: Array<UmbUniqueTreeItemModel> = [];
+
+	#sorter = new UmbSorterController<UmbUniqueTreeItemModel>(this, {
+		getUniqueOfElement: (element) => {
+			return element.dataset.unique;
+		},
+		getUniqueOfModel: (modelEntry) => {
+			return modelEntry.unique;
+		},
+		identifier: 'Umb.SorterIdentifier.SortChildrenOfModal',
+		itemSelector: 'uui-ref-node',
+		containerSelector: 'uui-ref-list',
+		onChange: (params) => {
+			this._items = params.model;
+			this.requestUpdate('_items');
+		},
+	});
+
+	protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
+		super.firstUpdated(_changedProperties);
+
+		if (!this.data?.unique === undefined) throw new Error('unique is required');
+		if (!this.data?.itemRepositoryAlias) throw new Error('itemRepositoryAlias is required');
+
+		const itemRepository = await createExtensionApiByAlias<UmbItemRepository<any>>(this, this.data.itemRepositoryAlias);
+
+		const treeRepository = await createExtensionApiByAlias<UmbTreeRepository<UmbUniqueTreeItemModel>>(
+			this,
+			this.data.treeRepositoryAlias,
+		);
+
+		const { data } = await treeRepository.requestTreeItemsOf({ parentUnique: this.data.unique, skip: 0, take: 100 });
+
+		if (data) {
+			this._items = data.items;
+			this.#sorter.setModel(this._items);
+		}
+	}
+
+	async #onSubmit(event: PointerEvent) {
+		event?.stopPropagation();
+		if (!this.data?.sortChildrenOfRepositoryAlias) throw new Error('sortChildrenOfRepositoryAlias is required');
+		const sortChildrenOfRepository = await createExtensionApiByAlias<any>(
+			this,
+			this.data.sortChildrenOfRepositoryAlias,
+		);
+
+		debugger;
+
+		/*
+		const { error } = await sortChildrenOfRepository.sortChildrenOf({ unique: this.data.unique });
+		if (!error) {
+			console.log('Sorted');
+		}
+		*/
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline=${'Sort Children'}>
-				<uui-box> Sorting UI here </uui-box>
+				<uui-box>
+					<uui-ref-list>
+						${repeat(
+							this._items,
+							(item) => item.unique,
+							(item) => this.#renderItem(item),
+						)}
+					</uui-ref-list></uui-box
+				>
 				<uui-button slot="actions" label="Cancel" @click="${this._rejectModal}"></uui-button>
 				<uui-button slot="actions" color="positive" look="primary" label="Sort"></uui-button>
 			</umb-body-layout>
 		`;
 	}
 
+	#renderItem(item: UmbUniqueTreeItemModel) {
+		return html`<uui-ref-node .name=${item.name} data-unique=${item.unique}></uui-ref-node>`;
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/sort-children-of/modal/sort-children-of-modal.token.ts

@@ -2,9 +2,11 @@ import { UMB_SORT_CHILDREN_OF_MODAL_ALIAS } from './constants.js';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbSortChildrenOfModalData {
-	unique: string;
+	unique: string | null;
+	entityType: string;
 	itemRepositoryAlias: string;
 	sortChildrenOfRepositoryAlias: string;
+	treeRepositoryAlias: string;
 }
 
 export interface UmbSortChildrenOfModalValue {}

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/sort-children-of/sort-children-of.action.ts

@@ -6,7 +6,15 @@ import type { MetaEntityActionSortChildrenOfKind } from '@umbraco-cms/backoffice
 export class UmbSortChildrenOfEntityAction extends UmbEntityActionBase<MetaEntityActionSortChildrenOfKind> {
 	async execute() {
 		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modal = modalManager.open(this._host, UMB_SORT_CHILDREN_OF_MODAL);
+		const modal = modalManager.open(this._host, UMB_SORT_CHILDREN_OF_MODAL, {
+			data: {
+				unique: this.args.unique,
+				entityType: this.args.entityType,
+				itemRepositoryAlias: this.args.meta.itemRepositoryAlias,
+				sortChildrenOfRepositoryAlias: this.args.meta.sortChildrenOfRepositoryAlias,
+				treeRepositoryAlias: this.args.meta.treeRepositoryAlias,
+			},
+		});
 		await modal.onSubmit();
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts

@@ -141,4 +141,5 @@ export interface ManifestEntityActionSortChildrenOfKind
 export interface MetaEntityActionSortChildrenOfKind extends MetaEntityActionDefaultKind {
 	itemRepositoryAlias: string;
 	sortChildrenOfRepositoryAlias: string;
+	treeRepositoryAlias: string;
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/sort-children-of/manifests.ts

@@ -1,5 +1,6 @@
 import { UMB_DOCUMENT_ENTITY_TYPE, UMB_DOCUMENT_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UMB_DOCUMENT_TREE_REPOSITORY_ALIAS } from '../../tree/index.js';
 import { UMB_SORT_CHILDREN_OF_DOCUMENT_REPOSITORY_ALIAS } from './repository/constants.js';
 import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -13,6 +14,7 @@ export const manifests: Array<ManifestTypes> = [
 		meta: {
 			itemRepositoryAlias: UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS,
 			sortChildrenOfRepositoryAlias: UMB_SORT_CHILDREN_OF_DOCUMENT_REPOSITORY_ALIAS,
+			treeRepositoryAlias: UMB_DOCUMENT_TREE_REPOSITORY_ALIAS,
 		},
 	},
 ];