move store crud logic to base class, add interface + add item store interface

src/Umbraco.Web.UI.Client/libs/store/entity-tree-store.ts

@@ -1,49 +1,27 @@
 import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
-import { ArrayState, partialUpdateFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase, UmbTreeStore } from '@umbraco-cms/backoffice/store';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
  * @class UmbEntityTreeStore
  * @extends {UmbStoreBase}
- * @description - General Tree Data Store
+ * @description - Entity Tree Store
  */
-export class UmbEntityTreeStore extends UmbStoreBase implements UmbTreeStore<EntityTreeItemResponseModel> {
-	#data = new ArrayState<EntityTreeItemResponseModel>([], (x) => x.id);
-
-	/**
-	 * Appends items to the store
-	 * @param {Array<EntityTreeItemResponseModel>} items
-	 * @memberof UmbEntityTreeStore
-	 */
-	appendItems(items: Array<EntityTreeItemResponseModel>) {
-		this.#data.append(items);
-	}
-
-	/**
-	 * Updates an item in the store
-	 * @param {string} id
-	 * @param {Partial<EntityTreeItemResponseModel>} data
-	 * @memberof UmbEntityTreeStore
-	 */
-	updateItem(id: string, data: Partial<EntityTreeItemResponseModel>) {
-		this.#data.next(partialUpdateFrozenArray(this.#data.getValue(), data, (entry) => entry.id === id));
-	}
-
-	/**
-	 * Removes an item from the store
-	 * @param {string} id
-	 * @memberof UmbEntityTreeStore
-	 */
-	removeItem(id: string) {
-		this.#data.removeOne(id);
+export class UmbEntityTreeStore
+	extends UmbStoreBase<EntityTreeItemResponseModel>
+	implements UmbTreeStore<EntityTreeItemResponseModel>
+{
+	constructor(host: UmbControllerHostElement, storeAlias: string) {
+		super(host, storeAlias, new ArrayState<EntityTreeItemResponseModel>([], (x) => x.id));
 	}
 
 	/**
 	 * An observable to observe the root items
 	 * @memberof UmbEntityTreeStore
 	 */
-	rootItems = this.#data.getObservablePart((items) => items.filter((item) => item.parentId === null));
+	rootItems = this._data.getObservablePart((items) => items.filter((item) => item.parentId === null));
 
 	/**
 	 * Returns an observable to observe the children of a given parent
@@ -52,7 +30,7 @@ export class UmbEntityTreeStore extends UmbStoreBase implements UmbTreeStore<Ent
 	 * @memberof UmbEntityTreeStore
 	 */
 	childrenOf(parentId: string | null) {
-		return this.#data.getObservablePart((items) => items.filter((item) => item.parentId === parentId));
+		return this._data.getObservablePart((items) => items.filter((item) => item.parentId === parentId));
 	}
 
 	/**
@@ -62,6 +40,6 @@ export class UmbEntityTreeStore extends UmbStoreBase implements UmbTreeStore<Ent
 	 * @memberof UmbEntityTreeStore
 	 */
 	items(ids: Array<string>) {
-		return this.#data.getObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
+		return this._data.getObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
 	}
 }

src/Umbraco.Web.UI.Client/libs/store/file-system-tree.store.ts

@@ -1,49 +1,27 @@
 import { FileSystemTreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
-import { ArrayState, partialUpdateFrozenArray } from '@umbraco-cms/backoffice/observable-api';
+import { ArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbStoreBase, UmbTreeStore } from '@umbraco-cms/backoffice/store';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 
 /**
  * @export
  * @class UmbFileSystemTreeStore
  * @extends {UmbStoreBase}
- * @description - General Tree Data Store
+ * @description - File System Tree Store
  */
-export class UmbFileSystemTreeStore extends UmbStoreBase implements UmbTreeStore<FileSystemTreeItemPresentationModel> {
-	#data = new ArrayState<FileSystemTreeItemPresentationModel>([], (x) => x.path);
-
-	/**
-	 * Appends items to the store
-	 * @param {Array<FileSystemTreeItemPresentationModel>} items
-	 * @memberof UmbFileSystemTreeStore
-	 */
-	appendItems(items: Array<FileSystemTreeItemPresentationModel>) {
-		this.#data.append(items);
-	}
-
-	/**
-	 * Updates an item in the store
-	 * @param {string} path
-	 * @param {Partial<FileSystemTreeItemPresentationModel>} data
-	 * @memberof UmbFileSystemTreeStore
-	 */
-	updateItem(path: string, data: Partial<FileSystemTreeItemPresentationModel>) {
-		this.#data.appendOne(data);
-	}
-
-	/**
-	 * Removes an item from the store
-	 * @param {string} path
-	 * @memberof UmbFileSystemTreeStore
-	 */
-	removeItem(path: string) {
-		this.#data.removeOne(path);
+export class UmbFileSystemTreeStore
+	extends UmbStoreBase<FileSystemTreeItemPresentationModel>
+	implements UmbTreeStore<FileSystemTreeItemPresentationModel>
+{
+	constructor(host: UmbControllerHostElement, storeAlias: string) {
+		super(host, storeAlias, new ArrayState<FileSystemTreeItemPresentationModel>([], (x) => x.path));
 	}
 
 	/**
 	 * An observable to observe the root items
 	 * @memberof UmbFileSystemTreeStore
 	 */
-	rootItems = this.#data.getObservablePart((items) => items.filter((item) => item.path?.includes('/') === false));
+	rootItems = this._data.getObservablePart((items) => items.filter((item) => item.path?.includes('/') === false));
 
 	/**
 	 * Returns an observable to observe the children of a given parent
@@ -52,7 +30,7 @@ export class UmbFileSystemTreeStore extends UmbStoreBase implements UmbTreeStore
 	 * @memberof UmbFileSystemTreeStore
 	 */
 	childrenOf(parentPath: string | null) {
-		return this.#data.getObservablePart((items) => items.filter((item) => item.path?.startsWith(parentPath + '/')));
+		return this._data.getObservablePart((items) => items.filter((item) => item.path?.startsWith(parentPath + '/')));
 	}
 
 	/**
@@ -62,6 +40,6 @@ export class UmbFileSystemTreeStore extends UmbStoreBase implements UmbTreeStore
 	 * @memberof UmbFileSystemTreeStore
 	 */
 	items(paths: Array<string>) {
-		return this.#data.getObservablePart((items) => items.filter((item) => paths.includes(item.path ?? '')));
+		return this._data.getObservablePart((items) => items.filter((item) => paths.includes(item.path ?? '')));
 	}
 }

src/Umbraco.Web.UI.Client/libs/store/item-store.interface.ts

@@ -0,0 +1,7 @@
+import type { Observable } from 'rxjs';
+import { ItemResponseModelBaseModel } from '../backend-api';
+import { UmbStore } from './store.interface';
+
+export interface UmbItemStore<T extends ItemResponseModelBaseModel> extends UmbStore<T> {
+	items: (uniques: Array<string>) => Observable<Array<T>>;
+}

src/Umbraco.Web.UI.Client/libs/store/store-base.ts

@@ -1,9 +1,48 @@
+import { UmbStore } from './store.interface';
 import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
+import { ArrayState, partialUpdateFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 
 // TODO: Make a Store interface?
-export class UmbStoreBase {
-	constructor(protected _host: UmbControllerHostElement, public readonly storeAlias: string) {
+export class UmbStoreBase<StoreItemType> implements UmbStore<StoreItemType> {
+	protected _host: UmbControllerHostElement;
+	protected _data: ArrayState<StoreItemType>;
+
+	public readonly storeAlias: string;
+
+	constructor(_host: UmbControllerHostElement, storeAlias: string, data: ArrayState<StoreItemType>) {
+		this._host = _host;
+		this.storeAlias = storeAlias;
+		this._data = data;
+
 		new UmbContextProviderController(_host, storeAlias, this);
 	}
+
+	/**
+	 * Appends items to the store
+	 * @param {Array<StoreItemType>} items
+	 * @memberof UmbEntityTreeStore
+	 */
+	appendItems(items: Array<StoreItemType>) {
+		this._data.append(items);
+	}
+
+	/**
+	 * Updates an item in the store
+	 * @param {string} id
+	 * @param {Partial<StoreItemType>} data
+	 * @memberof UmbEntityTreeStore
+	 */
+	updateItem(id: string, data: Partial<StoreItemType>) {
+		this._data.next(partialUpdateFrozenArray(this._data.getValue(), data, (entry) => entry.id === id));
+	}
+
+	/**
+	 * Removes an item from the store
+	 * @param {string} id
+	 * @memberof UmbEntityTreeStore
+	 */
+	removeItem(id: string) {
+		this._data.removeOne(id);
+	}
 }

src/Umbraco.Web.UI.Client/libs/store/store.interface.ts

@@ -0,0 +1,5 @@
+export interface UmbStore<T> {
+	appendItems: (items: Array<T>) => void;
+	updateItem: (unique: string, item: Partial<T>) => void;
+	removeItem: (unique: string) => void;
+}

src/Umbraco.Web.UI.Client/libs/store/store.ts

@@ -1,3 +1,4 @@
+// TODO: delete when the last usages are gone
 import type { Observable } from 'rxjs';
 
 export interface UmbDataStoreIdentifiers {

src/Umbraco.Web.UI.Client/libs/store/tree-store.interface.ts

@@ -1,12 +1,10 @@
 import type { Observable } from 'rxjs';
 import { TreeItemPresentationModel } from '../backend-api';
+import { UmbStore } from './store.interface';
 
-export interface UmbTreeStore<T extends TreeItemPresentationModel = any> {
-	appendItems: (items: Array<T>) => void;
-	updateItem: (unique: string, item: Partial<T>) => void;
-	removeItem: (unique: string) => void;
-
+export interface UmbTreeStore<T extends TreeItemPresentationModel = any> extends UmbStore<T> {
 	rootItems: Observable<Array<T>>;
 	childrenOf: (parentUnique: string | null) => Observable<Array<T>>;
+	// TODO: remove this one when all repositories are using an item store
 	items: (uniques: Array<string>) => Observable<Array<T>>;
 }