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

add types to workspace contexts consumers since it is not easily migrated to UmbContextAlias

Browse Source
This commit is contained in:
Jacob Overgaard
2023-01-17 16:21:41 +01:00
parent e00116c9aa
commit 0c22b4ee5f
7 changed files with 70 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.context.ts
View File

@@ -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<ValueType> = {
@@ -21,62 +11,56 @@ export type WorkspacePropertyData<ValueType> = {
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<ValueType = unknown> {
private _providerController: UmbContextProviderController;
private _data = new UniqueBehaviorSubject<WorkspacePropertyData<ValueType>>({});
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<UmbWorkspaceContentContext>(host, 'umbWorkspaceContext', (workspaceContext) => {
this._workspaceContext = workspaceContext;
});
this._providerController = new UmbContextProviderController(host, 'umbPropertyContext', this);
}
public setAlias(alias: WorkspacePropertyData<ValueType>['alias']) {
this._data.update({alias: alias});
this._data.update({ alias: alias });
}
public setLabel(label: WorkspacePropertyData<ValueType>['label']) {
this._data.update({label: label});
this._data.update({ label: label });
}
public setDescription(description: WorkspacePropertyData<ValueType>['description']) {
this._data.update({description: description});
this._data.update({ description: description });
}
public setValue(value: WorkspacePropertyData<ValueType>['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<ValueType>['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<ValueType = unknown> {
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.
}
}

24
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts
View File

@@ -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<UmbWorkspaceContentContext>('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() {

5
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
View File

@@ -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<UmbWorkspaceContentContext>('umbWorkspaceContext', (nodeContext) => {
this._workspaceContext = nodeContext;
this._provideWorkspace();
});

34
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/edit/workspace-view-content-edit.element.ts
View File

@@ -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<UmbWorkspaceContentContext<DocumentDetails | MediaDetails>>(
'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`<umb-content-property
.property=${property}
.value=${this._data.find((data) => data.alias === property.alias)?.value}></umb-content-property>
`
.value=${this._data.find((data) => data.alias === property.alias)?.value}></umb-content-property> `
)}
</uui-box>
`;

17
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/info/workspace-view-content-info.element.ts
View File

@@ -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<UmbWorkspaceContentContext<DocumentDetails | MediaDetails>>(
'umbWorkspaceContext',
(nodeContext) => {
this._workspaceContext = nodeContext;
this._observeContent();
}
);
}
private _observeContent() {
if (!this._workspaceContext) return;

5
src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts
View File

@@ -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<UmbWorkspaceUserContext>('umbWorkspaceContext', (instance) => {
this._workspaceContext = instance;
});
}

3
src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts
View File

@@ -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<UmbWorkspaceUserContext>('umbWorkspaceContext', (instance) => {
this._workspaceContext = instance;
});
}