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

Merge pull request #2214 from umbraco/v14/bugfix/block-inherit-variant-id

Browse Source 
Block Workspace: Inherit Property VariantId
This commit is contained in:
Niels Lyngsø
2024-08-19 13:20:21 +02:00
committed by GitHub
parent c99734f039 074eff9ee2
commit c816531f40
18 changed files with 171 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
View File

@@ -129,6 +129,12 @@ export class UmbBlockGridAreaTypeWorkspaceContext
throw new Error('You cannot set a name of a area-type.');
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: keyof UmbBlockGridTypeAreaType) {
return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof UmbBlockGridTypeAreaType] as ReturnType);
}
@@ -137,6 +143,13 @@ export class UmbBlockGridAreaTypeWorkspaceContext
return this.#data.getValue()?.[propertyAlias as keyof UmbBlockGridTypeAreaType] as ReturnType;
}
/**
* @function setPropertyValue
* @param {string} alias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(alias: string, value: unknown) {
const currentData = this.#data.value;
if (currentData) {

14
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts
View File

@@ -36,8 +36,10 @@ export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
// TODO: Investigate how I do that with the workspaces..
@@ -45,9 +47,11 @@ export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @param value
* @function setPropertyValue
* @param {string} propertyAlias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(propertyAlias: string, value: unknown) {
// TODO: Investigate how I do that with the workspaces..

13
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
View File

@@ -136,6 +136,12 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
console.warn('You cannot set a name of a block type.');
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof BlockTypeData] as ReturnType);
}
@@ -144,6 +150,13 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
return this.#data.getValue()?.[propertyAlias as keyof BlockTypeData] as ReturnType;
}
/**
* @function setPropertyValue
* @param {string} alias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(alias: string, value: unknown) {
const currentData = this.#data.value;
if (currentData) {

29
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
View File

@@ -2,10 +2,11 @@ import type { UmbBlockDataType } from '../types.js';
import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypeStructureManager } from '@umbraco-cms/backoffice/content-type';
import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
import { UmbClassState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type UmbClassInterface, UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
import { UmbValidationContext } from '@umbraco-cms/backoffice/validation';
export class UmbBlockElementManager extends UmbControllerBase {
@@ -17,6 +18,9 @@ export class UmbBlockElementManager extends UmbControllerBase {
});
#getDataResolver!: () => void;
#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
readonly variantId = this.#variantId.asObservable();
readonly unique = this.#data.asObservablePart((data) => data?.udi);
readonly contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey);
@@ -42,6 +46,10 @@ export class UmbBlockElementManager extends UmbControllerBase {
this.#data.setValue(undefined);
}
setVariantId(variantId: UmbVariantId | undefined) {
this.#variantId.setValue(variantId);
}
setData(data: UmbBlockDataType | undefined) {
this.#data.setValue(data);
this.#getDataResolver();
@@ -63,6 +71,18 @@ export class UmbBlockElementManager extends UmbControllerBase {
return this.getData()?.contentTypeKey;
}
// We will implement propertyAlias in the future, when implementing Varying Blocks. [NL]
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async propertyVariantId(propertyAlias: string) {
return this.variantId;
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
await this.#getDataPromise;
@@ -75,6 +95,13 @@ export class UmbBlockElementManager extends UmbControllerBase {
return this.#data.getValue()?.[propertyAlias] as ReturnType;
}
/**
* @function setPropertyValue
* @param {string} alias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(alias: string, value: unknown) {
this.initiatePropertyValueChange();
await this.#getDataPromise;

22
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
View File

@@ -35,20 +35,28 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase imp
this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this);
}
propertyVariantId?(propertyAlias: string): Promise<Observable<UmbVariantId | undefined>> {
return this.#elementManager.propertyVariantId(propertyAlias);
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
return await this.#elementManager.propertyValueByAlias<ReturnType>(propertyAlias);
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @param value
* @function setPropertyValue
* @param {string} alias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(propertyAlias: string, value: unknown) {
return this.#elementManager.setPropertyValue(propertyAlias, value);
async setPropertyValue(alias: string, value: unknown) {
return this.#elementManager.setPropertyValue(alias, value);
}
}

32
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
View File

@@ -6,7 +6,7 @@ import {
type UmbRoutableWorkspaceContext,
UmbWorkspaceIsNewRedirectController,
} from '@umbraco-cms/backoffice/workspace';
import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
import { UmbClassState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry';
import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal';
@@ -16,6 +16,8 @@ import {
UMB_BLOCK_MANAGER_CONTEXT,
type UmbBlockWorkspaceData,
} from '@umbraco-cms/backoffice/block';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings';
export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel>
@@ -55,6 +57,9 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
#label = new UmbStringState<string | undefined>(undefined);
readonly name = this.#label.asObservable();
#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
readonly variantId = this.#variantId.asObservable();
constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) {
super(host, workspaceArgs.manifest.alias);
const manifest = workspaceArgs.manifest;
@@ -86,6 +91,16 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
this.#blockEntries = context;
}).asPromise();
this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
this.observe(context.variantId, (variantId) => {
this.#variantId.setValue(variantId);
});
});
this.observe(this.variantId, (variantId) => {
this.content.setVariantId(variantId);
});
this.routes.setRoutes([
{
path: 'create/:elementTypeKey',
@@ -297,8 +312,12 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
return 'block name content element type here...';
}
// NOTICE currently the property methods are for layout, but this could be seen as wrong, we might need to dedicate a data manager for the layout as well.
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<propertyAliasType extends keyof LayoutDataType>(propertyAlias: propertyAliasType) {
return this.#layout.asObservablePart(
(layout) => layout?.[propertyAlias as keyof LayoutDataType] as LayoutDataType[propertyAliasType],
@@ -310,6 +329,13 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
return this.#layout.getValue()?.[propertyAlias as keyof LayoutDataType] as LayoutDataType[propertyAliasType];
}
/**
* @function setPropertyValue
* @param {string} alias
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(alias: string, value: unknown) {
const currentData = this.#layout.value;
if (currentData) {

8
src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts
View File

@@ -113,16 +113,12 @@ export class UmbContentPropertyDatasetContext<
/**
* @function setPropertyValueByVariant
* @param {string} propertyAlias
* @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
* @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
* @param {UmbVariantId} propertyVariantId - The variant id for the value to be set for.
* @returns {Promise<unknown>}
* @description Get the value of this property.
*/
setPropertyValueByVariant(
propertyAlias: string,
value: PromiseLike<unknown>,
propertyVariantId: UmbVariantId,
): Promise<void> {
setPropertyValueByVariant(propertyAlias: string, value: unknown, propertyVariantId: UmbVariantId): Promise<void> {
return this.#workspace.setPropertyValue(propertyAlias, value, propertyVariantId);
}

13
src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts
View File

@@ -172,6 +172,12 @@ export class UmbPropertyTypeWorkspaceContext<PropertyTypeData extends UmbPropert
this.updateData({ name: name } as any);
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
return this.#data.asObservablePart((data) => data?.[propertyAlias as keyof PropertyTypeData] as ReturnType);
}
@@ -180,6 +186,13 @@ export class UmbPropertyTypeWorkspaceContext<PropertyTypeData extends UmbPropert
return this.#data.getValue()?.[propertyAlias as keyof PropertyTypeData] as ReturnType;
}
/**
* @function setPropertyValue
* @param {string} propertyAlias
* @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
async setPropertyValue(alias: string, value: unknown) {
const currentData = this.#data.value;
if (currentData) {

14
src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
View File

@@ -47,8 +47,10 @@ export class UmbPropertyDatasetContextBase
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
return this.#values.asObservablePart((values) => {
@@ -58,9 +60,11 @@ export class UmbPropertyDatasetContextBase
}
/**
* TODO: Write proper JSDocs here.
* @param alias
* @param value
* @function setPropertyValue
* @param {string} alias
* @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
* @returns {Promise<void>}
* @description Set the value of this property.
*/
setPropertyValue(alias: string, value: unknown) {
this.#values.appendOne({ alias, value });

1
src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts
View File

@@ -33,6 +33,5 @@ export interface UmbPropertyDatasetContext extends UmbContext {
propertyValueByAlias<ReturnType = unknown>(
propertyAlias: string,
): Promise<Observable<ReturnType | undefined> | undefined>;
// TODO: Append the andCulture method as well..
setPropertyValue(propertyAlias: string, value: unknown): void;
}

1
src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.context.ts
View File

@@ -180,6 +180,7 @@ export class UmbPropertyContext<ValueType = any> extends UmbContextBase<UmbPrope
if (!this.#datasetContext || !alias) return;
this.#datasetContext?.setPropertyValue(alias, value);
}
/**
* Gets the current value of this property.
* Notice this is not reactive, you should us the `value` observable for that.

6
src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts
View File

@@ -44,8 +44,10 @@ export class UmbInvariantWorkspacePropertyDatasetContext<
}
/**
* TODO: Write proper JSDocs here.
* @param propertyAlias
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
return await this.#workspace.propertyValueByAlias<ReturnType>(propertyAlias);

6
src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts
View File

@@ -344,6 +344,12 @@ export class UmbDataTypeWorkspaceContext
this.#currentData.update({ editorUiAlias: alias });
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
await this.#getDataPromise;
return this.#currentData.asObservablePart(

7
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts
View File

@@ -251,7 +251,12 @@ export class UmbDocumentBlueprintWorkspaceContext
async propertyStructureById(propertyId: string) {
return this.structure.propertyStructureById(propertyId);
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<PropertyValueType = unknown>(propertyAlias: string, variantId?: UmbVariantId) {
return this.#currentData.asObservablePart(
(data) =>

7
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
View File

@@ -364,6 +364,13 @@ export class UmbDocumentWorkspaceContext
return this.structure.propertyStructureById(propertyId);
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @param {UmbVariantId} variantId
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<PropertyValueType = unknown>(
propertyAlias: string,
variantId?: UmbVariantId,

8
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
View File

@@ -256,7 +256,13 @@ export class UmbMediaWorkspaceContext
async propertyStructureById(propertyId: string) {
return this.structure.propertyStructureById(propertyId);
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @param {UmbVariantId} variantId
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<PropertyValueType = unknown>(propertyAlias: string, variantId?: UmbVariantId) {
return this.#currentData.asObservablePart(
(data) =>

7
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts
View File

@@ -227,6 +227,13 @@ export class UmbMemberWorkspaceContext
return this.structure.propertyStructureById(propertyId);
}
/**
* @function propertyValueByAlias
* @param {string} propertyAlias
* @param {UmbVariantId} variantId
* @returns {Promise<Observable<ReturnType | undefined> | undefined>}
* @description Get an Observable for the value of this property.
*/
async propertyValueByAlias<PropertyValueType = unknown>(propertyAlias: string, variantId?: UmbVariantId) {
return this.#currentData.asObservablePart(
(data) =>

4
src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
View File

@@ -13,7 +13,7 @@ type UuiInputTypeType = typeof UUIInputElement.prototype.type;
@customElement('umb-property-editor-ui-text-box')
export class UmbPropertyEditorUITextBoxElement
extends UmbFormControlMixin<string>(UmbLitElement, undefined)
extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement, undefined)
implements UmbPropertyEditorUiElement
{
/**
@@ -83,7 +83,7 @@ export class UmbPropertyEditorUITextBoxElement
?readonly=${this.readonly}></uui-input>`;
}
static styles = [
static override styles = [
UmbTextStyles,
css`
uui-input {