From 6406e78f1d306ca0141bab5da8e08c66d021c9ad Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 25 Apr 2024 14:06:40 +0100
Subject: [PATCH] Code sweep tidy-up

---
 ...ata-type-details-workspace-view.element.ts | 105 ++++++++++--------
 1 file changed, 57 insertions(+), 48 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
index ba58c5bdb8..a779b6a88a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -1,8 +1,8 @@
 import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context-token.js';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import { css, customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 
 @customElement('umb-data-type-details-workspace-view')
@@ -19,35 +19,35 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 	@state()
 	private _propertyEditorSchemaAlias?: string | null = null;
 
-	private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
+	#workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
 
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (_instance) => {
-			this._workspaceContext = _instance;
-			this._observeDataType();
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#workspaceContext = workspaceContext;
+			this.#observeDataType();
 		});
 	}
 
-	private _observeDataType() {
-		if (!this._workspaceContext) {
+	#observeDataType() {
+		if (!this.#workspaceContext) {
 			return;
 		}
 
-		this.observe(this._workspaceContext.propertyEditorUiAlias, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiAlias, (value) => {
 			this._propertyEditorUiAlias = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorSchemaAlias, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorSchemaAlias, (value) => {
 			this._propertyEditorSchemaAlias = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorUiName, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiName, (value) => {
 			this._propertyEditorUiName = value;
 		});
 
-		this.observe(this._workspaceContext.propertyEditorUiIcon, (value) => {
+		this.observe(this.#workspaceContext.propertyEditorUiIcon, (value) => {
 			this._propertyEditorUiIcon = value;
 		});
 	}
@@ -64,54 +64,59 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 			.catch(() => undefined);
 
 		if (value) {
-			this._workspaceContext?.setPropertyEditorUiAlias(value.selection[0]);
+			this.#workspaceContext?.setPropertyEditorUiAlias(value.selection[0]);
 		}
 	}
 
 	render() {
 		return html`
-			<uui-box> ${this.#renderPropertyEditorReference()} </uui-box>
-			${this.#renderPropertyEditorConfig()} </uui-box>
+			<uui-box>
+				<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
+					${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
+						? this.#renderPropertyEditorReference()
+						: this.#renderChooseButton()}
+				</umb-property-layout>
+			</uui-box>
+			<uui-box headline=${this.localize.term('general_settings')}>
+				<umb-property-editor-config></umb-property-editor-config>
+			</uui-box>
+		`;
+	}
+
+	#renderChooseButton() {
+		return html`
+			<uui-button
+				slot="editor"
+				id="btn-add"
+				label=${this.localize.term('propertyEditorPicker_title')}
+				look="placeholder"
+				color="default"
+				@click=${this.#openPropertyEditorUIPicker}></uui-button>
 		`;
 	}
 
 	#renderPropertyEditorReference() {
+		if (!this._propertyEditorUiAlias || !this._propertyEditorSchemaAlias) return nothing;
 		return html`
-			<umb-property-layout label="Property Editor" description="Select a property editor">
-				${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
-					? html`
-							<umb-ref-property-editor-ui
-								slot="editor"
-								name=${this._propertyEditorUiName ?? ''}
-								alias=${this._propertyEditorUiAlias}
-								property-editor-schema-alias=${this._propertyEditorSchemaAlias}
-								standalone>
-								${this._propertyEditorUiIcon
-									? html` <umb-icon name="${this._propertyEditorUiIcon}" slot="icon"></umb-icon> `
-									: ''}
-								<uui-action-bar slot="actions">
-									<uui-button label="Change" @click=${this.#openPropertyEditorUIPicker}></uui-button>
-								</uui-action-bar>
-							</umb-ref-property-editor-ui>
-						`
-					: html`
-							<uui-button
-								slot="editor"
-								label="Select Property Editor"
-								look="placeholder"
-								color="default"
-								@click=${this.#openPropertyEditorUIPicker}></uui-button>
-						`}
-			</umb-property-layout>
+			<umb-ref-property-editor-ui
+				slot="editor"
+				name=${this._propertyEditorUiName ?? ''}
+				alias=${this._propertyEditorUiAlias}
+				property-editor-schema-alias=${this._propertyEditorSchemaAlias}
+				standalone
+				@open=${this.#openPropertyEditorUIPicker}>
+				${this._propertyEditorUiIcon
+					? html`<umb-icon name=${this._propertyEditorUiIcon} slot="icon"></umb-icon>`
+					: nothing}
+				<uui-action-bar slot="actions">
+					<uui-button
+						label=${this.localize.term('general_change')}
+						@click=${this.#openPropertyEditorUIPicker}></uui-button>
+				</uui-action-bar>
+			</umb-ref-property-editor-ui>
 		`;
 	}
 
-	#renderPropertyEditorConfig() {
-		return html`<uui-box headline="Settings">
-			<umb-property-editor-config></umb-property-editor-config>
-		</uui-box> `;
-	}
-
 	static styles = [
 		UmbTextStyles,
 		css`
@@ -124,6 +129,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
 			uui-box {
 				margin-top: var(--uui-size-layout-1);
 			}
+
+			#btn-add {
+				display: block;
+			}
 		`,
 	];
 }