diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts index 37e20d25ff..4bf94b6d3c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts @@ -1,19 +1,9 @@ -import { UmbWorkspaceContentContext } from "../workspace/workspace-content/workspace-content.context"; -import type { DataTypeDetails } from "@umbraco-cms/models"; -import { UmbControllerHostInterface } from "src/core/controller/controller-host.mixin"; -import { createObservablePart, UniqueBehaviorSubject } from "src/core/observable-api/unique-behavior-subject"; -import { UmbContextProviderController } from "src/core/context-api/provide/context-provider.controller"; -import { UmbContextConsumerController } from "src/core/context-api/consume/context-consumer.controller"; - - - - - - - - - - +import { UmbWorkspaceContentContext } from '../workspace/workspace-content/workspace-content.context'; +import type { DataTypeDetails } from '@umbraco-cms/models'; +import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin'; +import { createObservablePart, UniqueBehaviorSubject } from 'src/core/observable-api/unique-behavior-subject'; +import { UmbContextProviderController } from 'src/core/context-api/provide/context-provider.controller'; +import { UmbContextConsumerController } from 'src/core/context-api/consume/context-consumer.controller'; // If we get this from the server then we can consider using TypeScripts Partial<> around the model from the Management-API. export type WorkspacePropertyData = { @@ -21,62 +11,56 @@ export type WorkspacePropertyData = { label?: string; description?: string; value?: ValueType | null; - config?: DataTypeDetails['data'];// This could potentially then come from hardcoded JS object and not the DataType store. + config?: DataTypeDetails['data']; // This could potentially then come from hardcoded JS object and not the DataType store. }; export class UmbWorkspacePropertyContext { - - private _providerController: UmbContextProviderController; private _data = new UniqueBehaviorSubject>({}); - public readonly alias = createObservablePart(this._data, data => data.alias); - public readonly label = createObservablePart(this._data, data => data.label); - public readonly description = createObservablePart(this._data, data => data.description); - public readonly value = createObservablePart(this._data, data => data.value); - public readonly config = createObservablePart(this._data, data => data.config); + public readonly alias = createObservablePart(this._data, (data) => data.alias); + public readonly label = createObservablePart(this._data, (data) => data.label); + public readonly description = createObservablePart(this._data, (data) => data.description); + public readonly value = createObservablePart(this._data, (data) => data.value); + public readonly config = createObservablePart(this._data, (data) => data.config); private _workspaceContext?: UmbWorkspaceContentContext; - - constructor(host:UmbControllerHostInterface) { - - new UmbContextConsumerController(host, 'umbWorkspaceContext', (workspaceContext) => { + constructor(host: UmbControllerHostInterface) { + // TODO: Figure out how to get the magic string in a better way. + new UmbContextConsumerController(host, 'umbWorkspaceContext', (workspaceContext) => { this._workspaceContext = workspaceContext; }); this._providerController = new UmbContextProviderController(host, 'umbPropertyContext', this); - - } public setAlias(alias: WorkspacePropertyData['alias']) { - this._data.update({alias: alias}); + this._data.update({ alias: alias }); } public setLabel(label: WorkspacePropertyData['label']) { - this._data.update({label: label}); + this._data.update({ label: label }); } public setDescription(description: WorkspacePropertyData['description']) { - this._data.update({description: description}); + this._data.update({ description: description }); } public setValue(value: WorkspacePropertyData['value']) { - // Note: Do not try to compare new / old value, as it can of any type. We trust the UniqueBehaviorSubject in doing such. - this._data.update({value: value}); + this._data.update({ value: value }); const alias = this._data.getValue().alias; - if(alias) { + if (alias) { this._workspaceContext?.setPropertyValue(alias, value); } } public setConfig(config: WorkspacePropertyData['config']) { - this._data.update({config: config}); + this._data.update({ config: config }); } public resetValue() { - this.setValue(null);// TODO: Consider if this can be configured/provided from Property Editor or DataType Configuration or even locally specified in DocumentType. + this.setValue(null); // TODO: Consider if this can be configured/provided from Property Editor or DataType Configuration or even locally specified in DocumentType. } // TODO: how can we make sure to call this. @@ -84,6 +68,4 @@ export class UmbWorkspacePropertyContext { this._data.unsubscribe(); this._providerController.destroy(); // This would also be handled by the controller host, but if someone wanted to replace/remove this context without the host being destroyed. Then we have clean up out selfs here. } - } - diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts index 2e22762721..733eb1d661 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts @@ -2,13 +2,12 @@ import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import type { UUIButtonState } from '@umbraco-ui/uui'; -import type { UmbWorkspaceContentContext } from '../../workspace-content/workspace-content.context'; +import { UmbWorkspaceContentContext } from '../../workspace-content/workspace-content.context'; import { UmbLitElement } from '@umbraco-cms/element'; import type { ManifestWorkspaceAction } from '@umbraco-cms/models'; @customElement('umb-workspace-action-node-save') export class UmbWorkspaceActionNodeSaveElement extends UmbLitElement { - static styles = [UUITextStyles, css``]; @state() @@ -21,21 +20,24 @@ export class UmbWorkspaceActionNodeSaveElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (instance) => { - this._workspaceContext = instance; - } - ); + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext('umbWorkspaceContext', (instance) => { + this._workspaceContext = instance; + }); } private async _onSave() { if (!this._workspaceContext) return; this._saveButtonState = 'waiting'; - await this._workspaceContext.save().then(() => { - this._saveButtonState = 'success'; - }).catch(() => { - this._saveButtonState = 'failed'; - }) + await this._workspaceContext + .save() + .then(() => { + this._saveButtonState = 'success'; + }) + .catch(() => { + this._saveButtonState = 'failed'; + }); } render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts index 75bc9db40e..4f5a31b59a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts @@ -2,7 +2,7 @@ import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; -import type { UmbWorkspaceContentContext } from '../../workspace-content.context'; +import { UmbWorkspaceContentContext } from '../../workspace-content.context'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_ALIAS, @@ -32,7 +32,8 @@ export class UmbWorkspaceViewCollectionElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (nodeContext) => { + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext('umbWorkspaceContext', (nodeContext) => { this._workspaceContext = nodeContext; this._provideWorkspace(); }); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/edit/workspace-view-content-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/edit/workspace-view-content-edit.element.ts index e004fa983a..d10cf56215 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/edit/workspace-view-content-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/edit/workspace-view-content-edit.element.ts @@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; import { distinctUntilChanged } from 'rxjs'; import { repeat } from 'lit/directives/repeat.js'; -import type { UmbWorkspaceContentContext } from '../../workspace-content.context'; +import { UmbWorkspaceContentContext } from '../../workspace-content.context'; import type { ContentProperty, ContentPropertyData, DocumentDetails, MediaDetails } from '@umbraco-cms/models'; import '../../../../content-property/content-property.element'; @@ -32,10 +32,14 @@ export class UmbWorkspaceViewContentEditElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (workspaceContext) => { - this._workspaceContext = workspaceContext; - this._observeContent(); - }); + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext>( + 'umbWorkspaceContext', + (workspaceContext) => { + this._workspaceContext = workspaceContext; + this._observeContent(); + } + ); } private _observeContent() { @@ -43,22 +47,19 @@ export class UmbWorkspaceViewContentEditElement extends UmbLitElement { /* TODO: Property-Context: This observer gets all changes, We need to fix this. it should be simpler. - It should look at length and aliases? as long as they are identical nothing should change. + It should look at length and aliases? as long as they are identical nothing should change. As they would update them selfs? Should use a Observable for this._workspaceContext.properties */ - this.observe( - this._workspaceContext.data.pipe(distinctUntilChanged()), - (content) => { - this._properties = content.properties; - this._data = content.data; - /* + this.observe(this._workspaceContext.data.pipe(distinctUntilChanged()), (content) => { + this._properties = content.properties; + this._data = content.data; + /* Maybe we should not give the value, but the umb-content-property should get the context and observe its own data. This would become a more specific Observer therefor better performance?.. Note to self: Debate with Mads how he sees this perspective. */ - } - ); + }); } render() { @@ -67,11 +68,10 @@ export class UmbWorkspaceViewContentEditElement extends UmbLitElement { ${repeat( this._properties, (property) => property.alias, - (property) => + (property) => html` data.alias === property.alias)?.value}> - ` + .value=${this._data.find((data) => data.alias === property.alias)?.value}> ` )} `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/info/workspace-view-content-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/info/workspace-view-content-info.element.ts index 56fd69160c..ae148d8937 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/info/workspace-view-content-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/info/workspace-view-content-info.element.ts @@ -11,10 +11,10 @@ export class UmbWorkspaceViewContentInfoElement extends UmbLitElement { UUITextStyles, css` :host { - display:block; + display: block; margin: var(--uui-size-layout-1); } - ` + `, ]; @state() @@ -25,13 +25,16 @@ export class UmbWorkspaceViewContentInfoElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (nodeContext) => { - this._workspaceContext = nodeContext; - this._observeContent(); - }); + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext>( + 'umbWorkspaceContext', + (nodeContext) => { + this._workspaceContext = nodeContext; + this._observeContent(); + } + ); } - private _observeContent() { if (!this._workspaceContext) return; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts index 6aa5d8f09a..3977037d08 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts @@ -2,7 +2,7 @@ import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import type { UUIButtonState } from '@umbraco-ui/uui'; -import type { UmbWorkspaceUserContext } from '../../../users/workspace/user-workspace.context'; +import { UmbWorkspaceUserContext } from '../../../users/workspace/user-workspace.context'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-workspace-action-user-group-save') @@ -17,7 +17,8 @@ export class UmbWorkspaceActionUserGroupSaveElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (instance) => { + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext('umbWorkspaceContext', (instance) => { this._workspaceContext = instance; }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts index 43370e5c02..000e11c34d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts @@ -17,7 +17,8 @@ export class UmbWorkspaceActionUserSaveElement extends UmbLitElement { constructor() { super(); - this.consumeContext('umbWorkspaceContext', (instance) => { + // TODO: Figure out how to get the magic string for the workspace context. + this.consumeContext('umbWorkspaceContext', (instance) => { this._workspaceContext = instance; }); }