Added pagination in admin user table

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -4,11 +4,19 @@ import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { getDateFormatString, getEmojiFlag } from '@ghostfolio/common/helper';
 import { AdminUsers, InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import {
   differenceInSeconds,
@@ -24,6 +32,8 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-users.html'
 })
 export class AdminUsersComponent implements OnDestroy, OnInit {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
   public dataSource = new MatTableDataSource<AdminUsers['users'][0]>();
   public defaultDateFormat: string;
   public displayedColumns: string[] = [];
@@ -34,6 +44,8 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   public isLoading = false;
   public user: User;
 
+  public pageSize = DEFAULT_PAGE_SIZE;
+  public totalItems = 0;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -142,15 +154,25 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private fetchUsers() {
+  public onChangePage(page: PageEvent) {
+    this.fetchUsers({
+      pageIndex: page.pageIndex
+    });
+  }
+  private fetchUsers({ pageIndex }: { pageIndex: number } = { pageIndex: 0 }) {
     this.isLoading = true;
 
+    if (pageIndex === 0 && this.paginator) {
+      this.paginator.pageIndex = 0;
+    }
+
     this.adminService
-      .fetchUsers()
+      .fetchUsers(pageIndex * this.pageSize, this.pageSize)
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ users }) => {
+      .subscribe(({ count, users }) => {
-        this.dataSource = new MatTableDataSource(users);
+        this.totalItems = count;
 
+        this.dataSource = new MatTableDataSource(users);
         this.isLoading = false;
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/components/admin-users/admin-users.html

@@ -267,6 +267,15 @@
           ></tr>
         </table>
       </div>
+      <mat-paginator
+        [length]="totalItems"
+        [ngClass]="{
+          'd-none': (isLoading && totalItems === 0) || totalItems <= pageSize
+        }"
+        [pageSize]="pageSize"
+        [showFirstLastButtons]="true"
+        (page)="onChangePage($event)"
+      />
       @if (isLoading) {
         <ngx-skeleton-loader
           animation="pulse"

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -20,7 +21,8 @@ import { AdminUsersComponent } from './admin-users.component';
     MatButtonModule,
     MatMenuModule,
     MatTableModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    MatPaginatorModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/services/admin.service.ts

@@ -179,10 +179,11 @@ export class AdminService {
     return this.http.get<Tag[]>('/api/v1/tag');
   }
 
-  public fetchUsers() {
+  public fetchUsers(skip: number, take: number) {
     let params = new HttpParams();
 
-    params = params.append('take', 30);
+    params = params.append('take', take);
+    params = params.append('skip', skip);
 
     return this.http.get<AdminUsers>('/api/v1/admin/user', { params });
   }