setTargetTakeSize to low when Collection parent

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts

@@ -47,18 +47,18 @@ export abstract class UmbTreeItemContextBase<
 	#path = new UmbStringState('');
 	readonly path = this.#path.asObservable();
 
-	#treeItemChildrenManager = new UmbTreeItemChildrenManager<TreeItemType, TreeRootType>(this);
-	public readonly childItems = this.#treeItemChildrenManager.children;
-	public readonly hasChildren = this.#treeItemChildrenManager.hasChildren;
-	public readonly foldersOnly = this.#treeItemChildrenManager.foldersOnly;
-	public readonly pagination = this.#treeItemChildrenManager.offsetPagination;
-	public readonly targetPagination = this.#treeItemChildrenManager.targetPagination;
-	public readonly isLoading = this.#treeItemChildrenManager.isLoading;
-	public readonly isLoadingPrevChildren = this.#treeItemChildrenManager.isLoadingPrevChildren;
-	public readonly isLoadingNextChildren = this.#treeItemChildrenManager.isLoadingNextChildren;
+	protected readonly _treeItemChildrenManager = new UmbTreeItemChildrenManager<TreeItemType, TreeRootType>(this);
+	public readonly childItems = this._treeItemChildrenManager.children;
+	public readonly hasChildren = this._treeItemChildrenManager.hasChildren;
+	public readonly foldersOnly = this._treeItemChildrenManager.foldersOnly;
+	public readonly pagination = this._treeItemChildrenManager.offsetPagination;
+	public readonly targetPagination = this._treeItemChildrenManager.targetPagination;
+	public readonly isLoading = this._treeItemChildrenManager.isLoading;
+	public readonly isLoadingPrevChildren = this._treeItemChildrenManager.isLoadingPrevChildren;
+	public readonly isLoadingNextChildren = this._treeItemChildrenManager.isLoadingNextChildren;
 
 	#treeItemExpansionManager = new UmbTreeItemTargetExpansionManager<TreeItemType, TreeRootType>(this, {
-		childrenManager: this.#treeItemChildrenManager,
+		childrenManager: this._treeItemChildrenManager,
 		targetPaginationManager: this.targetPagination,
 	});
 	isOpen = this.#treeItemExpansionManager.isExpanded;
@@ -76,7 +76,7 @@ export abstract class UmbTreeItemContextBase<
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_TREE_ITEM_CONTEXT);
 		// TODO: Get take size from Tree context
-		this.#treeItemChildrenManager.setTakeSize(50);
+		this._treeItemChildrenManager.setTakeSize(50);
 		this.#consumeContexts();
 		window.addEventListener('navigationend', this.#debouncedCheckIsActive);
 	}
@@ -131,7 +131,7 @@ export abstract class UmbTreeItemContextBase<
 		if (!treeItem.entityType) throw new Error('Could not create tree item context, tree item type is missing');
 		this.entityType = treeItem.entityType;
 
-		this.#treeItemChildrenManager.setTreeItem(treeItem);
+		this._treeItemChildrenManager.setTreeItem(treeItem);
 		this.#treeItemExpansionManager.setTreeItem(treeItem);
 		this.#treeItemEntityActionManager.setTreeItem(treeItem);
 
@@ -155,31 +155,31 @@ export abstract class UmbTreeItemContextBase<
 	 * @memberof UmbTreeItemContextBase
 	 * @returns {Promise<void>}
 	 */
-	public loadChildren = (): Promise<void> => this.#treeItemChildrenManager.loadChildren();
+	public loadChildren = (): Promise<void> => this._treeItemChildrenManager.loadChildren();
 
-	public reloadChildren = (): Promise<void> => this.#treeItemChildrenManager.reloadChildren();
+	public reloadChildren = (): Promise<void> => this._treeItemChildrenManager.reloadChildren();
 
 	/**
 	 * Load more children of the tree item
 	 * @deprecated Use `loadNextItems` instead. Will be removed in v18.0.0.
 	 * @memberof UmbTreeItemContextBase
 	 * @returns {Promise<void>}
 	 */
-	public loadMore = (): Promise<void> => this.#treeItemChildrenManager.loadNextChildren();
+	public loadMore = (): Promise<void> => this._treeItemChildrenManager.loadNextChildren();
 
 	/**
 	 * Load previous items of the tree item
 	 * @memberof UmbTreeItemContextBase
 	 * @returns {Promise<void>}
 	 */
-	public loadPrevItems = (): Promise<void> => this.#treeItemChildrenManager.loadPrevChildren();
+	public loadPrevItems = (): Promise<void> => this._treeItemChildrenManager.loadPrevChildren();
 
 	/**
 	 * Load next items of the tree item
 	 * @memberof UmbTreeItemContextBase
 	 * @returns {Promise<void>}
 	 */
