Fix paginatin in users and projects table

Dangl-IT · Aug 29, 2024 · 806934b · 806934b
1 parent 2945751
commit 806934b
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 42 deletions.
diff --git a/src/ipa-bcfier-ui/src/app/components/projects-table/projects-table.component.html b/src/ipa-bcfier-ui/src/app/components/projects-table/projects-table.component.html
@@ -17,7 +17,7 @@
 <div class="table-wrap mat-elevation-z8">
   <table
     mat-table
-    [dataSource]="dataSource"
+    [dataSource]="projectsService"
     matSort
     matSortActive="createdAtUtc"
     matSortDirection="desc"
@@ -79,6 +79,11 @@
 
   <mat-paginator
     [pageSizeOptions]="[5, 10, 25, 100]"
+    [length]="paginationResult?.totalCount"
+    [pageSize]="paginationResult?.pageSize"
+    [pageIndex]="paginationResult.page - 1"
+    (page)="onPage($event)"
+    [showFirstLastButtons]="true"
     class="dark-theme"
   ></mat-paginator>
 </div>
diff --git a/src/ipa-bcfier-ui/src/app/components/projects-table/projects-table.component.ts b/src/ipa-bcfier-ui/src/app/components/projects-table/projects-table.component.ts
@@ -9,7 +9,11 @@ import {
   inject,
 } from '@angular/core';
 import { AsyncPipe, CommonModule, DatePipe } from '@angular/common';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent,
+} from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import {
@@ -40,6 +44,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { NotificationsService } from '../../services/notifications.service';
+import { PaginationResult } from 'ng-lightquery';
 import { ProjectDetailsComponent } from '../project-details/project-details.component';
 import { ProjectsService } from '../../services/light-query/projects.service';
 import { SelectedProjectMessengerService } from '../../services/selected-project-messenger.service';
@@ -82,23 +87,17 @@ export class ProjectsTableComponent
   appConfigService = inject(AppConfigService);
 
   private destroyed$ = new Subject<void>();
-  dataSource!: MatTableDataSource<ProjectGet>;
   displayedColumns = ['name', 'createdAtUtc', 'actions'];
   filter = '';
   selectedProject: ProjectGet | null = null;
   shouldEnableProjectManagement =
     this.appConfigService.shouldEnableProjectManagementFeatures();
-
-  constructor() {
-    this.projectsService
-      .connect()
-      .pipe(takeUntil(this.destroyed$))
-      .subscribe((projects) => {
-        this.dataSource = new MatTableDataSource(projects);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-      });
-  }
+  paginationResult: PaginationResult<ProjectGet> = {
+    data: [],
+    page: 1,
+    pageSize: 20,
+    totalCount: 0,
+  };
 
   ngOnInit(): void {
     this.selectedProjectMessengerService.selectedProject
@@ -110,6 +109,12 @@ export class ProjectsTableComponent
       active: 'createdAtUtc',
       direction: 'desc',
     });
+
+    this.projectsService.paginationResult
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((paginationResult) => {
+        this.paginationResult = paginationResult;
+      });
   }
 
   ngOnDestroy(): void {
@@ -118,20 +123,14 @@ export class ProjectsTableComponent
   }
 
   ngAfterViewInit() {
-    if (this.dataSource) {
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-    }
+    this.paginator.pageSize = this.projectsService.pageSize;
   }
 
   applyFilter(filter: string) {
     this.projectsService.setQueryParameter(
       'filter',
       filter.trim().toLowerCase()
     );
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
   }
 
   projectClicked(project: ProjectGet): void {
@@ -263,4 +262,9 @@ export class ProjectsTableComponent
   refresh(): void {
     this.projectsService.forceRefresh();
   }
+
+  onPage(pageEvent: PageEvent): void {
+    this.projectsService.page = pageEvent.pageIndex + 1;
+    this.projectsService.pageSize = pageEvent.pageSize;
+  }
 }
diff --git a/src/ipa-bcfier-ui/src/app/components/users/users.component.html b/src/ipa-bcfier-ui/src/app/components/users/users.component.html
@@ -17,7 +17,7 @@
 <div class="table-wrap mat-elevation-z8">
   <table
     mat-table
-    [dataSource]="dataSource"
+    [dataSource]="usersService"
     matSort
     matSortActive="identifier"
     matSortDirection="desc"
@@ -64,6 +64,11 @@
 
   <mat-paginator
     [pageSizeOptions]="[5, 10, 25, 100]"
+    [length]="paginationResult?.totalCount"
+    [pageSize]="paginationResult?.pageSize"
+    [pageIndex]="paginationResult.page - 1"
+    (page)="onPage($event)"
+    [showFirstLastButtons]="true"
     class="dark-theme"
   ></mat-paginator>
 </div>
diff --git a/src/ipa-bcfier-ui/src/app/components/users/users.component.ts b/src/ipa-bcfier-ui/src/app/components/users/users.component.ts
@@ -9,7 +9,11 @@ import {
   inject,
 } from '@angular/core';
 import { AsyncPipe, CommonModule } from '@angular/common';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import {
+  MatPaginator,
+  MatPaginatorModule,
+  PageEvent,
+} from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Subject, filter, switchMap, takeUntil } from 'rxjs';
@@ -25,6 +29,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { NotificationsService } from '../../services/notifications.service';
+import { PaginationResult } from 'ng-lightquery';
 import { SettingsMessengerService } from '../../services/settings-messenger.service';
 import { UsersService } from '../../services/light-query/users.service';
 
@@ -59,29 +64,29 @@ export class UsersComponent implements AfterViewInit, OnDestroy, OnInit {
   cdr = inject(ChangeDetectorRef);
   appConfigService = inject(AppConfigService);
 
+  paginationResult: PaginationResult<UserGet> = {
+    data: [],
+    page: 1,
+    pageSize: 20,
+    totalCount: 0,
+  };
+
   private destroyed$ = new Subject<void>();
-  dataSource!: MatTableDataSource<UserGet>;
   displayedColumns = ['identifier', 'actions'];
   filter = '';
   shouldEnableProjectManagement =
     this.appConfigService.shouldEnableProjectManagementFeatures();
 
-  constructor() {
-    this.usersService
-      .connect()
-      .pipe(takeUntil(this.destroyed$))
-      .subscribe((users) => {
-        this.dataSource = new MatTableDataSource(users);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-      });
-  }
-
   ngOnInit(): void {
     this.usersService.onSort({
       active: 'identifier',
       direction: 'desc',
     });
+    this.usersService.paginationResult
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((paginationResult) => {
+        this.paginationResult = paginationResult;
+      });
   }
 
   ngOnDestroy(): void {
@@ -90,17 +95,11 @@ export class UsersComponent implements AfterViewInit, OnDestroy, OnInit {
   }
 
   ngAfterViewInit() {
-    if (this.dataSource) {
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-    }
+    this.paginator.pageSize = this.usersService.pageSize;
   }
 
   applyFilter(filter: string) {
     this.usersService.setQueryParameter('filter', filter.trim().toLowerCase());
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
   }
 
   createUser(): void {
@@ -162,4 +161,9 @@ export class UsersComponent implements AfterViewInit, OnDestroy, OnInit {
   refresh(): void {
     this.usersService.forceRefresh();
   }
+
+  onPage(pageEvent: PageEvent): void {
+    this.usersService.page = pageEvent.pageIndex + 1;
+    this.usersService.pageSize = pageEvent.pageSize;
+  }
 }