Feature: Document Type Sorting

src/mocks/data/document-type/document-type.data.ts

@@ -1017,6 +1017,46 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 					labelOnTop: false,
 				},
 			},
+			{
+				id: 'a92de6ac-1a22-4a45-a481-b6cae1cccbba',
+				container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' },
+				alias: 'alchemyElement',
+				name: 'Alchemy Element',
+				description: null,
+				dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: false,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: 'c92de6ac-1a22-4a45-a481-b6cae1cccbba',
+				container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' },
+				alias: 'acidScale',
+				name: 'Acid Scale',
+				description: null,
+				dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' },
+				variesByCulture: false,
+				variesBySegment: false,
+				sortOrder: 0,
+				validation: {
+					mandatory: false,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
 		],
 		containers: [
 			{
@@ -1026,6 +1066,13 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 				type: 'Group',
 				sortOrder: 0,
 			},
+			{
+				id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120',
+				parent: null,
+				name: 'Alchemy',
+				type: 'Group',
+				sortOrder: 0,
+			},
 		],
 		allowedDocumentTypes: [],
 		compositions: [],

src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -84,6 +84,9 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
 		this.selectedIds = splitStringToArray(idsString);
 	}
+	public get value(): string {
+		return this.selectedIds.join(',');
+	}
 
 	@state()
 	private _items?: Array<UmbDocumentTypeItemModel>;

src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts

@@ -1,60 +1,50 @@
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
 import './document-type-workspace-view-edit-property.element.js';
 import type { UmbDocumentTypeDetailModel } from '../../../types.js';
+import type { UmbDocumentTypeWorkspacePropertyElement } from './document-type-workspace-view-edit-property.element.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
-import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
-const SORTER_CONFIG: UmbSorterConfig<UmbPropertyTypeModel> = {
-	getUniqueOfElement: (element) => {
-		return element.getAttribute('data-umb-property-id');
-	},
-	getUniqueOfModel: (modelEntry) => {
-		return modelEntry.id;
-	},
-	identifier: 'content-type-property-sorter',
-	itemSelector: '[data-umb-property-id]',
-	disabledItemSelector: '[inherited]',
-	containerSelector: '#property-list',
-};
-
 @customElement('umb-document-type-workspace-view-edit-properties')
 export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
-	#propertySorter = new UmbSorterController(this, {
-		...SORTER_CONFIG,
-		performItemInsert: (args) => {
-			let sortOrder = 0;
-			if (this._propertyStructure.length > 0) {
-				if (args.newIndex === 0) {
-					sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1;
-				} else {
-					sortOrder =
-						(this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1;
-				}
-			}
-			return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
+	#model: Array<UmbPropertyTypeModel> = [];
+	#sorter = new UmbSorterController<UmbPropertyTypeModel, UmbDocumentTypeWorkspacePropertyElement>(this, {
+		getUniqueOfElement: (element) => {
+			return element.getAttribute('data-umb-property-id');
 		},
-		performItemRemove: (args) => {
-			return this._propertyStructureHelper.removeProperty(args.item.id!);
+		getUniqueOfModel: (modelEntry) => {
+			return modelEntry.id;
 		},
-		performItemMove: (args) => {
-			this._propertyStructureHelper.removeProperty(args.item.id!);
-			let sortOrder = 0;
-			if (this._propertyStructure.length > 0) {
-				if (args.newIndex === 0) {
-					sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1;
-				} else {
-					sortOrder =
-						(this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1;
-				}
+		identifier: 'document-type-property-sorter',
+		itemSelector: 'umb-document-type-workspace-view-edit-property',
+		disabledItemSelector: '[inherited]',
+		//TODO: Set the property list (sorter wrapper) to inherited, if its inherited
+		// This is because we don't want to move local properties into an inherited group container.
+		// Or maybe we do, but we still need to check if the group exists locally, if not, then it needs to be created before we move a property into it.
+		// TODO: Fix bug where a local property turn into an inherited when moved to a new group container.
+		containerSelector: '#property-list',
+		onChange: ({ item, model }) => {
+			const isInNewContainer = model.find((entry) => entry?.container?.id !== this._containerId && this._containerId);
+			if (isInNewContainer) {
+				model.forEach((entry, index) => {
+					entry.id === item.id
+						? this._propertyStructureHelper.partialUpdateProperty(entry.id, {
+								sortOrder: index,
+								container: { id: this._containerId! },
+						  })
+						: this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index });
+				});
+			} else {
+				model.forEach((entry, index) => {
+					this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index });
+				});
 			}
-			return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
 		},
 	});
 
