diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document/workspace-document.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document/workspace-document.element.ts index 920253e4b4..9c93743dc7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document/workspace-document.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document/workspace-document.element.ts @@ -1,10 +1,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import type { UmbWorkspaceContext } from '../shared/workspace/workspace.context'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import type { ManifestWorkspaceView } from '@umbraco-cms/models'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; - import '../shared/workspace-content/workspace-content.element'; @customElement('umb-workspace-document') @@ -23,9 +23,14 @@ export class UmbWorkspaceDocumentElement extends UmbContextConsumerMixin(UmbCont @property() entityKey!: string; + private _workspaceContext!:UmbWorkspaceContext; + constructor() { super(); + // TODO: Implement RXJS for reactivity if one of two props changes. + this.consumeContext('umbWorkspaceContext', (context) => this._workspaceContext = context) + // TODO: consider if registering extensions should happen initially or else where, to enable unregister of extensions. this._registerWorkspaceViews(); } @@ -67,7 +72,7 @@ export class UmbWorkspaceDocumentElement extends UmbContextConsumerMixin(UmbCont } render() { - return html``; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/workspace-content.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/workspace-content.element.ts index d8b881d25a..bb51e8ffce 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/workspace-content.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/workspace-content.element.ts @@ -65,8 +65,17 @@ export class UmbWorkspaceContentElement extends UmbContextProviderMixin( `, ]; + private _entityKey!: string; @property() - entityKey!: string; + public get entityKey() : string { + return this._entityKey; + } + public set entityKey(value:string) { + if(this._entityKey !== value) { + this._entityKey = value; + this._observeContent(); + } + } @property() alias!: string; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.context.ts new file mode 100644 index 0000000000..0f909ad58d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.context.ts @@ -0,0 +1,8 @@ +export class UmbWorkspaceContext { + + // TODO: Should this use RxJS to be reactive? A store, to hold the props below? + + public entityKey = ''; + public entityType = ''; + +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.element.ts index 733aeaead7..083f42b913 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.element.ts @@ -1,16 +1,13 @@ import { css, html, LitElement } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property, state } from 'lit/decorators.js'; -import { map } from 'rxjs'; +import { customElement, property } from 'lit/decorators.js'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; -import { createExtensionElement } from '@umbraco-cms/extensions-api'; -import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; -import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; -import type { ManifestWorkspace } from '@umbraco-cms/models'; +import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; +import { UmbWorkspaceContext } from './workspace.context'; @customElement('umb-workspace') -export class UmbWorkspaceElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) { +export class UmbWorkspaceElement extends UmbContextProviderMixin(UmbContextConsumerMixin(UmbObserverMixin(LitElement))) { static styles = [ UUITextStyles, css` @@ -22,8 +19,15 @@ export class UmbWorkspaceElement extends UmbContextConsumerMixin(UmbObserverMixi `, ]; + private _entityKey!: string; @property() - public entityKey!: string; + public get entityKey(): string { + return this._entityKey; + } + public set entityKey(value: string) { + this._entityKey = value; + this._workspaceContext.entityKey = value; + } private _entityType = ''; @property() @@ -32,55 +36,24 @@ export class UmbWorkspaceElement extends UmbContextConsumerMixin(UmbObserverMixi } public set entityType(value: string) { this._entityType = value; - this._observeWorkspace(); + this._workspaceContext.entityType = value; } - @state() - private _element?: HTMLElement; + private _workspaceContext:UmbWorkspaceContext = new UmbWorkspaceContext(); - private _currentWorkspaceAlias:string | null = null; + constructor() { + super(); - connectedCallback(): void { - super.connectedCallback(); - this._observeWorkspace(); + this.provideContext('umbWorkspaceContext', this._workspaceContext); } - /** - TODO: use future system of extension-slot, extension slots must use a condition-system which will be used to determine the filtering happening below. - This will first be possible to make when ContextApi is available, as conditions will use this system. - */ - private _observeWorkspace() { - this.observe( - umbExtensionsRegistry - .extensionsOfType('workspace') - .pipe(map((workspaces) => workspaces.find((workspace) => workspace.meta.entityType === this.entityType))), - (workspace) => { - // don't rerender workspace if it's the same - const newWorkspaceAlias = workspace?.alias || ''; - if (this._currentWorkspaceAlias === newWorkspaceAlias) return; - this._currentWorkspaceAlias = newWorkspaceAlias; - this._createElement(workspace); - } - ); - } - private async _createElement(workspace?: ManifestWorkspace) { - this._element = workspace ? (await createExtensionElement(workspace)) : undefined; - if (this._element) { - // TODO: use contextApi for this. - (this._element as any).entityKey = this.entityKey; - return; - } - - // TODO: implement fallback workspace - // Note for extension-slot, we must enable giving the extension-slot a fallback element. - const fallbackWorkspace = document.createElement('div'); - fallbackWorkspace.innerHTML = '

No Workspace found

'; - this._element = fallbackWorkspace; - } + // TODO: implement fallback workspace + // Note for extension-slot, we must enable giving the extension-slot a fallback element. + render() { - return html`${this._element}`; + return html` (workspace).meta.entityType === this._entityType}>`; } }