From 9dec24ce5d2b2511a275999e3cd88b4ecc98820d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 12 Apr 2023 14:30:03 +0200 Subject: [PATCH] update tab name --- ...nt-type-workspace-view-edit-tab.element.ts | 2 +- ...cument-type-workspace-view-edit.element.ts | 16 +++++- ...kspace-container-structure-helper.class.ts | 16 ++++-- .../workspace-structure-manager.class.ts | 53 ++++++++++++------- 4 files changed, 61 insertions(+), 26 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts index 51782de0b7..6b3c935ea8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts @@ -78,7 +78,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { #onAddGroup = () => { // Idea, maybe we can gather the sortOrder from the last group rendered and add 1 to it? - this._groupStructureHelper.addGroup(this._ownerTabId); + this._groupStructureHelper.addContainer(this._ownerTabId); }; render() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts index b09416588d..c244382b54 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts @@ -142,13 +142,25 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement { : ''} ${repeat( this._tabs, - (tab) => tab.id, + (tab) => tab.id! + tab.name, (tab) => { // TODO: make better url folder name: const path = this._routerPath + '/tab/' + encodeURI(tab.name || ''); return html` ${path === this._activePath - ? html` + ? html` { + const newName = (e.target as HTMLInputElement).value; + // Update the current URL, so we are still on this specific tab: + window.history.replaceState(null, '', this._routerPath + '/tab/' + encodeURI(newName)); + this._tabsStructureHelper.partialUpdateContainer(tab.id, { + name: newName, + }); + }}> (a.sortOrder || 0) - (b.sortOrder || 0)); - new UmbContextConsumerController(host, UMB_ENTITY_WORKSPACE_CONTEXT, (context) => { + this.#init = new UmbContextConsumerController(host, UMB_ENTITY_WORKSPACE_CONTEXT, (context) => { this.#workspaceContext = context as UmbDocumentWorkspaceContext; this._observeOwnerContainers(); - }); + }).asPromise(); } public setType(value?: PropertyContainerTypes) { @@ -152,9 +153,16 @@ export class UmbWorkspaceContainerStructureHelper { /** Manipulate methods: */ - async addGroup(ownerKey?: string, sortOrder?: number) { + async addContainer(ownerId?: string, sortOrder?: number) { if (!this.#workspaceContext) return; - await this.#workspaceContext.structure.createContainer(null, ownerKey, this._childType, sortOrder); + await this.#workspaceContext.structure.createContainer(null, ownerId, this._childType, sortOrder); + } + + async partialUpdateContainer(groupId?: string, partialUpdate?: Partial) { + await this.#init; + if (!this.#workspaceContext || !groupId || !partialUpdate) return; + + return await this.#workspaceContext.structure.updateContainer(null, groupId, partialUpdate); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts index 70f8c9da70..94bca9717d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts @@ -27,7 +27,7 @@ export class UmbWorkspacePropertyStructureManager(); #documentTypes = new ArrayState([], (x) => x.id); readonly documentTypes = this.#documentTypes.asObservable(); @@ -62,7 +62,7 @@ export class UmbWorkspacePropertyStructureManager x.find((y) => y.id === this.#rootDocumentTypeKey)); + return this.#documentTypes.getObservablePart((x) => x.find((y) => y.id === this.#rootDocumentTypeId)); } getRootDocumentType() { - return this.#documentTypes.getValue().find((y) => y.id === this.#rootDocumentTypeKey); + return this.#documentTypes.getValue().find((y) => y.id === this.#rootDocumentTypeId); } updateRootDocumentType(entry: T) { - this.#documentTypes.updateOne(this.#rootDocumentTypeKey, entry); + this.#documentTypes.updateOne(this.#rootDocumentTypeId, entry); } // We could move the actions to another class? @@ -157,7 +157,7 @@ export class UmbWorkspacePropertyStructureManager + ) { + await this.#init; + documentTypeId = documentTypeId ?? this.#rootDocumentTypeId!; + + const frozenContainers = this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.containers ?? []; + + const containers = partialUpdateFrozenArray(frozenContainers, partialUpdate, (x) => x.id === groupKey); + + this.#documentTypes.updateOne(documentTypeId, { containers }); + } + async removeContainer(documentTypeKey: string | null, containerId: string | null = null) { await this.#init; - documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!; + documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeId!; const frozenContainers = this.#documentTypes.getValue().find((x) => x.id === documentTypeKey)?.containers ?? []; const containers = frozenContainers.filter((x) => x.id !== containerId); @@ -185,9 +200,9 @@ export class UmbWorkspacePropertyStructureManager x.id === documentTypeKey)?.properties ?? [])]; + const properties = [...(this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.properties ?? [])]; properties.push(property); - this.#documentTypes.updateOne(documentTypeKey, { properties }); + this.#documentTypes.updateOne(documentTypeId, { properties }); return property; } async updateProperty( - documentTypeKey: string | null, - propertyKey: string, + documentTypeId: string | null, + propertyId: string, partialUpdate: Partial ) { await this.#init; - documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!; + documentTypeId = documentTypeId ?? this.#rootDocumentTypeId!; - const frozenProperties = this.#documentTypes.getValue().find((x) => x.id === documentTypeKey)?.properties ?? []; + const frozenProperties = this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.properties ?? []; - const properties = partialUpdateFrozenArray(frozenProperties, partialUpdate, (x) => x.id === propertyKey); + const properties = partialUpdateFrozenArray(frozenProperties, partialUpdate, (x) => x.id === propertyId); - this.#documentTypes.updateOne(documentTypeKey, { properties }); + this.#documentTypes.updateOne(documentTypeId, { properties }); } /* @@ -229,7 +244,7 @@ export class UmbWorkspacePropertyStructureManager(mappingFunction: MappingFunction) { return this.#documentTypes.getObservablePart((docTypes) => { - const docType = docTypes.find((x) => x.id === this.#rootDocumentTypeKey); + const docType = docTypes.find((x) => x.id === this.#rootDocumentTypeId); return docType ? mappingFunction(docType) : undefined; }); }