partial views

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts

@@ -5,7 +5,7 @@ const workspace: ManifestWorkspace = {
 	type: 'workspace',
 	alias: 'Umb.Workspace.PartialView',
 	name: 'Partial View Workspace',
-	loader: () => import('./partial-views-workspace.element.js'),
+	loader: () => import('./partial-view-workspace.element.js'),
 	meta: {
 		entityType: 'partial-view',
 	},

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace-edit.element.ts

@@ -1,17 +1,16 @@
 import { UmbTemplatingInsertMenuElement } from '../../components/index.js';
 import { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../../templates/modals/modal-tokens.js';
 import { getQuerySnippet } from '../../utils.js';
-import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context.js';
+import { UMB_PARTIAL_VIEW_WORKSPACE_CONTEXT } from './partial-view-workspace.context.js';
 import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { UUITextStyles, UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
 import { Subject, debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
-import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 
-@customElement('umb-partial-views-workspace-edit')
-export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
+@customElement('umb-partial-view-workspace-edit')
+export class UmbPartialViewWorkspaceEditElement extends UmbLitElement {
 	#name: string | undefined = '';
 	@state()
 	private get _name() {
@@ -35,11 +34,9 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
 	@query('umb-code-editor')
 	private _codeEditor?: UmbCodeEditorElement;
 
-	#partialViewsWorkspaceContext?: UmbPartialViewsWorkspaceContext;
+	#partialViewWorkspaceContext?: typeof UMB_PARTIAL_VIEW_WORKSPACE_CONTEXT.TYPE;
 	private _modalContext?: UmbModalManagerContext;
 
-	#isNew = false;
-
 	private inputQuery$ = new Subject<string>();
 
 	constructor() {
@@ -49,31 +46,30 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
 			this._modalContext = instance;
 		});
 
-		//tODO: should this be called something else here?
-		this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#partialViewsWorkspaceContext = workspaceContext as UmbPartialViewsWorkspaceContext;
-			this.observe(this.#partialViewsWorkspaceContext.name, (name) => {
+		this.consumeContext(UMB_PARTIAL_VIEW_WORKSPACE_CONTEXT, (workspaceContext) => {
+			this.#partialViewWorkspaceContext = workspaceContext;
+			this.observe(this.#partialViewWorkspaceContext.name, (name) => {
 				this._name = name;
 			});
 
-			this.observe(this.#partialViewsWorkspaceContext.content, (content) => {
+			this.observe(this.#partialViewWorkspaceContext.content, (content) => {
 				this._content = content;
 			});
 
-			this.observe(this.#partialViewsWorkspaceContext.path, (path) => {
+			this.observe(this.#partialViewWorkspaceContext.path, (path) => {
 				this._path = path;
 			});
 
-			this.observe(this.#partialViewsWorkspaceContext.isNew, (isNew) => {
+			this.observe(this.#partialViewWorkspaceContext.isNew, (isNew) => {
 				this.#isNew = !!isNew;
 			});
 
-			this.observe(this.#partialViewsWorkspaceContext.isCodeEditorReady, (isReady) => {
+			this.observe(this.#partialViewWorkspaceContext.isCodeEditorReady, (isReady) => {
 				this._ready = isReady;
 			});
 
 			this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue: string) => {
-				this.#partialViewsWorkspaceContext?.setName(`${nameInputValue}.cshtml`);
+				this.#partialViewWorkspaceContext?.setName(`${nameInputValue}.cshtml`);
 			});
 		});
 	}
@@ -87,7 +83,7 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
 	#onCodeEditorInput(event: Event) {
 		const target = event.target as UmbCodeEditorElement;
 		const value = target.code as string;
-		this.#partialViewsWorkspaceContext?.setContent(value);
+		this.#partialViewWorkspaceContext?.setContent(value);
 	}
 
 	#insertSnippet(event: Event) {
@@ -206,10 +202,10 @@ export class UmbPartialViewsWorkspaceEditElement extends UmbLitElement {
 	];
 }
 
-export default UmbPartialViewsWorkspaceEditElement;
+export default UmbPartialViewWorkspaceEditElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-partial-views-workspace-edit': UmbPartialViewsWorkspaceEditElement;
+		'umb-partial-view-workspace-edit': UmbPartialViewWorkspaceEditElement;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.context.ts

