add get master tempalte method

2023-05-24 11:13:04 +02:00
parent ee7add30c9
commit 7bc38bf20d
4 changed files with 90 additions and 32 deletions
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-editor/code-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-editor/code-editor.element.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { UMB_THEME_CONTEXT_TOKEN } from '../../../settings/themes/theme.context';
 import { UmbCodeEditorController } from './code-editor.controller';
-import { CodeEditorLanguage, CodeEditorTheme, UmbCodeEditorHost } from './code-editor.model';
+import { CodeEditorLanguage, CodeEditorSearchOptions, CodeEditorTheme, UmbCodeEditorHost } from './code-editor.model';
 import { monacoEditorStyles, monacoJumpingCursorHack } from './styles';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 /**
@@ -137,8 +137,8 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 	 * @return {*}
 	 * @memberof UmbCodeEditorElement
 	 */
-	find(text: string) {
-		return this.#editor?.find(text);
+	find(text: string, searchOptions: CodeEditorSearchOptions = <CodeEditorSearchOptions>{}) {
+		return this.#editor?.find(text, searchOptions);
 	}

 	render() {
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/code-editor/code-editor.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/code-editor/code-editor.model.ts
@@ -197,33 +197,33 @@ export interface CodeEditorSearchOptions {
 	 * @type {boolean}
 	 * @memberof CodeEditorSearchOptions
 	 */
-	searchOnlyEditableRange: boolean;
+	searchOnlyEditableRange?: boolean;
 	/**
 	 * Used to indicate that searchString is a regular expression.
 	 *
 	 * @type {boolean}
 	 * @memberof CodeEditorSearchOptions
 	 */
-	isRegex: boolean;
+	isRegex?: boolean;
 	/**
 	 * Force the matching to match lower/upper case exactly.
 	 *
 	 * @type {boolean}
 	 * @memberof CodeEditorSearchOptions
 	 */
-	matchCase: boolean;
+	matchCase?: boolean;
 	/**
 	 * Force the matching to match entire words only. Pass null otherwise.
 	 *
 	 * @type {string}
 	 * @memberof CodeEditorSearchOptions
 	 */
-	wordSeparators: string | null;
+	wordSeparators?: string | null;
 	/**
 	 * The result will contain the captured groups.
 	 *
 	 * @type {boolean}
 	 * @memberof CodeEditorSearchOptions
 	 */
-	captureMatches: boolean;
+	captureMatches?: boolean;
 }
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-edit.element.ts
@@ -6,7 +6,7 @@ import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/tem
 import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element';
 import { UmbTemplateWorkspaceContext } from './template-workspace.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal';
+import { UMB_MODAL_CONTEXT_TOKEN, UMB_TEMPLATE_PICKER_MODAL, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/core/components';

@customElement('umb-template-workspace-edit')
@@ -17,12 +17,17 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
 	@state()
 	private _content?: string | null = '';

+	@state()
+	private _masterTemplateName?: string | null = null;
+
 	@query('umb-code-editor')
 	private _codeEditor?: UmbCodeEditorElement;

 	#templateWorkspaceContext?: UmbTemplateWorkspaceContext;
 	#isNew = false;

+	#masterTemplateId: string | null = null;
+
 	constructor() {
 		super();

@@ -38,6 +43,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {

 			this.observe(this.#templateWorkspaceContext.content, (content) => {
 				this._content = content;
+				this._masterTemplateName = this.#getMasterTemplateId();
 			});

 			this.observe(this.#templateWorkspaceContext.isNew, (isNew) => {
@@ -76,32 +82,70 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
 		});
 	}

+	#getMasterTemplateId() {
+		const RegexString = /(@{[\s\S][^if]*?Layout\s*?=\s*?)("[^"]*?"|null)(;[\s\S]*?})/gi;
+		const match = RegexString.exec(this._content ?? '');
+
+		if (match) {
+			return match[2].replace(/"/g, '');
+		}
+
+		return null;
+	}
+
+	#openMasterTemplatePicker() {
+		// TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
+		const modalHandler = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
+			selection: [this.#masterTemplateId],
+		});
+
+		const RegexString = /(@{[\s\S][^if]*?Layout\s*?=\s*?)("[^"]*?"|null)(;[\s\S]*?})/gi;
+		modalHandler?.onSubmit().then((data) => {
+			if (!data.selection) return;
+			console.log(data.selection);
+
+			const string = this._codeEditor?.code.replace(RegexString, `$1"${data.selection[0]}"$3`);
+			debugger;
+		});
+	}
+
+	#renderMasterTemplatePicker() {
+		return html`
+			<uui-button-group>
+				<uui-button
+					@click=${this.#openMasterTemplatePicker}
+					look="secondary"
+					id="master-template-button"
+					label="Change Master template"
+					>Master template: ${this._masterTemplateName ?? 'No master'}</uui-button
+				>
+				<uui-button look="secondary" id="save-button" label="Remove master template" compact
+					><uui-icon name="umb:delete"></uui-icon
+				></uui-button>
+			</uui-button-group>
+		`;
+	}
+
 	render() {
 		// TODO: add correct UI elements
 		return html`<umb-body-layout alias="Umb.Workspace.Template">
 			<uui-input slot="header" .value=${this._name} @input=${this.#onNameInput}></uui-input>
 			<uui-box>
 				<div slot="header" id="code-editor-menu-container">
-					<uui-button-group>
-						<uui-button look="secondary" id="master-template-button" label="Change Master template"
-							>Master template: something</uui-button
-						>
-						<uui-button look="secondary" id="save-button" label="Remove master template" compact
-							><uui-icon name="umb:delete"></uui-icon
-						></uui-button>
-					</uui-button-group>
-					<umb-templating-insert-menu @insert=${this.#insertCode}></umb-templating-insert-menu>
-					<uui-button look="secondary" id="query-builder-button" label="Query builder">
-						<uui-icon name="umb:wand"></uui-icon>Query builder
-					</uui-button>
-
-					<uui-button
-						look="secondary"
-						id="sections-button"
-						label="Query builder"
-						@click=${this.#openInsertSectionModal}>
-						<uui-icon name="umb:indent"></uui-icon>Sections
-					</uui-button>
+					${this.#renderMasterTemplatePicker()}
+					<div>
+						<umb-templating-insert-menu @insert=${this.#insertCode}></umb-templating-insert-menu>
+						<uui-button look="secondary" id="query-builder-button" label="Query builder">
+							<uui-icon name="umb:wand"></uui-icon>Query builder
+						</uui-button>
+						<uui-button
+							look="secondary"
+							id="sections-button"
+							label="Query builder"
+							@click=${this.#openInsertSectionModal}>
+							<uui-icon name="umb:indent"></uui-icon>Sections
+						</uui-button>
+					</div>
 				</div>

 				<umb-code-editor
@@ -123,11 +167,12 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {
 			}

 			umb-code-editor {
-				--editor-height: calc(100vh - 300px);
+				margin-top: var(--uui-size-space-3);
+				--editor-height: calc(100dvh - 300px);
 			}

 			uui-box {
-				margin: 1em;
+				margin: var(--uui-size-layout-1);
 				--uui-box-default-padding: 0;
 			}

@@ -162,7 +207,7 @@ export class UmbTemplateWorkspaceEditElement extends UmbLitElement {

 			#code-editor-menu-container {
 				display: flex;
-				justify-content: flex-end;
+				justify-content: space-between;
 				gap: var(--uui-size-space-3);
 			}
 		`,
--- a/src/Umbraco.Web.UI.Client/src/shared/mocks/data/template.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/mocks/data/template.data.ts
@@ -72,6 +72,19 @@ export const data: Array<TemplateDBItem> = [
 		content:
 			'@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Test>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = null;\r\n}',
 	},
+	{
+		$type: '',
+		id: '9a84c0b3-03b4-4dd4-84ac-706740acwerer0f72',
+		isContainer: false,
+		parentId: '9a84c0b3-03b4-4dd4-84ac-706740ac0f71',
+		name: 'Has Master Template',
+		type: 'template',
+		icon: 'umb:layout',
+		hasChildren: false,
+		alias: 'hasMasterTemplate',
+		content:
+			'@using Umbraco.Cms.Web.Common.PublishedModels;\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Test>\r\n@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;\r\n@{\r\n\tLayout = "some/path/to/a/template.cshtml";\r\n}',
+	},
 ];

 export const createTemplateScaffold = (masterTemplateAlias: string) => {