From 5418a32d2163c9db4560d406462c1a4015654eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 10:34:41 +0200 Subject: [PATCH 1/9] use id for identification --- .../structure/content-type-property-structure-helper.class.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 445aa239af..aa8107da68 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 @@ -159,7 +159,7 @@ export class UmbContentTypePropertyStructureHelper { - if (!_propertyStructure.find((x) => x.alias === property.alias)) { + if (!_propertyStructure.find((x) => x.id === property.id)) { _propertyStructure.push(property); } }); From e5389d9534df24ef2850f26c94de44d475d5606d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 10:35:14 +0200 Subject: [PATCH 2/9] onNameChanged --- ...ent-type-design-editor-property.element.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts index 6c0167ed66..2800b5e430 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts @@ -52,7 +52,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { this._property = value; this.#checkInherited(); this.#settingsModal.setUniquePathValue('propertyId', value?.id); - this.setDataType(this._property?.dataType?.unique); + this.#setDataType(this._property?.dataType?.unique); this.requestUpdate('property', oldValue); } private _property?: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined; @@ -102,7 +102,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { return { data: { contentTypeId: id }, value: propertyData }; }) .onSubmit((result) => { - this._partialUpdate(result as UmbPropertyTypeModel); + this.#partialUpdate(result as UmbPropertyTypeModel); }) .observeRouteBuilder((routeBuilder) => { this._modalRoute = routeBuilder(null); @@ -122,12 +122,12 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { } } - _partialUpdate(partialObject: UmbPropertyTypeModel) { + #partialUpdate(partialObject: UmbPropertyTypeModel) { if (!this._property || !this._propertyStructureHelper) return; this._propertyStructureHelper.partialUpdateProperty(this._property.id, partialObject); } - _singleValueUpdate( + #singleValueUpdate( propertyName: PropertyNameType, value: UmbPropertyTypeModel[PropertyNameType], ) { @@ -141,7 +141,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { this._aliasLocked = !this._aliasLocked; } - async setDataType(dataTypeId: string | undefined) { + async #setDataType(dataTypeId: string | undefined) { if (!dataTypeId) return; this.#dataTypeDetailRepository.requestByUnique(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name)); } @@ -167,7 +167,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { this._propertyStructureHelper?.removeProperty(this._property.id); } - #onNameChange(event: UUIInputEvent) { + #onNameChanged(event: UUIInputEvent) { if (event instanceof UUIInputEvent) { const target = event.composedPath()[0] as UUIInputElement; @@ -179,10 +179,10 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { const expectedOldAlias = generateAlias(oldName ?? ''); // Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.) if (expectedOldAlias === oldAlias) { - this._singleValueUpdate('alias', generateAlias(newName ?? '')); + this.#singleValueUpdate('alias', generateAlias(newName ?? '')); } } - this._singleValueUpdate('name', newName); + this.#singleValueUpdate('name', newName); } } } @@ -234,7 +234,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { placeholder=${this.localize.term('placeholders_label')} label="label" .value=${this.property.name} - @input=${this.#onNameChange}> + @input=${this.#onNameChanged}> ${this.renderPropertyAlias()}

@@ -245,7 +245,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { placeholder=${this.localize.term('placeholders_enterDescription')} .value=${this.property.description} @input=${(e: CustomEvent) => { - if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value); + if (e.target) this.#singleValueUpdate('description', (e.target as HTMLInputElement).value); }}>

@@ -276,7 +276,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { ?readonly=${this.inherited} label="sort order" @change=${(e: UUIInputEvent) => - this._partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)} + this.#partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)} .value=${this.property.sortOrder ?? 0}> `; } @@ -291,7 +291,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { .value=${this.property.alias} ?disabled=${this._aliasLocked} @input=${(e: CustomEvent) => { - if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value); + if (e.target) this.#singleValueUpdate('alias', (e.target as HTMLInputElement).value); }}> From d787617debac2e9d55da209393df85748487320f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 10:45:05 +0200 Subject: [PATCH 3/9] minor optimizations --- ...ntent-type-design-editor-properties.element.ts | 2 +- ...content-type-design-editor-property.element.ts | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) 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 ec0fb04c71..9e726ba35b 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 @@ -91,8 +91,8 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { return this._containerId; } public set containerId(value: string | null | undefined) { - if (value === this._containerId) return; const oldValue = this._containerId; + if (value === oldValue) return; this._containerId = value; this.#propertyStructureHelper.setContainerId(value); this.#addPropertyModal.setUniquePathValue('container-id', value === null ? 'root' : value); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts index 2800b5e430..75e6a688d9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts @@ -23,8 +23,8 @@ import { export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { // #dataTypeDetailRepository = new UmbDataTypeDetailRepository(this); - #settingsModal; + #dataTypeUnique?: string; @property({ attribute: false }) public set propertyStructureHelper(value: UmbContentTypePropertyStructureHelper | undefined) { @@ -49,6 +49,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { } public set property(value: UmbPropertyTypeModel | UmbPropertyTypeScaffoldModel | undefined) { const oldValue = this._property; + if (value === oldValue) return; this._property = value; this.#checkInherited(); this.#settingsModal.setUniquePathValue('propertyId', value?.id); @@ -141,9 +142,15 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement { this._aliasLocked = !this._aliasLocked; } - async #setDataType(dataTypeId: string | undefined) { - if (!dataTypeId) return; - this.#dataTypeDetailRepository.requestByUnique(dataTypeId).then((x) => (this._dataTypeName = x?.data?.name)); + async #setDataType(dataTypeUnique: string | undefined) { + if (!dataTypeUnique) { + this._dataTypeName = undefined; + this.#dataTypeUnique = undefined; + return; + } + if (dataTypeUnique === this.#dataTypeUnique) return; + this.#dataTypeUnique = dataTypeUnique; + this.#dataTypeDetailRepository.requestByUnique(dataTypeUnique).then((x) => (this._dataTypeName = x?.data?.name)); } async #requestRemove(e: Event) { From 0757cea52b7ab0be78198362d117c217598edbeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 10:47:19 +0200 Subject: [PATCH 4/9] data-umb-tab-id --- .../views/design/content-type-design-editor.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index ff110e8543..940712d3e4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -25,7 +25,7 @@ import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; @customElement('umb-content-type-design-editor') export class UmbContentTypeDesignEditorElement extends UmbLitElement implements UmbWorkspaceViewElement { #sorter = new UmbSorterController(this, { - getUniqueOfElement: (element) => element.getAttribute('data-umb-tabs-id'), + getUniqueOfElement: (element) => element.getAttribute('data-umb-tab-id'), getUniqueOfModel: (tab) => tab.id, identifier: 'content-type-tabs-sorter', itemSelector: 'uui-tab', @@ -439,7 +439,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements label=${tab.name ?? 'unnamed'} .active=${tabActive} href=${path} - data-umb-tabs-id=${ifDefined(tab.id)}> + data-umb-tab-id=${ifDefined(tab.id)}> ${this.renderTabInner(tab, tabActive, ownedTab)} `; } From 47a25cdc7bcbc03d1635c4d1c19078e9bb4235f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 10:48:43 +0200 Subject: [PATCH 5/9] not-active --- .../views/design/content-type-design-editor.element.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index 940712d3e4..03db30ef84 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -447,7 +447,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements renderTabInner(tab: UmbPropertyTypeContainerModel, tabActive: boolean, ownedTab: boolean) { // TODO: Localize this: if (this._sortModeActive) { - return html`
+ return html`
${ownedTab ? html` ${tab.name!} ${tab.name!} ${this.renderDeleteFor(tab)}
`; + return html`
${tab.name!} ${this.renderDeleteFor(tab)}
`; } else { - return html`
${tab.name!}
`; + return html`
${tab.name!}
`; } } @@ -559,11 +559,11 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements border-right: 1px solid var(--uui-color-border); } - .no-edit uui-input { + .not-active uui-input { pointer-events: auto; } - .no-edit { + .not-active { pointer-events: none; display: inline-flex; padding-left: var(--uui-size-space-3); From 7d90f65e03624af7bf8ac29f7a0fc38378b63789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 11:12:11 +0200 Subject: [PATCH 6/9] not compact --- .../design/content-type-design-editor.element.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index 03db30ef84..989c770b23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -373,7 +373,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements renderAddButton() { // TODO: Localize this: if (this._sortModeActive) return; - return html` + return html` Add tab `; @@ -495,7 +495,11 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements label=${this.localize.term('actions_remove')} class="trash" slot="append" - @click=${() => this.#requestRemoveTab(tab)} + @click=${(e) => { + e.stopPropagation(); + e.preventDefault(); + this.#requestRemoveTab(tab); + }} compact> `; @@ -546,7 +550,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements flex-wrap: nowrap; } - .content-tab-is-empty { + uui-tab.content-tab-is-empty { align-self: center; border-radius: 3px; --uui-tab-text: var(--uui-color-text-alt); @@ -559,7 +563,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements border-right: 1px solid var(--uui-color-border); } - .not-active uui-input { + .not-active uui-button { pointer-events: auto; } @@ -574,12 +578,12 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements .trash { opacity: 1; - transition: opacity 120ms; + transition: opacity 100ms; } uui-tab:not(:hover, :focus) .trash { opacity: 0; - transition: opacity 120ms; + transition: opacity 100ms; } uui-input:not(:focus, :hover) { From 3ee078de99dec301585604ca3d55cca76faa4a74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 11:53:11 +0200 Subject: [PATCH 7/9] general clean up --- ...t-type-container-structure-helper.class.ts | 111 ++++++++++-------- .../content-type-structure-manager.class.ts | 19 +-- .../content-type-design-editor.element.ts | 15 +-- 3 files changed, 77 insertions(+), 68 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 072b9d347c..fcb3cf1843 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 @@ -12,21 +12,21 @@ export class UmbContentTypeContainerStructureHelper void; - _containerId?: string | null; - _childType?: UmbPropertyContainerTypes = 'Group'; + #containerId?: string | null; + #childType?: UmbPropertyContainerTypes = 'Group'; #structure?: UmbContentTypeStructureManager; // State containing the all containers defined in the data: - #containers = new UmbArrayState([], (x) => x.id); - readonly containers = this.#containers.asObservable(); + #childContainers = new UmbArrayState([], (x) => x.id); + readonly containers = this.#childContainers.asObservable(); // State containing the merged containers (only one pr. name): - #mergedContainers = new UmbArrayState([], (x) => x.id); - readonly mergedContainers = this.#mergedContainers.asObservable(); + #mergedChildContainers = new UmbArrayState([], (x) => x.id); + readonly mergedContainers = this.#mergedChildContainers.asObservable(); // Owner containers are containers owned by the owner Content Type (The specific one up for editing) - private _ownerContainers: UmbPropertyTypeContainerModel[] = []; + #ownerChildContainers: UmbPropertyTypeContainerModel[] = []; #hasProperties = new UmbBooleanState(false); readonly hasProperties = this.#hasProperties.asObservable(); @@ -37,7 +37,7 @@ export class UmbContentTypeContainerStructureHelper (a.sortOrder || 0) - (b.sortOrder || 0)); + this.#mergedChildContainers.sortBy((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0)); this.observe(this.containers, this.#performContainerMerge, null); } @@ -64,73 +64,73 @@ export class UmbContentTypeContainerStructureHelper { if (container) { - this._containerName = container.name ?? ''; - this._containerType = container.type; + this.#containerName = container.name ?? ''; + this.#containerType = container.type; if (container.parent) { // We have a parent for our main container, so lets observe that one as well: this.observe( this.#structure!.containerById(container.parent.id), (parent) => { if (parent) { - this._parentName = parent.name ?? ''; - this._parentType = parent.type; + this.#parentName = parent.name ?? ''; + this.#parentType = parent.type; this.#observeSimilarContainers(); } else { this.removeUmbControllerByAlias('_observeContainers'); - this._parentName = undefined; - this._parentType = undefined; + this.#parentName = undefined; + this.#parentType = undefined; } }, '_observeMainParentContainer', ); } else { this.removeUmbControllerByAlias('_observeMainParentContainer'); - this._parentName = null; //In this way we want to look for one without a parent. [NL] - this._parentType = undefined; + this.#parentName = null; //In this way we want to look for one without a parent. [NL] + this.#parentType = undefined; this.#observeSimilarContainers(); } } else { this.removeUmbControllerByAlias('_observeContainers'); - this._containerName = undefined; - this._containerType = undefined; + this.#containerName = undefined; + this.#containerType = undefined; // TODO: reset has Properties. this.#hasProperties.setValue(false); } @@ -141,30 +141,37 @@ export class UmbContentTypeContainerStructureHelper { // We want to remove hasProperties of groups that does not exist anymore.: // this.#removeHasPropertiesOfGroup() this.#hasProperties.setValue(false); - this.#containers.setValue([]); + this.#childContainers.setValue([]); containers.forEach((container) => { this.#observeHasPropertiesOf(container.id); this.observe( - this.#structure!.containersOfParentId(container.id, this._childType!), + this.#structure!.containersOfParentId(container.id, this.#childType!), (containers) => { - // Remove existing containers that are not the parent of the new containers: - this.#containers.filter((x) => x.parent?.id !== container.id || containers.some((y) => y.id === x.id)); + // observe direct owner containers of this container id: + this.#ownerChildContainers = + this.#structure!.getOwnerContainers(this.#childType!, this.#containerId!) ?? []; + // TODO: Maybe check for dif before setting it? - this.#containers.append(containers); + // Remove existing containers that are not the parent of the new containers: + this.#childContainers.filter( + (x) => x.parent?.id !== container.id || containers.some((y) => y.id === x.id), + ); + + this.#childContainers.append(containers); }, '_observeGroupsOf_' + container.id, ); @@ -175,16 +182,16 @@ export class UmbContentTypeContainerStructureHelper { // Here (When getting root containers) we get containers from all ContentTypes. It also means we need to do an extra filtering to ensure we only get one of each containers. [NL] // For that we get the owner containers first (We do not need to observe as this observation will be triggered if one of the owner containers change) [NL] - this._ownerContainers = this.#structure!.getOwnerContainers(this._childType!, this._containerId!) ?? []; - this.#containers.setValue(rootContainers); + this.#ownerChildContainers = this.#structure!.getOwnerContainers(this.#childType!, this.#containerId!) ?? []; + this.#childContainers.setValue(rootContainers); }, '_observeRootContainers', ); @@ -204,10 +211,10 @@ export class UmbContentTypeContainerStructureHelper) { - return this._ownerContainers.length > 0 + return this.#ownerChildContainers.length > 0 ? containers.filter( (anyCon) => - !this._ownerContainers.some( + !this.#ownerChildContainers.some( (ownerCon) => // Then if this is not the owner container but matches one by name & type, then we do not want it. ownerCon.id !== anyCon.id && ownerCon.name === anyCon.name && ownerCon.type === anyCon.type, @@ -222,7 +229,7 @@ export class UmbContentTypeContainerStructureHelper i === cons.findIndex((y) => y.name === x.name && y.type === x.type)); - this.#mergedContainers.setValue(merged); + this.#mergedChildContainers.setValue(merged); }; /** @@ -230,11 +237,11 @@ export class UmbContentTypeContainerStructureHelper x.id === containerId); + return this.#ownerChildContainers.some((x) => x.id === containerId); } containersByNameAndType(name: string, type: UmbPropertyContainerTypes) { - return this.#containers.asObservablePart((cons) => cons.filter((x) => x.name === name && x.type === type)); + return this.#childContainers.asObservablePart((cons) => cons.filter((x) => x.name === name && x.type === type)); } /** Manipulate methods: */ @@ -252,7 +259,7 @@ export class UmbContentTypeContainerStructureHelper x.unique === contentTypeUnique)?.containers ?? []; - const containers = frozenContainers.filter((x) => x.id !== containerId); + const contentType = this.#contentTypes.getValue().find((x) => x.unique === contentTypeUnique); + if (!contentType) { + throw new Error('Could not find the Content Type to remove container from'); + } + const frozenContainers = contentType.containers ?? []; + const containers = frozenContainers.filter((x) => x.id !== containerId || x.parent?.id !== containerId); + + const frozenProperties = contentType.properties ?? []; + const properties = frozenProperties.filter((x) => x.container?.id !== containerId); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // TODO: fix TS partial complaint - this.#contentTypes.updateOne(contentTypeUnique, { containers }); + this.#contentTypes.updateOne(contentTypeUnique, { containers, properties }); } createPropertyScaffold(containerId: string | null = null) { @@ -424,7 +430,7 @@ export class UmbContentTypeStructureManager< await this.#init; contentTypeUnique = contentTypeUnique ?? this.#ownerContentTypeUnique!; - // If we have a container, we need to ensure it exists, and then update the container with the new parent id. + // If we have a container, we need to ensure it exists, and then update the container with the new parent id. [NL] if (containerId) { const container = await this.ensureContainerOf(containerId, contentTypeUnique); if (!container) { @@ -455,7 +461,7 @@ export class UmbContentTypeStructureManager< await this.#init; contentTypeUnique = contentTypeUnique ?? this.#ownerContentTypeUnique!; - // If we have a container, we need to ensure it exists, and then update the container with the new parent id. + // If we have a container, we need to ensure it exists, and then update the container with the new parent id. [NL] if (property.container) { const container = await this.ensureContainerOf(property.container.id, contentTypeUnique); if (!container) { @@ -501,7 +507,6 @@ export class UmbContentTypeStructureManager< const frozenProperties = this.#contentTypes.getValue().find((x) => x.unique === contentTypeUnique)?.properties ?? []; - const properties = partialUpdateFrozenArray(frozenProperties, partialUpdate, (x) => x.id === propertyId); // eslint-disable-next-line @typescript-eslint/ban-ts-comment diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index 989c770b23..02bfa20407 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -167,7 +167,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements if (!this.#workspaceContext || !this._tabs || this._hasRootGroups === undefined) return; const routes: UmbRoute[] = []; - // We gather the activeTab name to check for rename, this is a bit hacky way to redirect the user without noticing to the new name [NL] + // We gather the activeTab name to check for rename, this is a bit hacky way to redirect the user without noticing the url changes to the new name [NL] let activeTabName: string | undefined = undefined; if (this._tabs.length > 0) { @@ -180,8 +180,6 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements path: `tab/${encodeFolderName(tabName).toString()}`, component: () => import('./content-type-design-editor-tab.element.js'), setup: (component) => { - // Or just cache the current view here, and use it if the same is begin requested?. [NL] - //(component as UmbContentTypeDesignEditorTabElement).tabName = tabName; (component as UmbContentTypeDesignEditorTabElement).containerId = tab.id; }, }); @@ -192,7 +190,6 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements path: 'root', component: () => import('./content-type-design-editor-tab.element.js'), setup: (component) => { - //(component as UmbContentTypeDesignEditorTabElement).noTabName = true; (component as UmbContentTypeDesignEditorTabElement).containerId = null; }, }); @@ -220,7 +217,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements if (oldPath !== newPath) { // Lets cheat a bit and update the activePath already, in this way our input does not loose focus [NL] this._activePath = this._routerPath + newPath; - // Update the current URL, so we are still on this specific tab: + // Update the current URL, so we are still on this specific tab: [NL] window.history.replaceState(null, '', this._activePath); // TODO: We have some flickering when renaming, this could potentially be fixed if we cache the view and re-use it if the same is requested [NL] // Or maybe its just about we just send the updated tabName to the view, and let it handle the update itself [NL] @@ -247,7 +244,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements color: 'danger', }; - // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab. + // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab. [NL] await umbConfirmModal(this, modalData); @@ -256,13 +253,13 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements #remove(tabId?: string) { if (!tabId) return; this.#workspaceContext?.structure.removeContainer(null, tabId); - // TODO: We should only navigate away if it was the last tab and if it was the active one... + // TODO: We should only navigate away if it was the last tab and if it was the active one... [NL] this._tabsStructureHelper?.isOwnerChildContainer(tabId) ? window.history.replaceState(null, '', this._routerPath + (this._routes[0]?.path ?? '/root')) : ''; } async #addTab() { - // If there is already a Tab with no name, then focus it instead of adding a new one: + // If there is already a Tab with no name, then focus it instead of adding a new one: [NL] // TODO: Optimize this so it looks at the data instead of the DOM [NL] const inputEl = this.shadowRoot?.querySelector('uui-tab[active] uui-input') as UUIInputElement; if (inputEl?.value === '') { @@ -456,7 +453,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements value=${ifDefined(tab.sortOrder)} style="width:50px" @change=${(e: UUIInputEvent) => this.#changeOrderNumber(tab, e)}>` - : html`${tab.name!}`} + : html`${tab.name!}`}
`; } From c490d6b9891e9a9e1b9c5eeff42aa11ded89d99c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 11:57:24 +0200 Subject: [PATCH 8/9] MouseEvent --- .../views/design/content-type-design-editor.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.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index 02bfa20407..1d936f30fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -492,7 +492,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements label=${this.localize.term('actions_remove')} class="trash" slot="append" - @click=${(e) => { + @click=${(e: MouseEvent) => { e.stopPropagation(); e.preventDefault(); this.#requestRemoveTab(tab); From 14433ac215ca4a131143fa80fe7b46829e28e915 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 16 Apr 2024 12:15:19 +0200 Subject: [PATCH 9/9] further work --- .../content-type-container-structure-helper.class.ts | 4 ++-- .../views/design/content-type-design-editor-group.element.ts | 5 +++++ .../views/design/content-type-design-editor.element.ts | 2 +- 3 files changed, 8 insertions(+), 3 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 fcb3cf1843..085639155e 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 @@ -161,10 +161,10 @@ export class UmbContentTypeContainerStructureHelper { - // observe direct owner containers of this container id: + // get the direct owner containers of this container id: this.#ownerChildContainers = this.#structure!.getOwnerContainers(this.#childType!, this.#containerId!) ?? []; - // TODO: Maybe check for dif before setting it? + // TODO: Maybe check for dif before setting it? Cause currently we are setting it every time one of the containers change. [NL] // Remove existing containers that are not the parent of the new containers: this.#childContainers.filter( 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 6211d320e7..fcd24ef4f9 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 @@ -59,8 +59,13 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement { ); const pureOwnerContainer = hasAOwnerContainer && containers.length === 1; + // TODO: Check if requstUpdate is needed here, I do not think it is when i added it, but I just wanted to be safe when debugging [NL] + const oldHasOwnerContainer = this._hasOwnerContainer; + const oldInherited = this._inherited; this._hasOwnerContainer = hasAOwnerContainer; this._inherited = !pureOwnerContainer; + this.requestUpdate('_hasOwnerContainer', oldHasOwnerContainer); + this.requestUpdate('_inherited', oldInherited); }, 'observeGroupContainers', ); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts index 1d936f30fe..e3bcdb1266 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts @@ -468,7 +468,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements auto-width @change=${(e: InputEvent) => this.#tabNameChanged(e, tab)} @input=${(e: InputEvent) => this.#tabNameChanged(e, tab)} - @blur=${(e: InputEvent) => this.#tabNameBlur()}> + @blur=${() => this.#tabNameBlur()}> ${this.renderDeleteFor(tab)} `;