workspace base and content refactor

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`<umb-workspace-content store-alias='umbDocumentStore' .entityKey=${this.entityKey} alias="Umb.Workspace.Document"></umb-workspace-content>`;
+		return html`<umb-workspace-content store-alias='umbDocumentStore' .entityKey=${this._workspaceContext.entityKey} alias="Umb.Workspace.Document"></umb-workspace-content>`;
 	}
 }
 

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;

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 = '';
+
+}

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 { customElement, property } from 'lit/decorators.js';
-import { map } from 'rxjs';
 
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
-import { createExtensionElement } from '@umbraco-cms/extensions-api';
+import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
-import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
+import { UmbWorkspaceContext } from './workspace.context';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
-import type { ManifestWorkspace } from '@umbraco-cms/models';
 
 @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 _workspaceContext:UmbWorkspaceContext = new UmbWorkspaceContext();
-	private _element?: HTMLElement;
 
-	private _currentWorkspaceAlias:string | null = null;
+	constructor() {
+		super();
 
-	connectedCallback(): void {
+		this.provideContext('umbWorkspaceContext', this._workspaceContext);
-		super.connectedCallback();
-		this._observeWorkspace();
 	}
 
-	/**
-	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<ManifestWorkspace | undefined>(
-			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) {
+	// TODO: implement fallback workspace
-		this._element = workspace ? (await createExtensionElement(workspace)) : undefined;
+	// Note for extension-slot, we must enable giving the extension-slot a fallback element.
-		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 = '<p>No Workspace found</p>';
-		this._element = fallbackWorkspace;
-	}
 
 	render() {
-		return html`${this._element}`;
+		return html`<umb-extension-slot type="workspace" .filter=${(workspace: any) => (workspace).meta.entityType === this._entityType}></umb-extension-slot>`;
 	}
 }