-	public loadNextItems = (): Promise<void> => this.#treeItemChildrenManager.loadNextChildren();
+	public loadNextItems = (): Promise<void> => this._treeItemChildrenManager.loadNextChildren();
 
 	public toggleContextMenu() {
 		if (!this.getTreeItem() || !this.entityType || this.unique === undefined) {
@@ -302,7 +302,7 @@ export abstract class UmbTreeItemContextBase<
 		this.observe(
 			this.treeContext?.foldersOnly,
 			(foldersOnly) => {
-				this.#treeItemChildrenManager.setFoldersOnly(foldersOnly ?? false);
+				this._treeItemChildrenManager.setFoldersOnly(foldersOnly ?? false);
 			},
 			'observeFoldersOnly',
 		);

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-children.manager.ts

@@ -60,6 +60,9 @@ export class UmbTreeItemChildrenManager<
 	public readonly isLoadingNextChildren = this.#isLoadingNextChildren.asObservable();
 
 	#takeSize: number = 50;
+	#takeBeforeTarget?: number;
+	#takeAfterTarget?: number;
+
 	#actionEventContext?: typeof UMB_ACTION_EVENT_CONTEXT.TYPE;
 
 	#treeContext?: typeof UMB_TREE_CONTEXT.TYPE;
@@ -88,6 +91,11 @@ export class UmbTreeItemChildrenManager<
 		this.targetPagination.setTakeSize(size);
 	}
 
+	public setTargetTakeSize(before: number | undefined, after: number | undefined): void {
+		this.#takeBeforeTarget = before;
+		this.#takeAfterTarget = after;
+	}
+
 	public getTakeSize(): number {
 		return this.#takeSize;
 	}
@@ -232,10 +240,16 @@ export class UmbTreeItemChildrenManager<
 						 Currently we use 5, but this could be anything that feels "right".
 						 When reloading from target when want to retrieve the same number of items that a currently loaded
 						*/
-						takeBefore: reload ? this.targetPagination.getNumberOfCurrentItemsBeforeBaseTarget() : 5,
+						takeBefore: reload
+							? this.targetPagination.getNumberOfCurrentItemsBeforeBaseTarget()
+							: this.#takeBeforeTarget !== undefined
+								? this.#takeBeforeTarget
+								: 5,
 						takeAfter: reload
 							? this.targetPagination.getNumberOfCurrentItemsAfterBaseTarget()
-							: this.targetPagination.getTakeSize(),
+							: this.#takeAfterTarget !== undefined
+								? this.#takeAfterTarget
+								: this.targetPagination.getTakeSize(),
 					}
 				: undefined;
 
@@ -277,8 +291,8 @@ export class UmbTreeItemChildrenManager<
 				this.targetPagination.setBaseTarget(newBaseTarget);
 				this.#loadChildren();
 			} else {
-				/* 
-					If we can't find a new base target we reload the children from the top. 
+				/*
+					If we can't find a new base target we reload the children from the top.
 					We cancel the base target and load using skip/take pagination instead.
 					This can happen if deep linked to a non existing item or all retries have failed.
 				*/
@@ -354,8 +368,8 @@ export class UmbTreeItemChildrenManager<
 			if (newStartTarget) {
 				this.#loadPrevItemsFromTarget();
 			} else {
-				/* 
-					If we can't find a new end target we reload the children from the top. 
+				/*
+					If we can't find a new end target we reload the children from the top.
 					We cancel the base target and load using skip/take pagination instead.
 				*/
 				this.#resetChildren();
@@ -443,8 +457,8 @@ export class UmbTreeItemChildrenManager<
 			if (newEndTarget) {
 				this.#loadNextItemsFromTarget();
 			} else {
-				/* 
-					If we can't find a new end target we reload the children from the top. 
+				/*
+					If we can't find a new end target we reload the children from the top.
 					We cancel the base target and load using skip/take pagination instead.
 				*/
 				this.#resetChildren();

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.context.ts

@@ -32,6 +32,17 @@ export class UmbDocumentTreeItemContext extends UmbDefaultTreeItemContext<
 	#asMenu = false;
 	setAsMenu(value: boolean) {
 		this.#asMenu = value;
+		if (this.#asMenu) {
+			this.observe(
+				this.hasCollection,
+				(hasCollection) => {
+					if (hasCollection) {
+						this._treeItemChildrenManager.setTargetTakeSize(2, 2);
+					}
+				},
+				'_whenMenuObserveHasCollection',
+			);
+		}
 	}
 	getAsMenu(): boolean {
 		return this.#asMenu;