Merge pull request #1835 from umbraco/bugfix/reload-collection-on-entity-structure-reload-request

Bugfix: Reload collection on entity structure reload request

Author: leekelleher

src/mocks/data/data-type/data-type.data.ts

@@ -831,7 +831,6 @@ export const data: Array<UmbMockDataTypeModel> = [
 			{ alias: 'icon', value: 'icon-layers' },
 			{ alias: 'tabName', value: 'Children' },
 			{ alias: 'showContentFirst', value: true },
-			{ alias: 'useInfiniteEditor', value: true },
 		],
 	},
 	{
@@ -876,7 +875,6 @@ export const data: Array<UmbMockDataTypeModel> = [
 			{ alias: 'icon', value: 'icon-layers' },
 			{ alias: 'tabName', value: 'Items' },
 			{ alias: 'showContentFirst', value: false },
-			{ alias: 'useInfiniteEditor', value: true },
 		],
 	},
 	{

src/packages/core/collection/collection-alias.condition.ts

@@ -1,4 +1,4 @@
-import { UMB_COLLECTION_CONTEXT } from './default/collection-default.context.js';
+import { UMB_COLLECTION_CONTEXT } from './default/index.js';
 import type { CollectionAliasConditionConfig } from './collection-alias.manifest.js';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';

src/packages/core/collection/collection-bulk-action-permission.condition.ts

@@ -1,4 +1,4 @@
-import { UMB_COLLECTION_CONTEXT } from './default/collection-default.context.js';
+import { UMB_COLLECTION_CONTEXT } from './default/index.js';
 import type { CollectionBulkActionPermissionConditionConfig } from './collection-bulk-action-permission.manifest.js';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';

src/packages/core/collection/components/collection-selection-actions.element.ts

@@ -1,9 +1,9 @@
-import { UMB_COLLECTION_CONTEXT } from '../default/collection-default.context.js';
-import type { ManifestEntityBulkAction, MetaEntityBulkAction } from '../../extension-registry/models/index.js';
+import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
 import type { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { ManifestEntityBulkAction, MetaEntityBulkAction } from '@umbraco-cms/backoffice/extension-registry';
 
 function apiArgsMethod(manifest: ManifestEntityBulkAction<MetaEntityBulkAction>) {
 	return [{ meta: manifest.meta }] as unknown[];

src/packages/core/collection/components/collection-view-bundle.element.ts

@@ -1,5 +1,5 @@
-import type { UmbDefaultCollectionContext } from '../default/collection-default.context.js';
-import { UMB_COLLECTION_CONTEXT } from '../default/collection-default.context.js';
+import type { UmbDefaultCollectionContext } from '../default/index.js';
+import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
 import type { UmbCollectionLayoutConfiguration } from '../types.js';
 import { css, html, customElement, state, nothing, repeat, query } from '@umbraco-cms/backoffice/external/lit';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';

src/packages/core/collection/components/pagination/collection-pagination.element.ts

@@ -1,4 +1,4 @@
-import { UMB_COLLECTION_CONTEXT } from '../../default/collection-default.context.js';
+import { UMB_COLLECTION_CONTEXT } from '../../default/index.js';
 import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, nothing, state } from '@umbraco-cms/backoffice/external/lit';

src/packages/core/collection/default/collection-default.context-token.ts

@@ -0,0 +1,4 @@
+import type { UmbDefaultCollectionContext } from './collection-default.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_COLLECTION_CONTEXT = new UmbContextToken<UmbDefaultCollectionContext>('UmbCollectionContext');

src/packages/core/collection/default/collection-default.context.ts

@@ -6,23 +6,31 @@ import type {
 	UmbCollectionContext,
 	UmbCollectionLayoutConfiguration,
 } from '../types.js';
+import type { UmbCollectionFilterModel } from '../collection-filter-model.interface.js';
+import type { UmbCollectionRepository } from '../repository/collection-repository.interface.js';
+import { UMB_COLLECTION_CONTEXT } from './collection-default.context-token.js';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbArrayState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbSelectionManager, UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
 import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
-import type { UmbCollectionFilterModel, UmbCollectionRepository } from '@umbraco-cms/backoffice/collection';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import {
+	UmbRequestReloadChildrenOfEntityEvent,
+	UmbRequestReloadStructureForEntityEvent,
+} from '@umbraco-cms/backoffice/entity-action';
+import type { UmbActionEventContext } from '@umbraco-cms/backoffice/action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
 
 const LOCAL_STORAGE_KEY = 'umb-collection-view';
 
 export class UmbDefaultCollectionContext<
-		CollectionItemType = any,
-		FilterModelType extends UmbCollectionFilterModel = any,
+		CollectionItemType extends { entityType: string; unique: string } = any,
+		FilterModelType extends UmbCollectionFilterModel = UmbCollectionFilterModel,
 	>
 	extends UmbContextBase<UmbDefaultCollectionContext>
 	implements UmbCollectionContext, UmbApi
@@ -34,7 +42,7 @@ export class UmbDefaultCollectionContext<
 	#loading = new UmbObjectState<boolean>(false);
 	public readonly loading = this.#loading.asObservable();
 
-	#items = new UmbArrayState<CollectionItemType>([], (x) => x);
+	#items = new UmbArrayState<CollectionItemType>([], (x) => x.unique);
 	public readonly items = this.#items.asObservable();
 
 	#totalItems = new UmbNumberState(0);
@@ -63,13 +71,42 @@ export class UmbDefaultCollectionContext<
 		this.#initialized ? resolve() : (this.#initResolver = resolve);
 	});
 
