add stylesheet item repository, source and store

src/Umbraco.Web.UI.Client/src/packages/core/repository/tree-repository.interface.ts

@@ -6,7 +6,7 @@ import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
 export interface UmbTreeRepository<
 	TreeItemType extends EntityTreeItemResponseModel,
-	TreeRootType extends UmbTreeRootModel = UmbTreeRootEntityModel
+	TreeRootType extends UmbTreeRootModel = UmbTreeRootEntityModel,
 > extends UmbApi {
 	requestTreeRoot: () => Promise<{
 		data?: TreeRootType;

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

@@ -0,0 +1,20 @@
+import { UmbStylesheetItemStore } from './stylesheet-item.store.js';
+import { UmbStylesheetItemRepository } from './stylesheet-item.repository.js';
+import type { ManifestRepository, ManifestItemStore } from '@umbraco-cms/backoffice/extension-registry';
+
+export const STYLESHEET_ITEM_REPOSITORY_ALIAS = 'Umb.Repository.StylesheetItem';
+const repository: ManifestRepository = {
+	type: 'repository',
+	alias: STYLESHEET_ITEM_REPOSITORY_ALIAS,
+	name: 'Stylesheet Item Repository',
+	api: UmbStylesheetItemRepository,
+};
+
+const itemStore: ManifestItemStore = {
+	type: 'itemStore',
+	alias: 'Umb.ItemStore.Stylesheet',
+	name: 'Stylesheet Item Store',
+	api: UmbStylesheetItemStore,
+};
+
+export const manifests = [repository, itemStore];

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

@@ -0,0 +1,50 @@
+import { UmbStylesheetItemServerDataSource } from './stylesheet-item.server.data.js';
+import { UMB_STYLESHEET_ITEM_STORE_CONTEXT_TOKEN, UmbStylesheetItemStore } from './stylesheet-item.store.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbItemDataSource, UmbItemRepository, UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+import { StylesheetItemResponseModel, UserItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export class UmbStylesheetItemRepository extends UmbRepositoryBase implements UmbItemRepository<UserItemResponseModel> {
+	#init;
+	#itemSource: UmbItemDataSource<StylesheetItemResponseModel>;
+	#itemStore?: UmbStylesheetItemStore;
+
+	constructor(host: UmbControllerHost) {
+		super(host);
+		this.#itemSource = new UmbStylesheetItemServerDataSource(host);
+
+		this.#init = this.consumeContext(UMB_STYLESHEET_ITEM_STORE_CONTEXT_TOKEN, (instance) => {
+			this.#itemStore = instance;
+		}).asPromise();
+	}
+
+	/**
+	 * Requests the stylesheet items for the given ids
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbStylesheetItemRepository
+	 */
+	async requestItems(ids: Array<string>) {
+		if (!ids) throw new Error('Ids are missing');
+		await this.#init;
+
+		const { data, error } = await this.#itemSource.getItems(ids);
+
+		if (data) {
+			this.#itemStore?.appendItems(data);
+		}
+
+		return { data, error, asObservable: () => this.#itemStore!.items(ids) };
+	}
+
+	/**
+	 * Returns a promise with an observable of the stylesheet items for the given ids
+	 * @param {Array<string>} ids
+	 * @return {Promise<Observable<ItemResponseModelBaseModel[]>>}
+	 * @memberof UmbStylesheetItemRepository
+	 */
+	async items(ids: Array<string>) {
+		await this.#init;
+		return this.#itemStore!.items(ids);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/item/stylesheet-item.server.data.ts

@@ -0,0 +1,40 @@
+import type { UmbItemDataSource } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+import { StylesheetItemResponseModel, StylesheetResource } from '@umbraco-cms/backoffice/backend-api';
+
+/**
+ * A data source for stylesheet items that fetches data from the server
+ * @export
+ * @class UmbStylesheetItemServerDataSource
+ * @implements {UmbItemDataSource}
+ */
+export class UmbStylesheetItemServerDataSource implements UmbItemDataSource<StylesheetItemResponseModel> {
+	#host: UmbControllerHost;
+
+	/**
+	 * Creates an instance of UmbStylesheetItemServerDataSource.
+	 * @param {UmbControllerHost} host
+	 * @memberof UmbStylesheetItemServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Fetches the items for the given paths from the server
+	 * @param {Array<string>} paths
+	 * @return {*}
+	 * @memberof UmbStylesheetItemServerDataSource
+	 */
+	async getItems(paths: Array<string>) {
+		if (!paths) throw new Error('Paths are missing');
+
+		return tryExecuteAndNotify(
+			this.#host,
+			StylesheetResource.getStylesheetItem({
+				path: paths,
+			}),
+		);
+	}
+}

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

@@ -0,0 +1,38 @@
+import type { StylesheetItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbItemStore, UmbStoreBase } from '@umbraco-cms/backoffice/store';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+
+/**
+ * @export
+ * @class UmbStylesheetItemStore
+ * @extends {UmbStoreBase}
+ * @description - Data Store for Stylesheet items
+ */
+
+export class UmbStylesheetItemStore
+	extends UmbStoreBase<StylesheetItemResponseModel>
+	implements UmbItemStore<StylesheetItemResponseModel>
+{
+	/**
+	 * Creates an instance of UmbStylesheetItemStore.
+	 * @param {UmbControllerHostElement} host
+	 * @memberof UmbStylesheetItemStore
+	 */
+	constructor(host: UmbControllerHostElement) {
+		super(
+			host,
+			UMB_STYLESHEET_ITEM_STORE_CONTEXT_TOKEN.toString(),
+			new UmbArrayState<StylesheetItemResponseModel>([], (x) => x.path),
+		);
+	}
+
+	items(ids: Array<string>) {
+		return this._data.asObservablePart((items) => items.filter((item) => ids.includes(item.path ?? '')));
+	}
+}
+
+export const UMB_STYLESHEET_ITEM_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbStylesheetItemStore>(
+	'UmbStylesheetItemStore',
+);

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

@@ -1,5 +1,6 @@
 import { STYLESHEET_REPOSITORY_ALIAS } from '../config.js';
 import { UmbStylesheetRepository } from './stylesheet.repository.js';
+import { manifests as itemManifests } from './item/manifests.js';
 import { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 
 const repository: ManifestRepository = {
@@ -9,4 +10,4 @@ const repository: ManifestRepository = {
 	api: UmbStylesheetRepository,
 };
 
-export const manifests = [repository];
+export const manifests = [repository, itemManifests];

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

@@ -61,13 +61,6 @@ export class UmbStylesheetTreeRepository
 		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;