@umbraco-cms/backoffice 14.0.0-d335c2c2 → 14.0.0-d87d656d

package/dist-cms/packages/templating/partial-views/workspace/partial-views-workspace.element.js

@@ -9,20 +9,23 @@ import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import './partial-views-workspace-edit.element.js';
+import '../../components/insert-menu/templating-insert-menu.element.js';
+import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';
 export let UmbPartialViewsWorkspaceElement = class UmbPartialViewsWorkspaceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this.#partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this);
-        this.#routerPath = '';
         this.#element = document.createElement('umb-partial-views-workspace-edit');
-        this.#key = '';
         this._routes = [
             {
-                path: 'create/:parentKey',
+                path: 'create/:parentKey/:snippetName',
                 component: () => this.#element,
                 setup: async (component, info) => {
                     const parentKey = info.match.params.parentKey;
-                    this.#partialViewsWorkspaceContext.create(parentKey);
+                    const decodePath = decodeURIComponent(parentKey);
+                    const snippetName = info.match.params.snippetName;
+                    this.#partialViewsWorkspaceContext.create(decodePath === 'null' ? null : parentKey, snippetName);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#partialViewsWorkspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
                 },
             },
             {
@@ -30,21 +33,16 @@ export let UmbPartialViewsWorkspaceElement = class UmbPartialViewsWorkspaceEleme
                 component: () => this.#element,
                 setup: (component, info) => {
                     const key = info.match.params.key;
-                    this.#partialViewsWorkspaceContext.load(key);
+                    const decodePath = decodeURIComponent(key).replace('-cshtml', '.cshtml');
+                    this.#partialViewsWorkspaceContext.load(decodePath);
                 },
             },
         ];
     }
     #partialViewsWorkspaceContext;
-    #routerPath;
     #element;
