Split "Sort Children"-logic to remove "illegal" import from core to packages

src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { createImportMap } from '../importmap/index.js';
 
-const ILLEGAL_CORE_IMPORTS_THRESHOLD = 6;
+const ILLEGAL_CORE_IMPORTS_THRESHOLD = 5;
 const SELF_IMPORTS_THRESHOLD = 0;
 const BIDIRECTIONAL_IMPORTS_THRESHOLD = 18;
 

src/Umbraco.Web.UI.Client/src/packages/content/content/constants.ts

@@ -1,4 +1,5 @@
 export const UMB_CONTENT_SECTION_ALIAS = 'Umb.Section.Content';
-export * from './workspace/constants.js';
-export * from './conditions/constants.js';
 export * from './collection/constants.js';
+export * from './conditions/constants.js';
+export * from './tree/constants.js';
+export * from './workspace/constants.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/manifests.ts

@@ -1,5 +1,11 @@
-import { manifests as workspaceManifests } from './workspace/manifests.js';
-import { manifests as conditionManifests } from './conditions/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
+import { manifests as conditionManifests } from './conditions/manifests.js';
+import { manifests as contentTreeManifests } from './tree/manifests.js';
+import { manifests as workspaceManifests } from './workspace/manifests.js';
 
-export const manifests = [...workspaceManifests, ...conditionManifests, ...collectionManifests];
+export const manifests = [
+	...collectionManifests,
+	...conditionManifests,
+	...contentTreeManifests,
+	...workspaceManifests,
+];

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/constants.ts

@@ -0,0 +1 @@
+export * from './sort-children-of-content/constants.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as sortChildrenOfContentManifests } from './sort-children-of-content/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...sortChildrenOfContentManifests];

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/constants.ts

@@ -0,0 +1 @@
+export * from './modal/constants.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/index.ts

@@ -0,0 +1,2 @@
+export * from './sort-children-of-content.action.js';
+export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/manifests.ts

@@ -0,0 +1,9 @@
+import { manifest as sortChildrenOfContentKindManifest } from './sort-children-of-content.action.kind.js';
+import { manifests as modalManifests } from './modal/manifests.js';
+
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	sortChildrenOfContentKindManifest,
+	...modalManifests,
+];

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/modal/constants.ts

@@ -0,0 +1,4 @@
+export {
+	UMB_SORT_CHILDREN_OF_CONTENT_MODAL,
+	UMB_SORT_CHILDREN_OF_CONTENT_MODAL_ALIAS,
+} from './sort-children-of-content-modal.token.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/modal/index.ts

@@ -0,0 +1 @@
+export * from './sort-children-of-content-modal.token.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/modal/manifests.ts

@@ -0,0 +1,11 @@
+import { UMB_SORT_CHILDREN_OF_CONTENT_MODAL_ALIAS } from './constants.js';
+import type { ManifestModal } from '@umbraco-cms/backoffice/modal';
+
+export const manifests: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: UMB_SORT_CHILDREN_OF_CONTENT_MODAL_ALIAS,
+		name: 'Sort Children Of Content Modal',
+		element: () => import('./sort-children-of-content-modal.element.js'),
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/modal/sort-children-of-content-modal.element.ts

