From dead3cd9c67e064888962f0a377d357ae3f57e2e Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 9 May 2023 13:05:50 +0200
Subject: [PATCH] use tree picker modal for template picker modal

---
 .../token/template-picker-modal.token.ts      |  18 ++-
 .../src/backoffice/core/modals/manifests.ts   |   6 -
 .../template-picker-modal.element.ts          | 105 ------------------
 3 files changed, 8 insertions(+), 121 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts

diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts
index 8f9b122a69..2af6dc02d6 100644
--- a/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/libs/modal/token/template-picker-modal.token.ts
@@ -1,18 +1,16 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
 
-export interface UmbTemplatePickerModalData {
-	multiple: boolean;
-	selection: Array<string | null>;
-}
-
-export interface UmbTemplatePickerModalResult {
-	selection: Array<string | null>;
-}
+export type UmbTemplatePickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
+export type UmbTemplatePickerModalResult = UmbPickerModalResult;
 
 export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken<UmbTemplatePickerModalData, UmbTemplatePickerModalResult>(
-	'Umb.Modal.TemplatePicker',
+	'Umb.Modal.TreePicker',
 	{
 		type: 'sidebar',
 		size: 'small',
+	},
+	{
+		treeAlias: 'Umb.Tree.Templates',
 	}
 );
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts
index 662d114e8d..12151e0fc5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/manifests.ts
@@ -37,12 +37,6 @@ const modals: Array<ManifestModal> = [
 		name: 'Section Picker Modal',
 		loader: () => import('./section-picker/section-picker-modal.element'),
 	},
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.TemplatePicker',
-		name: 'Template Picker Modal',
-		loader: () => import('./template-picker/template-picker-modal.element'),
-	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.Template',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts
deleted file mode 100644
index 3ce0e82b15..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/modals/template-picker/template-picker-modal.element.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { css, html } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, state } from 'lit/decorators.js';
-import { UmbTreeElement } from '../../components/tree/tree.element';
-import { UmbTemplatePickerModalData, UmbTemplatePickerModalResult } from '@umbraco-cms/backoffice/modal';
-import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
-
-//TODO: make a default tree-picker that can be used across multiple pickers
-// TODO: make use of UmbPickerLayoutBase
-@customElement('umb-template-picker-modal')
-export class UmbTemplatePickerModalElement extends UmbModalBaseElement<
-	UmbTemplatePickerModalData,
-	UmbTemplatePickerModalResult
-> {
-	@state()
-	_selection: Array<string | null> = [];
-
-	@state()
-	_multiple = true;
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._selection = this.data?.selection ?? [];
-		this._multiple = this.data?.multiple ?? true;
-	}
-
-	private _handleSelectionChange(e: CustomEvent) {
-		e.stopPropagation();
-		const element = e.target as UmbTreeElement;
-		this._selection = this._multiple ? element.selection : [element.selection[element.selection.length - 1]];
-	}
-
-	private _submit() {
-		this.modalHandler?.submit({ selection: this._selection });
-	}
-
-	private _close() {
-		this.modalHandler?.reject();
-	}
-
-	// TODO: implement search
-	// TODO: make umb-tree have a disabled option (string array like selection)?
-	render() {
-		return html`
-			<umb-workspace-editor headline="Select Content">
-				<uui-box>
-					<uui-input></uui-input>
-					<hr />
-					<umb-tree
-						alias="Umb.Tree.Templates"
-						@selected=${this._handleSelectionChange}
-						.selection=${this._selection}
-						selectable></umb-tree>
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
-				</div>
-			</umb-workspace-editor>
-		`;
-	}
-
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
-}
-
-export default UmbTemplatePickerModalElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-template-picker-modal': UmbTemplatePickerModalElement;
-	}
-}