item store

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/media-type-item.store.ts

@@ -0,0 +1,38 @@
+import { MediaTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { 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 UmbMediaTypeItemStore
+ * @extends {UmbStoreBase}
+ * @description - Data Store for Media Type items
+ */
+
+export class UmbMediaTypeItemStore
+	extends UmbStoreBase<MediaTypeItemResponseModel>
+	implements UmbItemStore<MediaTypeItemResponseModel>
+{
+	/**
+	 * Creates an instance of UmbMediaTypeItemStore.
+	 * @param {UmbControllerHostElement} host
+	 * @memberof UmbMediaTypeItemStore
+	 */
+	constructor(host: UmbControllerHostElement) {
+		super(
+			host,
+			UMB_MEDIA_TYPE_ITEM_STORE_CONTEXT_TOKEN.toString(),
+			new UmbArrayState<MediaTypeItemResponseModel>([], (x) => x.id),
+		);
+	}
+
+	items(ids: Array<string>) {
+		return this._data.asObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
+	}
+}
+
+export const UMB_MEDIA_TYPE_ITEM_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaTypeItemStore>(
+	'UmbMediaTypeItemStore',
+);

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/media-type.detail.store.ts

@@ -19,6 +19,10 @@ export class UmbMediaTypeStore extends UmbStoreBase {
 		);
 	}
 
+	byId(id: MediaTypeResponseModel['id']) {
+		return this._data.asObservablePart((x) => x.find((y) => y.id === id));
+	}
+
 	append(mediaType: MediaTypeResponseModel) {
 		this._data.append([mediaType]);
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/media-type.repository.ts

@@ -2,18 +2,33 @@ import { UmbMediaTypeTreeStore, UMB_MEDIA_TYPE_TREE_STORE_CONTEXT_TOKEN } from '
 import { UmbMediaTypeDetailServerDataSource } from './sources/media-type.detail.server.data.js';
 import { UmbMediaTypeStore, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN } from './media-type.detail.store.js';
 import { UmbMediaTypeTreeServerDataSource } from './sources/media-type.tree.server.data.js';
+import { UmbMediaTypeItemStore } from './media-type-item.store.js';
+import { UmbMediaTypeItemServerDataSource } from './sources/media-type-item.server.data.js';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
-import { UmbTreeRepository, UmbTreeDataSource } from '@umbraco-cms/backoffice/repository';
+import {
+	UmbTreeRepository,
+	UmbTreeDataSource,
+	UmbDataSource,
+	UmbItemRepository,
+	UmbDetailRepository,
+	UmbItemDataSource,
+} from '@umbraco-cms/backoffice/repository';
 import {
 	CreateMediaTypeRequestModel,
-	EntityTreeItemResponseModel,
+	FolderTreeItemResponseModel,
+	MediaTypeItemResponseModel,
 	MediaTypeResponseModel,
 	UpdateMediaTypeRequestModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
-export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemResponseModel> {
+export class UmbMediaTypeRepository
+	implements
+		UmbItemRepository<MediaTypeItemResponseModel>,
+		UmbTreeRepository<FolderTreeItemResponseModel>,
+		UmbDetailRepository<CreateMediaTypeRequestModel, any, UpdateMediaTypeRequestModel, MediaTypeResponseModel>
+{
 	#init!: Promise<unknown>;
 
 	#host: UmbControllerHostElement;
@@ -21,9 +36,12 @@ export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemR
 	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbMediaTypeTreeStore;
 
-	#detailSource: UmbMediaTypeDetailServerDataSource;
+	#detailSource: UmbDataSource<CreateMediaTypeRequestModel, any, UpdateMediaTypeRequestModel, MediaTypeResponseModel>;
 	#detailStore?: UmbMediaTypeStore;
 
+	#itemSource: UmbItemDataSource<MediaTypeItemResponseModel>;
+	#itemStore?: UmbMediaTypeItemStore;
+
 	#notificationContext?: UmbNotificationContext;
 
 	constructor(host: UmbControllerHostElement) {
@@ -32,6 +50,7 @@ export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemR
 		// TODO: figure out how spin up get the correct data source
 		this.#treeSource = new UmbMediaTypeTreeServerDataSource(this.#host);
 		this.#detailSource = new UmbMediaTypeDetailServerDataSource(this.#host);
+		this.#itemSource = new UmbMediaTypeItemServerDataSource(this.#host);
 
 		this.#init = Promise.all([
 			new UmbContextConsumerController(this.#host, UMB_MEDIA_TYPE_STORE_CONTEXT_TOKEN, (instance) => {
@@ -88,6 +107,12 @@ export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemR
 		return { data, error, asObservable: () => this.#treeStore!.childrenOf(parentId) };
 	}
 
+	async byId(id: string) {
+		if (!id) throw new Error('Key is missing');
+		await this.#init;
+		return this.#detailStore!.byId(id);
+	}
+
 	async requestItemsLegacy(ids: Array<string>) {
 		await this.#init;
 
@@ -117,9 +142,10 @@ export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemR
 
 	// DETAILS
 
-	async createScaffold() {
+	async createScaffold(parentId: string | null) {
+		if (parentId === undefined) throw new Error('Parent id is missing');
 		await this.#init;
-		return this.#detailSource.createScaffold();
+		return this.#detailSource.createScaffold(parentId);
 	}
 
 	async requestById(id: string) {
@@ -137,6 +163,24 @@ export class UmbMediaTypeRepository implements UmbTreeRepository<EntityTreeItemR
 		return { data, error };
 	}
 
+	async requestItems(ids: Array<string>) {
+		if (!ids) throw new Error('Keys 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) };
+	}
+
+	async items(ids: Array<string>) {
+		await this.#init;
+		return this.#itemStore!.items(ids);
+	}
+
 	async delete(id: string) {
 		await this.#init;
 		return this.#detailSource.delete(id);

src/Umbraco.Web.UI.Client/src/packages/media/media-types/repository/sources/media-type-item.server.data.ts

@@ -0,0 +1,39 @@
+import type { UmbItemDataSource } from '@umbraco-cms/backoffice/repository';
+import { MediaTypeItemResponseModel, MediaTypeResource } from '@umbraco-cms/backoffice/backend-api';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+/**
+ * A data source for Media Type items that fetches data from the server
+ * @export
+ * @class UmbMediaTypeItemServerDataSource
+ * @implements {DocumentTreeDataSource}
+ */
+export class UmbMediaTypeItemServerDataSource implements UmbItemDataSource<MediaTypeItemResponseModel> {
+	#host: UmbControllerHostElement;
+
+	/**
+	 * Creates an instance of UmbMediaTypeItemServerDataSource.
+	 * @param {UmbControllerHostElement} host
+	 * @memberof UmbMediaTypeItemServerDataSource
+	 */
+	constructor(host: UmbControllerHostElement) {
+		this.#host = host;
+	}
+
+	/**
+	 * Fetches the items for the given ids from the server
+	 * @param {Array<string>} ids
+	 * @return {*}
+	 * @memberof UmbMediaTypeItemServerDataSource
+	 */
+	async getItems(ids: Array<string>) {
+		if (!ids) throw new Error('Ids are missing');
+		return tryExecuteAndNotify(
+			this.#host,
+			MediaTypeResource.getMediaTypeItem({
+				id: ids,
+			}),
+		);
+	}
+}