-    #key;
     render() {
-        return html `<umb-router-slot
-			.routes=${this._routes}
-			@init=${(event) => {
-            this.#routerPath = event.target.absoluteRouterPath;
-        }}></umb-router-slot>`;
+        return html `<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
     }
     static { this.styles = [UUITextStyles, css ``]; }
 };

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace.element.js

@@ -10,6 +10,7 @@ import { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';
 export let UmbStylesheetWorkspaceElement = class UmbStylesheetWorkspaceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -23,6 +24,7 @@ export let UmbStylesheetWorkspaceElement = class UmbStylesheetWorkspaceElement e
                     const path = info.match.params.path;
                     const serverPath = serverFilePathFromUrlFriendlyPath(path);
                     this.#workspaceContext.load(serverPath);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#workspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
                 },
             },
         ];

package/dist-cms/packages/templating/templates/components/alias-input/alias-input.js

@@ -16,7 +16,7 @@ export let UmbTemplateAliasInputElement = class UmbTemplateAliasInputElement ext
     }
     render() {
         return html `
-        <uui-button compact @click=${this.#handleClick}>
+        <uui-button compact @click=${this.#handleClick} label="unlock alias input">
             <uui-symbol-lock .open=${this.isOpen} ></uui-symbol-lock>
         </uui-button>
         <input placeholder="Enter alias..." .value=${this.value} ?disabled=${!this.isOpen} @input=${this.#setValue}></input>

package/dist-cms/packages/templating/templates/components/input-template/input-template.element.d.ts

@@ -1,3 +1,4 @@
+import '../template-card/template-card.element.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { ItemResponseModelBaseModel } from '../../../../../external/backend-api/index.js';
 declare const UmbInputTemplateElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
@@ -32,8 +33,8 @@ export declare class UmbInputTemplateElement extends UmbInputTemplateElement_bas
      */
     maxMessage: string;
     _selectedIds: Array<string>;
-    get selectedIds(): Array<string>;
-    set selectedIds(newKeys: Array<string>);
+    get selectedIds(): Array<string> | undefined;
+    set selectedIds(newKeys: Array<string> | undefined);
     _defaultId: string;
     get defaultId(): string;
     set defaultId(newId: string);

package/dist-cms/packages/templating/templates/components/input-template/input-template.element.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import '../template-card/template-card.element.js';
 import { UmbTemplateRepository } from '../../repository/template.repository.js';
 import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UUITextStyles, FormControlMixin } from '../../../../../external/uui/index.js';
@@ -14,7 +15,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         return this._selectedIds;
     }
     set selectedIds(newKeys) {
-        this._selectedIds = newKeys;
+        this._selectedIds = newKeys ?? [];
         this.#observePickedTemplates();
     }
     get defaultId() {
@@ -69,7 +70,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         // TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
         const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
             multiple: true,
-            selection: [...this.selectedIds],
+            selection: [...this._selectedIds],
             pickableFilter: (template) => template.id !== null,
         });
         modalContext?.onSubmit().then((data) => {
@@ -89,7 +90,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         In current backoffice we just prevent deleting a default when there are other templates. But if its the only one its okay. This is a weird experience, so we should make something that makes more sense.
         BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates.
         */
-        this.selectedIds = this.selectedIds.filter((x) => x !== id);
+        this.selectedIds = this._selectedIds.filter((x) => x !== id);
     }
     #openTemplate(e) {
         const id = e.target.value;
@@ -153,7 +154,7 @@ __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputTemplateElement.prototype, "maxMessage", void 0);
 __decorate([
-    property({ type: (Array) })
+    property({ type: Array })
 ], UmbInputTemplateElement.prototype, "selectedIds", null);
 __decorate([
     property({ type: String })

package/dist-cms/packages/templating/templates/entity-actions/create/create.action.js

@@ -6,7 +6,7 @@ export class UmbCreateEntityAction extends UmbEntityActionBase {
     // TODO: can we make this a generic create action
     async execute() {
         // TODO: get entity type from repository?
-        const url = `section/settings/workspace/template/create/${this.unique || 'root'}`;
+        const url = `section/settings/workspace/template/create/${this.unique || 'null'}`;
         // TODO: how do we handle this with a href?
         history.pushState(null, '', url);
     }

package/dist-cms/packages/templating/templates/index.d.ts

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

package/dist-cms/packages/templating/templates/index.js

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

package/dist-cms/packages/templating/templates/manifests.d.ts

@@ -1 +1 @@
-export declare const manifests: (import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView)[];
+export declare const manifests: (import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestModal | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView)[];

package/dist-cms/packages/templating/templates/manifests.js

@@ -3,7 +3,9 @@ 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,

package/dist-cms/packages/templating/templates/modals/manifests.d.ts

@@ -0,0 +1,3 @@
+import { ManifestModal } from '../../../core/extension-registry/index.js';
+export declare const UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS = "Umb.Modal.Templating.Query.Builder.Sidebar";
+export declare const manifests: ManifestModal[];

package/dist-cms/packages/templating/templates/modals/manifests.js

@@ -0,0 +1,10 @@
+export const UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Query.Builder.Sidebar';
+const modals = [
+    {
+        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];

package/dist-cms/packages/templating/templates/modals/modal-tokens.d.ts

@@ -0,0 +1,3 @@
+import { TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult } from './query-builder/query-builder.element.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
+export declare const UMB_TEMPLATE_QUERY_BUILDER_MODAL: UmbModalToken<TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult>;

package/dist-cms/packages/templating/templates/modals/modal-tokens.js

@@ -0,0 +1,6 @@
+import { UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS } from './manifests.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
+export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
+    type: 'sidebar',
+    size: 'large',
+});

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValueMap } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { TemplateQueryExecuteFilterPresentationModel, TemplateQueryPropertyTypeModel, TemplateQuerySettingsResponseModel } from '../../../../../external/backend-api/index.js';
+export declare class UmbQueryBuilderFilterElement extends UmbLitElement {
+    #private;
+    private _propertyAliasDropdown?;
+    private _operatorDropdown?;
+    filter: TemplateQueryExecuteFilterPresentationModel;
+    unremovable: boolean;
+    settings?: TemplateQuerySettingsResponseModel;
+    currentPropertyType: TemplateQueryPropertyTypeModel | null;
+    get isFilterValid(): boolean;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private _renderOperatorsDropdown;
+    private _renderConstraintValueInput;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbQueryBuilderFilterElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-query-builder-filter': UmbQueryBuilderFilterElement;
+    }
+}

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.js

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UUITextStyles } from '../../../../../external/uui/index.js';
+import { css, html, customElement, property, query, state, } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { TemplateQueryPropertyTypeModel, } from '../../../../../external/backend-api/index.js';
+export let UmbQueryBuilderFilterElement = class UmbQueryBuilderFilterElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.filter = {};
+        this.unremovable = false;
+        this.currentPropertyType = null;
+        this.#setPropertyAlias = (e) => {
+            const target = e.target;
+            const oldCurrentPropertyType = this.currentPropertyType;
+            this.filter = { ...this.filter, propertyAlias: target.value };
+            this.currentPropertyType =
+                this.settings?.properties?.find((p) => p.alias === this.filter.propertyAlias)?.type ?? null;
+            if (oldCurrentPropertyType !== this.currentPropertyType)
+                this.#resetOperator();
+            this._propertyAliasDropdown?.closePopover();
+        };
+        this.#setConstrainValue = (e) => {
+            const target = e.target;
+            this.filter = { ...this.filter, constraintValue: target.value };
+        };
+        this.#setOperator = (e) => {
+            const target = e.target;
+            this.filter = { ...this.filter, operator: target.value };
+            this._operatorDropdown?.closePopover();
+        };
+    }
+    #setPropertyAlias;
+    #setConstrainValue;
+    #setOperator;
+    #resetOperator() {
+        this.filter = { ...this.filter, operator: undefined };
+    }
+    #resetFilter() {
+        this.filter = {};
+    }
+    #removeOrReset() {
+        if (this.unremovable)
+            this.#resetFilter();
+        else
+            this.dispatchEvent(new Event('remove-filter'));
+    }
+    #addFilter() {
+        this.dispatchEvent(new Event('add-filter'));
+    }
+    get isFilterValid() {
+        return Object.keys(this.filter).length === 3 && Object.values(this.filter).every((v) => !!v);
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('filter')) {
+            if (this.isFilterValid) {
+                this.dispatchEvent(new Event('update-query'));
+            }
+        }
+    }
+    _renderOperatorsDropdown() {
+        return html `<umb-button-with-dropdown look="outline" id="operator-dropdown" label="choose operator">
+			${this.filter?.operator ?? ''}
+			<uui-combobox-list slot="dropdown" @change=${this.#setOperator} class="options-list">
+				${this.settings?.operators
+            ?.filter((operator) => this.currentPropertyType ? operator.applicableTypes?.includes(this.currentPropertyType) : true)
+            .map((operator) => html `<uui-combobox-list-option .value=${operator.operator ?? ''}
+								>${operator.operator}</uui-combobox-list-option
+							>`)}</uui-combobox-list
+			>
+		</umb-button-with-dropdown>`;
+    }
+    _renderConstraintValueInput() {
+        switch (this.currentPropertyType) {
+            case TemplateQueryPropertyTypeModel.INTEGER:
+                return html `<uui-input type="number" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            case TemplateQueryPropertyTypeModel.STRING:
+                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            case TemplateQueryPropertyTypeModel.DATE_TIME:
+                return html `<uui-input type="date" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            default:
+                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+        }
+    }
+    render() {
+        return html `
+			<span>${this.unremovable ? 'where' : 'and'}</span>
+			<umb-button-with-dropdown look="outline" id="property-alias-dropdown" label="Property alias"
+				>${this.filter?.propertyAlias ?? ''}
+				<uui-combobox-list slot="dropdown" @change=${this.#setPropertyAlias} class="options-list">
+					${this.settings?.properties?.map((property) => html `<uui-combobox-list-option tabindex="0" .value=${property.alias ?? ''}
+								>${property.alias}</uui-combobox-list-option
+							>`)}
+				</uui-combobox-list></umb-button-with-dropdown
+			>
+			${this.filter?.propertyAlias ? this._renderOperatorsDropdown() : ''}
+			${this.filter?.operator ? this._renderConstraintValueInput() : ''}
+			<uui-button-group>
+				<uui-button title="Add filter" label="Add filter" compact @click=${this.#addFilter}
+					><uui-icon name="add"></uui-icon
+				></uui-button>
+				<uui-button title="Remove filter" label="Remove filter" compact @click=${this.#removeOrReset}
+					><uui-icon name="delete"></uui-icon
+				></uui-button>
+			</uui-button-group>
+		`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: flex;
+				gap: 10px;
+				border-bottom: 1px solid #f3f3f5;
+				align-items: center;
+				padding: 20px 0;
+			}
+
+			.options-list {
+				min-width: 25ch;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+
+			uui-combobox-list-option {
+				padding: 8px 20px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    query('#property-alias-dropdown')
+], UmbQueryBuilderFilterElement.prototype, "_propertyAliasDropdown", void 0);
+__decorate([
+    query('#operator-dropdown')
+], UmbQueryBuilderFilterElement.prototype, "_operatorDropdown", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbQueryBuilderFilterElement.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbQueryBuilderFilterElement.prototype, "unremovable", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbQueryBuilderFilterElement.prototype, "settings", void 0);
+__decorate([
+    state()
+], UmbQueryBuilderFilterElement.prototype, "currentPropertyType", void 0);
+UmbQueryBuilderFilterElement = __decorate([
+    customElement('umb-query-builder-filter')
+], UmbQueryBuilderFilterElement);
+export default UmbQueryBuilderFilterElement;

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.d.ts

@@ -0,0 +1,28 @@
+import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
+import './query-builder-filter.element.js';
+export interface TemplateQueryBuilderModalData {
+    hidePartialViews?: boolean;
+}
+export interface TemplateQueryBuilderModalResult {
+    value: string;
+}
+export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult> {
+    #private;
+    private _contentTypeDropdown?;
+    private _sortDropdown?;
+    private _filterContainer?;
+    private _filterElements;
+    private _templateQuery?;
+    private _queryRequest;
+    private _queryBuilderSettings?;
+    private _selectedRootContentName;
+    private _defaultSortDirection;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-templating-query-builder-modal': UmbChooseInsertTypeModalElement;
+    }
+}