Merge pull request #554 from openziti/553-pagination-filter-sync

Fix synchronization of pagination controls when applying filters to list pages
openziti · Nov 25, 2024 · 7e0b889 · 7e0b889
2 parents e7788e3 + a874592
commit 7e0b889
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 10 deletions.
diff --git a/projects/ziti-console-lib/src/lib/features/data-table/data-table-filter.service.ts b/projects/ziti-console-lib/src/lib/features/data-table/data-table-filter.service.ts
@@ -22,8 +22,8 @@ export class DataTableFilterService {
 
     filters: FilterObj[] = [];
     currentPage = 1;
-    filtersChanged
-        = new BehaviorSubject<FilterObj[]>(this.filters)
+    filtersChanged = new BehaviorSubject<FilterObj[]>(this.filters);
+    public filtering = new BehaviorSubject<boolean>(false);
 
     pageChanged = new BehaviorSubject<any>(this.currentPage);
 
@@ -74,6 +74,7 @@ export class DataTableFilterService {
     }
 
     changePage(page: any) {
+        this.currentPage = page;
         this.pageChanged.next(page);
     }
 

diff --git a/...cts/ziti-console-lib/src/lib/features/data-table/table-filter-bar/filter-bar.component.ts b/...cts/ziti-console-lib/src/lib/features/data-table/table-filter-bar/filter-bar.component.ts
@@ -35,6 +35,7 @@ export class FilterBarComponent {
   @Input() totalCount: string = '-';
   @Input() currentPage: number = 1;
 
+  filtering = false;
   filterString = '';
   inputChangedDebounced = debounce(this.inputChanged.bind(this), 400);
 
@@ -52,6 +53,9 @@ export class FilterBarComponent {
       }
       this.filterString = tmp;
     });
+    this.filterService.filtering.subscribe((filtering) => {
+      this.filtering = filtering;
+    });
   }
 
   nextPage() {
@@ -65,7 +69,7 @@ export class FilterBarComponent {
   }
 
   get nextDisabled() {
-    if (!isNumber(this.totalCount) || !isNumber(this.endCount)) {
+    if (!isNumber(this.totalCount) || !isNumber(this.endCount) || this.filtering) {
       return true;
     }
     const total: any = Number.parseInt(this.totalCount);
@@ -74,14 +78,16 @@ export class FilterBarComponent {
   }
 
   get prevDisabled() {
-    if (!isNumber(this.startCount) || !isNumber(this.totalCount)) {
+    if (!isNumber(this.startCount) || !isNumber(this.totalCount) || this.filtering) {
       return true;
     }
     const start = Number.parseInt(this.startCount, 10);
     return start <= 1;
   }
 
   inputChanged() {
+    this.currentPage = 1;
+    this.filterService.currentPage = this.currentPage;
     const filterObj: FilterObj = {
       filterName: this.filterName,
       columnId: this.filterColumn,

diff --git a/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.html b/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.html
@@ -12,7 +12,7 @@
                     [startCount]="startCount"
                     [endCount]="endCount"
                     [totalCount]="totalCount"
-                    [currentPage]="currentPage"
+                    [currentPage]="filterService.currentPage"
                     [emptyMsg]="'No Identities defined, Click the plus to add an Identity.'"
                     [filterApplied]="filterApplied"
                     [menuItems]="svc.menuItems"

diff --git a/projects/ziti-console-lib/src/lib/pages/services/services-page.component.html b/projects/ziti-console-lib/src/lib/pages/services/services-page.component.html
@@ -11,7 +11,7 @@
                     [startCount]="startCount"
                     [endCount]="endCount"
                     [totalCount]="totalCount"
-                    [currentPage]="currentPage"
+                    [currentPage]="filterService.currentPage"
                     [emptyMsg]="'No Services defined, Click the plus to add a service.'"
                     [filterApplied]="filterApplied"
                     [menuItems]="svc.menuItems"

diff --git a/projects/ziti-console-lib/src/lib/shared/list-page-component.class.ts b/projects/ziti-console-lib/src/lib/shared/list-page-component.class.ts
@@ -38,7 +38,6 @@ export abstract class ListPageComponent {
     startCount = '-';
     endCount = '-';
     totalCount = '-';
-    currentPage = 1;
     itemsSelected = false;
     selectedItems: any[] = [];
     columnDefs: any = [];
@@ -59,6 +58,7 @@ export abstract class ListPageComponent {
     ) {}
 
     ngOnInit() {
+        this.filterService.currentPage = 1;
         this.svc.sideModalOpen = false;
         this.svc.refreshData = this.refreshData.bind(this);
         this.columnDefs = this.svc.initTableColumns();
@@ -71,7 +71,6 @@ export abstract class ListPageComponent {
             })
         );
         this.filterService.pageChanged.subscribe(page => {
-            this.currentPage = page;
             this.refreshData();
         });
         this.subscription.add(
@@ -113,7 +112,7 @@ export abstract class ListPageComponent {
     refreshData(sort?: { sortBy: string, ordering: string }, hardRefresh = false): void {
         this.isLoading = true;
         sort = sort ? sort : this.svc.currentSort;
-        this.svc.getData(this.filterService.filters, sort, this.currentPage)
+        this.svc.getData(this.filterService.filters, sort, this.filterService.currentPage)
             .then((data: any) => {
                 this.rowData = [];
                 if (hardRefresh) {

diff --git a/projects/ziti-console-lib/src/lib/shared/list-page-service.class.ts b/projects/ziti-console-lib/src/lib/shared/list-page-service.class.ts
@@ -169,7 +169,10 @@ export abstract class ListPageServiceClass {
             paging.filter = filters[idx].value;
             paging.rawFilter = true;
         }
-        return this.dataService.get(resourceType, paging, filters);
+        this.filterService.filtering.next(true);
+        return this.dataService.get(resourceType, paging, filters).finally(() => {
+            this.filterService.filtering.next(false);
+        });
     }
 
     removeItems(ids: string[]) {