Feature/add pagination to platform and tag management of admin control panel (#7126)

* Add pagination

* Update changelog

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added pagination to the platform management of the admin control panel
+- Added pagination to the tag management of the admin control panel
+
 ### Fixed
 
 - Fixed an issue with hourly market data updates not refreshing prices for asset profiles with `MANUAL` data source

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -96,3 +96,9 @@
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
 </table>
+
+<mat-paginator
+  [class.d-none]="dataSource.data.length <= pageSize"
+  [hidePageSize]="true"
+  [pageSize]="pageSize"
+/>

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

@@ -1,4 +1,5 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { CreatePlatformDto, UpdatePlatformDto } from '@ghostfolio/common/dtos';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getLocale, getLowercase } from '@ghostfolio/common/helper';
@@ -22,6 +23,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@@ -46,6 +48,7 @@ import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-
     IonIcon,
     MatButtonModule,
     MatMenuModule,
+    MatPaginatorModule,
     MatSortModule,
     MatTableModule,
     RouterModule
@@ -59,11 +62,13 @@ export class GfAdminPlatformComponent implements OnInit {
 
   protected dataSource = new MatTableDataSource<Platform>();
   protected readonly displayedColumns = ['name', 'url', 'accounts', 'actions'];
+  protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected platforms: Platform[];
 
   private readonly deviceType = computed(
     () => this.deviceDetectorService.deviceInfo().deviceType
   );
+  private readonly paginator = viewChild.required(MatPaginator);
   private readonly sort = viewChild.required(MatSort);
 
   private readonly adminService = inject(AdminService);
@@ -145,6 +150,7 @@ export class GfAdminPlatformComponent implements OnInit {
         this.platforms = platforms;
 
         this.dataSource = new MatTableDataSource(platforms);
+        this.dataSource.paginator = this.paginator();
         this.dataSource.sort = this.sort();
         this.dataSource.sortingDataAccessor = getLowercase;
 

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -89,3 +89,9 @@
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
 </table>
+
+<mat-paginator
+  [class.d-none]="dataSource.data.length <= pageSize"
+  [hidePageSize]="true"
+  [pageSize]="pageSize"
+/>

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

@@ -1,4 +1,5 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { CreateTagDto, UpdateTagDto } from '@ghostfolio/common/dtos';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getLocale, getLowercase } from '@ghostfolio/common/helper';
@@ -21,6 +22,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@@ -44,6 +46,7 @@ import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/int
     IonIcon,
     MatButtonModule,
     MatMenuModule,
+    MatPaginatorModule,
     MatSortModule,
     MatTableModule,
     RouterModule
@@ -62,11 +65,13 @@ export class GfAdminTagComponent implements OnInit {
     'activities',
     'actions'
   ];
+  protected readonly pageSize = DEFAULT_PAGE_SIZE;
   protected tags: Tag[];
 
   private readonly deviceType = computed(
     () => this.deviceDetectorService.deviceInfo().deviceType
   );
+  private readonly paginator = viewChild.required(MatPaginator);
   private readonly sort = viewChild.required(MatSort);
 
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
@@ -147,6 +152,7 @@ export class GfAdminTagComponent implements OnInit {
         this.tags = tags;
 
         this.dataSource = new MatTableDataSource(this.tags);
+        this.dataSource.paginator = this.paginator();
         this.dataSource.sort = this.sort();
         this.dataSource.sortingDataAccessor = getLowercase;