From bbf2b64f6094eca8f3ef03e3dbac2f19aca1fe26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 12 Mar 2024 13:17:59 +0100 Subject: [PATCH] further refactoring --- ...nt-type-property-structure-helper.class.ts | 13 ++++- .../content-type-structure-manager.class.ts | 3 +- ...-type-workspace-view-edit-group.element.ts | 2 +- ...-workspace-view-edit-properties.element.ts | 9 +-- ...pe-workspace-view-edit-property.element.ts | 58 +++++++++++++++---- 5 files changed, 62 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts index 6bfddc917e..840deed847 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-property-structure-helper.class.ts @@ -4,6 +4,8 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; +type UmbPropertyTypeId = UmbPropertyTypeModel['id']; + /** * This class is a helper class for managing the structure of containers in a content type. * This requires a structure manager {@link UmbContentTypePropertyStructureManager} to manage the structure. @@ -101,7 +103,7 @@ export class UmbContentTypePropertyStructureHelper { - // If this need to be able to remove properties, we need to clean out the ones of this group.id before inserting them: + // If property was removed, we want to make sure that we clean out the ones of this group.id before inserting them again: const _propertyStructure = this.#propertyStructure.getValue().filter((x) => x.container?.id !== groupId); properties?.forEach((property) => { @@ -117,6 +119,13 @@ export class UmbContentTypePropertyStructureHelper x?.properties.some((y) => y.id === propertyId)); + } + // TODO: consider moving this to another class, to separate 'viewer' from 'manipulator': /** Manipulate methods: */ @@ -151,7 +160,7 @@ export class UmbContentTypePropertyStructureHelper { - this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); - }} - @property-delete=${() => { - this._propertyStructureHelper.removeProperty(property.id); - }}> + .propertyStructureHelper=${this._propertyStructureHelper} + .property=${property}> `; }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-property.element.ts index 58b20f267f..321c866fc8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-workspace-view-edit-property.element.ts @@ -12,6 +12,8 @@ import { generateAlias } from '@umbraco-cms/backoffice/utils'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_PROPERTY_SETTINGS_MODAL, + type UmbContentTypeModel, + type UmbContentTypePropertyStructureHelper, type UmbPropertyTypeModel, type UmbPropertyTypeScaffoldModel, } from '@umbraco-cms/backoffice/content-type'; @@ -29,6 +31,17 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement { #settingsModal; #workspaceModal; + @property({ attribute: false }) + public set propertyStructureHelper(value: UmbContentTypePropertyStructureHelper | undefined) { + if (value === this._propertyStructureHelper) return; + this._propertyStructureHelper = value; + this.#checkInherited(); + } + public get propertyStructureHelper(): UmbContentTypePropertyStructureHelper | undefined { + return this._propertyStructureHelper; + } + private _propertyStructureHelper?: UmbContentTypePropertyStructureHelper | undefined; + /** * Property, the data object for the property. * @type {UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined} @@ -42,8 +55,9 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement { public set property(value: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined) { const oldValue = this._property; this._property = value; + this.#checkInherited(); this.#settingsModal.setUniquePathValue('propertyId', value?.id?.toString()); - this.#workspaceModal.setUniquePathValue('propertyId', value?.id?.toString()); + //this.#workspaceModal.setUniquePathValue('propertyId', value?.id?.toString()); this.setDataType(this._property?.dataType?.unique); this.requestUpdate('property', oldValue); } @@ -99,7 +113,7 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement { }); this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) - .addUniquePaths(['propertyId']) + //.addUniquePaths(['propertyId']) .addAdditionalPath('document-type') .onSetup(() => { return { data: { entityType: 'document-type', preset: {} } }; @@ -109,15 +123,34 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement { }); } - _partialUpdate(partialObject: UmbPropertyTypeModel) { - this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); + async #checkInherited() { + if (this._propertyStructureHelper && this._property) { + console.log('checkInherited'); + // We can first match with something if we have a name [NL] + this.observe( + await this._propertyStructureHelper!.isOwnerProperty(this._property.id), + (isOwned) => { + console.log('inherited', isOwned); + this.inherited = !isOwned; + }, + 'observeIsOwnerProperty', + ); + } } - _singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) { - const partialObject = {} as any; - partialObject[propertyName] = value; + _partialUpdate(partialObject: UmbPropertyTypeModel) { + if (!this._property || !this._propertyStructureHelper) return; + this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject); + } - this.dispatchEvent(new CustomEvent('umb:partial-property-update', { detail: partialObject })); + _singleValueUpdate( + propertyName: PropertyNameType, + value: UmbPropertyTypeModel[PropertyNameType], + ) { + if (!this._property || !this._propertyStructureHelper) return; + const partialObject: Partial = {}; + partialObject[propertyName] = value === null ? undefined : value; + this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject); } #onToggleAliasLock() { @@ -132,21 +165,22 @@ export class UmbContentTypeWorkspacePropertyElement extends UmbLitElement { async #requestRemove(e: Event) { e.preventDefault(); e.stopImmediatePropagation(); - if (!this.property || !this.property.id) return; + if (!this._property || !this._property.id) return; + // TODO: Do proper localization here: [NL] await umbConfirmModal(this, { headline: `${this.localize.term('actions_delete')} property`, content: html` - Are you sure you want to delete the property ${this.property.name ?? this.property.id} + Are you sure you want to delete the property ${this._property.name ?? this._property.id} `, confirmLabel: this.localize.term('actions_delete'), color: 'danger', }); - this.dispatchEvent(new CustomEvent('property-delete')); + this._propertyStructureHelper?.removeProperty(this._property.id); } #onNameChange(event: UUIInputEvent) {