@umbraco-cms/backoffice 14.0.0-8a5fc0ad → 14.0.0-8c1d7e37

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

@@ -4,18 +4,37 @@ 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 { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../../templates/modals/modal-tokens.js';
+import { getQuerySnippet } from '../../utils.js';
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, query, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '../../../core/modal/index.js';
+import { Subject, debounceTime } from '../../../../external/rxjs/index.js';
 export let UmbPartialViewsWorkspaceEditElement = class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
+    #name;
+    get _name() {
+        return this.#name;
+    }
+    set _name(value) {
+        this.#name = value?.replace('.cshtml', '');
+        this.requestUpdate();
+    }
     #partialViewsWorkspaceContext;
     #isNew;
     constructor() {
         super();
-        this._name = '';
+        this.#name = '';
         this._content = '';
+        this._path = '';
+        this._ready = false;
         this.#isNew = false;
-        this.consumeContext('umbWorkspaceContext', (workspaceContext) => {
+        this.inputQuery$ = new Subject();
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+            this._modalContext = instance;
+        });
+        //tODO: should this be called something else here?
+        this.consumeContext('UmbEntityWorkspaceContext', (workspaceContext) => {
             this.#partialViewsWorkspaceContext = workspaceContext;
             this.observe(this.#partialViewsWorkspaceContext.name, (name) => {
                 this._name = name;
@@ -23,44 +42,73 @@ export let UmbPartialViewsWorkspaceEditElement = class UmbPartialViewsWorkspaceE
             this.observe(this.#partialViewsWorkspaceContext.content, (content) => {
                 this._content = content;
             });
-            // this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => {
-            // 	this.#isNew = !!isNew;
-            // });
+            this.observe(this.#partialViewsWorkspaceContext.path, (path) => {
+                this._path = path;
+            });
+            this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => {
+                this.#isNew = !!isNew;
+            });
+            this.observe(this.#partialViewsWorkspaceContext.isCodeEditorReady, (isReady) => {
+                this._ready = isReady;
+            });
+            this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
+                this.#partialViewsWorkspaceContext?.setName(`${nameInputValue}.cshtml`);
+            });
         });
     }
-    // TODO: temp code for testing create and save
     #onNameInput(event) {
         const target = event.target;
         const value = target.value;
-        this.#partialViewsWorkspaceContext?.setName(value);
+        this.inputQuery$.next(value);
     }
-    //TODO - debounce that
     #onCodeEditorInput(event) {
         const target = event.target;
         const value = target.code;
         this.#partialViewsWorkspaceContext?.setContent(value);
     }
-    #insertCode(event) {
+    #insertSnippet(event) {
         const target = event.target;
         const value = target.value;
