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

move observables logic to tree base class

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-05 14:11:20 +02:00
parent b34f0a2f4f
commit b4dcebd394
10 changed files with 58 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts
View File

@@ -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);
}
}

13
src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts
View File

@@ -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);
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/tree/document/tree-document.context.ts
View File

@@ -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);
}
}

9
src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts
View File

@@ -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();
}
}

12
src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts
View File

@@ -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);
}
}

14
src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts
View File

@@ -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);
}
}

14
src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts
View File

@@ -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);
}
}

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

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

2
src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts
View File

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

20
src/Umbraco.Web.UI.Client/src/backoffice/tree/tree.context.ts
View File

@@ -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<boolean>;
readonly selection: Observable<Array<string>>;
fetchRoot?(): Observable<Entity[]>;
fetchChildren?(key: string): Observable<Entity[]>;
rootChanges?(key: string): Observable<Entity[]>;
childrenChanges?(key: string): Observable<Entity[]>;
setSelectable(value: boolean): void;
select(key: string): void;
}
export class UmbTreeContextBase implements UmbTreeContext {
public entityStore: UmbEntityStore;
public rootKey = '';
private _selectable: BehaviorSubject<boolean> = new BehaviorSubject(false);
public readonly selectable: Observable<boolean> = 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);
}