@@ -0,0 +1,74 @@
+import type { UmbContentTreeItemModel } from '../../types.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbSortChildrenOfModalElement } from '@umbraco-cms/backoffice/tree';
+
+@customElement('umb-sort-children-of-content-modal')
+export class UmbSortChildrenOfContentModalElement extends UmbSortChildrenOfModalElement<UmbContentTreeItemModel> {
+	#localizeDateOptions: Intl.DateTimeFormatOptions = {
+		day: 'numeric',
+		month: 'short',
+		year: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit',
+	};
+
+	protected override _setTableColumns() {
+		this._tableColumns = [
+			{
+				name: this.localize.term('general_name'),
+				alias: 'name',
+				allowSorting: this._hasMorePages() === false,
+			},
+			{
+				name: this.localize.term('content_createDate'),
+				alias: 'createDate',
+				allowSorting: this._hasMorePages() === false,
+			},
+		];
+	}
+
+	protected override _createTableItems() {
+		this._tableItems = this._children.map((treeItem) => {
+			// TODO: implement ItemDataResolver for document and media
+			// This will fix both the icon and the variant name
+			return {
+				id: treeItem.unique,
+				icon: 'icon-document',
+				data: [
+					{
+						columnAlias: 'name',
+						value: treeItem.name,
+					},
+					{
+						columnAlias: 'createDate',
+						value: this.localize.date(treeItem.createDate, this.#localizeDateOptions),
+					},
+				],
+			};
+		});
+	}
+
+	protected override _sortCompare(columnAlias: string, valueA: unknown, valueB: unknown): number {
+		if (columnAlias === 'createDate') {
+			return Date.parse(valueA as string) - Date.parse(valueB as string);
+		}
+
+		return super._sortCompare(columnAlias, valueA, valueB);
+	}
+
+	protected override _onLoadMore(event: PointerEvent): void {
+		super._onLoadMore(event);
+		// TODO: make nicer API for enable/disable orderBy for individual columns
+		const allowOrderBy = this._hasMorePages() === false;
+		this._tableColumns[0].allowSorting = allowOrderBy;
+		this._tableColumns[1].allowSorting = allowOrderBy;
+	}
+}
+
+export { UmbSortChildrenOfContentModalElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		['umb-sort-children-of-content-modal']: UmbSortChildrenOfContentModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/modal/sort-children-of-content-modal.token.ts

@@ -0,0 +1,14 @@
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import type { UmbSortChildrenOfModalData, UmbSortChildrenOfModalValue } from '@umbraco-cms/backoffice/tree';
+
+export const UMB_SORT_CHILDREN_OF_CONTENT_MODAL_ALIAS = 'Umb.Modal.SortChildrenOfContent';
+
+export const UMB_SORT_CHILDREN_OF_CONTENT_MODAL = new UmbModalToken<
+	UmbSortChildrenOfModalData,
+	UmbSortChildrenOfModalValue
+>(UMB_SORT_CHILDREN_OF_CONTENT_MODAL_ALIAS, {
+	modal: {
+		type: 'sidebar',
+		size: 'small',
+	},
+});

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/sort-children-of-content.action.kind.ts

@@ -0,0 +1,15 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_ENTITY_ACTION_SORT_CHILDREN_OF_KIND_MANIFEST } from '@umbraco-cms/backoffice/tree';
+
+export const manifest: UmbExtensionManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.EntityAction.SortChildrenOfContent',
+	matchKind: 'sortChildrenOfContent',
+	matchType: 'entityAction',
+	manifest: {
+		...UMB_ENTITY_ACTION_SORT_CHILDREN_OF_KIND_MANIFEST.manifest,
+		type: 'entityAction',
+		kind: 'sortChildrenOfContent',
+		api: () => import('./sort-children-of-content.action.js'),
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/sort-children-of-content.action.ts

@@ -0,0 +1,20 @@
+import { UMB_SORT_CHILDREN_OF_CONTENT_MODAL } from './constants.js';
+import type { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import {
+	UmbSortChildrenOfEntityAction,
+	type UmbSortChildrenOfModalData,
+	type UmbSortChildrenOfModalValue,
+} from '@umbraco-cms/backoffice/tree';
+
+/**
+ * Entity action for sorting children of a content item
+ * @class UmbSortChildrenOfContentEntityAction
+ * @augments UmbSortChildrenOfEntityAction
+ */
+export class UmbSortChildrenOfContentEntityAction extends UmbSortChildrenOfEntityAction {
+	protected override _getModalToken(): UmbModalToken<UmbSortChildrenOfModalData, UmbSortChildrenOfModalValue> {
+		return UMB_SORT_CHILDREN_OF_CONTENT_MODAL;
+	}
+}
+
+export { UmbSortChildrenOfContentEntityAction as api };

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/sort-children-of-content/types.ts

@@ -0,0 +1,14 @@
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/entity-action';
+import type { MetaEntityActionSortChildrenOfKind } from '@umbraco-cms/backoffice/tree';
+
+export interface ManifestEntityActionSortChildrenOfContentKind
+	extends ManifestEntityAction<MetaEntityActionSortChildrenOfKind> {
+	type: 'entityAction';
+	kind: 'sortChildrenOfContent';
+}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbManifestEntityActionSortChildrenOfContentKind: ManifestEntityActionSortChildrenOfContentKind;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/content/content/tree/types.ts

@@ -0,0 +1,10 @@
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+import type { UmbTreeItemModel } from '@umbraco-cms/backoffice/tree';
+
+export type * from './sort-children-of-content/types.js';
+
+export interface UmbContentTreeItemModel extends UmbTreeItemModel {
+	ancestors: Array<UmbEntityModel>;
+	entityType: string;
+	createDate: string;
+}

src/Umbraco.Web.UI.Client/src/packages/content/content/types.ts

@@ -2,6 +2,7 @@ import type { UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 import type { UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
 
 export type * from './collection/types.js';
+export type * from './tree/types.js';
 
 export interface UmbElementDetailModel {
 	values: Array<UmbElementValueModel>;

src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts

@@ -8,11 +8,11 @@ import {
 	repeat,
 	state,
 	when,
-	LitElement,
 } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
-// TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
 export interface UmbTableItem {
 	id: string;
 	icon?: string | null;
@@ -64,6 +64,19 @@ export class UmbTableOrderedEvent extends Event {
 	}
 }
 
+export class UmbTableSortedEvent extends Event {
+	#itemId: string;
+
+	public constructor({ itemId }: { itemId: string }) {
+		super('sorted', { bubbles: true, composed: true });
+		this.#itemId = itemId;
+	}
+
+	public getItemId() {
+		return this.#itemId;
+	}
+}
+
 /**
  *  @element umb-table
  *  @description - Element for displaying a table
@@ -73,14 +86,21 @@ export class UmbTableOrderedEvent extends Event {
  *  @augments LitElement
  */
 @customElement('umb-table')
-export class UmbTableElement extends LitElement {
+export class UmbTableElement extends UmbLitElement {
 	/**
 	 * Table Items
 	 * @type {Array<UmbTableItem>}
 	 * @memberof UmbTableElement
 	 */
 	@property({ type: Array, attribute: false })
-	public items: Array<UmbTableItem> = [];
+	private _items: Array<UmbTableItem> = [];
+	public get items(): Array<UmbTableItem> {
+		return this._items;
+	}
+	public set items(value: Array<UmbTableItem>) {
+		this._items = value;
+		this.#sorter.setModel(value);
+	}
 
 	/**
 	 * @description Table Columns
@@ -115,9 +135,53 @@ export class UmbTableElement extends LitElement {
 	@property({ type: Boolean, attribute: false })
 	public orderingDesc = false;
 
+	private _sortable = false;
+	@property({ type: Boolean, reflect: true })
+	get sortable() {
+		return this._sortable;
+	}
+	set sortable(newVal) {
+		const oldVal = this._sortable;
+		if (oldVal === newVal) return;
+		this._sortable = newVal;
+
+		if (this._sortable) {
+			this.#sorter.enable();
+		} else {
+			this.#sorter.disable();
+		}
+
+		this.requestUpdate('sortable', oldVal);
+	}
+
 	@state()
 	private _selectionMode = false;
 
+	#sorter = new UmbSorterController<UmbTableItem>(this, {
+		getUniqueOfElement: (element) => {
+			return element.dataset.sortableId;
+		},
+		getUniqueOfModel: (item) => {
+			return item.id;
+		},
+		identifier: 'Umb.SorterIdentifier.UmbTable',
+		itemSelector: 'uui-table-row',
+		containerSelector: 'uui-table',
+		onChange: ({ model }) => {
+			const oldValue = this.items;
+			this.items = model;
+			this.requestUpdate('items', oldValue);
+		},
+		onEnd: ({ item }) => {
+			this.dispatchEvent(new UmbTableSortedEvent({ itemId: item.id }));
+		},
+	});
+
+	constructor() {
+		super();
+		this.#sorter.disable();
+	}
+
 	private _isSelected(key: string) {
 		return this.selection.includes(key);
 	}
@@ -230,7 +294,8 @@ export class UmbTableElement extends LitElement {
 	private _renderRow = (item: UmbTableItem) => {
 		return html`
 			<uui-table-row
-				?selectable="${this.config.allowSelection}"
+				data-sortable-id=${item.id}
+				?selectable="${this.config.allowSelection && !this._sortable}"
 				?select-only=${this._selectionMode}
 				?selected=${this._isSelected(item.id)}
 				@selected=${() => this._selectRow(item.id)}
@@ -241,6 +306,12 @@ export class UmbTableElement extends LitElement {
 	};
 
 	private _renderRowCheckboxCell(item: UmbTableItem) {
+		if (this.sortable === true) {
+			return html`<uui-table-cell style="text-align: center;">
+				<uui-icon name="icon-grip"></uui-icon>
+			</uui-table-cell>`;
+		}
+
 		if (this.config.hideIcon && !this.config.allowSelection) return;
 
 		return html`
@@ -301,6 +372,16 @@ export class UmbTableElement extends LitElement {
 				height: fit-content;
 			}
 
+			:host([sortable]) {
+				uui-table-row:hover {
+					cursor: grab;
+				}
+
+				uui-table-row:active {
+					cursor: grabbing;
+				}
+			}
+
 			uui-table {
 				box-shadow: var(--uui-shadow-depth-1);
 			}

src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/constants.ts

@@ -1 +1,2 @@
 export * from './modal/constants.js';
+export { UMB_ENTITY_ACTION_SORT_CHILDREN_OF_KIND_MANIFEST } from './sort-children-of.action.kind.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/index.ts

@@ -1 +1,2 @@
 export { UmbSortChildrenOfEntityAction } from './sort-children-of.action.js';
+export * from './modal/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/entity-actions/sort-children-of/modal/index.ts

@@ -1 +1,2 @@
 export * from './sort-children-of-modal.token.js';
+export * from './sort-children-of-modal.element.js';