Merge remote-tracking branch 'origin/feature/tree-navigator' into feature/tree-navigator

src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts

@@ -7,28 +7,28 @@ export class UmbTreeContentContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'document';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
 	}
 
 	public fetchRoot() {
-		const data = {
-			id: -1,
-			key: '485d49ef-a4aa-46ac-843f-4256fe167347',
-			name: 'Content',
-			hasChildren: true,
-			type: 'document',
-			icon: 'favorite',
-			parentKey: '',
-		};
-		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=`)
+			.then((res) => res.json())
+			.then((data) => {
+				this.entityStore.update(data);
+			});
+
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/node/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -7,9 +7,10 @@ export class UmbTreeDataTypesContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'dataType';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
-		// TODO: temp solution until we know where to get tree data from
 		this.entityStore = entityStore;
 	}
 
@@ -24,12 +25,14 @@ export class UmbTreeDataTypesContext implements UmbTreeContext {
 			parentKey: '',
 		};
 		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/data-types/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -7,6 +7,8 @@ export class UmbTreeDocumentTypesContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'documentType';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
@@ -23,12 +25,14 @@ export class UmbTreeDocumentTypesContext implements UmbTreeContext {
 			parentKey: '',
 		};
 		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/document-types/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -7,6 +7,8 @@ export class UmbTreeExtensionsContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'extension';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
@@ -18,15 +20,24 @@ export class UmbTreeExtensionsContext implements UmbTreeContext {
 			key: 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38',
 			name: 'Extensions',
 			hasChildren: false,
-			type: 'extensions',
+			type: 'extensionsList',
 			icon: 'favorite',
 			parentKey: '',
 		};
 		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === 'extensionsList' && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
+			.then((res) => res.json())
+			.then((data) => {
+				this.entityStore.update(data);
+			});
+
 		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.parentKey === key)));
 	}
 }

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

@@ -7,28 +7,28 @@ export class UmbTreeMediaContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'media';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
 	}
 
 	public fetchRoot() {
-		const data = {
-			id: -1,
-			key: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee',
-			name: 'Media',
-			hasChildren: true,
-			type: 'media',
-			icon: 'favorite',
-			parentKey: '',
-		};
-		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=`)
+			.then((res) => res.json())
+			.then((data) => {
+				this.entityStore.update(data);
+			});
+
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/node/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -7,6 +7,8 @@ export class UmbTreeMemberGroupsContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'memberGroup';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
@@ -24,12 +26,14 @@ export class UmbTreeMemberGroupsContext implements UmbTreeContext {
 		};
 
 		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/member-groups/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -7,6 +7,8 @@ export class UmbTreeMembersContext implements UmbTreeContext {
 	public tree: ManifestTree;
 	public entityStore: UmbEntityStore;
 
+	private _entityType = 'member';
+
 	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
 		this.tree = tree;
 		this.entityStore = entityStore;
@@ -23,12 +25,14 @@ export class UmbTreeMembersContext implements UmbTreeContext {
 			icon: 'favorite',
 		};
 		this.entityStore.update([data]);
-		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+		return this.entityStore.entities.pipe(
+			map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === ''))
+		);
 	}
 
 	public fetchChildren(key: string) {
 		// TODO: figure out url structure
-		fetch(`/umbraco/backoffice/entities/members/${key}`)
+		fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this.entityStore.update(data);

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

@@ -11,57 +11,52 @@ import { Subscription } from 'rxjs';
 export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) {
 	static styles = [UUITextStyles, css``];
 
-	@state()
-	private _entityKey = '';
-
-	@state()
-	private _entityType = '';
-
-	@state()
-	private _label = '';
-
-	@state()
-	private _hasChildren = false;
-
 	@state()
 	private _loading = true;
 
-	private _rootSubscription?: Subscription;
-
 	private _treeContext?: UmbTreeContext;
+	private _treeRootSubscription?: Subscription;
+
+	@state()
+	private _items: any[] = [];
 
 	constructor() {
 		super();
 
 		this.consumeContext('umbTreeContext', (treeContext) => {
 			this._treeContext = treeContext;
+			this._observeTreeRoot();
+		});
+	}
 
-			this._loading = true;
+	private _observeTreeRoot() {
+		this._loading = true;
 
-			this._rootSubscription = this._treeContext?.fetchRoot().subscribe((items) => {
-				if (items?.length === 0) return;
-
-				this._loading = false;
-				this._entityKey = items[0].key;
-				this._entityType = items[0].type;
-				this._label = items[0].name;
-				this._hasChildren = items[0].hasChildren;
-			});
+		this._treeRootSubscription = this._treeContext?.fetchRoot().subscribe((items) => {
+			if (items?.length === 0) return;
+			this._items = items;
+			this._loading = false;
 		});
 	}
 
 	disconnectedCallback(): void {
 		super.disconnectedCallback();
-		this._rootSubscription?.unsubscribe();
+		this._treeRootSubscription?.unsubscribe();
 	}
 
 	render() {
-		return html`<umb-tree-item
-			.itemKey=${this._entityKey}
-			.itemType=${this._entityType}
-			.label=${this._label}
-			?hasChildren=${this._hasChildren}
-			.loading=${this._loading}></umb-tree-item> `;
+		return html`
+			${this._items?.map(
+				(item) => html`
+					<umb-tree-item
+						.itemKey=${item.key}
+						.itemType=${item.type}
+						.label=${item.name}
+						?hasChildren=${item.hasChildren}
+						.loading=${this._loading}></umb-tree-item>
+				`
+			)}
+		`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts

@@ -18,13 +18,6 @@ export class UmbNodeStore {
 		);
 	}
 
-	// TODO: temp solution until we know where to get tree data from
-	getAll(): Observable<Array<NodeEntity>> {
-		const nodes = umbNodeData.getAll();
-		this._nodes.next(nodes);
-		return this.nodes;
-	}
-
 	// TODO: Use Node type, to not be specific about Document.
 	// TODO: make sure UI somehow can follow the status of this action.
 	save(data: NodeEntity[]): Promise<void> {

src/Umbraco.Web.UI.Client/src/mocks/data/data.ts

@@ -14,11 +14,6 @@ export class UmbData<T extends { id: number; key: string }> {
 		return this._data.find((item) => item.key === key);
 	}
 
-	// TODO: temp solution until we know where to get tree data from
-	getAll() {
-		return this._data;
-	}
-
 	save(data: Array<T>) {
 		data.forEach((storedItem) => {
 			const foundIndex = this._data.findIndex((item) => item.id === storedItem.id);

src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts

@@ -114,7 +114,7 @@ export const data: Array<Entity> = [
 		type: 'media',
 		icon: 'picture',
 		hasChildren: false,
-		parentKey: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee',
+		parentKey: '',
 	},
 	{
 		id: 2002,
@@ -123,7 +123,7 @@ export const data: Array<Entity> = [
 		name: 'Media 2',
 		icon: 'picture',
 		hasChildren: false,
-		parentKey: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee',
+		parentKey: '',
 	},
 	{
 		id: 1,
@@ -132,7 +132,7 @@ export const data: Array<Entity> = [
 		type: 'document',
 		icon: 'document',
 		hasChildren: false,
-		parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347',
+		parentKey: '',
 	},
 	{
 		id: 2,
@@ -141,7 +141,7 @@ export const data: Array<Entity> = [
 		type: 'document',
 		icon: 'favorite',
 		hasChildren: false,
-		parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347',
+		parentKey: '',
 	},
 	{
 		id: 3,
@@ -150,7 +150,7 @@ export const data: Array<Entity> = [
 		type: 'document',
 		icon: 'document',
 		hasChildren: false,
-		parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347',
+		parentKey: '',
 	},
 ];
 
@@ -160,8 +160,9 @@ class UmbEntityData extends UmbData<Entity> {
 		super(data);
 	}
 
-	getChildren(key: string) {
-		return data.filter((item) => item.parentKey === key);
+	getItems(type = '', parentKey = '') {
+		if (!type) return [];
+		return data.filter((item) => item.type === type && item.parentKey === parentKey);
 	}
 }
 

src/Umbraco.Web.UI.Client/src/mocks/domains/entity.handlers.ts

@@ -3,48 +3,12 @@ import { umbEntityData } from '../data/entity.data';
 
 // TODO: add schema
 export const handlers = [
-	rest.get('/umbraco/backoffice/entities/members/:key', (req, res, ctx) => {
+	rest.get('/umbraco/backoffice/entities', (req, res, ctx) => {
 		console.warn('Please move to schema');
-		const key = req.params.key as string;
-		if (!key) return;
-
-		const entities = umbEntityData.getChildren(key);
-		return res(ctx.status(200), ctx.json(entities));
-	}),
-
-	rest.get('/umbraco/backoffice/entities/member-groups/:key', (req, res, ctx) => {
-		console.warn('Please move to schema');
-		const key = req.params.key as string;
-		if (!key) return;
-
-		const entities = umbEntityData.getChildren(key);
-		return res(ctx.status(200), ctx.json(entities));
-	}),
-
-	rest.get('/umbraco/backoffice/entities/data-types/:key', (req, res, ctx) => {
-		console.warn('Please move to schema');
-		const key = req.params.key as string;
-		if (!key) return;
-
-		const entities = umbEntityData.getChildren(key);
-		return res(ctx.status(200), ctx.json(entities));
-	}),
-
-	rest.get('/umbraco/backoffice/entities/document-types/:key', (req, res, ctx) => {
-		console.warn('Please move to schema');
-		const key = req.params.key as string;
-		if (!key) return;
-
-		const entities = umbEntityData.getChildren(key);
-		return res(ctx.status(200), ctx.json(entities));
-	}),
-
-	rest.get('/umbraco/backoffice/entities/node/:key', (req, res, ctx) => {
-		console.warn('Please move to schema');
-		const key = req.params.key as string;
-		if (!key) return;
-
-		const entities = umbEntityData.getChildren(key);
+		const entityType = req.url.searchParams.get('type') ?? '';
+		const parentKey = req.url.searchParams.get('parentKey') ?? '';
+		const entities = umbEntityData.getItems(entityType, parentKey);
+		console.log(entities);
 		return res(ctx.status(200), ctx.json(entities));
 	}),
 ];

src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts

@@ -366,7 +366,7 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		name: 'Extensions Editor',
 		loader: () => import('./backoffice/editors/extensions/editor-extensions.element'),
 		meta: {
-			entityType: 'extensions',
+			entityType: 'extensionsList',
 		},
 	},
 	{