<umb-content-workspace-property> DX

src/Umbraco.Web.UI.Client/src/packages/content/content/global-components/content-workspace-property.element.ts

@@ -0,0 +1,104 @@
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../constants.js';
+import { html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+
+import '../workspace/views/edit/content-editor-property.element.js';
+
+@customElement('umb-content-workspace-property')
+export class UmbContentWorkspacePropertyElement extends UmbLitElement {
+	private _alias?: string | undefined;
+
+	@property()
+	public get alias(): string | undefined {
+		return this._alias;
+	}
+	public set alias(value: string | undefined) {
+		this._alias = value;
+		this.#observePropertyType();
+	}
+
+	@state()
+	_datasetVariantId?: UmbVariantId;
+
+	@state()
+	_dataPath?: string;
+
+	@state()
+	_viewable?: boolean;
+
+	@state()
+	_writeable?: boolean;
+
+	@state()
+	_workspaceContext?: typeof UMB_CONTENT_WORKSPACE_CONTEXT.TYPE;
+
+	@state()
+	_propertyType?: UmbPropertyTypeModel;
+
+	constructor() {
+		super();
+
+		// The Property Dataset is local to the active variant, we use this to retrieve the variant we like to gather the value from.
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
+			this._datasetVariantId = datasetContext?.getVariantId();
+		});
+
+		// The Content Workspace Context is used to retrieve the property type we like to observe.
+		// This gives us the configuration from the property type as part of the data type.
+		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, async (workspaceContext) => {
+			this._workspaceContext = workspaceContext;
+			this.#observePropertyType();
+		});
+	}
+
+	async #observePropertyType() {
+		if (!this._alias || !this._workspaceContext) return;
+
+		this.observe(await this._workspaceContext?.structure.propertyStructureByAlias(this._alias), (propertyType) => {
+			this._propertyType = propertyType;
+			this.#checkViewGuard();
+		});
+	}
+
+	#checkViewGuard() {
+		if (!this._workspaceContext || !this._propertyType || !this._datasetVariantId) return;
+
+		const propertyVariantId = new UmbVariantId(
+			this._propertyType.variesByCulture ? this._datasetVariantId.culture : null,
+			this._propertyType.variesBySegment ? this._datasetVariantId.segment : null,
+		);
+
+		this.observe(
+			this._workspaceContext.propertyViewGuard.isPermittedForVariantAndProperty(
+				propertyVariantId,
+				this._propertyType,
+				this._datasetVariantId,
+			),
+			(permitted) => {
+				this._viewable = permitted;
+			},
+			`umbObservePropertyViewGuard`,
+		);
+	}
+
+	override render() {
+		if (!this._viewable) return nothing;
+		if (!this._datasetVariantId && !this._propertyType) return nothing;
+
+		return html`<umb-content-workspace-view-edit-property
+			class="property"
+			.variantId=${this._datasetVariantId}
+			.property=${this._propertyType}></umb-content-workspace-view-edit-property>`;
+	}
+}
+
+export default UmbContentWorkspacePropertyElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-content-workspace-property': UmbContentWorkspacePropertyElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/content/content/global-components/index.ts

@@ -0,0 +1,2 @@
+import './content-workspace-property.element.js';
+export * from './content-workspace-property.element.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/index.ts

@@ -2,9 +2,11 @@ export * from './collection/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './controller/merge-content-variant-data.controller.js';
+export * from './global-components/index.js';
 export * from './manager/index.js';
 export * from './property-dataset-context/index.js';
 export * from './workspace/index.js';
+
 export type * from './repository/index.js';
 export type * from './types.js';
 export type * from './variant-picker/index.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor-properties.element.ts

@@ -1,5 +1,5 @@
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../content-workspace.context-token.js';
-import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type {
 	UmbContentTypeModel,
@@ -8,17 +8,10 @@
 } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-