+	#actionEventContext: UmbActionEventContext | undefined;
+
 	constructor(host: UmbControllerHost, defaultViewAlias: string, defaultFilter: Partial<FilterModelType> = {}) {
 		super(host, UMB_COLLECTION_CONTEXT);
 
 		this.#defaultViewAlias = defaultViewAlias;
 		this.#defaultFilter = defaultFilter;
 
 		this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
+		this.#listenToEntityEvents();
+	}
+
+	async #listenToEntityEvents() {
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
+			this.#actionEventContext = context;
+
+			context?.removeEventListener(
+				UmbRequestReloadStructureForEntityEvent.TYPE,
+				this.#onReloadStructureRequest as unknown as EventListener,
+			);
+
+			context?.removeEventListener(
+				UmbRequestReloadChildrenOfEntityEvent.TYPE,
+				this.#onReloadChildrenRequest as unknown as EventListener,
+			);
+
+			context?.addEventListener(
+				UmbRequestReloadStructureForEntityEvent.TYPE,
+				this.#onReloadStructureRequest as unknown as EventListener,
+			);
+
+			context?.addEventListener(
+				UmbRequestReloadChildrenOfEntityEvent.TYPE,
+				this.#onReloadChildrenRequest as unknown as EventListener,
+			);
+		});
 	}
 
 	#configured = false;
@@ -222,11 +259,37 @@ export class UmbDefaultCollectionContext<
 
 		localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(layouts));
 	}
-}
 
-export const UMB_COLLECTION_CONTEXT = new UmbContextToken<UmbDefaultCollectionContext>('UmbCollectionContext');
+	#onReloadStructureRequest = (event: UmbRequestReloadStructureForEntityEvent) => {
+		const items = this.#items.getValue();
+		const hasItem = items.some((item) => item.unique === event.getUnique());
+		if (hasItem) {
+			this.requestCollection();
+		}
+	};
 
-/**
- * @deprecated Use UMB_COLLECTION_CONTEXT instead.
- */
-export { UMB_COLLECTION_CONTEXT as UMB_DEFAULT_COLLECTION_CONTEXT };
+	#onReloadChildrenRequest = async (event: UmbRequestReloadChildrenOfEntityEvent) => {
+		// check if the collection is in the same context as the entity from the event
+		const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
+		const unique = entityContext.getUnique();
+		const entityType = entityContext.getEntityType();
+
+		if (unique === event.getUnique() && entityType === event.getEntityType()) {
+			this.requestCollection();
+		}
+	};
+
+	destroy(): void {
+		this.#actionEventContext?.removeEventListener(
+			UmbRequestReloadStructureForEntityEvent.TYPE,
+			this.#onReloadStructureRequest as unknown as EventListener,
+		);
+
+		this.#actionEventContext?.removeEventListener(
+			UmbRequestReloadChildrenOfEntityEvent.TYPE,
+			this.#onReloadChildrenRequest as unknown as EventListener,
+		);
+
+		super.destroy();
+	}
+}

src/packages/core/collection/default/collection-default.element.ts

@@ -1,9 +1,9 @@
-import { UMB_COLLECTION_CONTEXT, UmbDefaultCollectionContext } from './collection-default.context.js';
+import { UmbDefaultCollectionContext } from './collection-default.context.js';
+import { UMB_COLLECTION_CONTEXT } from './collection-default.context-token.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 

src/packages/core/collection/default/index.ts

@@ -0,0 +1,2 @@
+export { UMB_COLLECTION_CONTEXT } from './collection-default.context-token.js';
+export { UmbDefaultCollectionContext } from './collection-default.context.js';