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

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,
     },
@@ -13,7 +14,7 @@ const treeItem = {
     alias: 'Umb.TreeItem.PartialViews',
     name: 'Partial Views Tree Item',
     conditions: {
-        entityTypes: [PARTIAL_VIEW_ENTITY_TYPE],
+        entityTypes: [PARTIAL_VIEW_ROOT_ENTITY_TYPE, PARTIAL_VIEW_ENTITY_TYPE],
     },
 };
 export const manifests = [tree, treeItem];

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,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 { UmbTemplateRepository } from '../repository/partial-views.repository.js';
-import { TemplateResponseModel } from '../../../../external/backend-api/index.js';
+import { UmbPartialViewsRepository } from '../repository/partial-views.repository.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<UmbTemplateRepository, 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,35 +1,71 @@
-import { UmbTemplateRepository } from '../repository/partial-views.repository.js';
-import { createObservablePart, UmbDeepState } from '../../../../libs/observable-api/index.js';
+import { UmbPartialViewsRepository } from '../repository/partial-views.repository.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 UmbTemplateRepository(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();
     }
     setName(value) {
-        this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', name: value });
+        this.#data.next({ ...this.#data.value, name: value });
     }
     setContent(value) {
-        this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', content: value });
+        this.#data.next({ ...this.#data.value, content: value });
     }
     async load(entityKey) {
         const { data } = await this.repository.requestByKey(entityKey);
@@ -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[];