From 918448f4193e12e8bdc491cf63d4aa3f65718734 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Thu, 21 Nov 2024 07:45:51 +0000
Subject: [PATCH] V15: Collection: Adds "Name" to Order By options (#17600)

* Adds "Name" option to the Collection Order By configuration

* Localizes column headers
---
 .../views/grid/document-grid-collection-view.element.ts     | 2 +-
 .../views/table/document-table-collection-view.element.ts   | 2 +-
 .../views/table/media-table-collection-view.element.ts      | 2 +-
 .../collection/config/order-by/order-by.element.ts          | 6 +++++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
index 685608462e..49f68a540f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts
@@ -158,7 +158,7 @@ export class UmbDocumentGridCollectionViewElement extends UmbLitElement {
 		const value = getPropertyValueByAlias(item, column.alias);
 		return html`
 			<li>
-				<span>${column.header}:</span>
+				<span>${this.localize.string(column.header)}:</span>
 				${when(
 					column.nameTemplate,
 					() => html`<umb-ufm-render inline .markdown=${column.nameTemplate} .value=${{ value }}></umb-ufm-render>`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
index c69efbe228..23227915ad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts
@@ -128,7 +128,7 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 		if (this._userDefinedProperties && this._userDefinedProperties.length > 0) {
 			const userColumns: Array<UmbTableColumn> = this._userDefinedProperties.map((item) => {
 				return {
-					name: item.header,
+					name: this.localize.string(item.header),
 					alias: item.alias,
 					elementName: item.elementName,
 					labelTemplate: item.nameTemplate,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts
index 19f90522ed..d7b5a1ad8c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/table/media-table-collection-view.element.ts
@@ -118,7 +118,7 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 		if (this._userDefinedProperties && this._userDefinedProperties.length > 0) {
 			const userColumns: Array<UmbTableColumn> = this._userDefinedProperties.map((item) => {
 				return {
-					name: item.header,
+					name: this.localize.string(item.header),
 					alias: item.alias,
 					elementName: item.elementName,
 					allowSorting: true,
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 0565f66063..4b48b1e48a 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
@@ -31,11 +31,15 @@ export class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement i
 				await workspace.propertyValueByAlias<Array<UmbCollectionColumnConfiguration>>('includeProperties'),
 				(includeProperties) => {
 					if (!includeProperties) return;
-					this._options = includeProperties.map((property) => ({
+					const options = includeProperties.map((property) => ({
 						name: property.header,
 						value: property.alias,
 						selected: property.alias === this.value,
 					}));
+					this._options = [
+						{ name: this.localize.term('general_name'), value: 'name', selected: 'name' === this.value },
+						...options,
+					];
 				},
 				'_observeIncludeProperties',
 			);