@umbraco-cms/backoffice 14.0.0-b0704cee → 14.0.0-c26a40c4

package/dist-cms/packages/templating/partial-views/repository/partial-views.repository.js

@@ -1,37 +1,75 @@
+import { PARTIAL_VIEW_ROOT_ENTITY_TYPE } from '../config.js';
 import { UmbPartialViewDetailServerDataSource } from './sources/partial-views.detail.server.data.js';
 import { UmbPartialViewsTreeServerDataSource } from './sources/partial-views.tree.server.data.js';
 import { UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN } from './partial-views.tree.store.js';
+import { UmbPartialViewsFolderServerDataSource, } from './sources/partial-views.folder.server.data.js';
 import { UmbContextConsumerController } from '../../../../libs/context-api/index.js';
-export class UmbTemplateRepository {
+export class UmbPartialViewsRepository {
     #init;
     #host;
     #treeDataSource;
     #detailDataSource;
+    #folderDataSource;
     #treeStore;
     constructor(host) {
         this.#host = host;
         this.#treeDataSource = new UmbPartialViewsTreeServerDataSource(this.#host);
         this.#detailDataSource = new UmbPartialViewDetailServerDataSource(this.#host);
+        this.#folderDataSource = new UmbPartialViewsFolderServerDataSource(this.#host);
         this.#init = Promise.all([
             new UmbContextConsumerController(this.#host, UMB_PARTIAL_VIEW_TREE_STORE_CONTEXT_TOKEN, (instance) => {
                 this.#treeStore = instance;
             }),
         ]);
     }
