yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workspace base and content refactor

Browse Source
This commit is contained in:
Niels Lyngsø
2022-12-16 14:53:35 +01:00
parent 7d78aeedb1
commit 3511e46dcc
4 changed files with 46 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document/workspace-document.element.ts
View File

@@ -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>`;
}
}

11
src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-content/workspace-content.element.ts
View File

@@ -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;

8
src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.context.ts Normal file
View File

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

69
src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace/workspace.element.ts
View File

@@ -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<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) {
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 = '<p>No Workspace found</p>';
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`<umb-extension-slot type="workspace" .filter=${(workspace: any) => (workspace).meta.entityType === this._entityType}></umb-extension-slot>`;
}
}