split tree logic into its own module

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/config.ts

@@ -6,8 +6,6 @@ export const STYLESHEET_FOLDER_EMPTY_ENTITY_TYPE = 'stylesheet-folder-empty';
 
 export const STYLESHEET_REPOSITORY_ALIAS = 'Umb.Repository.Stylesheet';
 
-export const STYLESHEET_TREE_ALIAS = 'Umb.Tree.Stylesheet';
-
 export const UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN_ALIAS = 'Umb.Store.Stylesheet.Tree';
 export const UMB_STYLESHEET_STORE_CONTEXT_TOKEN_ALIAS = 'Umb.Store.Stylesheet';
 

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts

@@ -3,3 +3,4 @@ import { StylesheetResponseModel } from '@umbraco-cms/backoffice/backend-api';
 export type StylesheetDetails = StylesheetResponseModel;
 
 export * from './repository/index.js';
+export { UmbStylesheetTreeRepository } from './tree/index.js';

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/manifests.ts

@@ -1,8 +1,6 @@
-import { STYLESHEET_REPOSITORY_ALIAS, STYLESHEET_TREE_STORE_ALIAS } from '../config.js';
+import { STYLESHEET_REPOSITORY_ALIAS } from '../config.js';
 import { UmbStylesheetRepository } from './stylesheet.repository.js';
