add member group tree

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -22,6 +22,7 @@ import { UmbDocumentTypeStore } from '../core/stores/document-type/document-type
 import { UmbDocumentStore } from '../core/stores/document/document.store';
 import { UmbMediaStore } from '../core/stores/media/media.store';
 import { UmbNodeStore } from '../core/stores/node.store';
+import { UmbMemberGroupStore } from '../core/stores/member-group/member-group.store';
 import { UmbSectionStore } from '../core/stores/section.store';
 import { UmbEntityStore } from '../core/stores/entity.store';
 import { UmbUserStore } from '../core/stores/user/user.store';
@@ -77,6 +78,7 @@ export class UmbBackofficeElement extends UmbContextConsumerMixin(UmbContextProv
 		this.provideContext('umbDocumentTypeStore', new UmbDocumentTypeStore(this._umbEntityStore));
 		this.provideContext('umbUserStore', new UmbUserStore(this._umbEntityStore));
 		this.provideContext('umbUserGroupStore', new UmbUserGroupStore(this._umbEntityStore));
+		this.provideContext('umbMemberGroupStore', new UmbMemberGroupStore(this._umbEntityStore));
 		this.provideContext('umbNotificationService', new UmbNotificationService());
 		this.provideContext('umbModalService', new UmbModalService());
 		this.provideContext('umbSectionStore', new UmbSectionStore());

src/Umbraco.Web.UI.Client/src/backoffice/trees/member-groups/tree-member-groups-data.context.ts

@@ -1,30 +0,0 @@
-import { UmbTreeDataContextBase } from '../tree-data.context';
-
-export class UmbTreeMemberGroupsDataContext extends UmbTreeDataContextBase {
-	public rootKey = '575645a5-0f25-4671-b9a0-be515096ad6b';
-
-	public rootChanges() {
-		const data = {
-			key: this.rootKey,
-			name: 'Member Groups',
-			hasChildren: true,
-			type: 'memberGroupRoot',
-			icon: 'folder',
-			parentKey: '',
-			isTrashed: false,
-		};
-
-		this.entityStore.update([data]);
-		return super.rootChanges();
-	}
-
-	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 super.childrenChanges(key);
-	}
-}

src/Umbraco.Web.UI.Client/src/backoffice/trees/member-groups/tree-member-groups.element.ts

@@ -1,10 +1,8 @@
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { UmbTreeBase } from '../shared/tree-base.element';
-import { UmbEntityStore } from '../../../core/stores/entity.store';
-import { UmbTreeMemberGroupsDataContext } from './tree-member-groups-data.context';
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
-
+import { UmbMemberGroupStore } from 'src/core/stores/member-group/member-group.store';
 import '../shared/tree-navigator.element';
 
 @customElement('umb-tree-member-groups')
