add template tree store

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

@@ -2,7 +2,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 
-
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../core/modal';
 import { UmbUserStore } from './users/users/user.store';
 import { UmbUserGroupStore } from './users/user-groups/user-group.store';
@@ -12,9 +11,12 @@ import {
 	UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN,
 } from './users/current-user/current-user-history.store';
 
-import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './shared/components/backoffice-frame/backoffice.context';
-import {UmbDocumentTypeDetailStore} from './documents/document-types/document-type.detail.store';
-import {UmbDocumentTypeTreeStore} from './documents/document-types/document-type.tree.store';
+import {
+	UmbBackofficeContext,
+	UMB_BACKOFFICE_CONTEXT_TOKEN,
+} from './shared/components/backoffice-frame/backoffice.context';
+import { UmbDocumentTypeDetailStore } from './documents/document-types/document-type.detail.store';
+import { UmbDocumentTypeTreeStore } from './documents/document-types/document-type.tree.store';
 import { UmbMediaTypeDetailStore } from './media/media-types/media-type.detail.store';
 import { UmbMediaTypeTreeStore } from './media/media-types/media-type.tree.store';
 import { UmbDocumentDetailStore } from './documents/documents/document.detail.store';
@@ -28,11 +30,11 @@ import { UmbDictionaryDetailStore } from './translation/dictionary/dictionary.de
 import { UmbDictionaryTreeStore } from './translation/dictionary/dictionary.tree.store';
 import { UmbDocumentBlueprintDetailStore } from './documents/document-blueprints/document-blueprint.detail.store';
 import { UmbDocumentBlueprintTreeStore } from './documents/document-blueprints/document-blueprint.tree.store';
-
 import { UmbDataTypeDetailStore } from './settings/data-types/data-type.detail.store';
-import { UmbDataTypeTreeStore } from './settings/data-types/data-type.tree.store';
-import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
+import { UmbDataTypeTreeStore } from './settings/data-types/tree/data-type.tree.store';
+import { UmbTemplateTreeStore } from './templating/templates/tree/template.tree.store';
 
+import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
 
 // Domains
 import './settings';
@@ -43,6 +45,7 @@ import './translation';
 import './users';
 import './packages';
 import './search';
+import './templating';
 import './shared';
 import { UmbLitElement } from '@umbraco-cms/element';
 
@@ -91,6 +94,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		new UmbDictionaryTreeStore(this);
 		new UmbDocumentBlueprintDetailStore(this);
 		new UmbDocumentBlueprintTreeStore(this);
+		new UmbTemplateTreeStore(this);
 
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		this.provideContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, new UmbCurrentUserHistoryStore());

src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/tree/template.tree.store.ts

@@ -0,0 +1,69 @@
+import { EntityTreeItem, TemplateResource } from '@umbraco-cms/backend-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+import { UmbContextToken } from '@umbraco-cms/context-api';
+import { createObservablePart, ArrayState } from '@umbraco-cms/observable-api';
+import { UmbStoreBase } from '@umbraco-cms/store';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+
+/**
+ * @export
+ * @class UmbTemplateTreeStore
+ * @extends {UmbStoreBase}
+ * @description - Tree Data Store for Templates
+ */
+export class UmbTemplateTreeStore extends UmbStoreBase {
+	#data = new ArrayState<EntityTreeItem>([], (x) => x.key);
+
+	constructor(host: UmbControllerHostInterface) {
+		super(host, UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN.toString());
+	}
+
+	getTreeRoot() {
+		tryExecuteAndNotify(this._host, TemplateResource.getTreeTemplateRoot({})).then(({ data }) => {
+			if (data) {
+				// TODO: how do we handle if an item has been removed during this session(like in another tab or by another user)?
+				this.#data.append(data.items);
+			}
+		});
+
+		return createObservablePart(this.#data, (items) => items.filter((item) => item.parentKey === null));
+	}
+
+	getTreeItemChildren(key: string) {
+		tryExecuteAndNotify(
+			this._host,
+			TemplateResource.getTreeTemplateChildren({
+				parentKey: key,
+			})
+		).then(({ data }) => {
+			if (data) {
+				// TODO: how do we handle if an item has been removed during this session(like in another tab or by another user)?
+				this.#data.append(data.items);
+			}
+		});
+
+		return createObservablePart(this.#data, (items) => items.filter((item) => item.parentKey === key));
+	}
+
+	getTreeItems(keys: Array<string>) {
+		if (keys?.length > 0) {
+			tryExecuteAndNotify(
+				this._host,
+				TemplateResource.getTreeTemplateItem({
+					key: keys,
+				})
+			).then(({ data }) => {
+				if (data) {
+					// TODO: how do we handle if an item has been removed during this session(like in another tab or by another user)?
+					this.#data.append(data);
+				}
+			});
+		}
+
+		return createObservablePart(this.#data, (items) => items.filter((item) => keys.includes(item.key ?? '')));
+	}
+}
+
+export const UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbTemplateTreeStore>(
+	UmbTemplateTreeStore.name
+);