load document types tree

src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts

@@ -38,7 +38,7 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon
 	];
 
 	@property()
-	id!: string;
+	entityKey!: string;
 
 	@state()
 	private _documentType?: DocumentTypeEntity;
@@ -74,7 +74,7 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon
 
 		// TODO: This should be done in a better way, but for now it works.
 		this._documentTypeStoreSubscription = this._documentTypeStore
-			?.getById(parseInt(this.id))
+			?.getByKey(this.entityKey)
 			.subscribe((documentType) => {
 				if (!documentType) return; // TODO: Handle nicely if there is no document type
 

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

@@ -1,22 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
-import '../shared/tree-navigator.element';
-
-@customElement('umb-document-type-tree')
-export class UmbDocumentTypeTree extends LitElement {
-	static styles = [UUITextStyles, css``];
-
-	@property({ type: String })
-	public alias = '';
-
-	render() {
-		return html`<umb-tree-navigator .label=${this.alias}></umb-tree-navigator>`;
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-document-type-tree': UmbDocumentTypeTree;
-	}
-}

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

@@ -0,0 +1,39 @@
+import { map } from 'rxjs';
+import { UmbEntityStore } from '../../../core/stores/entity.store';
+import { UmbTreeContext } from '../tree.context';
+import type { ManifestTree } from '../../../core/models';
+
+export class UmbTreeDocumentTypesContext implements UmbTreeContext {
+	public tree: ManifestTree;
+	public entityStore: UmbEntityStore;
+
+	constructor(tree: ManifestTree, entityStore: UmbEntityStore) {
+		this.tree = tree;
+		this.entityStore = entityStore;
+	}
+
+	public fetchRoot() {
+		const data = {
+			id: -1,
+			key: '055a17d0-525a-4d06-9f75-92dc174ab0bd',
+			name: 'Document Types',
+			hasChildren: true,
+			type: 'documentType',
+			icon: 'favorite',
+			parentKey: '',
+		};
+		this.entityStore.update([data]);
+		return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key)));
+	}
+
+	public fetchChildren(key: string) {
+		// TODO: figure out url structure
+		fetch(`/umbraco/backoffice/trees/document-types/${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/document-types/tree-document-types.element.ts

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../core/context';
+import { UmbEntityStore } from '../../../core/stores/entity.store';
+import { UmbTreeDocumentTypesContext } from './tree-document-types.context';
+import type { ManifestTree } from '../../../core/models';
+
+import '../shared/tree-navigator.element';
+
+@customElement('umb-document-type-tree')
+export class UmbDocumentTypeTree extends UmbContextConsumerMixin(UmbContextProviderMixin(LitElement)) {
+	static styles = [UUITextStyles, css``];
+
+	@property({ type: String })
+	public alias = '';
+
+	@property({ attribute: false })
+	public tree?: ManifestTree;
+
+	private _entityStore?: UmbEntityStore;
+	private _treeContext?: UmbTreeDocumentTypesContext;
+
+	constructor() {
+		super();
+
+		this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => {
+			this._entityStore = entityStore;
+			if (!this.tree || !this._entityStore) return;
+
+			this._treeContext = new UmbTreeDocumentTypesContext(this.tree, this._entityStore);
+			this.provideContext('umbTreeContext', this._treeContext);
+		});
+	}
+
+	render() {
+		return html`<umb-tree-navigator .label=${this.alias}></umb-tree-navigator>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-type-tree': UmbDocumentTypeTree;
+	}
+}

src/Umbraco.Web.UI.Client/src/core/stores/document-type.store.ts

@@ -7,10 +7,10 @@ export class UmbDocumentTypeStore {
 	);
 	public readonly documentTypes: Observable<Array<DocumentTypeEntity>> = this._documentTypes.asObservable();
 
