@acorex/components 22.4.29 → 22.4.31

package/fesm2022/acorex-components-lookup.mjs

@@ -1,4 +1,4 @@
-import { AXDataSource, retryFrames, scrollNearestIntoView, AXListDataSource, NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXDataSource, retryFrames, scrollNearestIntoView, NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
 import { AXButtonComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/button';
 import { AXCheckBoxComponent } from '@acorex/components/check-box';
 import { AXChipsComponent } from '@acorex/components/chips';
@@ -18,9 +18,9 @@ import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigat
 import { AXHighlightTextComponent } from '@acorex/components/highlight';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { auditTime, fromEvent } from 'rxjs';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import { AXDataTableComponent, AXDataTableTextColumnComponent } from '@acorex/components/data-table';
-import { fromEvent, auditTime } from 'rxjs';
 
 /** Whether a tree node may have descendants (embedded children or lazy metadata). */
 function lookupTreeNodeMayHaveChildren(node) {
@@ -483,6 +483,10 @@ function scrollTreeToSelectedNode(host, selectedId, attempts = 5) {
 /**
  * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
  * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
+ *
+ * Loads pages sequentially on scroll: only one API request at a time; further scroll
+ * events are ignored until the current request resolves, then the scroll position is
+ * re-checked for the next page.
  */
 class AXLookupListViewBase {
     /** Whether the filtered datasource currently has no items. */
@@ -506,6 +510,47 @@ class AXLookupListViewBase {
     #syncLoadingState(source, isLoading) {
         this.isLoading.set(isLoading || this.#hasPendingInitialLoad(source));
     }
+    #syncLoadedFromCache(source) {
+        const cached = source.cachedItems;
+        const items = [];
+        for (let index = 0; index < cached.length; index++) {
+            const item = cached[index];
+            if (item == null) {
+                break;
+            }
+            items.push(item);
+        }
+        this.loadedItems.set(items);
+        const total = source.totalCount;
+        const pendingMore = items.length < total;
+        const pendingInitial = total === 0 && (source.isLoading || this.#hasPendingInitialLoad(source));
+        this.hasMore.set(pendingMore || pendingInitial);
+    }
+    #tryLoadMore() {
+        const viewport = this.viewportRef();
+        const source = this.dataSource();
+        if (!viewport || source.isLoading || source.totalCount === 0) {
+            return;
+        }
+        const loaded = this.loadedItems().length;
+        if (loaded >= source.totalCount) {
+            return;
+        }
+        const threshold = this.itemHeight() * 2;
+        const bottomOffset = viewport.measureScrollOffset('bottom');
+        if (bottomOffset > threshold) {
+            return;
+        }
+        const nextPage = Math.floor(loaded / source.pageSize);
+        source.setPage(nextPage);
+    }
+    #scheduleTryLoadMore() {
+        if (typeof requestAnimationFrame === 'undefined') {
+            this.#tryLoadMore();
+            return;
+        }
+        requestAnimationFrame(() => this.#tryLoadMore());
+    }
     constructor() {
         /**
          * The datasource providing the items (paged, remote-capable).
@@ -588,9 +633,21 @@ class AXLookupListViewBase {
          * item, or a printable key that should return focus to the trigger search input).
          */
         this.navigateOut = output();
-        /** CDK virtual scroll adapter over the datasource. */
-        this.listDataSource = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listDataSource" }] : /* istanbul ignore next */ []));
+        /** Rows loaded so far (contiguous from the start of the result set). */
+        this.loadedItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadedItems" }] : /* istanbul ignore next */ []));
+        /** When true, more pages exist and a trailing loading row is shown. */
+        this.hasMore = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+        /** Virtual-scroll data: loaded rows plus an optional `null` loading sentinel. */
+        this.renderedItems = computed(() => {
+            const items = this.loadedItems();
+            if (this.hasMore()) {
+                return [...items, null];
+            }
+            return items;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderedItems" }] : /* istanbul ignore next */ []));
         this.totalCount = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
         this.isLoading = signal(true, /* @ts-ignore */
@@ -599,7 +656,7 @@ class AXLookupListViewBase {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         /** Viewport height so the popup grows with the items up to `maxVisibleItems`. */
         this.viewportHeight = computed(() => {
-            const count = this.totalCount() || (this.isLoading() ? 3 : 1);
+            const count = this.renderedItems().length || (this.isLoading() ? 3 : 1);
             return Math.min(count, this.maxVisibleItems()) * this.itemHeight();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
@@ -629,18 +686,36 @@ class AXLookupListViewBase {
             observer.observe(viewport.elementRef.nativeElement);
             onCleanup(() => observer.disconnect());
         });
+        effect((onCleanup) => {
+            const viewport = this.viewportRef();
+            if (!viewport) {
+                return;
+            }
+            const sub = viewport
+                .elementScrolled()
+                .pipe(auditTime(50))
+                .subscribe(() => {
+                this.#ngZone.run(() => this.#tryLoadMore());
+            });
+            onCleanup(() => sub.unsubscribe());
+        });
         effect((onCleanup) => {
             const source = this.dataSource();
-            const list = new AXListDataSource({ source });
             untracked(() => {
                 this.totalCount.set(source.totalCount);
                 this.#syncLoadingState(source, source.isLoading);
-                this.listDataSource.set(list);
+                this.#syncLoadedFromCache(source);
                 this.#pendingSelectedScroll = true;
             });
-            const loadingSub = source.onLoadingChanged.subscribe((value) => this.#syncLoadingState(source, value));
+            const loadingSub = source.onLoadingChanged.subscribe((value) => {
+                this.#syncLoadingState(source, value);
+                if (!value) {
+                    this.#scheduleTryLoadMore();
+                }
+            });
             const changedSub = source.onChanged.subscribe((e) => {
                 this.totalCount.set(e.totalCount);
+                this.#syncLoadedFromCache(source);
                 if (e.page === 0) {
                     this.#pendingSelectedScroll = true;
                 }
@@ -648,6 +723,18 @@ class AXLookupListViewBase {
                     this.#syncLoadingState(source, false);
                 }
             });
+            queueMicrotask(() => {
+                if (!source.cachedItems.some((item) => item != null)) {
+                    source.setPage(0);
+                }
+                else {
+                    untracked(() => {
+                        this.#syncLoadedFromCache(source);
+                        this.totalCount.set(source.totalCount);
+                        this.#scheduleTryLoadMore();
+                    });
+                }
+            });
             onCleanup(() => {
                 loadingSub.unsubscribe();
                 changedSub.unsubscribe();
@@ -657,12 +744,11 @@ class AXLookupListViewBase {
         effect(() => {
             const viewport = this.viewportRef();
             const loading = this.isLoading();
-            const count = this.totalCount();
+            const renderedCount = this.renderedItems().length;
             const values = this.selectedValues();
             const field = this.valueField();
             const height = this.itemHeight();
-            const source = this.dataSource();
-            if (!viewport || loading || count === 0) {
+            if (!viewport || loading || renderedCount === 0) {
                 return;
             }
             if (!this.#pendingSelectedScroll) {
@@ -673,22 +759,25 @@ class AXLookupListViewBase {
                 return;
             }
             untracked(() => {
+                if (typeof requestAnimationFrame === 'undefined') {
+                    return;
+                }
                 requestAnimationFrame(() => {
                     viewport.checkViewportSize();
-                    const index = this.#resolveSelectedIndex(source, values, field);
+                    const index = this.#resolveSelectedIndex(values, field);
                     if (index >= 0) {
-                        scrollNearestByOffset(viewport, index, height, count);
+                        scrollNearestByOffset(viewport, index, height, renderedCount);
                     }
                 });
             });
         });
     }
-    #resolveSelectedIndex(source, values, valueField) {
+    #resolveSelectedIndex(values, valueField) {
         const selectedValue = values[0];
         if (selectedValue == null) {
             return -1;
         }
-        const items = source.cachedItems;
+        const items = this.loadedItems();
         for (let index = 0; index < items.length; index++) {
             const item = items[index];
             if (item != null && item[valueField] == selectedValue) {
@@ -776,13 +865,17 @@ class AXLookupListViewBase {
         if (key === 'ArrowDown' && nav && viewport) {
             const items = this.navItems();
             if (items.length > 0 && nav.activeIndex() >= items.length - 1) {
-                const maxOffset = Math.max(0, this.totalCount() * this.itemHeight() - viewport.getViewportSize());
+                const renderedCount = this.renderedItems().length;
+                const maxOffset = Math.max(0, renderedCount * this.itemHeight() - viewport.getViewportSize());
                 const nextOffset = Math.min(maxOffset, viewport.measureScrollOffset() + this.itemHeight());
                 if (nextOffset > viewport.measureScrollOffset()) {
                     e.nativeEvent.preventDefault();
                     viewport.scrollToOffset(nextOffset);
                     queueMicrotask(() => nav.focusOnIndex(this.navItems().length - 1));
                 }
+                else {
+                    this.#tryLoadMore();
+                }
                 return;
             }
         }
@@ -835,7 +928,7 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
         (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
+          *cdkVirtualFor="let item of renderedItems(); let i = index; trackBy: trackByIndex"
           role="option"
           class="ax-lookup-option-host"
           axListNavigationItem
@@ -909,7 +1002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
+          *cdkVirtualFor="let item of renderedItems(); let i = index; trackBy: trackByIndex"
           role="option"
           class="ax-lookup-option-host"
           axListNavigationItem
@@ -1606,6 +1699,24 @@ class AXLookupMultiColumnComponent {
             const changedSub = source.onChanged.subscribe((event) => {
                 this.#applyLoadedItems(event.cachedItems, event.totalCount);
             });
+            const loadingSub = source.onLoadingChanged.subscribe((isLoading) => {
+                if (isLoading) {
+                    return;
+                }
+                const run = () => {
+                    const wrapper = this.tableRef()?.getHostElement()?.querySelector('.ax-data-table-wrapper') ??
+                        this.#host.nativeElement.querySelector('.ax-data-table-wrapper');
+                    if (wrapper) {
+                        this.#tryLoadMore(wrapper);
+                    }
+                };
+                if (typeof requestAnimationFrame !== 'undefined') {
+                    requestAnimationFrame(run);
+                }
+                else {
+                    run();
+                }
+            });
             // Fetch page 0 only when the source has never loaded. Reopen remounts this
             // view; setPage(0) is a no-op on a warm source and must not force a new API call.
             queueMicrotask(() => {
@@ -1613,7 +1724,10 @@ class AXLookupMultiColumnComponent {
                     source.setPage(0);
                 }
             });
-            onCleanup(() => changedSub.unsubscribe());
+            onCleanup(() => {
+                changedSub.unsubscribe();
+                loadingSub.unsubscribe();
+            });
         });
         effect((onCleanup) => {
             // Rebind when the table instance appears / source changes.
@@ -2047,7 +2161,7 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
         (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
+          *cdkVirtualFor="let item of renderedItems(); let i = index; trackBy: trackByIndex"
           role="option"
           class="ax-lookup-option-host ax-lookup-option-multiple"
           axListNavigationItem
@@ -2125,7 +2239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
+          *cdkVirtualFor="let item of renderedItems(); let i = index; trackBy: trackByIndex"
           role="option"
           class="ax-lookup-option-host ax-lookup-option-multiple"
           axListNavigationItem