From 14058e544edb289844af20ea374341da776c0b8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 10:01:03 +0200 Subject: [PATCH 1/7] re-implenent tab-properties --- ...t-type-container-structure-helper.class.ts | 12 ++++----- ...nt-type-property-structure-helper.class.ts | 2 +- ...t-type-design-editor-properties.element.ts | 10 +++---- .../content-type-design-editor-tab.element.ts | 27 +++++++++++-------- 4 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts index 2688c49331..be4d8d7a23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts @@ -28,8 +28,8 @@ export class UmbContentTypeContainerStructureHelper([], (x) => x.id); + readonly hasProperties = this.#hasProperties.asObservablePart((x) => x.some((y) => y.has)); constructor(host: UmbControllerHost) { super(host); @@ -132,7 +132,7 @@ export class UmbContentTypeContainerStructureHelper { // We want to remove hasProperties of groups that does not exist anymore.: // this.#removeHasPropertiesOfGroup() - this.#hasProperties.setValue(false); + console.log('containers', containers); + this.#hasProperties.setValue([]); this.#childContainers.setValue([]); containers.forEach((container) => { @@ -203,8 +204,7 @@ export class UmbContentTypeContainerStructureHelper { - // TODO: Make this an array/map/state, so we only change the groupId. then hasProperties should be a observablePart that checks the array for true. [NL] - this.#hasProperties.setValue(hasProperties); + this.#hasProperties.appendOne({ id: groupId, has: hasProperties }); }, '_observePropertyStructureOfGroup' + groupId, ); 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 0a1fd0d2f8..fec571a3d5 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 @@ -188,7 +188,7 @@ export class UmbContentTypePropertyStructureHelper = { getUniqueOfElement: (element) => { @@ -160,8 +156,8 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { .addUniquePaths(['container-id']) .addAdditionalPath('add-property/:sortOrder') .onSetup(async (params) => { - if (!this._ownerContentType || !this._containerId) return false; - + // TODO: Make a onInit promise, that can be awaited here. + if (!this._ownerContentType || this._containerId === undefined) return false; const propertyData = await this.#propertyStructureHelper.createPropertyScaffold(this._containerId); if (propertyData === undefined) return false; if (params.sortOrder !== undefined) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts index 58d32eb3a2..021f63b22f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-tab.element.ts @@ -2,7 +2,7 @@ import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '../../content-type-workspace import type { UmbContentTypeWorkspaceViewEditGroupElement } from './content-type-design-editor-group.element.js'; import { UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT } from './content-type-design-editor.context.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbContentTypeContainerStructureHelper, type UmbContentTypeModel, @@ -160,16 +160,17 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement { render() { return html` - ${ - this._hasProperties - ? html` - - - - ` - : '' - } + ${ + this.#containerId + ? html` + + + + ` + : nothing + } +
${repeat( this._groups, @@ -223,6 +224,10 @@ export class UmbContentTypeDesignEditorTabElement extends UmbLitElement { umb-content-type-design-editor-group { margin-bottom: var(--uui-size-layout-1); } + uui-box.opaque { + background-color: transparent; + border-color: transparent; + } .container-list { display: grid; From 91ec2722d7c7723f38ef536b7b34109b895da2e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 13:32:56 +0200 Subject: [PATCH 2/7] update comment --- .../views/design/content-type-design-editor-group.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts index 7a4271bf66..0809c01b27 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts @@ -158,7 +158,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement { : ''; } - // TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN + // TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN, but we need either a generic type or a way to get the path pattern.... [NL] #renderContainerHeader() { return html`
From 96b113cc5282c7ee5f9369ec0f3050d916306d81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 14:03:02 +0200 Subject: [PATCH 3/7] fix update propeties that changed in the propertyStructure state --- ...nt-type-property-structure-helper.class.ts | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 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 fec571a3d5..3699a93cbe 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 @@ -23,6 +23,7 @@ export class UmbContentTypePropertyStructureHelper([], (x) => x.id); readonly propertyStructure = this.#propertyStructure.asObservable(); @@ -86,7 +87,7 @@ export class UmbContentTypePropertyStructureHelper { @@ -152,20 +153,14 @@ export class UmbContentTypePropertyStructureHelper { - // Lets remove the properties that does not exists any longer: - const _propertyStructure = this.#propertyStructure + // Lets remove the properties that does not exists any longer: [NL] + const uniquesToRemove = this.#propertyStructure .getValue() - .filter((x) => !(x.container?.id === groupId && !properties.some((y) => y.id === x.id))); + .filter((x) => !(x.container?.id === groupId && !properties.some((y) => y.id === x.id))) + .map((X) => X.id); - // Lets append the properties that does not exists already: - properties?.forEach((property) => { - if (!_propertyStructure.find((x) => x.id === property.id)) { - _propertyStructure.push(property); - } - }); - - // Fire update to subscribers: - this.#propertyStructure.setValue(_propertyStructure); + this.#propertyStructure.remove(uniquesToRemove); + this.#propertyStructure.append(properties); }, '_observePropertyStructureOfGroup' + groupId, ); From 257413dba1da4b60f08d1b103ff6a63adec07e4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 14:13:42 +0200 Subject: [PATCH 4/7] impl mergeObservables for propertyStructure composition --- ...nt-type-property-structure-helper.class.ts | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 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 3699a93cbe..8784968913 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 @@ -7,7 +7,7 @@ import type { import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js'; 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'; +import { UmbArrayState, mergeObservables } from '@umbraco-cms/backoffice/observable-api'; type UmbPropertyTypeId = UmbPropertyTypeModel['id']; @@ -77,7 +77,14 @@ export class UmbContentTypePropertyStructureHelper { + this.#propertyStructure.setValue(properties); + }, + 'observePropertyStructures', + ); this.removeUmbControllerByAlias('_observeContainers'); } else { this.observe( @@ -140,13 +147,24 @@ export class UmbContentTypePropertyStructureHelper this.#observePropertyStructureOf(group.id)); + this.observe( + mergeObservables( + groupContainers.map((group) => this.#structure!.propertyStructuresOf(group.id)), + (sources) => { + return sources.flatMap((x) => x); + }, + ), + (properties) => { + this.#propertyStructure.setValue(properties); + }, + 'observePropertyStructures', + ); this.#containers = groupContainers; }, '_observeContainers', ); } - + /* #observePropertyStructureOf(groupId?: string | null) { if (!this.#structure || groupId === undefined) return; @@ -164,7 +182,7 @@ export class UmbContentTypePropertyStructureHelper Date: Wed, 1 May 2024 14:13:53 +0200 Subject: [PATCH 5/7] remove unused code --- ...nt-type-property-structure-helper.class.ts | 20 ------------------- 1 file changed, 20 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 8784968913..7253d4f84f 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 @@ -77,7 +77,6 @@ export class UmbContentTypePropertyStructureHelper { @@ -164,25 +163,6 @@ export class UmbContentTypePropertyStructureHelper { - // Lets remove the properties that does not exists any longer: [NL] - const uniquesToRemove = this.#propertyStructure - .getValue() - .filter((x) => !(x.container?.id === groupId && !properties.some((y) => y.id === x.id))) - .map((X) => X.id); - - this.#propertyStructure.remove(uniquesToRemove); - this.#propertyStructure.append(properties); - }, - '_observePropertyStructureOfGroup' + groupId, - ); - }*/ async isOwnerProperty(propertyId: UmbPropertyTypeId) { await this.#init; From d26549b89e55b7af0a9137eae77fc74ba3ae6a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 14:20:22 +0200 Subject: [PATCH 6/7] clean up --- .../structure/content-type-container-structure-helper.class.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts index be4d8d7a23..8314a667fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-container-structure-helper.class.ts @@ -2,7 +2,7 @@ import type { UmbContentTypeModel, UmbPropertyContainerTypes, UmbPropertyTypeCon import type { UmbContentTypeStructureManager } from './content-type-structure-manager.class.js'; import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbArrayState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; /** * This class is a helper class for managing the structure of containers in a content type. @@ -152,7 +152,6 @@ export class UmbContentTypeContainerStructureHelper { // We want to remove hasProperties of groups that does not exist anymore.: // this.#removeHasPropertiesOfGroup() - console.log('containers', containers); this.#hasProperties.setValue([]); this.#childContainers.setValue([]); From b06aa4d1646d2f41278c5dadcfe40f35f46ed83d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 1 May 2024 14:23:12 +0200 Subject: [PATCH 7/7] clean up --- .../design/content-type-design-editor-properties.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts index 7da84ab742..cb8159c22f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts @@ -96,7 +96,6 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { } #addPropertyModal: UmbModalRouteRegistrationController; - #workspaceModal?: UmbModalRouteRegistrationController; #propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);