yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up our way of using subjects for section

Browse Source
This commit is contained in:
Niels Lyngsø
2023-01-24 13:01:58 +01:00
parent 60a2022f66
commit beb4b629e5
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
View File

@@ -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 {
<uui-tab
.label="${view.meta.label || view.name}"
href="${this._routerFolder}/view/${view.meta.pathname}"
?active="${this._activeView?.meta?.pathname.includes(view.meta.pathname)}">
?active="${this._activeViewPathname.includes(view.meta.pathname)}">
<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
${view.meta.label || view.name}
</uui-tab>

26
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.context.ts
View File

@@ -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<ManifestTree | undefined>(undefined);
public readonly activeTree = this._activeTree.asObservable();
*/
// TODO: what is the best context to put this in?
private _activeTreeItem = new UniqueObjectBehaviorSubject<Entity | undefined>(undefined);
public readonly activeTreeItem = this._activeTreeItem.asObservable();
#activeTreeItem = new UniqueObjectBehaviorSubject<ActiveTreeItemType>(undefined);
public readonly activeTreeItem = this.#activeTreeItem.asObservable();
// TODO: what is the best context to put this in?
private _activeView = new BehaviorSubject<ManifestSectionView | undefined>(undefined);
public readonly activeView = this._activeView.asObservable();
#activeViewPathname = new BehaviorSubject<string | undefined>(undefined);
public readonly activeViewPathname = this.#activeViewPathname.asObservable();
constructor(sectionManifest: ManifestSection) {
this.#manifest = new BehaviorSubject<ManifestSection>(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);
}
}

10
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/action/tree-item-action.element.ts
View File

@@ -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() {

3
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item.element.ts
View File

@@ -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,