diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts index 4bbc6e7abb..9b5db6402c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/content-type-structure-manager.class.ts @@ -129,11 +129,11 @@ export class UmbContentTypePropertyStructureManager { - this.#workspaceContext = workspaceContext; - }); - } - connectedCallback() { super.connectedCallback(); @@ -79,9 +68,10 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen async #setStartNodeId() { if (this.startNodeId) return; - const unique = this.#workspaceContext?.getUnique(); // TODO: Awaiting the workspace context to have a parent entity ID value. [LK] // e.g. const parentEntityId = this.#workspaceContext?.getParentEntityId(); + const workspaceContext = await this.getContext(UMB_WORKSPACE_CONTEXT); + const unique = workspaceContext.getUnique(); if (unique && this.#dynamicRoot) { const result = await this.#dynamicRootRepository.postDynamicRootQuery(this.#dynamicRoot, unique); if (result && result.length > 0) { @@ -91,13 +81,14 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen } #onChange(e: CustomEvent) { - this.value = (e.target as UmbInputTreeElement).value as string; + const input = e.target as UmbInputTreeElement; + this.value = input.items; this.dispatchEvent(new UmbPropertyValueChangeEvent()); } render() { return html`) { + this.#selectedIds = items?.map((item) => item.unique) ?? []; + this.value = items?.map((item) => item.unique).join(','); } - public get value(): string { - return super.value as string; + public get items(): Array { + return this.#selectedIds.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id })); } - selectedIds: Array = []; + #selectedIds: Array = []; #onChange(event: CustomEvent) { switch (this._type) { case 'content': - this.value = (event.target as UmbInputDocumentElement).selectedIds.join(','); + { + const input = event.target as UmbInputDocumentElement; + this.#selectedIds = input.selectedIds; + this.value = input.selectedIds.join(','); + } break; - case 'media': - this.value = (event.target as UmbInputMediaElement).selectedIds.join(','); + case 'media': { + const input = event.target as UmbInputMediaElement; + this.#selectedIds = input.selectedIds; + this.value = input.selectedIds.join(','); break; - case 'member': - this.value = (event.target as UmbInputMemberElement).selectedIds.join(','); + } + case 'member': { + const input = event.target as UmbInputMemberElement; + this.#selectedIds = input.selectedIds; + this.value = input.selectedIds.join(','); break; + } default: break; } @@ -90,7 +99,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { render() { switch (this._type) { case 'content': - return this.#renderContentPicker(); + return this.#renderDocumentPicker(); case 'media': return this.#renderMediaPicker(); case 'member': @@ -100,9 +109,9 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) { } } - #renderContentPicker() { + #renderDocumentPicker() { return html`>; + const { data, asObservable } = (await this.#getDataPromise) as GetDataType; if (!data) return undefined; - this.setIsNew(false); - this.#persistedData.setValue(data); - this.#currentData.setValue(data); + if (data) { + this.setIsNew(false); + this.#persistedData.setValue(data); + this.#currentData.setValue(data); + } + + if (asObservable) { + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbDataTypeStoreObserver'); + } + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/settings/workspace/data-type-root'); + } } async create(parent: { entityType: string; unique: string | null }) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts index d2951889a3..7c1fb653a5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts @@ -166,13 +166,24 @@ export class UmbDocumentTypeWorkspaceContext async load(unique: string) { this.resetState(); - const { data } = await this.structure.loadType(unique); - if (!data) return undefined; + const { data, asObservable } = await this.structure.loadType(unique); - this.setIsNew(false); - this.setIsSorting(false); - this.#persistedData.setValue(data); - return data; + if (data) { + this.setIsNew(false); + this.setIsSorting(false); + this.#persistedData.update(data); + } + + if (asObservable) { + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbDocumentTypeStoreObserver'); + } + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/settings/workspace/document-type-root'); + } } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts index 12f9d8e9ce..c350c95b56 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts @@ -143,13 +143,23 @@ export class UmbDocumentWorkspaceContext async load(unique: string) { this.resetState(); this.#getDataPromise = this.repository.requestByUnique(unique); - const { data } = await this.#getDataPromise; - if (!data) return undefined; + type GetDataType = Awaited>; + const { data, asObservable } = (await this.#getDataPromise) as GetDataType; - this.setIsNew(false); - this.#persistedData.setValue(data); - this.#currentData.setValue(data); - return data || undefined; + if (data) { + this.setIsNew(false); + this.#persistedData.update(data); + this.#currentData.update(data); + } + + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbDocumentStoreObserver'); + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/content'); + } } async create(parent: { entityType: string; unique: string | null }, documentTypeUnique: string) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace.context.ts index 374818b70e..118eba2c76 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace.context.ts @@ -127,15 +127,26 @@ export class UmbMediaTypeWorkspaceContext return data; } - async load(entityId: string) { + async load(unique: string) { this.resetState(); - const { data } = await this.structure.loadType(entityId); - if (!data) return undefined; + const { data, asObservable } = await this.structure.loadType(unique); - this.setIsNew(false); - this.setIsSorting(false); - this.#persistedData.setValue(data); - return data; + if (data) { + this.setIsNew(false); + this.setIsSorting(false); + this.#persistedData.update(data); + } + + if (asObservable) { + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbMediaTypeStoreObserver'); + } + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/settings/workspace/media-type-root'); + } } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts index bf13bd9675..9acbe98e67 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts @@ -125,13 +125,23 @@ export class UmbMediaWorkspaceContext async load(unique: string) { this.resetState(); this.#getDataPromise = this.repository.requestByUnique(unique); - const { data } = await this.#getDataPromise; - if (!data) return undefined; + type GetDataType = Awaited>; + const { data, asObservable } = (await this.#getDataPromise) as GetDataType; - this.setIsNew(false); - this.#persistedData.setValue(data); - this.#currentData.setValue(data); - return data || undefined; + if (data) { + this.setIsNew(false); + this.#persistedData.update(data); + this.#currentData.update(data); + } + + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbMediaStoreObserver'); + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/media'); + } } async create(parent: { entityType: string; unique: string | null }, mediaTypeUnique: string) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace.context.ts index a7f13d0df2..a60facd921 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace.context.ts @@ -72,13 +72,25 @@ export class UmbMemberTypeWorkspaceContext } async load(unique: string) { - const { data } = await this.structure.loadType(unique); - if (!data) return undefined; this.resetState(); + const { data, asObservable } = await this.structure.loadType(unique); - this.setIsNew(false); - this.setIsSorting(false); - return { data } || undefined; + if (data) { + this.setIsNew(false); + this.setIsSorting(false); + this.#persistedData.update(data); + } + + if (asObservable) { + this.observe(asObservable(), (entity) => this.#onStoreChange(entity), 'umbMemberTypeStoreObserver'); + } + } + + #onStoreChange(entity: EntityType | undefined) { + if (!entity) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/settings/workspace/member-type-root'); + } } async create(parent: { entityType: string; unique: string | null }) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts index 3202306a63..bfcd963786 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-workspace.context.ts @@ -128,6 +128,7 @@ export class UmbMemberWorkspaceContext #onMemberStoreChange(member: EntityType | undefined) { if (!member) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r history.pushState(null, '', 'section/member-management'); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-workspace.context.ts index 2b1a3249f4..b340b7fdb3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-workspace.context.ts @@ -45,7 +45,11 @@ export class UmbUserWorkspaceContext There might be a less manual way to do this. */ onUserStoreChanges(user: EntityType | undefined) { - if (!user) return; + if (!user) { + //TODO: This solution is alright for now. But reconsider when we introduce signal-r + history.pushState(null, '', 'section/user-management'); + return; + } this.#currentData.update({ state: user.state, avatarUrls: user.avatarUrls }); }