-import { UmbStylesheetTreeStore } from './stylesheet.tree.store.js';
-import { ManifestRepository, ManifestTreeStore } from '@umbraco-cms/backoffice/extension-registry';
-
+import { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 
 const repository: ManifestRepository = {
 	type: 'repository',
@@ -11,12 +9,4 @@ const repository: ManifestRepository = {
 	api: UmbStylesheetRepository,
 };
 
-
-const treeStore: ManifestTreeStore = {
-	type: 'treeStore',
-	alias: STYLESHEET_TREE_STORE_ALIAS,
-	name: 'Stylesheet Tree Store',
-	api: UmbStylesheetTreeStore,
-};
-
-export const manifests = [treeStore, repository];
+export const manifests = [repository];

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts

@@ -1,6 +1,4 @@
 import { StylesheetDetails } from '../index.js';
-import { UmbStylesheetTreeStore, UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN } from './stylesheet.tree.store.js';
-import { UmbStylesheetTreeServerDataSource } from './sources/stylesheet.tree.server.data.js';
 import { UmbStylesheetServerDataSource } from './sources/stylesheet.server.data.js';
 import {
 	StylesheetGetFolderResponse,
@@ -13,7 +11,6 @@ import {
 	UmbDataSourceErrorResponse,
 	UmbDetailRepository,
 	UmbFolderRepository,
-	UmbTreeRepository,
 } from '@umbraco-cms/backoffice/repository';
 import {
 	CreateFolderRequestModel,
@@ -21,7 +18,6 @@ import {
 	CreateTextFileViewModelBaseModel,
 	ExtractRichTextStylesheetRulesRequestModel,
 	ExtractRichTextStylesheetRulesResponseModel,
-	FileSystemTreeItemPresentationModel,
 	FolderModelBaseModel,
 	FolderResponseModel,
 	InterpolateRichTextStylesheetRequestModel,
@@ -33,33 +29,24 @@ import {
 	UpdateStylesheetRequestModel,
 	UpdateTextFileViewModelBaseModel,
 } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbTreeRootFileSystemModel } from '@umbraco-cms/backoffice/tree';
 import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
-export class UmbStylesheetRepository extends UmbBaseController
+export class UmbStylesheetRepository
+	extends UmbBaseController
 	implements
-		UmbTreeRepository<FileSystemTreeItemPresentationModel, UmbTreeRootFileSystemModel>,
 		UmbDetailRepository<CreateStylesheetRequestModel, string, UpdateStylesheetRequestModel, StylesheetDetails>,
 		UmbFolderRepository,
 		UmbApi
 {
 	#dataSource;
-	#treeDataSource;
-	#treeStore?: UmbStylesheetTreeStore;
 	#folderDataSource;
-	#init;
 
 	constructor(host: UmbControllerHostElement) {
 		super(host);
 
 		// TODO: figure out how spin up get the correct data source
 		this.#dataSource = new UmbStylesheetServerDataSource(this);
-		this.#treeDataSource = new UmbStylesheetTreeServerDataSource(this);
 		this.#folderDataSource = new UmbStylesheetFolderServerDataSource(this);
-
-		this.#init = this.consumeContext(UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN, (instance) => {
-			this.#treeStore = instance;
-		}).asPromise();
 	}
 
 	//#region FOLDER:
@@ -77,34 +64,34 @@ export class UmbStylesheetRepository extends UmbBaseController
 	async createFolder(
 		folderRequest: CreateFolderRequestModel,
 	): Promise<{ data?: string | undefined; error?: ProblemDetails | undefined }> {
-		await this.#init;
 		const req = {
 			parentPath: folderRequest.parentId,
 			name: folderRequest.name,
 		};
 		const promise = this.#folderDataSource.insert(req);
 		await promise;
-		this.requestTreeItemsOf(folderRequest.parentId ? folderRequest.parentId : null);
+		//this.requestTreeItemsOf(folderRequest.parentId ? folderRequest.parentId : null);
 		return promise;
 	}
+
 	async requestFolder(
 		unique: string,
 	): Promise<{ data?: StylesheetGetFolderResponse | undefined; error?: ProblemDetails | undefined }> {
-		await this.#init;
 		return this.#folderDataSource.get(unique);
 	}
+
 	updateFolder(
 		unique: string,
 		folder: FolderModelBaseModel,
 	): Promise<{ data?: FolderModelBaseModel | undefined; error?: ProblemDetails | undefined }> {
 		throw new Error('Method not implemented.');
 	}
+
 	async deleteFolder(path: string): Promise<{ error?: ProblemDetails | undefined }> {
-		await this.#init;
 		const { data } = await this.requestFolder(path);
 		const promise = this.#folderDataSource.delete(path);
 		await promise;
-		this.requestTreeItemsOf(data?.parentPath ? data?.parentPath : null);
+		//this.requestTreeItemsOf(data?.parentPath ? data?.parentPath : null);
 		return promise;
 	}
 
@@ -121,26 +108,29 @@ export class UmbStylesheetRepository extends UmbBaseController
 
 	async requestById(id: string): Promise<DataSourceResponse<TextFileResponseModelBaseModel | undefined>> {
 		if (!id) throw new Error('id is missing');
-		await this.#init;
 		const { data, error } = await this.#dataSource.get(id);
 		return { data, error };
 	}
+
 	byId(id: string): Promise<Observable<TextFileResponseModelBaseModel | undefined>> {
 		throw new Error('Method not implemented.');
 	}
+
 	async create(data: CreateTextFileViewModelBaseModel): Promise<DataSourceResponse<string>> {
 		const promise = this.#dataSource.insert(data);
 		await promise;
-		this.requestTreeItemsOf(data.parentPath ? data.parentPath : null);
+		//this.requestTreeItemsOf(data.parentPath ? data.parentPath : null);
 		return promise;
 	}
+
 	save(id: string, data: UpdateTextFileViewModelBaseModel): Promise<UmbDataSourceErrorResponse> {
 		return this.#dataSource.update(id, data);
 	}
+
 	delete(id: string): Promise<UmbDataSourceErrorResponse> {
 		const promise = this.#dataSource.delete(id);
 		const parentPath = id.substring(0, id.lastIndexOf('/'));
-		this.requestTreeItemsOf(parentPath ? parentPath : null);
+		//this.requestTreeItemsOf(parentPath ? parentPath : null);
 		return promise;
 	}
 
@@ -179,71 +169,4 @@ export class UmbStylesheetRepository extends UmbBaseController
 	}
 
 	//#endregion
-
-	//#region TREE:
-	async requestTreeRoot() {
-		await this.#init;
-
-		const data = {
-			path: null,
-			type: 'stylesheet-root',
-			name: 'Stylesheets',
-			icon: 'icon-folder',
-			hasChildren: true,
-		};
-
-		return { data };
-	}
-
-	async requestRootTreeItems() {
-		await this.#init;
-
-		const { data, error } = await this.#treeDataSource.getRootItems();
-
-		if (data) {
-			this.#treeStore?.appendItems(data.items);
-		}
-
-		return { data, error };
-	}
-
-	async requestTreeItemsOf(path: string | null) {
-		if (path === undefined) throw new Error('Cannot request tree item with missing path');
-
-		await this.#init;
-
-		const { data, error } = await this.#treeDataSource.getChildrenOf(path);
-
-		if (data) {
-			this.#treeStore!.appendItems(data.items);
-		}
-
-		return { data, error, asObservable: () => this.#treeStore!.childrenOf(path) };
-	}
-
-	async requestItems(paths: Array<string>) {
-		if (!paths) throw new Error('Paths are missing');
-		await this.#init;
-		const { data, error } = await this.#treeDataSource.getItems(paths);
-		return { data, error };
-	}
-
-	async rootTreeItems() {
-		await this.#init;
-		return this.#treeStore!.rootItems;
-	}
-
-	async treeItemsOf(parentPath: string | null) {
-		if (!parentPath) throw new Error('Parent Path is missing');
-		await this.#init;
-		return this.#treeStore!.childrenOf(parentPath);
-	}
-
-	async itemsLegacy(paths: Array<string>) {
-		if (!paths) throw new Error('Paths are missing');
-		await this.#init;
-		return this.#treeStore!.items(paths);
-	}
-
-	//#endregion
 }

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/index.ts

@@ -0,0 +1 @@
+export { UmbStylesheetTreeRepository } from './stylesheet-tree.repository.js';

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/manifests.ts

@@ -1,7 +1,29 @@
-import { STYLESHEET_ENTITY_TYPE, STYLESHEET_REPOSITORY_ALIAS } from '../config.js';
-import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry';
+import { STYLESHEET_ENTITY_TYPE, STYLESHEET_TREE_STORE_ALIAS } from '../config.js';
+import { UmbStylesheetTreeRepository } from './stylesheet-tree.repository.js';
+import { UmbStylesheetTreeStore } from './stylesheet.tree.store.js';
+import type {
+	ManifestRepository,
+	ManifestTree,
+	ManifestTreeItem,
+	ManifestTreeStore,
+} from '@umbraco-cms/backoffice/extension-registry';
 
 export const STYLESHEET_TREE_ALIAS = 'Umb.Tree.Stylesheet';
+export const STYLESHEET_TREE_REPOSITORY_ALIAS = 'Umb.Repository.StylesheetTree';
+
+const treeRepository: ManifestRepository = {
+	type: 'repository',
+	alias: STYLESHEET_TREE_REPOSITORY_ALIAS,
+	name: 'Stylesheet Tree Repository',
+	api: UmbStylesheetTreeRepository,
+};
+
+const treeStore: ManifestTreeStore = {
+	type: 'treeStore',
+	alias: STYLESHEET_TREE_STORE_ALIAS,
+	name: 'Stylesheet Tree Store',
+	api: UmbStylesheetTreeStore,
+};
 
 const tree: ManifestTree = {
 	type: 'tree',
@@ -9,7 +31,7 @@ const tree: ManifestTree = {
 	name: 'Stylesheet Tree',
 	weight: 10,
 	meta: {
-		repositoryAlias: STYLESHEET_REPOSITORY_ALIAS,
+		repositoryAlias: STYLESHEET_TREE_REPOSITORY_ALIAS,
 	},
 };
 
@@ -23,4 +45,4 @@ const treeItem: ManifestTreeItem = {
 	},
 };
 
-export const manifests = [tree, treeItem];
+export const manifests = [treeRepository, treeStore, tree, treeItem];

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts

@@ -0,0 +1,87 @@
+import { UmbStylesheetTreeServerDataSource } from './stylesheet.tree.server.data.js';
+import { UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN, UmbStylesheetTreeStore } from './stylesheet.tree.store.js';
+import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbRepositoryBase, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbTreeRootFileSystemModel } from '@umbraco-cms/backoffice/tree';
+import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbStylesheetTreeRepository
+	extends UmbRepositoryBase
+	implements UmbTreeRepository<FileSystemTreeItemPresentationModel, UmbTreeRootFileSystemModel>
+{
+	#init;
+	#treeDataSource;
+	#treeStore?: UmbStylesheetTreeStore;
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+		this.#treeDataSource = new UmbStylesheetTreeServerDataSource(this);
+
+		this.#init = this.consumeContext(UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN, (instance) => {
+			this.#treeStore = instance;
+		}).asPromise();
+	}
+	async requestTreeRoot() {
+		await this.#init;
+
+		const data = {
+			path: null,
+			type: 'stylesheet-root',
+			name: 'Stylesheets',
+			icon: 'icon-folder',
+			hasChildren: true,
+		};
+
+		return { data };
+	}
+
+	async requestRootTreeItems() {
+		await this.#init;
+
+		const { data, error } = await this.#treeDataSource.getRootItems();
+
+		if (data) {
+			this.#treeStore?.appendItems(data.items);
+		}
+
+		return { data, error };
+	}
+
+	async requestTreeItemsOf(path: string | null) {
+		if (path === undefined) throw new Error('Cannot request tree item with missing path');
+
+		await this.#init;
+
+		const { data, error } = await this.#treeDataSource.getChildrenOf(path);
+
+		if (data) {
+			this.#treeStore!.appendItems(data.items);
+		}
+
+		return { data, error, asObservable: () => this.#treeStore!.childrenOf(path) };
+	}
+
+	async requestItems(paths: Array<string>) {
+		if (!paths) throw new Error('Paths are missing');
+		await this.#init;
+		const { data, error } = await this.#treeDataSource.getItems(paths);
+		return { data, error };
+	}
+
+	async rootTreeItems() {
+		await this.#init;
+		return this.#treeStore!.rootItems;
+	}
+
+	async treeItemsOf(parentPath: string | null) {
+		if (!parentPath) throw new Error('Parent Path is missing');
+		await this.#init;
+		return this.#treeStore!.childrenOf(parentPath);
+	}
+
+	async itemsLegacy(paths: Array<string>) {
+		if (!paths) throw new Error('Paths are missing');
+		await this.#init;
+		return this.#treeStore!.items(paths);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet.tree.server.data.ts

@@ -48,7 +48,7 @@ export class UmbStylesheetTreeServerDataSource implements UmbTreeDataSource<File
 				this.#host,
 				StylesheetResource.getTreeStylesheetChildren({
 					path,
-				})
+				}),
 			);
 		}
 	}
@@ -64,7 +64,7 @@ export class UmbStylesheetTreeServerDataSource implements UmbTreeDataSource<File
 			this.#host,
 			StylesheetResource.getStylesheetItem({
 				path,
-			})
+			}),
 		);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet.tree.store.ts

@@ -20,5 +20,5 @@ export class UmbStylesheetTreeStore extends UmbFileSystemTreeStore {
 }
 
 export const UMB_STYLESHEET_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbStylesheetTreeStore>(
-	'UmbStylesheetTreeStore'
+	'UmbStylesheetTreeStore',
 );