-	getById(id: number): Observable<DocumentTypeEntity | null> {
+	getByKey(key: string): Observable<DocumentTypeEntity | null> {
 		// TODO: use Fetcher API.
 		// TODO: only fetch if the data type is not in the store?
-		fetch(`/umbraco/backoffice/document-type/${id}`)
+		fetch(`/umbraco/backoffice/document-type/${key}`)
 			.then((res) => res.json())
 			.then((data) => {
 				this._updateStore(data);
@@ -19,7 +19,7 @@ export class UmbDocumentTypeStore {
 		return this.documentTypes.pipe(
 			map(
 				(documentTypes: Array<DocumentTypeEntity>) =>
-					documentTypes.find((node: DocumentTypeEntity) => node.id === id) || null
+					documentTypes.find((documentType: DocumentTypeEntity) => documentType.key === key) || null
 			)
 		);
 	}
@@ -53,7 +53,7 @@ export class UmbDocumentTypeStore {
 		const updated: DocumentTypeEntity[] = [...storedDocumentTypes];
 
 		fetchedDocumentTypes.forEach((fetchedDocumentType) => {
-			const index = storedDocumentTypes.map((storedNode) => storedNode.id).indexOf(fetchedDocumentType.id);
+			const index = storedDocumentTypes.map((storedNode) => storedNode.key).indexOf(fetchedDocumentType.key);
 
 			if (index !== -1) {
 				// If the data type is already in the store, update it

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

@@ -91,6 +91,22 @@ export const data: Array<Entity> = [
 		hasChildren: false,
 		type: 'dataType',
 	},
+	{
+		id: 99,
+		key: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
+		name: 'Document Type 1',
+		type: 'documentType',
+		hasChildren: false,
+		parentKey: '055a17d0-525a-4d06-9f75-92dc174ab0bd',
+	},
+	{
+		id: 100,
+		key: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
+		name: 'Document Type 2',
+		type: 'documentType',
+		hasChildren: false,
+		parentKey: '055a17d0-525a-4d06-9f75-92dc174ab0bd',
+	},
 ];
 
 // Temp mocked database

src/Umbraco.Web.UI.Client/src/mocks/domains/document-type.handlers.ts

@@ -4,12 +4,11 @@ import { DocumentTypeEntity, umbDocumentTypeData } from '../data/document-type.d
 
 // TODO: add schema
 export const handlers = [
-	rest.get('/umbraco/backoffice/document-type/:id', (req, res, ctx) => {
-		const id = req.params.id as string;
-		if (!id) return;
+	rest.get('/umbraco/backoffice/document-type/:key', (req, res, ctx) => {
+		const key = req.params.key as string;
+		if (!key) return;
 
-		const int = parseInt(id);
-		const document = umbDocumentTypeData.getById(int);
+		const document = umbDocumentTypeData.getByKey(key);
 
 		return res(ctx.status(200), ctx.json([document]));
 	}),

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

@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import { Entity, umbEntityData } from '../data/entity.data';
+import { umbEntityData } from '../data/entity.data';
 
 // TODO: add schema
 export const handlers = [
@@ -29,4 +29,13 @@ export const handlers = [
 		const entities = umbEntityData.getChildren(key);
 		return res(ctx.status(200), ctx.json(entities));
 	}),
+
+	rest.get('/umbraco/backoffice/trees/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));
+	}),
 ];

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

@@ -259,13 +259,13 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 		alias: 'Umb.Tree.DocumentTypes',
 		name: 'Document Types Tree',
 		elementName: 'umb-document-type-tree',
-		loader: () => import('./backoffice/tree/document-types/document-type-tree.element'),
+		loader: () => import('./backoffice/tree/document-types/tree-document-types.element'),
 		meta: {
 			pathname: 'document-types',
 			editor: 'Umb.Editor.DocumentType',
 			label: 'Document Types',
 			weight: -10,
-			sections: ['Umb.Section.Content', 'Umb.Section.Settings'],
+			sections: ['Umb.Section.Settings'],
 		},
 	},
 	{
@@ -315,13 +315,19 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
 	{
 		type: 'editor',
 		alias: 'Umb.Editor.MemberGroup',
-		name: 'Member Group',
+		name: 'Member Group Editor',
 		loader: () => import('./backoffice/editors/member-group/editor-member-group.element'),
 	},
 	{
 		type: 'editor',
 		alias: 'Umb.Editor.DataType',
-		name: 'Member Group',
+		name: 'Data Type Editor',
 		loader: () => import('./backoffice/editors/data-type/editor-data-type.element'),
 	},
+	{
+		type: 'editor',
+		alias: 'Umb.Editor.DocumentType',
+		name: 'Document Type Editor',
+		loader: () => import('./backoffice/editors/document-type/editor-document-type.element'),
+	},
 ];