@@ -12,12 +10,8 @@ export class UmbTreeMemberGroups extends UmbContextProviderMixin(UmbContextConsu
 	constructor() {
 		super();
 
-		this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
-			this._entityStore = entityStore;
-			if (!this._entityStore || !this.tree) return;
-
-			this._treeDataContext = new UmbTreeMemberGroupsDataContext(this._entityStore);
-			this.provideContext('umbTreeDataContext', this._treeDataContext);
+		this.consumeContext('umbMemberGroupStore', (store: UmbMemberGroupStore) => {
+			this.provideContext('umbTreeStore', store);
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts

@@ -17,6 +17,7 @@ import { handlers as treeDocumentHandlers } from './domains/tree-document.handle
 import { handlers as treeMediaHandlers } from './domains/tree-media.handlers';
 import { handlers as treeDataTypeHandlers } from './domains/tree-data-type.handlers';
 import { handlers as treeDocumentTypeHandlers } from './domains/tree-document-type.handlers';
+import { handlers as treeMemberGroupHandlers } from './domains/tree-member-group.handlers';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,
@@ -37,6 +38,7 @@ const handlers = [
 	...treeMediaHandlers,
 	...treeDataTypeHandlers,
 	...treeDocumentTypeHandlers,
+	...treeMemberGroupHandlers,
 ];
 
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {

src/Umbraco.Web.UI.Client/src/core/mocks/data/member-group.data.ts

@@ -0,0 +1,40 @@
+import { UmbEntityData } from './entity.data';
+import { EntityTreeItem, PagedEntityTreeItem } from '@umbraco-cms/backend-api';
+import type { MemberGroupDetails } from '@umbraco-cms/models';
+
+export const data: Array<MemberGroupDetails> = [
+	{
+		name: 'Member Group 1',
+		type: 'member-group',
+		icon: 'umb:document',
+		hasChildren: false,
+		key: '76708ccd-4179-464c-b694-6969149dd9f9',
+		isContainer: false,
+		parentKey: null,
+	},
+];
+
+// Temp mocked database
+class UmbMemberGroupData extends UmbEntityData<MemberGroupDetails> {
+	constructor() {
+		super(data);
+	}
+
+	getTreeRoot(): PagedEntityTreeItem {
+		const items = this.data.filter((item) => item.parentKey === null);
+		const total = items.length;
+		return { items, total };
+	}
+
+	getTreeItemChildren(key: string): PagedEntityTreeItem {
+		const items = this.data.filter((item) => item.parentKey === key);
+		const total = items.length;
+		return { items, total };
+	}
+
+	getTreeItem(keys: Array<string>): Array<EntityTreeItem> {
+		return this.data.filter((item) => keys.includes(item.key));
+	}
+}
+
+export const umbMemberGroupData = new UmbMemberGroupData();

src/Umbraco.Web.UI.Client/src/core/mocks/domains/tree-member-group.handlers.ts

@@ -0,0 +1,19 @@
+import { rest } from 'msw';
+import { umbMemberGroupData } from '../data/member-group.data';
+
+// TODO: add schema
+export const handlers = [
+	rest.get('/umbraco/management/api/v1/tree/member-group/root', (req, res, ctx) => {
+		const response = umbMemberGroupData.getTreeRoot();
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get('/umbraco/management/api/v1/tree/member-group/item', (req, res, ctx) => {
+		const keys = req.params.keys as string;
+		if (!keys) return;
+
+		const items = umbMemberGroupData.getTreeItem(keys.split(','));
+
+		return res(ctx.status(200), ctx.json(items));
+	}),
+];

src/Umbraco.Web.UI.Client/src/core/models/index.ts

@@ -121,3 +121,8 @@ export interface MediaTypeDetails extends EntityTreeItem {
 	alias: string;
 	properties: [];
 }
+
+// Member Groups
+export interface MemberGroupDetails extends EntityTreeItem {
+	key: string; // TODO: Remove this when the backend is fixed
+}

src/Umbraco.Web.UI.Client/src/core/stores/member-group/member-group.store.ts

@@ -0,0 +1,38 @@
+import { map, Observable } from 'rxjs';
+import { UmbEntityStore } from '../entity.store';
+import { UmbDataStoreBase } from '../store';
+import { ApiError, EntityTreeItem, MemberGroupResource, ProblemDetails } from '@umbraco-cms/backend-api';
+import type { MemberGroupDetails } from '@umbraco-cms/models';
+
+/**
+ * @export
+ * @class UmbMemberGroupStore
+ * @extends {UmbDataStoreBase<MemberGroupDetails | EntityTreeItem>}
+ * @description - Data Store for Member Groups
+ */
+export class UmbMemberGroupStore extends UmbDataStoreBase<MemberGroupDetails | EntityTreeItem> {
+	private _entityStore: UmbEntityStore;
+
+	constructor(entityStore: UmbEntityStore) {
+		super();
+		this._entityStore = entityStore;
+	}
+
+	getTreeRoot(): Observable<Array<EntityTreeItem>> {
+		MemberGroupResource.getTreeMemberGroupRoot({}).then(
+			(res) => {
+				this.update(res.items);
+			},
+			(e) => {
+				if (e instanceof ApiError) {
+					const error = e.body as ProblemDetails;
+					if (e.status === 400) {
+						console.log(error.detail);
+					}
+				}
+			}
+		);
+
+		return this.items.pipe(map((items) => items.filter((item) => item.parentKey === null)));
+	}
+}