-        this._codeEditor?.insert(`My hovercraft is full of eels`);
+        this._codeEditor?.insert(value);
+    }
+    #openQueryBuilder() {
+        const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
+        queryBuilderModal?.onSubmit().then((queryBuilderModalResult) => {
+            if (queryBuilderModalResult.value)
+                this._codeEditor?.insert(getQuerySnippet(queryBuilderModalResult.value));
+        });
+    }
+    #renderCodeEditor() {
+        return html `<umb-code-editor
+			language="razor"
+			id="content"
+			.code=${this._content ?? ''}
+			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
     }
     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>
+        return html `<umb-workspace-editor alias="Umb.Workspace.Template">
+			<div id="workspace-header" slot="header">
+				<uui-input
+					placeholder="Enter name..."
+					.value=${this._name}
+					@input=${this.#onNameInput}
+					label="template name"></uui-input>
+				<small>Views/Partials/${this._path}</small>
+			</div>
 			<uui-box>
-				<uui-button color="danger" look="primary" slot="header" @click=${this.#insertCode}
-					>Insert "My hovercraft is full of eels"</uui-button
-				>
-
-				<umb-code-editor
-					language="razor"
-					id="content"
-					.code=${this._content ?? ''}
-					@input=${this.#onCodeEditorInput}></umb-code-editor>
+				<div slot="header" id="code-editor-menu-container">
+					<umb-templating-insert-menu @insert=${this.#insertSnippet}></umb-templating-insert-menu>
+					<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>
+				</div>
+				${this._ready
+            ? this.#renderCodeEditor()
+            : html `<div id="loader-container">
+							<uui-loader></uui-loader>
+					  </div>`}
 			</uui-box>
-		</umb-body-layout>`;
+		</umb-workspace-editor>`;
     }
     static { this.styles = [
         UUITextStyles,
@@ -71,28 +119,76 @@ export let UmbPartialViewsWorkspaceEditElement = class UmbPartialViewsWorkspaceE
 				height: 100%;
 			}
 
+			#loader-container {
+				display: grid;
+				place-items: center;
+				min-height: calc(100dvh - 360px);
+			}
+
 			umb-code-editor {
-				--editor-height: calc(100vh - 300px);
+				--editor-height: calc(100dvh - 300px);
 			}
 
 			uui-box {
-				margin: 1em;
+				min-height: calc(100dvh - 300px);
+				margin: var(--uui-size-layout-1);
 				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
+			}
+
+			#workspace-header {
+				width: 100%;
 			}
 
 			uui-input {
 				width: 100%;
-				margin: 1em;
+			}
+
+			#code-editor-menu-container uui-icon:not([name='umb:delete']) {
+				margin-right: var(--uui-size-space-3);
+			}
+
+			#insert-menu {
+				margin: 0;
+				padding: 0;
+				margin-top: var(--uui-size-space-3);
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				min-width: calc(100% + var(--uui-size-8, 24px));
+			}
+
+			#insert-menu > li,
+			ul {
+				padding: 0;
+				width: 100%;
+				list-style: none;
+			}
+
+			.insert-menu-item {
+				width: 100%;
+			}
+
+			#code-editor-menu-container {
+				display: flex;
+				justify-content: flex-end;
+				gap: var(--uui-size-space-3);
 			}
 		`,
     ]; }
 };
 __decorate([
     state()
-], UmbPartialViewsWorkspaceEditElement.prototype, "_name", void 0);
+], UmbPartialViewsWorkspaceEditElement.prototype, "_name", null);
 __decorate([
     state()
 ], UmbPartialViewsWorkspaceEditElement.prototype, "_content", void 0);
+__decorate([
+    state()
+], UmbPartialViewsWorkspaceEditElement.prototype, "_path", void 0);
+__decorate([
+    state()
+], UmbPartialViewsWorkspaceEditElement.prototype, "_ready", void 0);
 __decorate([
     query('umb-code-editor')
 ], UmbPartialViewsWorkspaceEditElement.prototype, "_codeEditor", void 0);

package/dist-cms/packages/templating/partial-views/workspace/partial-views-workspace.context.d.ts

@@ -1,20 +1,22 @@
 import { UmbPartialViewsRepository } from '../repository/partial-views.repository.js';
-import { TemplateResponseModel } from '../../../../external/backend-api/index.js';
+import { PartialViewDetails } from '../config.js';
 import { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
 import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
-export declare class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<UmbPartialViewsRepository, TemplateResponseModel> {
+export declare class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<UmbPartialViewsRepository, PartialViewDetails> {
     #private;
     getEntityId(): string | undefined;
     getEntityType(): string;
     save(): Promise<void>;
     destroy(): void;
-    data: import("rxjs").Observable<TemplateResponseModel | undefined>;
+    data: import("rxjs").Observable<import("../../../../external/backend-api/index.js").TextFileResponseModelBaseModel | undefined>;
     name: import("rxjs").Observable<string | undefined>;
-    content: import("rxjs").Observable<string | null | undefined>;
+    content: import("rxjs").Observable<string | undefined>;
+    path: import("rxjs").Observable<string | undefined>;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHostElement);
-    getData(): TemplateResponseModel | undefined;
+    getData(): import("../../../../external/backend-api/index.js").TextFileResponseModelBaseModel | undefined;
     setName(value: string): void;
     setContent(value: string): void;
     load(entityKey: string): Promise<void>;
-    create(parentKey: string | null): Promise<void>;
+    create(parentKey: string | null, name?: string): Promise<void>;
 }

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

@@ -1,26 +1,62 @@
 import { UmbPartialViewsRepository } from '../repository/partial-views.repository.js';
-import { createObservablePart, UmbDeepState } from '../../../../libs/observable-api/index.js';
+import { createObservablePart, UmbBooleanState, UmbDeepState } from '../../../../libs/observable-api/index.js';
 import { UmbWorkspaceContext } from '../../../core/workspace/index.js';
+import { loadCodeEditor } from '../../code-editor/index.js';
 export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext {
     getEntityId() {
-        throw new Error('Method not implemented.');
+        return this.getData()?.path;
     }
     getEntityType() {
         throw new Error('Method not implemented.');
     }
     save() {
-        throw new Error('Method not implemented.');
+        const partialView = this.getData();
+        if (!partialView)
+            return Promise.reject('Something went wrong, there is no data for partial view you want to save...');
+        if (this.getIsNew()) {
+            const createRequestBody = {
+                name: partialView.name,
+                content: partialView.content,
+                parentPath: partialView.path + '/',
+            };
+            this.repository.create(createRequestBody);
+            console.log('create');
+            return Promise.resolve();
+        }
+        if (!partialView.path)
+            return Promise.reject('There is no path');
+        const updateRequestBody = {
+            name: partialView.name,
+            existingPath: partialView.path,
+            content: partialView.content,
+        };
+        this.repository.save(partialView.path, updateRequestBody);
+        return Promise.resolve();
     }
     destroy() {
         throw new Error('Method not implemented.');
     }
     #data;
+    #isCodeEditorReady;
     constructor(host) {
         super(host, new UmbPartialViewsRepository(host));
         this.#data = new UmbDeepState(undefined);
         this.data = this.#data.asObservable();
         this.name = createObservablePart(this.#data, (data) => data?.name);
         this.content = createObservablePart(this.#data, (data) => data?.content);
+        this.path = createObservablePart(this.#data, (data) => data?.path);
+        this.#isCodeEditorReady = new UmbBooleanState(false);
+        this.isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+        this.#loadCodeEditor();
+    }
+    async #loadCodeEditor() {
+        try {
+            await loadCodeEditor();
+            this.#isCodeEditorReady.next(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
     }
     getData() {
         return this.#data.getValue();
@@ -38,11 +74,16 @@ export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext {
             this.#data.next(data);
         }
     }
-    async create(parentKey) {
-        const { data } = await this.repository.createScaffold(parentKey);
+    async create(parentKey, name = 'Empty') {
+        const { data } = await this.repository.createScaffold(parentKey, name);
+        const newPartial = {
+            ...data,
+            name: '',
+            path: parentKey ?? '',
+        };
         if (!data)
             return;
         this.setIsNew(true);
-        this.#data.next(data);
+        this.#data.next(newPartial);
     }
 }

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

@@ -1,6 +1,7 @@
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UmbRoute } from '../../../../shared/router/index.js';
 import './partial-views-workspace-edit.element.js';
+import '../../components/insert-menu/templating-insert-menu.element.js';
 export declare class UmbPartialViewsWorkspaceElement extends UmbLitElement {
     #private;
     _routes: UmbRoute[];

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

@@ -9,6 +9,7 @@ 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() {
@@ -17,11 +18,13 @@ export let UmbPartialViewsWorkspaceElement = class UmbPartialViewsWorkspaceEleme
         this.#element = document.createElement('umb-partial-views-workspace-edit');
         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,7 +33,8 @@ 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);
                 },
             },
         ];

package/dist-cms/shared/repository/data-source/data-source.interface.d.ts

@@ -1,6 +1,6 @@
 import type { DataSourceResponse } from '../index.js';
-export interface UmbDataSource<CreateRequestType, CreateResponseType, UpdateRequestType, ResponseType> {
-    createScaffold(parentId: string | null): Promise<DataSourceResponse<CreateRequestType>>;
+export interface UmbDataSource<CreateRequestType, CreateResponseType, UpdateRequestType, ResponseType, CreateScaffoldPresetType = Partial<CreateRequestType>> {
+    createScaffold(parentId: string | null, preset?: Partial<CreateRequestType> | CreateScaffoldPresetType): Promise<DataSourceResponse<CreateRequestType>>;
     get(unique: string): Promise<DataSourceResponse<ResponseType>>;
     insert(data: CreateRequestType): Promise<DataSourceResponse<CreateResponseType>>;
     update(unique: string, data: UpdateRequestType): Promise<DataSourceResponse<ResponseType>>;

package/dist-cms/shared/repository/detail-repository.interface.d.ts

@@ -1,7 +1,7 @@
 import type { DataSourceResponse, UmbDataSourceErrorResponse } from './data-source/index.js';
 import { Observable } from '../../external/rxjs/index.js';
-export interface UmbDetailRepository<CreateRequestType = any, CreateResponseType = any, UpdateRequestType = any, ResponseType = any> {
-    createScaffold(parentId: string | null, preset?: Partial<CreateRequestType>): Promise<DataSourceResponse<CreateRequestType>>;
+export interface UmbDetailRepository<CreateRequestType = any, CreateResponseType = any, UpdateRequestType = any, ResponseType = any, CreateScaffoldPresetType = Partial<CreateRequestType>> {
+    createScaffold(parentId: string | null, preset?: Partial<CreateRequestType> | CreateScaffoldPresetType): Promise<DataSourceResponse<CreateRequestType>>;
     requestById(id: string): Promise<DataSourceResponse<ResponseType | undefined>>;
     byId(id: string): Promise<Observable<ResponseType | undefined>>;
     create(data: CreateRequestType): Promise<DataSourceResponse<CreateResponseType>>;