From 00256b27ea4504fa201ff9c39741aba49e3a92f2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 5 Sep 2022 10:23:34 +0200 Subject: [PATCH] add TreeContextBase class --- .../data-types/tree-data-types.context.ts | 20 ++--------- .../tree-document-types.context.ts | 11 ++---- .../tree/document/tree-document.context.ts | 34 ++----------------- .../extensions/tree-extensions.context.ts | 11 ++---- .../tree/media/tree-media.context.ts | 11 ++---- .../tree-member-groups.context.ts | 11 ++---- .../tree/members/tree-members.context.ts | 11 ++---- .../tree/shared/tree-item.element.ts | 6 ++-- .../tree/shared/tree-navigator.element.ts | 4 +-- .../src/backoffice/tree/tree.context.ts | 33 ++++++++++++++++-- 10 files changed, 51 insertions(+), 101 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 231f9f681b..ded7917580 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,19 +1,9 @@ -import { BehaviorSubject, map, Observable } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeDataTypesContext implements UmbTreeContext { - public entityStore: UmbEntityStore; - - private _selectable: BehaviorSubject = new BehaviorSubject(false); - public readonly selectable: Observable = this._selectable.asObservable(); +import { map } from 'rxjs'; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeDataTypesContext extends UmbTreeContextBase { private _rootKey = '29d78e6c-c1bf-4c15-b820-d511c237ffae'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { const data = { key: this._rootKey, @@ -37,8 +27,4 @@ export class UmbTreeDataTypesContext implements UmbTreeContext { return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.parentKey === key))); } - - public setSelectable(value: boolean) { - this._selectable.next(value); - } } 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 ef7a90ea90..2d579bdbf6 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,16 +1,9 @@ import { map } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeDocumentTypesContext implements UmbTreeContext { - public entityStore: UmbEntityStore; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeDocumentTypesContext extends UmbTreeContextBase { private _rootKey = 'f50eb86d-3ef2-4011-8c5d-c56c04eec0da'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { const data = { key: this._rootKey, 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 663a19f9ce..21a70b8830 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 @@ -1,22 +1,9 @@ -import { BehaviorSubject, map, Observable } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeDocumentContext implements UmbTreeContext { - public entityStore: UmbEntityStore; - - private _selectable: BehaviorSubject = new BehaviorSubject(false); - public readonly selectable: Observable = this._selectable.asObservable(); - - private _selection: BehaviorSubject> = new BehaviorSubject(>[]); - public readonly selection: Observable> = this._selection.asObservable(); +import { map } from 'rxjs'; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeDocumentContext extends UmbTreeContextBase { private _rootKey = 'ba23245c-d8c0-46f7-a2bc-7623743d6eba'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { fetch(`/umbraco/backoffice/entities/documents?parentKey=${this._rootKey}`) .then((res) => res.json()) @@ -41,19 +28,4 @@ export class UmbTreeDocumentContext implements UmbTreeContext { map((items) => items.filter((item) => item.parentKey === key && !item.isTrashed)) ); } - - public select(key: string) { - const selection = this._selection.getValue(); - this._selection.next([...selection, key]); - } - - public setSelectable(value: boolean) { - this._selectable.next(value); - } - - public setSelection(value: Array) { - console.log('SET SELECTION', value); - this._selection.next(value); - console.log(this._selection.getValue()); - } } 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 97658f084b..c6a9766b11 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,16 +1,9 @@ import { map } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeExtensionsContext implements UmbTreeContext { - public entityStore: UmbEntityStore; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeExtensionsContext extends UmbTreeContextBase { private _rootKey = 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { const data = { key: this._rootKey, 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 a19820ed2b..90132f7873 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 @@ -1,16 +1,9 @@ import { map } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeMediaContext implements UmbTreeContext { - public entityStore: UmbEntityStore; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeMediaContext extends UmbTreeContextBase { private _rootKey = 'c0858d71-52be-4bb2-822f-42fa0c9a1ea5'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { fetch(`/umbraco/backoffice/entities/media?parentKey=${this._rootKey}`) .then((res) => res.json()) 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 481fe32d36..485898fbb9 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,16 +1,9 @@ import { map } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeMemberGroupsContext implements UmbTreeContext { - public entityStore: UmbEntityStore; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeMemberGroupsContext extends UmbTreeContextBase { private _rootKey = '575645a5-0f25-4671-b9a0-be515096ad6b'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { const data = { key: this._rootKey, 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 b18bca6331..57cc36ea63 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,16 +1,9 @@ import { map } from 'rxjs'; -import { UmbEntityStore } from '../../../core/stores/entity.store'; -import { UmbTreeContext } from '../tree.context'; - -export class UmbTreeMembersContext implements UmbTreeContext { - public entityStore: UmbEntityStore; +import { UmbTreeContextBase } from '../tree.context'; +export class UmbTreeMembersContext extends UmbTreeContextBase { private _rootKey = '8f974b62-392b-4ddd-908c-03c2e03ab1a6'; - constructor(entityStore: UmbEntityStore) { - this.entityStore = entityStore; - } - public fetchRoot() { const data = { key: this._rootKey, 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 77e04b77c1..3b2ddd8930 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 @@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../../core/context'; -import { UmbTreeContext } from '../tree.context'; +import { UmbTreeContextBase } from '../tree.context'; import { UUIMenuItemEvent } from '@umbraco-ui/uui'; import { UmbSectionContext } from '../../sections/section.context'; import { map, Subscription } from 'rxjs'; @@ -40,7 +40,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { @state() private _selected = false; - private _treeContext?: UmbTreeContext; + private _treeContext?: UmbTreeContextBase; private _sectionContext?: UmbSectionContext; private _sectionSubscription?: Subscription; private _childrenSubscription?: Subscription; @@ -51,7 +51,7 @@ export class UmbTreeItem extends UmbContextConsumerMixin(LitElement) { constructor() { super(); - this.consumeContext('umbTreeContext', (treeContext: UmbTreeContext) => { + this.consumeContext('umbTreeContext', (treeContext: UmbTreeContextBase) => { this._treeContext = treeContext; this._observeSelectable(); this._observeSelection(); 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 f0bba25e99..0c84792831 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 @@ -3,7 +3,7 @@ import { repeat } from 'lit/directives/repeat.js'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, state } from 'lit/decorators.js'; import { UmbContextConsumerMixin } from '../../../core/context'; -import { UmbTreeContext } from '../tree.context'; +import { UmbTreeContextBase } from '../tree.context'; import './tree-item.element'; import { Subscription } from 'rxjs'; @@ -16,7 +16,7 @@ export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) { @state() private _loading = true; - private _treeContext?: UmbTreeContext; + private _treeContext?: UmbTreeContextBase; private _treeRootSubscription?: Subscription; @state() 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 b3cbee0064..8ff405ec7b 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,13 +1,40 @@ -import { Observable } from 'rxjs'; +import { BehaviorSubject, Observable } from 'rxjs'; import type { UmbEntityStore } from '../../core/stores/entity.store'; import { Entity } from '../../mocks/data/entity.data'; export interface UmbTreeContext { entityStore: UmbEntityStore; - selectable: Observable; - selection: Observable>; + readonly selectable: Observable; + readonly selection: Observable>; fetchRoot?(): Observable; fetchChildren?(key: string): Observable; setSelectable(value: boolean): void; select(key: string): void; } + +export class UmbTreeContextBase implements UmbTreeContext { + public entityStore: UmbEntityStore; + + private _selectable: BehaviorSubject = new BehaviorSubject(false); + public readonly selectable: Observable = this._selectable.asObservable(); + + private _selection: BehaviorSubject> = new BehaviorSubject(>[]); + public readonly selection: Observable> = this._selection.asObservable(); + + constructor(entityStore: UmbEntityStore) { + this.entityStore = entityStore; + } + + public setSelectable(value: boolean) { + this._selectable.next(value); + } + + public setSelection(value: Array) { + this._selection.next(value); + } + + public select(key: string) { + const selection = this._selection.getValue(); + this._selection.next([...selection, key]); + } +}