diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/actions/save/workspace-action-document-type-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/actions/save/workspace-action-document-type-save.element.ts index 08e7a4f8e1..b82a05ee35 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/actions/save/workspace-action-document-type-save.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/actions/save/workspace-action-document-type-save.element.ts @@ -7,6 +7,7 @@ import type { UmbNotificationService } from '../../../../../core/services/notifi import { UmbDocumentTypeStore } from '../../../../../core/stores/document-type/document-type.store'; import { UmbDocumentTypeContext } from '../../document-type.context'; import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; +import { UmbWorkspaceDocumentTypeContext } from '../../workspace-document-type.context'; @customElement('umb-workspace-action-document-type-save') export class UmbWorkspaceActionDocumentTypeSaveElement extends UmbContextConsumerMixin(LitElement) { @@ -16,36 +17,26 @@ export class UmbWorkspaceActionDocumentTypeSaveElement extends UmbContextConsume @state() private _saveButtonState?: UUIButtonState; - private _documentTypeStore?: UmbDocumentTypeStore; - private _documentTypeContext?: UmbDocumentTypeContext; - private _notificationService?: UmbNotificationService; + private _workspaceContext?: UmbWorkspaceDocumentTypeContext; constructor() { super(); - this.consumeAllContexts( - ['umbDocumentTypeStore', 'umbDocumentTypeContext', 'umbNotificationService'], - (instances) => { - this._documentTypeStore = instances['umbDocumentTypeStore']; - this._documentTypeContext = instances['umbDocumentTypeContext']; - this._notificationService = instances['umbNotificationService']; + this.consumeContext('umbWorkspaceContext', (instance) => { + this._workspaceContext = instance; } ); } private async _handleSave() { - if (!this._documentTypeStore || !this._documentTypeContext) return; + if (!this._workspaceContext) return; - try { - this._saveButtonState = 'waiting'; - const dataType = this._documentTypeContext.getData(); - await this._documentTypeStore.save([dataType]); - const data: UmbNotificationDefaultData = { message: 'Document Type Saved' }; - this._notificationService?.peek('positive', { data }); + this._saveButtonState = 'waiting'; + await this._workspaceContext.save().then(() => { this._saveButtonState = 'success'; - } catch (error) { + }).catch(() => { this._saveButtonState = 'failed'; - } + }) } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/document-type.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/document-type.context.ts deleted file mode 100644 index e6f9412f15..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/document-type.context.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { BehaviorSubject, Observable } from 'rxjs'; -import type { DocumentTypeDetails } from '@umbraco-cms/models'; - -export class UmbDocumentTypeContext { - // TODO: figure out how fine grained we want to make our observables. - private _data = new BehaviorSubject({ - key: '', - name: '', - icon: '', - type: '', - hasChildren: false, - parentKey: '', - alias: '', - properties: [], - }); - public readonly data: Observable = this._data.asObservable(); - - constructor(documentType?: DocumentTypeDetails) { - if (!documentType) return; - this._data.next(documentType); - } - - // TODO: figure out how we want to update data - public update(data: Partial) { - this._data.next({ ...this._data.getValue(), ...data }); - } - - public getData() { - return this._data.getValue(); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.context.ts index aeb22ec8a9..c3c997d5e0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.context.ts @@ -12,7 +12,7 @@ const DefaultDocumentTypeData = ({ properties: [], }) as UmbDocumentTypeStoreItemType; -export class UmbWorkspaceDocumentContext extends UmbWorkspaceNodeContext { +export class UmbWorkspaceDocumentTypeContext extends UmbWorkspaceNodeContext { constructor(target:HTMLElement, entityType: string, entityKey: string) { super(target, DefaultDocumentTypeData, 'umbDocumentTypeStore', entityType, entityKey); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.element.ts index 9f3de45fc1..f3bb55e6b7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-type/workspace-document-type.element.ts @@ -2,15 +2,14 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { distinctUntilChanged } from 'rxjs'; -import { UmbDocumentTypeStore } from '../../../core/stores/document-type/document-type.store'; -import { UmbDocumentTypeContext } from './document-type.context'; import { UmbObserverMixin } from '@umbraco-cms/observable-api'; import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api'; -import type { ManifestTypes, DocumentTypeDetails } from '@umbraco-cms/models'; +import type { DocumentTypeDetails, ManifestTypes } from '@umbraco-cms/models'; import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry'; import '../../property-editor-uis/icon-picker/property-editor-ui-icon-picker.element'; +import { UmbWorkspaceDocumentTypeContext } from './workspace-document-type.context'; +import { distinctUntilChanged } from 'rxjs'; @customElement('umb-workspace-document-type') export class UmbWorkspaceDocumentTypeElement extends UmbContextProviderMixin( @@ -42,23 +41,64 @@ export class UmbWorkspaceDocumentTypeElement extends UmbContextProviderMixin( `, ]; + private _entityKey!: string; @property() - entityKey!: string; + public get entityKey(): string { + return this._entityKey; + } + public set entityKey(value: string) { + this._entityKey = value; + this._provideWorkspace(); + } + + private _entityType = ''; + @property() + public get entityType(): string { + return this._entityType; + } + public set entityType(value: string) { + // TODO: Make sure that a change of the entity type actually gives extension slot a hint to change/update. + const oldValue = this._entityType; + this._entityType = value; + this._provideWorkspace(); + this.requestUpdate('entityType', oldValue); + } + + private _workspaceContext?:UmbWorkspaceDocumentTypeContext; @state() - private _documentType?: DocumentTypeDetails; - - private _documentTypeContext?: UmbDocumentTypeContext; - private _documentTypeStore?: UmbDocumentTypeStore; + private _documentType?:DocumentTypeDetails; constructor() { super(); this._registerExtensions(); + } - this.consumeContext('umbDocumentTypeStore', (instance) => { - this._documentTypeStore = instance; - this._observeDocumentType(); + connectedCallback(): void { + super.connectedCallback(); + // TODO: avoid this connection, our own approach on Lit-Controller could be handling this case. + this._workspaceContext?.connectedCallback(); + } + disconnectedCallback(): void { + super.connectedCallback() + // TODO: avoid this connection, our own approach on Lit-Controller could be handling this case. + this._workspaceContext?.disconnectedCallback(); + } + + protected _provideWorkspace() { + if(this._entityType && this._entityKey) { + this._workspaceContext = new UmbWorkspaceDocumentTypeContext(this, this._entityType, this._entityKey); + this.provideContext('umbWorkspaceContext', this._workspaceContext); + this._observeWorkspace() + } + } + + private async _observeWorkspace() { + if (!this._workspaceContext) return; + + this.observe(this._workspaceContext.data.pipe(distinctUntilChanged()), (data) => { + this._documentType = data; }); } @@ -94,25 +134,6 @@ export class UmbWorkspaceDocumentTypeElement extends UmbContextProviderMixin( }); } - private _observeDocumentType() { - if (!this._documentTypeStore) return; - - // TODO: This should be done in a better way, but for now it works. - this.observe(this._documentTypeStore.getByKey(this.entityKey), (documentType) => { - if (!documentType) return; // TODO: Handle nicely if there is no document type - - if (!this._documentTypeContext) { - this._documentTypeContext = new UmbDocumentTypeContext(documentType); - this.provideContext('umbDocumentTypeContext', this._documentTypeContext); - } else { - this._documentTypeContext.update(documentType); - } - - this.observe(this._documentTypeContext.data.pipe(distinctUntilChanged()), (data) => { - this._documentType = data; - }); - }); - } // TODO. find a way where we don't have to do this for all workspaces. private _handleInput(event: UUIInputEvent) { @@ -120,7 +141,7 @@ export class UmbWorkspaceDocumentTypeElement extends UmbContextProviderMixin( const target = event.composedPath()[0] as UUIInputElement; if (typeof target?.value === 'string') { - this._documentTypeContext?.update({ name: target.value }); + this._workspaceContext?.update({ name: target.value }); } } } 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 6c13fe8bfb..d91a84c1d2 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 @@ -68,6 +68,7 @@ export class UmbWorkspaceContentElement extends UmbContextProviderMixin( @state() _content?: DocumentDetails | MediaDetails; + // TODO: remove notification service. private _notificationService?: UmbNotificationService; private _workspaceContext?: UmbWorkspaceDocumentContext; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-context/workspace-node.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-context/workspace-node.context.ts index 0c3716f735..c859962810 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-context/workspace-node.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/shared/workspace-context/workspace-node.context.ts @@ -20,8 +20,8 @@ export class UmbWorkspaceNodeContext { + public save(): Promise { + return this._store.save([this.getData()]).then(() => { const data: UmbNotificationDefaultData = { message: 'Document Saved' }; this._notificationService?.peek('positive', { data }); }).catch(() => {