-    requestTreeRoot() {
-        //throw new Error('Method not implemented.');
-        return { data: undefined, error: undefined };
+    //#region FOLDER
+    createFolderScaffold(parentId) {
+        const data = {
+            name: '',
+            parentId,
+        };
+        return Promise.resolve({ data, error: undefined });
     }
-    byId(id) {
-        throw new Error('Method not implemented.');
+    async createFolder(requestBody) {
+        await this.#init;
+        const req = {
+            parentPath: requestBody.parentId,
+            name: requestBody.name,
+        };
+        const promise = this.#folderDataSource.insert(req);
+        await promise;
+        this.requestTreeItemsOf(requestBody.parentId ? requestBody.parentId : null);
+        return promise;
     }
-    // TODO: This method to be done, or able to go away?
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    requestById(id) {
+    async requestFolder(unique) {
+        await this.#init;
+        return this.#folderDataSource.get(unique);
+    }
+    updateFolder(unique, folder) {
         throw new Error('Method not implemented.');
     }
-    // TREE:
+    async deleteFolder(path) {
+        await this.#init;
+        const { data } = await this.requestFolder(path);
+        const promise = this.#folderDataSource.delete(path);
+        await promise;
+        this.requestTreeItemsOf(data?.parentPath ? data?.parentPath : null);
+        return promise;
+    }
+    //#endregion
+    //#region TREE
+    async requestTreeRoot() {
+        await this.#init;
+        const data = {
+            id: null,
+            path: null,
+            type: PARTIAL_VIEW_ROOT_ENTITY_TYPE,
+            name: 'Partial Views',
+            icon: 'umb:folder',
+            hasChildren: true,
+        };
+        return { data };
+    }
     async requestRootTreeItems() {
         await this.#init;
         const { data, error } = await this.#treeDataSource.getRootItems();
@@ -41,10 +79,11 @@ export class UmbTemplateRepository {
         return { data, error, asObservable: () => this.#treeStore.rootItems };
     }
     async requestTreeItemsOf(path) {
-        if (!path)
-            throw new Error('Cannot request tree item with missing path');
+        if (path === null) {
+            return this.requestRootTreeItems();
+        }
         await this.#init;
-        const { data, error } = await this.#treeDataSource.getChildrenOf({ path });
+        const { data, error } = await this.#treeDataSource.getChildrenOf({ path, skip: 0, take: 100 });
         if (data) {
             this.#treeStore.appendItems(data.items);
         }
@@ -75,7 +114,8 @@ export class UmbTemplateRepository {
         await this.#init;
         return this.#treeStore.items(paths);
     }
-    // DETAILS
+    //#endregion
+    //#region DETAILS
     async requestByKey(path) {
         if (!path)
             throw new Error('Path is missing');
@@ -83,17 +123,34 @@ export class UmbTemplateRepository {
         const { data, error } = await this.#detailDataSource.get(path);
         return { data, error };
     }
-    // DETAILS:
-    async createScaffold(parentKey) {
-        return Promise.reject(new Error('Not implemented'));
+    requestById(id) {
+        throw new Error('Method not implemented.');
+    }
+    byId(id) {
+        throw new Error('Method not implemented.');
+    }
+    createScaffold(parentId, preset) {
+        return this.#detailDataSource.createScaffold(parentId, preset);
+    }
+    async create(data) {
+        const promise = this.#detailDataSource.insert(data);
+        await promise;
+        this.requestTreeItemsOf(data.parentPath ? data.parentPath : null);
+        return promise;
+    }
+    save(id, requestBody) {
+        return this.#detailDataSource.update(id, requestBody);
     }
-    async create(patrial) {
-        return Promise.reject(new Error('Not implemented'));
+    async delete(id) {
+        const promise = this.#detailDataSource.delete(id);
+        const parentPath = id.substring(0, id.lastIndexOf('/'));
+        this.requestTreeItemsOf(parentPath ? parentPath : null);
+        return promise;
     }
-    async save(patrial) {
-        return Promise.reject(new Error('Not implemented'));
+    getSnippets({ skip = 0, take = 100 }) {
+        return this.#detailDataSource.getSnippets({ skip, take });
     }
-    async delete(key) {
-        return Promise.reject(new Error('Not implemented'));
+    requestItems(keys) {
+        return this.#detailDataSource.getItems(keys);
     }
 }

package/dist-cms/packages/templating/partial-views/repository/sources/partial-views.detail.server.data.d.ts

@@ -1,26 +1,61 @@
 import { PartialViewDetails } from '../../config.js';
+import { CreatePartialViewRequestModel, PagedSnippetItemResponseModel, PartialViewItemResponseModel, PartialViewResponseModel, UpdatePartialViewRequestModel } from '../../../../../external/backend-api/index.js';
 import type { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
 import { DataSourceResponse, UmbDataSource } from '../../../../../shared/repository/index.js';
-export declare class UmbPartialViewDetailServerDataSource implements UmbDataSource<PartialViewDetails, PartialViewDetails, PartialViewDetails, PartialViewDetails> {
+export declare class UmbPartialViewDetailServerDataSource implements UmbDataSource<CreatePartialViewRequestModel, string, UpdatePartialViewRequestModel, PartialViewResponseModel, string> {
     #private;
+    constructor(host: UmbControllerHostElement);
     /**
-     * Creates an instance of UmbPartialViewDetailServerDataSource.
-     * @param {UmbControllerHostInterface} host
+     * Creates a new partial view scaffold
+     *
+     * @param {(string | null)} [parentId=null] You can leave this empty
+     * @param {string} preset Name of the snippet to use as a preset
+     * @return {*}  {Promise<DataSourceResponse<PartialViewDetails>>}
      * @memberof UmbPartialViewDetailServerDataSource
      */
-    constructor(host: UmbControllerHostElement);
-    createScaffold(parentKey: string | null): Promise<DataSourceResponse<PartialViewDetails>>;
+    createScaffold(parentId: string | null | undefined, preset: string): Promise<DataSourceResponse<PartialViewDetails>>;
+    /**
+     * Get possible snippets for partial views
+     *
+     * @param {*} { skip = 0, take = 100 }
+     * @return {*}  {Promise<DataSourceResponse<PagedSnippetItemResponseModel>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    getSnippets({ skip, take }: {
+        skip?: number | undefined;
+        take?: number | undefined;
+    }): Promise<DataSourceResponse<PagedSnippetItemResponseModel>>;
     /**
-     * Fetches a Stylesheet with the given path from the server
+     * Fetches a partial view with the given path from the server
      * @param {string} path
      * @return {*}
      * @memberof UmbStylesheetServerDataSource
      */
-    get(path: string): Promise<{
-        data: undefined;
-        error: undefined;
-    }>;
-    insert(data: any): Promise<DataSourceResponse<PartialViewDetails>>;
-    update(unique: string, data: PartialViewDetails): Promise<DataSourceResponse<PartialViewDetails>>;
-    delete(unique: string): Promise<DataSourceResponse>;
+    get(path: string): Promise<DataSourceResponse<import("../../../../../external/backend-api/index.js").TextFileResponseModelBaseModel>>;
+    /**
+     * Creates a new partial view
+     *
+     * @param {CreatePartialViewRequestModel} requestBody
+     * @return {*}  {Promise<DataSourceResponse<string>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    insert(requestBody: CreatePartialViewRequestModel): Promise<DataSourceResponse<string>>;
+    /**
+     * Updates a partial view
+     *
+     * @param {string} [unique='']
+     * @param {UpdatePartialViewRequestModel} requestBody
+     * @return {*}  {Promise<DataSourceResponse<any>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    update(unique: string | undefined, requestBody: UpdatePartialViewRequestModel): Promise<DataSourceResponse<any>>;
+    /**
+     * Deletes a partial view
+     *
+     * @param {string} path
+     * @return {*}  {Promise<DataSourceResponse>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    delete(path: string): Promise<DataSourceResponse>;
+    getItems(keys: Array<string>): Promise<DataSourceResponse<PartialViewItemResponseModel[]>>;
 }

package/dist-cms/packages/templating/partial-views/repository/sources/partial-views.detail.server.data.js

@@ -1,36 +1,75 @@
-//TODO Pass proper models
+import { PartialViewResource, } from '../../../../../external/backend-api/index.js';
+import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
 export class UmbPartialViewDetailServerDataSource {
     #host;
+    constructor(host) {
+        this.#host = host;
+    }
     /**
-     * Creates an instance of UmbPartialViewDetailServerDataSource.
-     * @param {UmbControllerHostInterface} host
+     * Creates a new partial view scaffold
+     *
+     * @param {(string | null)} [parentId=null] You can leave this empty
+     * @param {string} preset Name of the snippet to use as a preset
+     * @return {*}  {Promise<DataSourceResponse<PartialViewDetails>>}
      * @memberof UmbPartialViewDetailServerDataSource
      */
-    constructor(host) {
-        this.#host = host;
+    createScaffold(parentId = null, preset) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.getPartialViewSnippetByName({ name: preset }));
     }
-    createScaffold(parentKey) {
-        throw new Error('Method not implemented.');
+    /**
+     * Get possible snippets for partial views
+     *
+     * @param {*} { skip = 0, take = 100 }
+     * @return {*}  {Promise<DataSourceResponse<PagedSnippetItemResponseModel>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    getSnippets({ skip = 0, take = 100 }) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.getPartialViewSnippet({ skip, take }));
     }
     /**
-     * Fetches a Stylesheet with the given path from the server
+     * Fetches a partial view with the given path from the server
      * @param {string} path
      * @return {*}
      * @memberof UmbStylesheetServerDataSource
      */
-    async get(path) {
+    get(path) {
         if (!path)
             throw new Error('Path is missing');
-        console.log('GET PATRIAL WITH PATH', path);
-        return { data: undefined, error: undefined };
+        return tryExecuteAndNotify(this.#host, PartialViewResource.getPartialView({ path }));
     }
-    insert(data) {
-        throw new Error('Method not implemented.');
+    /**
+     * Creates a new partial view
+     *
+     * @param {CreatePartialViewRequestModel} requestBody
+     * @return {*}  {Promise<DataSourceResponse<string>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    insert(requestBody) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.postPartialView({ requestBody }));
+    }
+    //TODO the parameters here are bit ugly, since unique is already in the request body parameter, but it has to be done to marry the UmbDataSource interface an backend API together... maybe come up with some nicer solution
+    /**
+     * Updates a partial view
+     *
+     * @param {string} [unique='']
+     * @param {UpdatePartialViewRequestModel} requestBody
+     * @return {*}  {Promise<DataSourceResponse<any>>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    update(unique = '', requestBody) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.putPartialView({ requestBody }));
     }
-    update(unique, data) {
-        throw new Error('Method not implemented.');
+    /**
+     * Deletes a partial view
+     *
+     * @param {string} path
+     * @return {*}  {Promise<DataSourceResponse>}
+     * @memberof UmbPartialViewDetailServerDataSource
+     */
+    delete(path) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.deletePartialView({ path }));
     }
-    delete(unique) {
-        throw new Error('Method not implemented.');
+    getItems(keys) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.getPartialViewItem({ id: keys }));
     }
 }

package/dist-cms/packages/templating/partial-views/repository/sources/partial-views.folder.server.data.d.ts

@@ -0,0 +1,17 @@
+import { CreateFolderRequestModel, FolderModelBaseModel, FolderReponseModel } from '../../../../../external/backend-api/index.js';
+import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
+import { DataSourceResponse, UmbFolderDataSource } from '../../../../../shared/repository/index.js';
+export type PartialViewGetFolderResponse = {
+    path: string;
+    parentPath: string;
+    name: string;
+};
+export declare class UmbPartialViewsFolderServerDataSource implements UmbFolderDataSource {
+    #private;
+    constructor(host: UmbControllerHostElement);
+    createScaffold(parentId: string | null): Promise<DataSourceResponse<FolderReponseModel>>;
+    get(unique: string): Promise<DataSourceResponse<PartialViewGetFolderResponse>>;
+    insert(requestBody: CreateFolderRequestModel): Promise<DataSourceResponse<string>>;
+    update(unique: string, data: CreateFolderRequestModel): Promise<DataSourceResponse<FolderModelBaseModel>>;
+    delete(path: string): Promise<DataSourceResponse<unknown>>;
+}

package/dist-cms/packages/templating/partial-views/repository/sources/partial-views.folder.server.data.js

@@ -0,0 +1,23 @@
+import { PartialViewResource, } from '../../../../../external/backend-api/index.js';
+import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
+export class UmbPartialViewsFolderServerDataSource {
+    #host;
+    constructor(host) {
+        this.#host = host;
+    }
+    createScaffold(parentId) {
+        throw new Error('Method not implemented.');
+    }
+    get(unique) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.getPartialViewFolder({ path: unique }));
+    }
+    insert(requestBody) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.postPartialViewFolder({ requestBody }));
+    }
+    update(unique, data) {
+        throw new Error('Method not implemented.');
+    }
+    delete(path) {
+        return tryExecuteAndNotify(this.#host, PartialViewResource.deletePartialViewFolder({ path }));
+    }
+}

package/dist-cms/packages/templating/partial-views/repository/sources/partial-views.tree.server.data.d.ts

@@ -1,5 +1,5 @@
 import { PartialViewsTreeDataSource } from './index.js';
-import { ProblemDetailsModel } from '../../../../../external/backend-api/index.js';
+import { ProblemDetails } from '../../../../../external/backend-api/index.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
 export declare class UmbPartialViewsTreeServerDataSource implements PartialViewsTreeDataSource {
     #private;
@@ -9,6 +9,6 @@ export declare class UmbPartialViewsTreeServerDataSource implements PartialViews
         path?: string | undefined;
         skip?: number | undefined;
         take?: number | undefined;
-    }): Promise<ProblemDetailsModel | import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").PagedFileSystemTreeItemPresentationModel>>;
-    getItem(id: Array<string>): Promise<ProblemDetailsModel | import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").FileItemResponseModelBaseModel[]>>;
+    }): Promise<ProblemDetails | import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").PagedFileSystemTreeItemPresentationModel>>;
+    getItem(id: Array<string>): Promise<ProblemDetails | import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").FileItemResponseModelBaseModel[]>>;
 }

package/dist-cms/packages/templating/partial-views/tree/manifests.js

@@ -1,8 +1,9 @@
-import { PARTIAL_VIEW_ENTITY_TYPE, PARTIAL_VIEW_REPOSITORY_ALIAS, PARTIAL_VIEW_TREE_ALIAS } from '../config.js';
+import { PARTIAL_VIEW_ENTITY_TYPE, PARTIAL_VIEW_REPOSITORY_ALIAS, PARTIAL_VIEW_ROOT_ENTITY_TYPE, PARTIAL_VIEW_TREE_ALIAS, } from '../config.js';
 const tree = {
     type: 'tree',
     alias: PARTIAL_VIEW_TREE_ALIAS,
     name: 'Partial Views Tree',
+    weight: 30,
     meta: {
         repositoryAlias: PARTIAL_VIEW_REPOSITORY_ALIAS,
     },
@@ -12,8 +13,8 @@ const treeItem = {
     kind: 'fileSystem',
     alias: 'Umb.TreeItem.PartialViews',
     name: 'Partial Views Tree Item',
-    conditions: {
-        entityTypes: [PARTIAL_VIEW_ENTITY_TYPE],
+    meta: {
+        entityTypes: [PARTIAL_VIEW_ROOT_ENTITY_TYPE, PARTIAL_VIEW_ENTITY_TYPE],
     },
 };
 export const manifests = [tree, treeItem];

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

@@ -20,9 +20,12 @@ const workspaceActions = [
             label: 'Save',
             api: UmbSaveWorkspaceAction,
         },
-        conditions: {
-            workspaces: ['Umb.Workspace.PartialView'],
-        },
+        conditions: [
+            {
+                alias: 'Umb.Condition.WorkspaceAlias',
+                match: workspace.alias,
+            },
+        ],
     },
 ];
 export const manifests = [workspace, ...workspaceActions];

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

@@ -1,9 +1,14 @@
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
     #private;
-    private _name?;
+    private get _name();
+    private set _name(value);
     private _content?;
+    private _path?;
+    private _ready?;
     private _codeEditor?;
+    private _modalContext?;
+    private inputQuery$;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

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

@@ -4,18 +4,38 @@ 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';
+import { UMB_WORKSPACE_CONTEXT } from '../../../core/workspace/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(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#partialViewsWorkspaceContext = workspaceContext;
             this.observe(this.#partialViewsWorkspaceContext.name, (name) => {
                 this._name = name;
@@ -23,44 +43,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 +120,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);