From beb4b629e56d881162bd3f8571a2265c7f95b360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 24 Jan 2023 13:01:58 +0100 Subject: [PATCH] clean up our way of using subjects for section --- .../section-views/section-views.element.ts | 14 +++++----- .../components/section/section.context.ts | 26 ++++++++++++------- .../tree/action/tree-item-action.element.ts | 10 ++++--- .../components/tree/tree-item.element.ts | 3 ++- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts index c7d498e252..b9946e3bde 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts @@ -35,11 +35,11 @@ export class UmbSectionViewsElement extends UmbLitElement { private _routerFolder = ''; @state() - private _activeView?: ManifestSectionView; + private _activeViewPathname?: ManifestSectionView; private _sectionContext?: UmbSectionContext; private _viewsSubscription?: Subscription; - private _activeViewSubscription?: Subscription; + private _activeViewPathnameSubscription?: Subscription; constructor() { super(); @@ -86,17 +86,17 @@ export class UmbSectionViewsElement extends UmbLitElement { } private _observeActiveView() { - this._activeViewSubscription?.unsubscribe(); + this._activeViewPathnameSubscription?.unsubscribe(); - this._activeViewSubscription = this._sectionContext?.activeView.subscribe((view) => { - this._activeView = view; + this._activeViewPathnameSubscription = this._sectionContext?.activeViewPathname.subscribe((pathname) => { + this._activeViewPathname = pathName; }); } disconnectedCallback(): void { super.disconnectedCallback(); this._viewsSubscription?.unsubscribe(); - this._activeViewSubscription?.unsubscribe(); + this._activeViewPathnameSubscription?.unsubscribe(); } render() { @@ -113,7 +113,7 @@ export class UmbSectionViewsElement extends UmbLitElement { + ?active="${this._activeViewPathname.includes(view.meta.pathname)}"> ${view.meta.label || view.name} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts index e5b4af939d..28d1439994 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts @@ -1,23 +1,28 @@ import { BehaviorSubject } from 'rxjs'; -import type { Entity, ManifestSection, ManifestSectionView, ManifestTree } from '@umbraco-cms/models'; +import type { Entity, ManifestSection, ManifestSectionView } from '@umbraco-cms/models'; import { UniqueObjectBehaviorSubject } from '@umbraco-cms/observable-api'; import { UmbContextToken } from '@umbraco-cms/context-api'; +export type ActiveTreeItemType = Entity | undefined; + export class UmbSectionContext { + #manifest; public readonly manifest; - // TODO: what is the best context to put this in? + /* + This was not used anywhere private _activeTree = new BehaviorSubject(undefined); public readonly activeTree = this._activeTree.asObservable(); + */ // TODO: what is the best context to put this in? - private _activeTreeItem = new UniqueObjectBehaviorSubject(undefined); - public readonly activeTreeItem = this._activeTreeItem.asObservable(); + #activeTreeItem = new UniqueObjectBehaviorSubject(undefined); + public readonly activeTreeItem = this.#activeTreeItem.asObservable(); // TODO: what is the best context to put this in? - private _activeView = new BehaviorSubject(undefined); - public readonly activeView = this._activeView.asObservable(); + #activeViewPathname = new BehaviorSubject(undefined); + public readonly activeViewPathname = this.#activeViewPathname.asObservable(); constructor(sectionManifest: ManifestSection) { this.#manifest = new BehaviorSubject(sectionManifest); @@ -32,16 +37,19 @@ export class UmbSectionContext { return this.#manifest.getValue(); } + /* + This was not used anywhere public setActiveTree(tree: ManifestTree) { this._activeTree.next(tree); } + */ - public setActiveTreeItem(item: Entity) { - this._activeTreeItem.next(item); + public setActiveTreeItem(item: ActiveTreeItemType) { + this.#activeTreeItem.next(item); } public setActiveView(view: ManifestSectionView) { - this._activeView.next(view); + this.#activeViewPathname.next(view.meta.pathname); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts index a738d06b5f..0e31b90975 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts @@ -1,5 +1,5 @@ import { customElement, property, state } from 'lit/decorators.js'; -import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/section.context'; +import { ActiveTreeItemType, UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../../section/section.context'; import { UmbTreeContextMenuPageService, UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN, @@ -8,7 +8,7 @@ import { UmbTreeContextMenuService, UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN, } from '../context-menu/tree-context-menu.service'; -import type { Entity, ManifestTreeItemAction, ManifestTree } from '@umbraco-cms/models'; +import type { ManifestTreeItemAction } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; export type ActionPageEntity = { @@ -24,8 +24,8 @@ export default class UmbTreeItemActionElement extends UmbLitElement { @state() protected _entity: ActionPageEntity = { name: '', key: '' }; - protected _activeTree?: ManifestTree; - protected _activeTreeItem?: Entity; + //protected _activeTree?: ManifestTree; + protected _activeTreeItem?: ActiveTreeItemType; protected _sectionContext?: UmbSectionContext; protected _treeContextMenuService?: UmbTreeContextMenuService; @@ -61,9 +61,11 @@ export default class UmbTreeItemActionElement extends UmbLitElement { private _observeActiveTree() { if (!this._sectionContext) return; + /* this.observe(this._sectionContext.activeTree, (tree) => { this._activeTree = tree; }); + */ } private _observeActiveTreeItem() { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts index 86ba45d099..4ae7b87aff 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts @@ -184,7 +184,8 @@ export class UmbTreeItem extends UmbLitElement { private _openActions() { if (!this._treeContext || !this._sectionContext) return; - this._sectionContext?.setActiveTree(this._treeContext?.tree); + // This is out-commented as it was not used. only kept if someone need this later: + //this._sectionContext?.setActiveTree(this._treeContext?.tree); this._sectionContext?.setActiveTreeItem({ key: this.key,