From 755046d085cd3f6186f1f389fa5d6ade1cda056c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 29 Feb 2024 13:23:30 +0000
Subject: [PATCH] Wires up the umb-input-collection-configuration

in the Media Type Editor UI.
---
 ...a-type-workspace-view-structure.element.ts | 60 ++++++++++++++-----
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts
index 7c264b4a5e..deb7973eef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts
@@ -2,11 +2,12 @@ import type { UmbMediaTypeWorkspaceContext } from '../../media-type-workspace.co
 import type { UmbInputMediaTypeElement } from '../../../components/input-media-type/input-media-type.element.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
-import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbContentTypeSortModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbInputCollectionConfigurationElement } from '@umbraco-cms/backoffice/components';
+import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-media-type-workspace-view-structure')
 export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -18,6 +19,9 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 	@state()
 	private _allowedContentTypeIDs?: Array<string>;
 
+	@state()
+	private _collection?: string | null;
+
 	constructor() {
 		super();
 
@@ -31,14 +35,31 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 	private _observeMediaType() {
 		if (!this.#workspaceContext) return;
 
-		this.observe(this.#workspaceContext.allowedAtRoot, (allowedAsRoot) => (this._allowedAtRoot = allowedAsRoot));
-		this.observe(this.#workspaceContext.allowedContentTypes, (allowedContentTypes) => {
-			const oldValue = this._allowedContentTypeIDs;
-			this._allowedContentTypeIDs = allowedContentTypes
-				?.map((x) => x.contentType.unique)
-				.filter((x) => x !== undefined) as Array<string>;
-			this.requestUpdate('_allowedContentTypeIDs', oldValue);
-		});
+		this.observe(
+			this.#workspaceContext.allowedAtRoot,
+			(allowedAtRoot) => (this._allowedAtRoot = allowedAtRoot),
+			'_allowedAtRootObserver',
+		);
+
+		this.observe(
+			this.#workspaceContext.allowedContentTypes,
+			(allowedContentTypes) => {
+				const oldValue = this._allowedContentTypeIDs;
+				this._allowedContentTypeIDs = allowedContentTypes
+					?.map((x) => x.contentType.unique)
+					.filter((x) => x !== undefined) as Array<string>;
+				this.requestUpdate('_allowedContentTypeIDs', oldValue);
+			},
+			'_allowedContentTypesObserver',
+		);
+
+		this.observe(
+			this.#workspaceContext.collection,
+			(collection) => {
+				this._collection = collection?.unique;
+			},
+			'_collectionObserver',
+		);
 	}
 
 	render() {
@@ -51,7 +72,7 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 							label=${this.localize.term('contentTypeEditor_allowAtRootHeading')}
 							?checked=${this._allowedAtRoot}
 							@change=${(e: CustomEvent) => {
-								this.#workspaceContext?.updateProperty('allowedAtRoot', (e.target as UUIToggleElement).checked);
+								this.#workspaceContext?.setAllowedAtRoot((e.target as UUIToggleElement).checked);
 							}}></uui-toggle>
 					</div>
 				</umb-property-layout>
@@ -68,16 +89,25 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 									contentType: { unique: id },
 									sortOrder: index,
 								}));
-								this.#workspaceContext?.updateProperty('allowedContentTypes', sortedContentTypesList);
+								this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
 							}}">
 						</umb-input-media-type>
 					</div>
 				</umb-property-layout>
 			</uui-box>
 			<uui-box headline=${this.localize.term('contentTypeEditor_presentation')}>
-				<umb-property-layout alias="Root" label="Collection view">
-					<div slot="description">Provides an overview of child content and hides it in the tree.</div>
-					<div slot="editor"><uui-toggle label="Display children in a Collection view"></uui-toggle></div>
+				<umb-property-layout alias="collection" label="${this.localize.term('contentTypeEditor_collections')}">
+					<div slot="description">${this.localize.term('contentTypeEditor_collectionsDescription')}</div>
+					<div slot="editor">
+						<umb-input-collection-configuration
+							default-value="3a0156c4-3b8c-4803-bdc1-6871faa83fff"
+							.value=${this._collection ?? ''}
+							@change=${(e: CustomEvent) => {
+								const unique = (e.target as UmbInputCollectionConfigurationElement).value as string;
+								this.#workspaceContext?.setCollection({ unique });
+							}}>
+						</umb-input-collection-configuration>
+					</div>
 				</umb-property-layout>
 			</uui-box>
 		`;