From 17e7d7d3c240422d985afb53aac1d6bc0f1da800 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 25 Apr 2024 12:43:07 +0100
Subject: [PATCH] Fixes sorting of Collection configuration editors

specifically when a new data-type is created.
(Empty configuration)
---
 .../column/column-configuration.element.ts    | 25 +++++++++----------
 .../layout/layout-configuration.element.ts    | 25 +++++++++----------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts
index 6461bffc66..72cabecd05 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/column/column-configuration.element.ts
@@ -30,9 +30,9 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	});
 
 	@property({ type: Array })
-	public set value(value: Array<UmbCollectionColumnConfiguration>) {
-		this.#value = value;
-		this.#sorter.setModel(value);
+	public set value(value: Array<UmbCollectionColumnConfiguration> | undefined) {
+		this.#value = value ?? [];
+		this.#sorter.setModel(this.#value);
 	}
 	public get value(): Array<UmbCollectionColumnConfiguration> {
 		return this.#value;
@@ -92,7 +92,10 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 	}
 
 	render() {
-		return html`${this.#renderColumns()} ${this.#renderInput()}`;
+		return html`
+			<div id="layout-wrapper">${this.#renderColumns()}</div>
+			${this.#renderInput()}
+		`;
 	}
 
 	#renderInput() {
@@ -106,15 +109,11 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement
 
 	#renderColumns() {
 		if (!this.value) return nothing;
-		return html`
-			<div id="layout-wrapper">
-				${repeat(
-					this.value,
-					(column) => column.alias,
-					(column) => this.#renderColumn(column),
-				)}
-			</div>
-		`;
+		return repeat(
+			this.value,
+			(column) => column.alias,
+			(column) => this.#renderColumn(column),
+		);
 	}
 
 	#renderColumn(column: UmbCollectionColumnConfiguration) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts
index e19023a61d..f8f01391dd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/collection-view/config/layout/layout-configuration.element.ts
@@ -53,9 +53,9 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	});
 
 	@property({ type: Array })
-	public set value(value: Array<UmbCollectionLayoutConfiguration>) {
-		this.#value = value;
-		this.#sorter.setModel(value);
+	public set value(value: Array<UmbCollectionLayoutConfiguration> | undefined) {
+		this.#value = value ?? [];
+		this.#sorter.setModel(this.#value);
 	}
 	public get value(): Array<UmbCollectionLayoutConfiguration> {
 		return this.#value;
@@ -132,7 +132,10 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 	}
 
 	render() {
-		return html`${this.#renderLayouts()} ${this.#renderInput()}`;
+		return html`
+			<div id="layout-wrapper">${this.#renderLayouts()}</div>
+			${this.#renderInput()}
+		`;
 	}
 
 	#renderInput() {
@@ -141,15 +144,11 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement
 
 	#renderLayouts() {
 		if (!this.value) return nothing;
-		return html`
-			<div id="layout-wrapper">
-				${repeat(
-					this.value,
-					(layout) => this.#getUnique(layout),
-					(layout, index) => this.#renderLayout(layout, index),
-				)}
-			</div>
-		`;
+		return repeat(
+			this.value,
+			(layout) => this.#getUnique(layout),
+			(layout, index) => this.#renderLayout(layout, index),
+		);
 	}
 
 	#renderLayout(layout: UmbCollectionLayoutConfiguration, index: number) {