From a6618a7fe20698051ebb80ac41767e0b41d61df6 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 9 Feb 2024 13:30:24 +0100
Subject: [PATCH] add crude way to select a template

---
 .../workspace/document-workspace.context.ts   |  4 ++
 .../document-workspace-view-info.element.ts   | 71 ++++++++++++++++---
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
index 4bc86ab5a0..66ad5352bf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
@@ -121,6 +121,10 @@ export class UmbDocumentWorkspaceContext
 		this.#currentData.update({ variants });
 	}
 
+	setTemplate(templateUnique: string) {
+		this.#currentData.update({ template: { unique: templateUnique } });
+	}
+
 	async propertyStructureById(propertyId: string) {
 		return this.structure.propertyStructureById(propertyId);
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 749bab5913..1dcb300c99 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -2,7 +2,12 @@ import { TimeOptions } from './utils.js';
 import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
-import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import {
+	UMB_MODAL_MANAGER_CONTEXT,
+	UMB_TEMPLATE_PICKER_MODAL,
+	UMB_WORKSPACE_MODAL,
+	UmbModalRouteRegistrationController,
+} from '@umbraco-cms/backoffice/modal';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import './document-workspace-view-info-history.element.js';
 import './document-workspace-view-info-reference.element.js';
@@ -20,7 +25,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _documentUnique = '';
 
-	private _workspaceContext?: typeof UMB_WORKSPACE_CONTEXT.TYPE;
+	@state()
+	private _templateUnique = '';
+
+	private _workspaceContext?: UmbDocumentWorkspaceContext;
 
 	@state()
 	private _editDocumentTypePath = '';
@@ -31,6 +39,8 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _createDate = 'Unknown';
 
+	#modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
+
 	constructor() {
 		super();
 
@@ -44,9 +54,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			});
 
 		this.consumeContext(UMB_WORKSPACE_CONTEXT, (nodeContext) => {
-			this._workspaceContext = nodeContext;
+			this._workspaceContext = nodeContext as UmbDocumentWorkspaceContext;
 			this._observeContent();
 		});
+
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (modalManagerContext) => {
+			this.#modalManagerContext = modalManagerContext;
+		});
 	}
 
 	private _observeContent() {
@@ -54,18 +68,30 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 
 		this._nodeName = 'TBD, with variants this is not as simple.';
 
-		this._documentTypeId = (this._workspaceContext as UmbDocumentWorkspaceContext).getContentTypeId()!;
+		this._documentTypeId = this._workspaceContext.getContentTypeId()!;
 
-		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).urls, (urls) => {
+		this.observe(this._workspaceContext.urls, (urls) => {
 			this._urls = urls;
 		});
 
-		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).unique, (unique) => {
-			this._documentUnique = unique!;
-		});
+		this.observe(
+			this._workspaceContext.unique,
+			(unique) => {
+				this._documentUnique = unique!;
+			},
+			'_documentUnique',
+		);
+
+		this.observe(
+			this._workspaceContext.templateId,
+			(templateUnique) => {
+				this._templateUnique = templateUnique!;
+			},
+			'_templateUnique',
+		);
 
 		/** TODO: Doubt this is the right way to get the create date... */
-		this.observe((this._workspaceContext as UmbDocumentWorkspaceContext).variants, (variants) => {
+		this.observe(this._workspaceContext.variants, (variants) => {
 			this._createDate = Array.isArray(variants) ? variants[0].createDate || 'Unknown' : 'Unknown';
 		});
 	}
@@ -136,7 +162,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="template_template"></umb-localize></strong>
-				<uui-button look="secondary" label="Template picker TODO"></uui-button>
+				<uui-button
+					look="secondary"
+					label="${this.localize.term('template_template')}"
+					@click=${this.#openTemplatePicker}></uui-button>
 			</div>
 			<div class="general-item">
 				<strong><umb-localize key="template_id"></umb-localize></strong>
@@ -145,6 +174,28 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 		`;
 	}
 
+	async #openTemplatePicker() {
+		const modal = this.#modalManagerContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
+			data: {
+				hideTreeRoot: true,
+				multiple: false,
+			},
+			value: {
+				selection: [this._templateUnique],
+			},
+		});
+
+		const result = await modal?.onSubmit().catch(() => undefined);
+
+		if (!result?.selection.length) return;
+
+		const templateUnique = result.selection[0];
+
+		if (!templateUnique) return;
+
+		this._workspaceContext?.setTemplate(templateUnique);
+	}
+
 	static styles = [
 		UmbTextStyles,
 		css`