@acorex/cdk 22.2.0-next.0 → 22.2.0-next.2

package/fesm2022/acorex-cdk-common.mjs

@@ -1168,6 +1168,7 @@ class AXListDataSource extends DataSource {
         this.config = config;
         this.debounceTime = 0;
         this.subscription = new Subscription();
+        this.connected = false;
         this._range = { start: 0, end: 0 };
         this.source = config.source;
         if (config.debounceTime)
@@ -1176,9 +1177,20 @@ class AXListDataSource extends DataSource {
         this.dataStream = new BehaviorSubject(this.config.source.cachedItems);
         this.source.onChanged.subscribe((data) => {
             this.dataStream.next(data.cachedItems);
+            // A refresh (e.g. a new search) only reloads page 0. When the rendered range stays the same,
+            // CDK emits no `viewChange`, so the other visible pages would otherwise stay as loading rows.
+            if (this.connected) {
+                this.loadMissingPagesInRange(data.totalCount);
+            }
         });
     }
     connect(collectionViewer) {
+        // The same instance is reconnected when its viewport is destroyed and recreated
+        // (e.g. a lookup search shows "no results" and then matches again). A closed
+        // Subscription tears down anything added to it immediately, so start a fresh one.
+        this.subscription.unsubscribe();
+        this.subscription = new Subscription();
+        this.connected = true;
         this.subscription.add(collectionViewer.viewChange
             .pipe(debounceTime(this.debounceTime))
             .pipe(distinctUntilChanged())
@@ -1193,7 +1205,22 @@ class AXListDataSource extends DataSource {
         return this.dataStream;
     }
     disconnect() {
+        this.connected = false;
         this.subscription.unsubscribe();
+        this._range = { start: 0, end: 0 };
+    }
+    loadMissingPagesInRange(totalCount) {
+        const end = Math.min(this._range.end, totalCount);
+        if (end <= this._range.start) {
+            return;
+        }
+        const startPage = this.getPageForIndex(this._range.start);
+        const endPage = this.getPageForIndex(end - 1);
+        for (let i = startPage; i <= endPage; i++) {
+            if (!this.source.isPageFetched(i)) {
+                this.source.setPage(i);
+            }
+        }
     }
     getPageForIndex(index) {
         return Math.floor(index / this.source.config.pageSize);
@@ -1231,6 +1258,9 @@ class AXDataSource {
         this._totalCount = 0;
         this._items = [];
         this.fetchedPages = new Set();
+        /** Bumped on every reset so responses requested before it are dropped instead of corrupting the cache. */
+        this.loadGeneration = 0;
+        this.pendingLoads = 0;
         this._page = 0;
         this._query = { skip: 0, take: 0, sort: [] };
         this.onChanged = new Subject();
@@ -1248,6 +1278,8 @@ class AXDataSource {
         if (this.fetchedPages.has(page) && this.useCache) {
             return;
         }
+        const generation = this.loadGeneration;
+        this.pendingLoads++;
         this.setLoadingState(true);
         this.fetchedPages.add(page);
         this._query.take = this.config.pageSize;
@@ -1255,25 +1287,50 @@ class AXDataSource {
         this.config
             .load({ ...this._query })
             .then((result) => {
-            if (this._totalCount != result.total) {
-                this._cachedItems = new Array(result.total);
-                this._totalCount = result.total;
+            if (generation !== this.loadGeneration) {
+                return;
             }
-            this._items = result.items;
-            this._cachedItems.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
-            const event = {
-                cachedItems: this.cachedItems,
-                items: this.items,
-                page: page,
-                totalCount: this.totalCount,
-                totalPages: this.totalPages,
-            };
-            this.onChanged.next(event);
+            this.applyLoadResult(page, result);
+        }, (error) => {
+            if (generation === this.loadGeneration) {
+                this.fetchedPages.delete(page);
+            }
+            throw error;
         })
             .finally(() => {
-            this.setLoadingState(false);
+            if (generation !== this.loadGeneration) {
+                return;
+            }
+            this.pendingLoads = Math.max(0, this.pendingLoads - 1);
+            if (this.pendingLoads === 0) {
+                this.setLoadingState(false);
+            }
         });
     }
+    applyLoadResult(page, result) {
+        if (this._totalCount != result.total) {
+            if (this._totalCount > 0) {
+                // Rows of other pages are dropped with the old array, so they must be fetched again.
+                this.fetchedPages = new Set([page]);
+            }
+            this._cachedItems = new Array(result.total);
+            this._totalCount = result.total;
+        }
+        this._items = result.items;
+        this._cachedItems.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
+        const event = {
+            cachedItems: this.cachedItems,
+            items: this.items,
+            page: page,
+            totalCount: this.totalCount,
+            totalPages: this.totalPages,
+        };
+        this.onChanged.next(event);
+    }
+    /** Whether `page` was loaded (or is loading) for the current filter/sort. */
+    isPageFetched(page) {
+        return this.fetchedPages.has(page);
+    }
     async getItemsByFilter(filter) {
         return await this.config.load({ ...this.query, filter });
     }
@@ -1282,7 +1339,7 @@ class AXDataSource {
         this.onLoadingChanged.next(this._isLoading);
     }
     setPage(page) {
-        if (this._page != page || this._items.length == 0) {
+        if (this._page != page || this._items.length == 0 || !this.fetchedPages.has(page)) {
             this._page = page;
             this.load();
         }
@@ -1301,12 +1358,22 @@ class AXDataSource {
         this._query.filter = null;
     }
     reset() {
+        const wasLoading = this._isLoading;
+        this.resetState();
+        if (wasLoading) {
+            this.setLoadingState(false);
+        }
+    }
+    /** Resets paging state without emitting `onLoadingChanged`, so a following `load()` keeps the loading state continuous. */
+    resetState() {
         this._query.filter = null;
         this._query.sort = [];
         this._query.skip = 0;
         this._items = new Array(0);
         this._cachedItems = new Array(this.config.pageSize);
         this.fetchedPages.clear();
+        this.loadGeneration++;
+        this.pendingLoads = 0;
         this._page = 0;
         this._totalCount = 0;
     }
@@ -1314,7 +1381,7 @@ class AXDataSource {
         const currentFilter = this._query.filter;
         const currentSort = this._query.sort;
         if (options.reset) {
-            this.reset();
+            this.resetState();
         }
         this._query.filter = currentFilter;
         this._query.sort = currentSort;