@@ -112,7 +102,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 				(workspaceContext as UmbDocumentTypeWorkspaceContext).isSorting,
 				(isSorting) => {
 					this._sortModeActive = isSorting;
-					this.#setModel(isSorting);
+					if (isSorting) {
+						this.#sorter.setModel(this._propertyStructure);
+					} else {
+						this.#sorter.setModel([]);
+					}
 				},
 				'_observeIsSorting',
 			);
@@ -153,15 +147,6 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 			});
 	}
 
-	#setModel(isSorting?: boolean) {
-		if (isSorting) {
-			this.#propertySorter.setModel(this._propertyStructure);
-		} else {
-			// TODO: Make a more proper way to disable sorting:
-			this.#propertySorter.setModel([]);
-		}
-	}
-
 	async #addProperty(propertyData: UmbPropertyTypeModel) {
 		const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId);
 		if (!propertyPlaceholder) return;
@@ -170,33 +155,37 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 	}
 
 	render() {
-		return html`<div id="property-list">
+		return html`
+			<div id="property-list" ?sort-mode-active=${this._sortModeActive}>
 				${repeat(
 					this._propertyStructure,
-					(property) => property.id ?? '' + property.container?.id ?? '' + property.sortOrder ?? '',
+					(property) => '' + property.container?.id + property.id + '' + property.sortOrder,
 					(property) => {
 						// Note: This piece might be moved into the property component
 						const inheritedFromDocument = this._ownerDocumentTypes?.find(
 							(types) => types.containers?.find((containers) => containers.id === property.container?.id),
 						);
 
-						return html`<umb-document-type-workspace-view-edit-property
-							data-umb-property-id=${property.id}
-							owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
-							owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
-							?inherited=${property.container?.id !== this.containerId}
-							?sort-mode-active=${this._sortModeActive}
-							.property=${property}
-							@partial-property-update=${(event: CustomEvent) => {
-								this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
-							}}
-							@property-delete=${() => {
-								this._propertyStructureHelper.removeProperty(property.id!);
-							}}>
-						</umb-document-type-workspace-view-edit-property>`;
+						return html`
+							<umb-document-type-workspace-view-edit-property
+								data-umb-property-id=${property.id}
+								owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
+								owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
+								?inherited=${property.container?.id !== this.containerId}
+								?sort-mode-active=${this._sortModeActive}
+								.property=${property}
+								@partial-property-update=${(event: CustomEvent) => {
+									this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
+								}}
+								@property-delete=${() => {
+									this._propertyStructureHelper.removeProperty(property.id!);
+								}}>
+							</umb-document-type-workspace-view-edit-property>
+						`;
 					},
 				)}
 			</div>
+
 			${!this._sortModeActive
 				? html`<uui-button
 						label=${this.localize.term('contentTypeEditor_addProperty')}
@@ -205,7 +194,8 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 						href=${ifDefined(this._modalRouteNewProperty)}>
 						<umb-localize key="contentTypeEditor_addProperty">Add property</umb-localize>
 				  </uui-button> `
-				: ''} `;
+				: ''}
+		`;
 	}
 
 	static styles = [
@@ -214,6 +204,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
 			#add {
 				width: 100%;
 			}
+
+			#property-list[sort-mode-active]:not(:has(umb-document-type-workspace-view-edit-property)) {
+				/* Some height so that the sorter can target the area if the group is empty*/
+				min-height: var(--uui-size-layout-1);
+			}
 		`,
 	];
 }

src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts

@@ -186,7 +186,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			}
 		}
 	}
-
 	renderSortableProperty() {
 		if (!this.property) return;
 		return html`
@@ -198,6 +197,8 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 				type="number"
 				?readonly=${this.inherited}
 				label="sort order"
+				@change=${(e: UUIInputEvent) =>
+					this._partialUpdate({ sortOrder: parseInt(e.target.value as string) || 0 } as UmbPropertyTypeModel)}
 				.value=${this.property.sortOrder ?? 0}></uui-input>
 		`;
 	}
@@ -476,6 +477,10 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
 			a {
 				color: inherit;
 			}
+
+			:host([drag-placeholder]) {
+				opacity: 0.2;
+			}
 		`,
 	];
 }