-import './content-editor-property.element.js';
 
 @customElement('umb-content-workspace-view-edit-properties')
 export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement {
-	#workspaceContext?: typeof UMB_CONTENT_WORKSPACE_CONTEXT.TYPE;
 	#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
-	#properties?: Array<UmbPropertyTypeModel>;
-	#visiblePropertiesUniques: Array<string> = [];
 
 	@property({ type: String, attribute: 'container-id', reflect: false })
 	public get containerId(): string | null | undefined {
@@ -29,21 +22,14 @@
 	}
 
 	@state()
-	_datasetVariantId?: UmbVariantId;
+	_properties: Array<UmbPropertyTypeModel> = [];
 
 	@state()
 	_visibleProperties?: Array<UmbPropertyTypeModel>;
 
 	constructor() {
 		super();
-
-		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
-			this._datasetVariantId = datasetContext?.getVariantId();
-			this.#processPropertyStructure();
-		});
-
 		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, (workspaceContext) => {
-			this.#workspaceContext = workspaceContext;
 			this.#propertyStructureHelper.setStructureManager(
 				// Assuming its the same content model type that we are working with here... [NL]
 				workspaceContext?.structure as unknown as UmbContentTypeStructureManager<UmbContentTypeModel>,
@@ -52,63 +38,22 @@
 			this.observe(
 				this.#propertyStructureHelper.propertyStructure,
 				(properties) => {
-					this.#properties = properties;
-					this.#processPropertyStructure();
+					this._properties = properties;
 				},
 				'observePropertyStructure',
 			);
 		});
 	}
 
-	#processPropertyStructure() {
-		if (!this.#workspaceContext || !this.#properties || !this.#propertyStructureHelper || !this._datasetVariantId) {
-			return;
-		}
-
-		const propertyViewGuard = this.#workspaceContext.propertyViewGuard;
-
-		this.#properties.forEach((property) => {
-			const propertyVariantId = new UmbVariantId(
-				property.variesByCulture ? this._datasetVariantId?.culture : null,
-				property.variesBySegment ? this._datasetVariantId?.segment : null,
-			);
-			this.observe(
-				propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, property, this._datasetVariantId!),
-				(permitted) => {
-					if (permitted) {
-						this.#visiblePropertiesUniques.push(property.unique);
-						this.#calculateVisibleProperties();
-					} else {
-						const index = this.#visiblePropertiesUniques.indexOf(property.unique);
-						if (index !== -1) {
-							this.#visiblePropertiesUniques.splice(index, 1);
-							this.#calculateVisibleProperties();
-						}
-					}
-				},
-				`propertyViewGuard-permittedForVariantAndProperty-${property.unique}`,
-			);
-		});
-	}
-
-	#calculateVisibleProperties() {
-		this._visibleProperties = this.#properties!.filter((property) =>
-			this.#visiblePropertiesUniques.includes(property.unique),
-		);
-	}
-
 	override render() {
-		return this._datasetVariantId && this._visibleProperties
-			? repeat(
-					this._visibleProperties,
-					(property) => property.alias,
-					(property) =>
-						html`<umb-content-workspace-view-edit-property
-							class="property"
-							.variantId=${this._datasetVariantId}
-							.property=${property}></umb-content-workspace-view-edit-property>`,
-				)
-			: nothing;
+		return repeat(
+			this._properties,
+			(property) => property.alias,
+			(property) =>
+				html`<umb-content-workspace-property
+					class="property"
+					alias=${property.alias}></umb-content-workspace-property>`,
+		);
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor-property.element.ts

@@ -33,7 +33,7 @@ export class UmbContentWorkspaceViewEditPropertyElement extends UmbLitElement {
 
 	override willUpdate(changedProperties: Map<string, any>) {
 		super.willUpdate(changedProperties);
-		if (changedProperties.has('type') || changedProperties.has('variantId') || changedProperties.has('_context')) {
+		if (changedProperties.has('property') || changedProperties.has('variantId') || changedProperties.has('_context')) {
 			if (this.variantId && this.property && this._context) {
 				const propertyVariantId = new UmbVariantId(
 					this.property.variesByCulture ? this.variantId.culture : null,