@@ -2,20 +2,20 @@ import { UmbPartialViewsRepository } from '../repository/partial-views.repositor
 import { PartialViewDetails } from '../config.js';
 import { createObservablePart, UmbBooleanState, UmbDeepState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
+import { UmbEntityWorkspaceContextInterface, UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
 import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { UpdatePartialViewRequestModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
-// TODO: I think this should be named PartialViewWorkspace... not with an 's'
-export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<
+export class UmbPartialViewWorkspaceContext extends UmbWorkspaceContext<
 	UmbPartialViewsRepository,
 	PartialViewDetails
-> {
+> implements UmbEntityWorkspaceContextInterface {
 	getEntityId(): string | undefined {
 		return this.getData()?.path;
 	}
 	getEntityType(): string {
-		throw new Error('Method not implemented.');
+		return 'partial-view';
 	}
 	save(): Promise<void> {
 		const partialView = this.getData();
@@ -42,9 +42,7 @@ export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<
 		this.repository.save(partialView.path, updateRequestBody);
 		return Promise.resolve();
 	}
-	destroy(): void {
-		throw new Error('Method not implemented.');
-	}
+
 	#data = new UmbDeepState<PartialViewDetails | undefined>(undefined);
 	data = this.#data.asObservable();
 	name = createObservablePart(this.#data, (data) => data?.name);
@@ -55,7 +53,7 @@ export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<
 	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
 
 	constructor(host: UmbControllerHostElement) {
-		super(host, 'Umb.Workspace.PartialViews', new UmbPartialViewsRepository(host));
+		super(host, 'Umb.Workspace.PartialView', new UmbPartialViewsRepository(host));
 		this.#loadCodeEditor();
 	}
 
@@ -100,3 +98,10 @@ export class UmbPartialViewsWorkspaceContext extends UmbWorkspaceContext<
 		this.#data.next(newPartial);
 	}
 }
+
+
+
+export const UMB_PARTIAL_VIEW_WORKSPACE_CONTEXT = new UmbContextToken<UmbEntityWorkspaceContextInterface, UmbPartialViewWorkspaceContext>(
+	'UmbWorkspaceContext',
+	(context): context is UmbPartialViewWorkspaceContext => context.getEntityType?.() === 'partial-view'
+);

src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.element.ts

@@ -1,19 +1,19 @@
-import { UmbPartialViewsWorkspaceContext } from './partial-views-workspace.context.js';
+import { UmbPartialViewWorkspaceContext } from './partial-view-workspace.context.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
 
-import './partial-views-workspace-edit.element.js';
+import './partial-view-workspace-edit.element.js';
 import '../../components/insert-menu/templating-insert-menu.element.js';
 
 import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
 
-@customElement('umb-partial-views-workspace')
-export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
-	#partialViewsWorkspaceContext = new UmbPartialViewsWorkspaceContext(this);
+@customElement('umb-partial-view-workspace')
+export class UmbPartialViewWorkspaceElement extends UmbLitElement {
+	#partialViewWorkspaceContext = new UmbPartialViewWorkspaceContext(this);
 
-	#element = document.createElement('umb-partial-views-workspace-edit');
+	#element = document.createElement('umb-partial-view-workspace-edit');
 
 	@state()
 	_routes: UmbRoute[] = [
@@ -24,11 +24,11 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
 				const parentKey = info.match.params.parentKey;
 				const decodePath = decodeURIComponent(parentKey);
 				const snippetName = info.match.params.snippetName;
-				this.#partialViewsWorkspaceContext.create(decodePath === 'null' ? null : parentKey, snippetName);
+				this.#partialViewWorkspaceContext.create(decodePath === 'null' ? null : parentKey, snippetName);
 
 				new UmbWorkspaceIsNewRedirectController(
 					this,
-					this.#partialViewsWorkspaceContext,
+					this.#partialViewWorkspaceContext,
 					this.shadowRoot!.querySelector('umb-router-slot')!
 				);
 			},
@@ -39,7 +39,7 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
 			setup: (component: PageComponent, info: IRoutingInfo) => {
 				const key = info.match.params.key;
 				const decodePath = decodeURIComponent(key).replace('-cshtml', '.cshtml');
-				this.#partialViewsWorkspaceContext.load(decodePath);
+				this.#partialViewWorkspaceContext.load(decodePath);
 			},
 		},
 	];
@@ -51,10 +51,10 @@ export class UmbPartialViewsWorkspaceElement extends UmbLitElement {
 	static styles = [UUITextStyles, css``];
 }
 
-export default UmbPartialViewsWorkspaceElement;
+export default UmbPartialViewWorkspaceElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-partial-views-workspace': UmbPartialViewsWorkspaceElement;
+		'umb-partial-view-workspace': UmbPartialViewWorkspaceElement;
 	}
 }