From c7d71c48dfebb38a1ce216f45091aae5383eaa86 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 1 May 2024 13:49:33 +0100
Subject: [PATCH 1/2] Collection: Syncs the Order By with Columns Displayed
 field

---
 .../config/order-by/order-by.element.ts       | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/config/order-by/order-by.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/config/order-by/order-by.element.ts
index 39ccfe8ba2..977830cf4c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/config/order-by/order-by.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/config/order-by/order-by.element.ts
@@ -1,34 +1,44 @@
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbCollectionColumnConfiguration } from '../../../../core/collection/types.js';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-property-editor-ui-collection-order-by
  */
 @customElement('umb-property-editor-ui-collection-order-by')
 export class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	private _value = '';
 	@property()
-	public set value(v: string) {
-		this._value = v;
-		this._options = this._options.map((option) => (option.value === v ? { ...option, selected: true } : option));
-	}
-	public get value() {
-		return this._value;
-	}
+	public value: string = '';
+
+	public config?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	_options: Array<Option> = [
-		{ value: 'name', name: 'Name' },
-		{ value: 'updateDate', name: 'Last edited' },
-		{ value: 'owner', name: 'Created by' },
-	];
+	private _options: Array<Option> = [];
 
-	@property({ type: Object, attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
+			const workspace = instance;
+			this.observe(
+				await workspace.propertyValueByAlias<Array<UmbCollectionColumnConfiguration>>('includeProperties'),
+				(includeProperties) => {
+					if (!includeProperties) return;
+					this._options = includeProperties.map((property) => ({
+						name: property.header,
+						value: property.alias,
+						selected: property.alias === this.value,
+					}));
+				},
+				'_observeIncludeProperties',
+			);
+		});
+	}
 
 	#onChange(e: UUISelectEvent) {
 		this.value = e.target.value as string;
@@ -36,6 +46,7 @@ export class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement i
 	}
 
 	render() {
+		if (!this._options.length) return html`<p><em>Add a column (above) to order by.</em></p>`;
 		return html`<uui-select label="select" .options=${this._options} @change=${this.#onChange}></uui-select>`;
 	}
 }

From 77c84967b776175b4e5b46cfeb2aeeb3db1617f7 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 1 May 2024 13:50:19 +0100
Subject: [PATCH 2/2] Collection: Moves the Page Size field lower down

So that the Order By is closer to the Columns Displayed field
---
 .../property-editors/collection/manifests.ts       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts
index c008f1a678..942082d3d5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts
@@ -23,13 +23,6 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {
 					description: 'The properties that will be displayed for each column.',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Collection.LayoutConfiguration',
 				},
-				{
-					alias: 'pageSize',
-					label: 'Page Size',
-					description: 'Number of items per page.',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
-					config: [{ alias: 'min', value: 0 }],
-				},
 				{
 					alias: 'orderBy',
 					label: 'Order By',
@@ -41,6 +34,13 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {
 					label: 'Order Direction',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.OrderDirection',
 				},
+				{
+					alias: 'pageSize',
+					label: 'Page Size',
+					description: 'Number of items per page.',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
+					config: [{ alias: 'min', value: 0 }],
+				},
 				{
 					alias: 'bulkActionPermissions',
 					label: 'Bulk Action Permissions',