yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

open query builder modal

Browse Source
This commit is contained in:
Julia Gru
2023-06-20 14:32:07 +02:00
parent 830ed804bc
commit 16a8ade383
6 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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,

14
src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/manifests.ts Normal file
View File

@@ -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];

14
src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/modal-tokens.ts Normal file
View File

@@ -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',
});

76
src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts Normal file
View File

@@ -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;
}
}

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

@@ -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"