From b4dcebd39497ee20796f405699a29573a7157791 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 5 Sep 2022 14:11:20 +0200 Subject: [PATCH] move observables logic to tree base class --- .../data-types/tree-data-types.context.ts | 13 ++++++------ .../tree-document-types.context.ts | 13 ++++++------ .../tree/document/tree-document.context.ts | 12 +++++------ .../extensions/tree-extensions.context.ts | 9 ++++----- .../tree/media/tree-media.context.ts | 12 +++++------ .../tree-member-groups.context.ts | 14 ++++++------- .../tree/members/tree-members.context.ts | 14 ++++++------- .../tree/shared/tree-item.element.ts | 2 +- .../tree/shared/tree-navigator.element.ts | 2 +- .../src/backoffice/tree/tree.context.ts | 20 ++++++++++++++++--- 10 files changed, 58 insertions(+), 53 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts index 7e545500f9..feea66cd8d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts @@ -1,12 +1,11 @@ -import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeDataTypesContext extends UmbTreeContextBase { - private _rootKey = '29d78e6c-c1bf-4c15-b820-d511c237ffae'; + public rootKey = '29d78e6c-c1bf-4c15-b820-d511c237ffae'; - public fetchRoot() { + public rootChanges() { const data = { - key: this._rootKey, + key: this.rootKey, name: 'Data Types', hasChildren: true, type: 'dataTypeRoot', @@ -15,10 +14,10 @@ export class UmbTreeDataTypesContext extends UmbTreeContextBase { isTrashed: false, }; this.entityStore.update([data]); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.key === this._rootKey))); + return super.rootChanges(); } - public fetchChildren(key = '') { + public childrenChanges(key = '') { // TODO: figure out url structure fetch(`/umbraco/backoffice/entities/data-types?parentKey=${key}`) .then((res) => res.json()) @@ -26,6 +25,6 @@ export class UmbTreeDataTypesContext extends UmbTreeContextBase { this.entityStore.update(data); }); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === key))); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts index c4a0de6306..b9fc63a2ad 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts @@ -1,12 +1,11 @@ -import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeDocumentTypesContext extends UmbTreeContextBase { - private _rootKey = 'f50eb86d-3ef2-4011-8c5d-c56c04eec0da'; + public rootKey = 'f50eb86d-3ef2-4011-8c5d-c56c04eec0da'; - public fetchRoot() { + public rootChanges() { const data = { - key: this._rootKey, + key: this.rootKey, name: 'Document Types', hasChildren: true, type: 'documentTypeRoot', @@ -15,10 +14,10 @@ export class UmbTreeDocumentTypesContext extends UmbTreeContextBase { isTrashed: false, }; this.entityStore.update([data]); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.key === this._rootKey))); + return super.rootChanges(); } - public fetchChildren(key: string) { + public childrenChanges(key: string) { // TODO: figure out url structure fetch(`/umbraco/backoffice/entities/document-types?parentKey=${key}`) .then((res) => res.json()) @@ -26,6 +25,6 @@ export class UmbTreeDocumentTypesContext extends UmbTreeContextBase { this.entityStore.update(data); }); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === key))); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document/tree-document.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document/tree-document.context.ts index e40448c073..c519771193 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document/tree-document.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document/tree-document.context.ts @@ -2,17 +2,17 @@ import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeDocumentContext extends UmbTreeContextBase { - private _rootKey = 'ba23245c-d8c0-46f7-a2bc-7623743d6eba'; + public rootKey = 'ba23245c-d8c0-46f7-a2bc-7623743d6eba'; - public fetchRoot() { - fetch(`/umbraco/backoffice/entities/documents?parentKey=${this._rootKey}`) + public rootChanges() { + fetch(`/umbraco/backoffice/entities/documents?parentKey=${this.rootKey}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); }); return this.entityStore.items.pipe( - map((items) => items.filter((item) => item.parentKey === this._rootKey && !item.isTrashed)) + map((items) => items.filter((item) => item.parentKey === this.rootKey && !item.isTrashed)) ); } @@ -24,8 +24,6 @@ export class UmbTreeDocumentContext extends UmbTreeContextBase { this.entityStore.update(data); }); - return this.entityStore.items.pipe( - map((items) => items.filter((item) => item.parentKey === key && !item.isTrashed)) - ); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts index 9f37f5221e..e2d3ffc76d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts @@ -1,12 +1,11 @@ -import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeExtensionsContext extends UmbTreeContextBase { - private _rootKey = 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38'; + public rootKey = 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38'; - public fetchRoot() { + public rootChanges() { const data = { - key: this._rootKey, + key: this.rootKey, name: 'Extensions', hasChildren: false, type: 'extensionsList', @@ -15,6 +14,6 @@ export class UmbTreeExtensionsContext extends UmbTreeContextBase { isTrashed: false, }; this.entityStore.update([data]); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.key === this._rootKey))); + return super.rootChanges(); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts index 1c563d2209..57ab485c25 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts @@ -2,19 +2,19 @@ import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeMediaContext extends UmbTreeContextBase { - private _rootKey = 'c0858d71-52be-4bb2-822f-42fa0c9a1ea5'; + public rootKey = 'c0858d71-52be-4bb2-822f-42fa0c9a1ea5'; - public fetchRoot() { - fetch(`/umbraco/backoffice/entities/media?parentKey=${this._rootKey}`) + public rootChanges() { + fetch(`/umbraco/backoffice/entities/media?parentKey=${this.rootKey}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); }); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === this._rootKey))); + return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === this.rootKey))); } - public fetchChildren(key: string) { + public childrenChanges(key: string) { // TODO: figure out url structure fetch(`/umbraco/backoffice/entities/media?parentKey=${key}`) .then((res) => res.json()) @@ -22,6 +22,6 @@ export class UmbTreeMediaContext extends UmbTreeContextBase { this.entityStore.update(data); }); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === key))); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts index 6df3b2f1c8..d0a407e3c6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts @@ -1,12 +1,11 @@ -import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeMemberGroupsContext extends UmbTreeContextBase { - private _rootKey = '575645a5-0f25-4671-b9a0-be515096ad6b'; + public rootKey = '575645a5-0f25-4671-b9a0-be515096ad6b'; - public fetchRoot() { + public rootChanges() { const data = { - key: this._rootKey, + key: this.rootKey, name: 'Member Groups', hasChildren: true, type: 'memberGroupRoot', @@ -16,17 +15,16 @@ export class UmbTreeMemberGroupsContext extends UmbTreeContextBase { }; this.entityStore.update([data]); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.key === this._rootKey))); + return super.rootChanges(); } - public fetchChildren(key: string) { + public childrenChanges(key: string) { // TODO: figure out url structure fetch(`/umbraco/backoffice/entities/member-groups?parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); }); - - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === key))); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts index 20bc612d67..d5057e46fe 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts @@ -1,12 +1,11 @@ -import { map } from 'rxjs'; import { UmbTreeContextBase } from '../tree.context'; export class UmbTreeMembersContext extends UmbTreeContextBase { - private _rootKey = '8f974b62-392b-4ddd-908c-03c2e03ab1a6'; + public rootKey = '8f974b62-392b-4ddd-908c-03c2e03ab1a6'; - public fetchRoot() { + public rootChanges() { const data = { - key: this._rootKey, + key: this.rootKey, parentKey: '', name: 'Members', hasChildren: true, @@ -15,17 +14,16 @@ export class UmbTreeMembersContext extends UmbTreeContextBase { isTrashed: false, }; this.entityStore.update([data]); - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.key === this._rootKey))); + return super.rootChanges(); } - public fetchChildren(key: string) { + public childrenChanges(key: string) { // TODO: figure out url structure fetch(`/umbraco/backoffice/entities/members?parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); }); - - return this.entityStore.items.pipe(map((items) => items.filter((item) => item.parentKey === key))); + return super.childrenChanges(key); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts index 4fec60ce13..1e1ecf8086 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-item.element.ts @@ -115,7 +115,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { this._childrenSubscription?.unsubscribe(); - this._childrenSubscription = this._treeContext?.fetchChildren?.(this.itemKey).subscribe((items) => { + this._childrenSubscription = this._treeContext?.childrenChanges(this.itemKey).subscribe((items) => { if (items?.length === 0) return; this._childItems = items; this._loading = false; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts index 7d93b0936b..561ef453b1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts @@ -34,7 +34,7 @@ export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) { private _observeTreeRoot() { this._loading = true; - this._treeRootSubscription = this._treeContext?.fetchRoot?.().subscribe((items) => { + this._treeRootSubscription = this._treeContext?.rootChanges?.().subscribe((items) => { if (items?.length === 0) return; this._items = items; this._loading = false; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/tree.context.ts index 8ff405ec7b..9216da1c28 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/tree.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/tree.context.ts @@ -1,19 +1,21 @@ -import { BehaviorSubject, Observable } from 'rxjs'; +import { BehaviorSubject, map, Observable } from 'rxjs'; import type { UmbEntityStore } from '../../core/stores/entity.store'; import { Entity } from '../../mocks/data/entity.data'; export interface UmbTreeContext { + rootKey: string; entityStore: UmbEntityStore; readonly selectable: Observable; readonly selection: Observable>; - fetchRoot?(): Observable; - fetchChildren?(key: string): Observable; + rootChanges?(key: string): Observable; + childrenChanges?(key: string): Observable; setSelectable(value: boolean): void; select(key: string): void; } export class UmbTreeContextBase implements UmbTreeContext { public entityStore: UmbEntityStore; + public rootKey = ''; private _selectable: BehaviorSubject = new BehaviorSubject(false); public readonly selectable: Observable = this._selectable.asObservable(); @@ -25,6 +27,18 @@ export class UmbTreeContextBase implements UmbTreeContext { this.entityStore = entityStore; } + public rootChanges() { + return this.entityStore.items.pipe( + map((items) => items.filter((item) => item.key === this.rootKey && !item.isTrashed)) + ); + } + + public childrenChanges(key: string) { + return this.entityStore.items.pipe( + map((items) => items.filter((item) => item.parentKey === key && !item.isTrashed)) + ); + } + public setSelectable(value: boolean) { this._selectable.next(value); }