open query builder modal

src/Umbraco.Web.UI.Client/src/packages/templating/templates/index.ts

@@ -1,3 +1,4 @@
 export * from './entities.js';
 export * from './repository/index.js';
 import './components/index.js';
+import './modals/modal-tokens.js';

src/Umbraco.Web.UI.Client/src/packages/templating/templates/manifests.ts

@@ -3,8 +3,10 @@ import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as modalManifests } from './modals/manifests.js';
 
 export const manifests = [
+	...modalManifests,
 	...repositoryManifests,
 	...menuItemManifests,
 	...treeManifests,

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/manifests.ts

@@ -0,0 +1,14 @@
+import { ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Query.Builder.Sidebar';
+
+const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		alias: UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS,
+		name: 'Template query builder',
+		loader: () => import('./query-builder/query-builder.element.js'),
+	},
+];
+
+export const manifests = [...modals];

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts

@@ -0,0 +1,14 @@
+import { UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS } from './manifests.js';
+import {
+	TemplateQueryBuilderModalData,
+	TemplateQueryBuilderModalResult,
+} from './query-builder/query-builder.element.js';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken<
+	TemplateQueryBuilderModalData,
+	TemplateQueryBuilderModalResult
+>(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
+	type: 'sidebar',
+	size: 'large',
+});

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts

@@ -0,0 +1,76 @@
+import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
+import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+
+export interface TemplateQueryBuilderModalData {
+	hidePartialViews?: boolean;
+}
+
+export interface TemplateQueryBuilderModalResult {
+	value: string;
+}
+
+@customElement('umb-templating-query-builder-modal')
+export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<
+	TemplateQueryBuilderModalData,
+	TemplateQueryBuilderModalResult
+> {
+	private _close() {
+		this.modalContext?.reject();
+	}
+
+	private _modalContext?: UmbModalManagerContext;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+			this._modalContext = instance;
+		});
+	}
+
+	render() {
+		return html`
+			<umb-body-layout headline="Query builder">
+				<div id="main">
+					<uui-box>
+						<div>
+							I want <uui-button look="outline">all content</uui-button> from
+							<uui-button look="outline">all pages </uui-button>
+						</div>
+						<div>
+							where <uui-button look="outline"></uui-button> from <uui-button look="outline">all pages </uui-button>
+						</div>
+					</uui-box>
+				</div>
+				<div slot="actions">
+					<uui-button @click=${this._close} look="secondary">Close</uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+	}
+
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
+			}
+
+			#main {
+				box-sizing: border-box;
+				height: calc(
+					100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
+				);
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-templating-query-builder-modal': UmbChooseInsertTypeModalElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts

@@ -12,6 +12,8 @@ import {
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { Subject, debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
+import { UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS } from '../modals/manifests.js';
+import { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../modals/modal-tokens.js';
 
 @customElement('umb-template-workspace-editor')
 export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
@@ -165,6 +167,14 @@ ${this._content}`;
 		});
 	}
 
+	#openQueryBuilder() {
+		const modalContext = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
+
+		modalContext?.onSubmit().then((data) => {
+			console.log(data);
+		});
+	}
+
 	#renderMasterTemplatePicker() {
 		return html`
 			<uui-button-group>
@@ -200,7 +210,7 @@ ${this._content}`;
 			<uui-input placeholder="Enter name..." slot="header" .value=${this._name} @input=${this.#onNameInput}
 				><umb-template-alias-input
 					slot="append"
-					.value=${this._alias}
+					.value=${this._alias as string}
 					@change=${this.#onAliasInput}></umb-template-alias-input
 			></uui-input>
 			<uui-box>
@@ -208,9 +218,13 @@ ${this._content}`;
 					${this.#renderMasterTemplatePicker()}
 					<div>
 						<umb-templating-insert-menu @insert=${this.#insertSnippet}></umb-templating-insert-menu>
-						<!-- <uui-button look="secondary" id="query-builder-button" label="Query builder">
+						<uui-button
+							look="secondary"
+							id="query-builder-button"
+							label="Query builder"
+							@click=${this.#openQueryBuilder}>
 							<uui-icon name="umb:wand"></uui-icon>Query builder
-						</uui-button> -->
+						</uui-button>
 						<uui-button
 							look="secondary"
 							id="sections-button"