diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts index 7fb04dcb3a..aa37da276e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts +++ b/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', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace-edit.element.ts similarity index 79% rename from src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace-edit.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace-edit.element.ts index f376caaa93..9f22cb074d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace-edit.element.ts +++ b/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(); 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; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.context.ts similarity index 80% rename from src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.context.ts rename to src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.context.ts index a464109ebe..dca98153e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.context.ts +++ b/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 { 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(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( + 'UmbWorkspaceContext', + (context): context is UmbPartialViewWorkspaceContext => context.getEntityType?.() === 'partial-view' +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.element.ts similarity index 66% rename from src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-view-workspace.element.ts index fd4e506f4b..68ffef8742 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/partial-views-workspace.element.ts +++ b/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; } }