register media store

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

@@ -17,8 +17,6 @@ import {
 } from './shared/components/backoffice-frame/backoffice.context';
 import { UmbMediaTypeDetailStore } from './media/media-types/repository/media-type.detail.store';
 import { UmbMediaTypeTreeStore } from './media/media-types/repository/media-type.tree.store';
-import { UmbMediaDetailStore } from './media/media/repository/media.detail.store';
-import { UmbMediaTreeStore } from './media/media/repository/media.tree.store';
 import { UmbMemberTypeDetailStore } from './members/member-types/repository/member-type.detail.store';
 import { UmbMemberTypeTreeStore } from './members/member-types/repository/member-type.tree.store';
 import { UmbMemberGroupDetailStore } from './members/member-groups/repository/member-group.detail.store';
@@ -85,8 +83,6 @@ export class UmbBackofficeElement extends UmbLitElement {
 		// TODO: find a way this is possible outside this element. It needs to be possible to register stores in extensions
 		this.provideContext(UMB_CURRENT_USER_STORE_CONTEXT_TOKEN, new UmbCurrentUserStore());
 
-		new UmbMediaDetailStore(this);
-		new UmbMediaTreeStore(this);
 		new UmbDataTypeStore(this);
 		new UmbDataTypeTreeStore(this);
 		new UmbUserStore(this);

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/manifests.ts

@@ -1,5 +1,8 @@
 import { UmbMediaRepository } from './media.repository';
+import { UmbMediaStore } from './media.store';
+import { UmbMediaTreeStore } from './media.tree.store';
 import { ManifestRepository } from 'libs/extensions-registry/repository.models';
+import { ManifestStore, ManifestTreeStore } from '@umbraco-cms/extensions-registry';
 
 export const DOCUMENT_REPOSITORY_ALIAS = 'Umb.Repository.Media';
 
@@ -10,4 +13,21 @@ const repository: ManifestRepository = {
 	class: UmbMediaRepository,
 };
 
-export const manifests = [repository];
+export const MEDIA_STORE_ALIAS = 'Umb.Store.Media';
+export const MEDIA_TREE_STORE_ALIAS = 'Umb.Store.MediaTree';
+
+const store: ManifestStore = {
+	type: 'store',
+	alias: MEDIA_STORE_ALIAS,
+	name: 'Media Store',
+	class: UmbMediaStore,
+};
+
+const treeStore: ManifestTreeStore = {
+	type: 'treeStore',
+	alias: MEDIA_TREE_STORE_ALIAS,
+	name: 'Media Tree Store',
+	class: UmbMediaTreeStore,
+};
+
+export const manifests = [store, treeStore, repository];

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.repository.ts

@@ -1,7 +1,7 @@
 import type { RepositoryTreeDataSource } from '../../../../../libs/repository/repository-tree-data-source.interface';
 import { MediaTreeServerDataSource } from './sources/media.tree.server.data';
 import { UmbMediaTreeStore, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN } from './media.tree.store';
-import { UmbMediaDetailStore, UMB_MEDIA_DETAIL_STORE_CONTEXT_TOKEN } from './media.detail.store';
+import { UmbMediaStore, UMB_MEDIA_DETAIL_STORE_CONTEXT_TOKEN } from './media.store';
 import { UmbMediaDetailServerDataSource } from './sources/media.detail.server.data';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { UmbContextConsumerController } from '@umbraco-cms/context-api';
@@ -26,7 +26,7 @@ export class UmbMediaRepository implements UmbTreeRepository, UmbDetailRepositor
 	#treeStore?: UmbMediaTreeStore;
 
 	#detailDataSource: UmbMediaDetailServerDataSource;
-	#detailStore?: UmbMediaDetailStore;
+	#detailStore?: UmbMediaStore;
 
 	#notificationContext?: UmbNotificationContext;
 

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.store.ts

@@ -6,26 +6,26 @@ import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 /**
  * @export
- * @class UmbMediaDetailStore
+ * @class UmbMediaStore
  * @extends {UmbStoreBase}
  * @description - Data Store for Template Details
  */
-export class UmbMediaDetailStore extends UmbStoreBase {
+export class UmbMediaStore extends UmbStoreBase {
 	#data = new ArrayState<MediaDetails>([], (x) => x.key);
 
 	/**
-	 * Creates an instance of UmbMediaDetailStore.
+	 * Creates an instance of UmbMediaStore.
 	 * @param {UmbControllerHostInterface} host
-	 * @memberof UmbMediaDetailStore
+	 * @memberof UmbMediaStore
 	 */
 	constructor(host: UmbControllerHostInterface) {
-		super(host, UmbMediaDetailStore.name);
+		super(host, UmbMediaStore.name);
 	}
 
 	/**
 	 * Append a media to the store
 	 * @param {MediaDetails} media
-	 * @memberof UmbMediaDetailStore
+	 * @memberof UmbMediaStore
 	 */
 	append(media: MediaDetails) {
 		this.#data.append([media]);
@@ -34,11 +34,11 @@ export class UmbMediaDetailStore extends UmbStoreBase {
 	/**
 	 * Removes media in the store with the given uniques
 	 * @param {string[]} uniques
-	 * @memberof UmbMediaDetailStore
+	 * @memberof UmbMediaStore
 	 */
 	remove(uniques: string[]) {
 		this.#data.remove(uniques);
 	}
 }
 
-export const UMB_MEDIA_DETAIL_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaDetailStore>(UmbMediaDetailStore.name);
+export const UMB_MEDIA_DETAIL_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaStore>(UmbMediaStore.name);

src/Umbraco.Web.UI.Client/src/backoffice/media/media/repository/media.tree.store.ts

@@ -1,17 +1,16 @@
 import { EntityTreeItemModel } from '@umbraco-cms/backend-api';
 import { UmbContextToken } from '@umbraco-cms/context-api';
 import { ArrayState } from '@umbraco-cms/observable-api';
-import { UmbStoreBase } from '@umbraco-cms/store';
+import { UmbTreeStoreBase } from '@umbraco-cms/store';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
 /**
  * @export
  * @class UmbMediaTreeStore
- * @extends {UmbStoreBase}
- * @description - Tree Data Store for Templates
+ * @extends {UmbTreeStoreBase}
+ * @description - Tree Data Store for Media
  */
-// TODO: consider if tree store could be turned into a general EntityTreeStore class?
-export class UmbMediaTreeStore extends UmbStoreBase {
+export class UmbMediaTreeStore extends UmbTreeStoreBase {
 	#data = new ArrayState<EntityTreeItemModel>([], (x) => x.key);
 
 	/**
@@ -22,70 +21,6 @@ export class UmbMediaTreeStore extends UmbStoreBase {
 	constructor(host: UmbControllerHostInterface) {
 		super(host, UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN.toString());
 	}
-
-	/**
-	 * Appends items to the store
-	 * @param {Array<EntityTreeItemModel>} items
-	 * @memberof UmbMediaTreeStore
-	 */
-	appendItems(items: Array<EntityTreeItemModel>) {
-		this.#data.append(items);
-	}
-
-	/**
-	 * Updates an item in the store
-	 * @param {string} key
-	 * @param {Partial<EntityTreeItemModel>} data
-	 * @memberof UmbMediaTreeStore
-	 */
-	updateItem(key: string, data: Partial<EntityTreeItemModel>) {
-		const entries = this.#data.getValue();
-		const entry = entries.find((entry) => entry.key === key);
-
-		if (entry) {
-			this.#data.appendOne({ ...entry, ...data });
-		}
-	}
-
-	/**
-	 * Removes an item from the store
-	 * @param {string} key
-	 * @memberof UmbMediaTreeStore
-	 */
-	removeItem(key: string) {
-		const entries = this.#data.getValue();
-		const entry = entries.find((entry) => entry.key === key);
-
-		if (entry) {
-			this.#data.remove([key]);
-		}
-	}
-
-	/**
-	 * An observable to observe the root items
-	 * @memberof UmbMediaTreeStore
-	 */
-	rootItems = this.#data.getObservablePart((items) => items.filter((item) => item.parentKey === null));
-
-	/**
-	 * Returns an observable to observe the children of a given parent
-	 * @param {(string | null)} parentKey
-	 * @return {*}
-	 * @memberof UmbMediaTreeStore
-	 */
-	childrenOf(parentKey: string | null) {
-		return this.#data.getObservablePart((items) => items.filter((item) => item.parentKey === parentKey));
-	}
-
-	/**
-	 * Returns an observable to observe the items with the given keys
-	 * @param {Array<string>} keys
-	 * @return {*}
-	 * @memberof UmbMediaTreeStore
-	 */
-	items(keys: Array<string>) {
-		return this.#data.getObservablePart((items) => items.filter((item) => keys.includes(item.key ?? '')));
-	}
 }
 
 export const UMB_MEDIA_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbMediaTreeStore>(UmbMediaTreeStore.name);