fix pagination, bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "we-bstly-angular",
-  "version": "3.2.0",
+  "version": "3.5.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/pages/admin/jitsi-rooms/jitsi-rooms.component.html

@@ -7,36 +7,37 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource">
+@if (!!jitsiRooms) {
+<div>
+  <table mat-table [dataSource]="jitsiRooms.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.id' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.id' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.id}} </td>
     </ng-container>
 
     <ng-container matColumnDef="owner">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.owner' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.owner' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.owner}} </td>
     </ng-container>
 
     <ng-container matColumnDef="room">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.room' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.room' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.room}} </td>
     </ng-container>
 
     <ng-container matColumnDef="starts">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.starts' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.starts' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.starts | date:'short'}} </td>
     </ng-container>
 
     <ng-container matColumnDef="moderationStarts">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.moderation_starts' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.moderation_starts' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.moderationStarts | date:'short'}} </td>
     </ng-container>
 
     <ng-container matColumnDef="expires">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.jitsi_rooms.expires' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.jitsi_rooms.expires' | i18n}} </th>
       <td mat-cell *matCellDef="let room"> {{room.expires | date:'short'}} </td>
     </ng-container>
 
@@ -57,10 +58,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="jitsiRooms.page.totalElements"
+    [pageSize]="jitsiRooms.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/jitsi-rooms/jitsi-rooms.component.ts

@@ -16,11 +16,10 @@ import { AdminJitsiRoomEditDialog } from './jitsi-room.edit';
 export class AdminJitsiRoomsComponent implements OnInit {
 
   displayedColumns: string[] = ['id', 'owner', 'room', 'starts', 'moderationStarts', 'expires', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  jitsiRooms: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -29,7 +28,6 @@ export class AdminJitsiRoomsComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -37,11 +35,10 @@ export class AdminJitsiRoomsComponent implements OnInit {
   }
 
   loadJitsiRooms(): void {
-    this.jitsiRoomManagementService.getJitsiRooms(this.pageIndex, this.pageSize)
+    this.jitsiRoomManagementService.getJitsiRooms(this.page.page, this.page.size)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.jitsiRooms = data;
         },
         error: (error) => {
           console.error('Error loading Jitsi rooms:', error);
@@ -49,9 +46,20 @@ export class AdminJitsiRoomsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
+    this.loadJitsiRooms();
+  }
+
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadJitsiRooms();
   }
 

src/app/pages/admin/minetest-accounts/minetest-accounts.component.html

@@ -7,21 +7,22 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource">
+@if (!!minetestAccounts) {
+<div>
+  <table mat-table [dataSource]="minetestAccounts.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.minetest_accounts.name' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.minetest_accounts.name' | i18n}} </th>
       <td mat-cell *matCellDef="let account"> {{account.name}} </td>
     </ng-container>
 
     <ng-container matColumnDef="owner">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.minetest_accounts.owner' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.minetest_accounts.owner' | i18n}} </th>
       <td mat-cell *matCellDef="let account"> {{account.owner}} </td>
     </ng-container>
 
     <ng-container matColumnDef="created">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.minetest_accounts.created' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.minetest_accounts.created' | i18n}} </th>
       <td mat-cell *matCellDef="let account"> {{account.created | date:'short'}} </td>
     </ng-container>
 
@@ -42,10 +43,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="minetestAccounts.page.totalElements"
+    [pageSize]="minetestAccounts.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/minetest-accounts/minetest-accounts.component.ts

@@ -15,11 +15,10 @@ import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 export class AdminMinetestAccountsComponent implements OnInit {
 
   displayedColumns: string[] = ['name', 'owner', 'created', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  minetestAccounts: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -28,7 +27,6 @@ export class AdminMinetestAccountsComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -36,11 +34,10 @@ export class AdminMinetestAccountsComponent implements OnInit {
   }
 
   loadMinetestAccounts(): void {
-    this.minetestAccountManagementService.getMinetestAccounts(this.pageIndex, this.pageSize)
+    this.minetestAccountManagementService.getMinetestAccounts(this.page.page, this.page.size)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.minetestAccounts = data;
         },
         error: (error) => {
           console.error('Error loading Minetest accounts:', error);
@@ -48,9 +45,20 @@ export class AdminMinetestAccountsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
+    this.loadMinetestAccounts();
+  }
+
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadMinetestAccounts();
   }
 

src/app/pages/admin/oidc-clients/oidc-clients.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!oidcClients) {
+<div>
+  <table mat-table [dataSource]="oidcClients.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.oidc_clients.id' | i18n}}</th>
       <td mat-cell *matCellDef="let client">{{client.id}}</td>
@@ -44,10 +45,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="oidcClients.page.totalElements"
+    [pageSize]="oidcClients.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/oidc-clients/oidc-clients.component.ts

@@ -16,10 +16,10 @@ import { AdminOidcClientEditDialog } from './oidc-client.edit';
 })
 export class AdminOidcClientsComponent implements OnInit {
   displayedColumns: string[] = ['id', 'clientId', 'clientName', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  oidcClients: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminOidcClientsComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminOidcClientsComponent implements OnInit {
   }
 
   loadClients(): void {
-    this.oidcClientManagementService.getClients(this.pageIndex, this.pageSize).subscribe(
+    this.oidcClientManagementService.getClients(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.oidcClients = data;
       },
       error => {
         console.error('Error loading OIDC clients:', error);
@@ -48,15 +46,21 @@ export class AdminOidcClientsComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadClients();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadClients();
   }
 
   deleteClient(client: any): void {

src/app/pages/admin/partey-maps/partey-maps.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!parteyMaps) {
+<div>
+  <table mat-table [dataSource]="parteyMaps.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'admin.partey_maps.id' | i18n}} </th>
@@ -47,10 +48,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="parteyMaps.page.totalElements"
+    [pageSize]="parteyMaps.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/partey-maps/partey-maps.component.ts

@@ -16,13 +16,10 @@ import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 export class AdminParteyMapsComponent implements OnInit {
 
   displayedColumns: string[] = ['id', 'name', 'policyType', 'tags', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
-  sortField = 'id';
-  sortDescending = false;
+  parteyMaps: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -32,7 +29,6 @@ export class AdminParteyMapsComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -40,11 +36,10 @@ export class AdminParteyMapsComponent implements OnInit {
   }
 
   loadParteyMaps(): void {
-    this.parteyMapManagementService.getParteyMaps(this.pageIndex, this.pageSize, this.sortField, this.sortDescending)
+    this.parteyMapManagementService.getParteyMaps(this.page.page, this.page.size, this.page.sort, this.page.desc)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.parteyMaps = data;
         },
         error: (error) => {
           console.error('Error loading Partey maps:', error);
@@ -52,15 +47,20 @@ export class AdminParteyMapsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadParteyMaps();
   }
 
-  onSortChange(sort: any): void {
-    this.sortField = sort.active || 'id';
-    this.sortDescending = sort.direction === 'desc';
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadParteyMaps();
   }
 

src/app/pages/admin/partey-reports/partey-reports.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!parteyReports) {
+<div>
+  <table mat-table [dataSource]="parteyReports.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'admin.partey_reports.id' | i18n}} </th>
@@ -52,10 +53,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="parteyReports.page.totalElements"
+    [pageSize]="parteyReports.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/partey-reports/partey-reports.component.ts

@@ -16,13 +16,10 @@ import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 export class AdminParteyReportsComponent implements OnInit {
 
   displayedColumns: string[] = ['id', 'reporterUserUuid', 'reportedUserUuid', 'reportWorldSlug', 'created', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
-  sortField = 'id';
-  sortDescending = false;
+  parteyReports: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -32,7 +29,6 @@ export class AdminParteyReportsComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -40,11 +36,10 @@ export class AdminParteyReportsComponent implements OnInit {
   }
 
   loadParteyReports(): void {
-    this.userReportManagementService.getParteyUserReports(this.pageIndex, this.pageSize, this.sortField, this.sortDescending)
+    this.userReportManagementService.getParteyUserReports(this.page.page, this.page.size, this.page.sort, this.page.desc)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.parteyReports = data;
         },
         error: (error) => {
           console.error('Error loading Partey reports:', error);
@@ -52,15 +47,20 @@ export class AdminParteyReportsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadParteyReports();
   }
 
-  onSortChange(sort: any): void {
-    this.sortField = sort.active || 'id';
-    this.sortDescending = sort.direction === 'desc';
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadParteyReports();
   }
 

src/app/pages/admin/partey-tags/partey-tags.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!parteyTags) {
+<div>
+  <table mat-table [dataSource]="parteyTags.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'admin.partey_tags.id' | i18n}} </th>
@@ -52,10 +53,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="parteyTags.page.totalElements"
+    [pageSize]="parteyTags.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/partey-tags/partey-tags.component.ts

@@ -16,13 +16,10 @@ import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 export class AdminParteyTagsComponent implements OnInit {
 
   displayedColumns: string[] = ['id', 'target', 'name', 'starts', 'expires', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
-  sortField = 'target';
-  sortDescending = false;
+  parteyTags: any;
+  page: any = { page: 0, size: 10, sort: "target", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -32,7 +29,6 @@ export class AdminParteyTagsComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -40,11 +36,10 @@ export class AdminParteyTagsComponent implements OnInit {
   }
 
   loadParteyTags(): void {
-    this.userTagManagementService.getParteyUserTags(this.pageIndex, this.pageSize, this.sortField, this.sortDescending)
+    this.userTagManagementService.getParteyUserTags(this.page.page, this.page.size, this.page.sort, this.page.desc)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.parteyTags = data;
         },
         error: (error) => {
           console.error('Error loading Partey tags:', error);
@@ -52,15 +47,20 @@ export class AdminParteyTagsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadParteyTags();
   }
 
-  onSortChange(sort: any): void {
-    this.sortField = sort.active || 'target';
-    this.sortDescending = sort.direction === 'desc';
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "target";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadParteyTags();
   }
 

src/app/pages/admin/permission-mappings/permission-mappings.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!permissionMappings) {
+<div>
+  <table mat-table [dataSource]="permissionMappings.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.permission_mappings.id' | i18n}}</th>
       <td mat-cell *matCellDef="let mapping">{{mapping.id}}</td>
@@ -51,10 +52,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="permissionMappings.page.totalElements"
+    [pageSize]="permissionMappings.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/permission-mappings/permission-mappings.component.ts

@@ -16,10 +16,10 @@ import { AdminPermissionMappingEditDialog } from './permission-mapping.edit';
 })
 export class AdminPermissionMappingsComponent implements OnInit {
   displayedColumns: string[] = ['id', 'item', 'names', 'lifetime', 'product', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  permissionMappings: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminPermissionMappingsComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminPermissionMappingsComponent implements OnInit {
   }
 
   loadMappings(): void {
-    this.permissionMappingManagementService.getPermissionMappings(this.pageIndex, this.pageSize).subscribe(
+    this.permissionMappingManagementService.getPermissionMappings(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.permissionMappings = data;
       },
       error => {
         console.error('Error loading permission mappings:', error);
@@ -48,15 +46,21 @@ export class AdminPermissionMappingsComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadMappings();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadMappings();
   }
 
   createMapping(): void {

src/app/pages/admin/permissions/permissions.component.html

@@ -17,7 +17,7 @@
   <div>
 
     @if (permissions.length > 0) {
-      <div class="mat-elevation-z8">
+      <div>
         <table mat-table [dataSource]="permissions">
 
         <ng-container matColumnDef="id">

src/app/pages/admin/quota-mappings/quota-mappings.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!quotaMappings) {
+<div>
+  <table mat-table [dataSource]="quotaMappings.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.quota_mappings.id' | i18n}}</th>
       <td mat-cell *matCellDef="let mapping">{{mapping.id}}</td>
@@ -51,10 +52,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="quotaMappings.page.totalElements"
+    [pageSize]="quotaMappings.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/quota-mappings/quota-mappings.component.ts

@@ -16,10 +16,10 @@ import { AdminQuotaMappingEditDialog } from './quota-mapping.edit';
 })
 export class AdminQuotaMappingsComponent implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'value', 'unit', 'items', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  quotaMappings: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminQuotaMappingsComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminQuotaMappingsComponent implements OnInit {
   }
 
   loadMappings(): void {
-    this.quotaMappingManagementService.getQuotaMappings(this.pageIndex, this.pageSize).subscribe(
+    this.quotaMappingManagementService.getQuotaMappings(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.quotaMappings = data;
       },
       error => {
         console.error('Error loading quota mappings:', error);
@@ -48,15 +46,21 @@ export class AdminQuotaMappingsComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadMappings();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadMappings();
   }
 
   createMapping(): void {

src/app/pages/admin/quotas/quotas.component.html

@@ -17,7 +17,7 @@
   <div>
 
     @if (quotas.length > 0) {
-      <div class="mat-elevation-z8">
+      <div>
         <table mat-table [dataSource]="quotas">
 
           <ng-container matColumnDef="id">

src/app/pages/admin/services/services.component.html

@@ -7,26 +7,27 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource">
+@if (!!services) {
+<div>
+  <table mat-table [dataSource]="services.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.services.name' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.services.name' | i18n}} </th>
       <td mat-cell *matCellDef="let service"> {{service.name}} </td>
     </ng-container>
 
     <ng-container matColumnDef="url">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.services.url' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.services.url' | i18n}} </th>
       <td mat-cell *matCellDef="let service"> {{service.url}} </td>
     </ng-container>
 
     <ng-container matColumnDef="category">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.services.category' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.services.category' | i18n}} </th>
       <td mat-cell *matCellDef="let service"> {{service.category}} </td>
     </ng-container>
 
     <ng-container matColumnDef="permission">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.services.permission' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.services.permission' | i18n}} </th>
       <td mat-cell *matCellDef="let service"> {{service.permission}} </td>
     </ng-container>
 
@@ -47,10 +48,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="services.page.totalElements"
+    [pageSize]="services.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/services/services.component.ts

@@ -16,11 +16,10 @@ import { AdminServiceEditDialog } from './service.edit';
 export class AdminServicesComponent implements OnInit {
 
   displayedColumns: string[] = ['name', 'url', 'category', 'permission', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  services: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -29,7 +28,6 @@ export class AdminServicesComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -37,11 +35,10 @@ export class AdminServicesComponent implements OnInit {
   }
 
   loadServices(): void {
-    this.serviceManagementService.getAllServices(this.pageIndex, this.pageSize)
+    this.serviceManagementService.getAllServices(this.page.page, this.page.size)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.services = data;
         },
         error: (error) => {
           console.error('Error loading services:', error);
@@ -49,9 +46,20 @@ export class AdminServicesComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
+    this.loadServices();
+  }
+
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadServices();
   }
 

src/app/pages/admin/shortened-urls/shortened-urls.component.html

@@ -24,26 +24,27 @@
 
 <br>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource">
+@if (!!shortenedUrls) {
+<div>
+  <table mat-table [dataSource]="shortenedUrls.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="code">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.shortened_urls.code' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.shortened_urls.code' | i18n}} </th>
       <td mat-cell *matCellDef="let url"> {{url.code}} </td>
     </ng-container>
 
     <ng-container matColumnDef="url">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.shortened_urls.url' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.shortened_urls.url' | i18n}} </th>
       <td mat-cell *matCellDef="let url"> {{url.url}} </td>
     </ng-container>
 
     <ng-container matColumnDef="owner">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.shortened_urls.owner' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.shortened_urls.owner' | i18n}} </th>
       <td mat-cell *matCellDef="let url"> {{url.owner}} </td>
     </ng-container>
 
     <ng-container matColumnDef="created">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.shortened_urls.created' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.shortened_urls.created' | i18n}} </th>
       <td mat-cell *matCellDef="let url"> {{url.created | date:'short'}} </td>
     </ng-container>
 
@@ -64,10 +65,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="shortenedUrls.page.totalElements"
+    [pageSize]="shortenedUrls.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/shortened-urls/shortened-urls.component.ts

@@ -17,12 +17,11 @@ import { AdminShortenedUrlEditDialog } from './shortened-url.edit';
 export class AdminShortenedUrlsComponent implements OnInit {
 
   displayedColumns: string[] = ['code', 'url', 'owner', 'created', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  shortenedUrls: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
   searchText: string = '';
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   searchForm: FormGroup;
 
@@ -34,7 +33,6 @@ export class AdminShortenedUrlsComponent implements OnInit {
     private formBuilder: FormBuilder,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
     this.searchForm = this.formBuilder.group({
       search: ['']
     });
@@ -45,11 +43,10 @@ export class AdminShortenedUrlsComponent implements OnInit {
   }
 
   loadShortenedUrls(): void {
-    this.shortenedUrlManagementService.getShortenedUrls(this.pageIndex, this.pageSize, this.searchText)
+    this.shortenedUrlManagementService.getShortenedUrls(this.page.page, this.page.size, this.searchText)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.shortenedUrls = data;
         },
         error: (error) => {
           console.error('Error loading shortened URLs:', error);
@@ -57,15 +54,26 @@ export class AdminShortenedUrlsComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
+    this.loadShortenedUrls();
+  }
+
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadShortenedUrls();
   }
 
   onSearch(): void {
     this.searchText = this.searchForm.value.search;
-    this.pageIndex = 0;
+    this.page.page = 0;
     this.loadShortenedUrls();
   }
 

src/app/pages/admin/system-profile-fields/system-profile-fields.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!systemProfileFields) {
+<div>
+  <table mat-table [dataSource]="systemProfileFields.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.system_profile_fields.name' | i18n}}</th>
       <td mat-cell *matCellDef="let field">{{field.name}}</td>
@@ -41,10 +42,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="systemProfileFields.page.totalElements"
+    [pageSize]="systemProfileFields.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/system-profile-fields/system-profile-fields.component.ts

@@ -16,10 +16,10 @@ import { AdminSystemProfileFieldEditDialog } from './system-profile-field.edit';
 })
 export class AdminSystemProfileFieldsComponent implements OnInit {
   displayedColumns: string[] = ['name', 'type', 'uniqueValue', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  systemProfileFields: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminSystemProfileFieldsComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminSystemProfileFieldsComponent implements OnInit {
   }
 
   loadFields(): void {
-    this.systemProfileFieldManagementService.getSystemProfileFields(this.pageIndex, this.pageSize).subscribe(
+    this.systemProfileFieldManagementService.getSystemProfileFields(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.systemProfileFields = data;
       },
       error => {
         console.error('Error loading system profile fields:', error);
@@ -48,15 +46,21 @@ export class AdminSystemProfileFieldsComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadFields();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadFields();
   }
 
   deleteField(field: any): void {

src/app/pages/admin/system-properties/system-properties.component.html

@@ -10,8 +10,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!systemProperties) {
+<div>
+  <table mat-table [dataSource]="systemProperties.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="key">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.system_properties.key' | i18n}}</th>
       <td mat-cell *matCellDef="let property">{{property.key}}</td>
@@ -39,10 +40,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="systemProperties.page.totalElements"
+    [pageSize]="systemProperties.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/system-properties/system-properties.component.ts

@@ -16,10 +16,10 @@ import { AdminSystemPropertyEditDialog } from './system-property.edit';
 })
 export class AdminSystemPropertiesComponent implements OnInit {
   displayedColumns: string[] = ['key', 'value', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  systemProperties: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminSystemPropertiesComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminSystemPropertiesComponent implements OnInit {
   }
 
   loadProperties(): void {
-    this.systemManagementService.getProperties(this.pageIndex, this.pageSize).subscribe(
+    this.systemManagementService.getProperties(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.systemProperties = data;
       },
       error => {
         console.error('Error loading system properties:', error);
@@ -48,15 +46,21 @@ export class AdminSystemPropertiesComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadProperties();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadProperties();
   }
 
   deleteProperty(property: any): void {

src/app/pages/admin/timeslots/timeslots.component.html

@@ -53,8 +53,9 @@
 
 <br>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!timeslots) {
+<div>
+  <table mat-table [dataSource]="timeslots.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'admin.timeslots.id' | i18n}} </th>
@@ -62,32 +63,32 @@
     </ng-container>
 
     <ng-container matColumnDef="owner">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.owner' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.owner' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.owner}} </td>
     </ng-container>
 
     <ng-container matColumnDef="title">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.title' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.title' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.title}} </td>
     </ng-container>
 
     <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.type' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.type' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.type}} </td>
     </ng-container>
 
     <ng-container matColumnDef="visibility">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.visibility' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.visibility' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.visibility}} </td>
     </ng-container>
 
     <ng-container matColumnDef="start">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.start' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.start' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.start | date:'short'}} </td>
     </ng-container>
 
     <ng-container matColumnDef="end">
-      <th mat-header-cell *matHeaderCellDef> {{'admin.timeslots.end' | i18n}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'admin.timeslots.end' | i18n}} </th>
       <td mat-cell *matCellDef="let timeslot"> {{timeslot.end | date:'short'}} </td>
     </ng-container>
 
@@ -108,10 +109,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="timeslots.page.totalElements"
+    [pageSize]="timeslots.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/timeslots/timeslots.component.ts

@@ -17,13 +17,10 @@ import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 export class AdminTimeslotsComponent implements OnInit {
 
   displayedColumns: string[] = ['id', 'owner', 'title', 'type', 'visibility', 'start', 'end', 'actions'];
-  dataSource: MatTableDataSource<any>;
   
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
-  sortField = 'id';
-  sortDescending = false;
+  timeslots: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   filterForm: FormGroup;
 
@@ -36,7 +33,6 @@ export class AdminTimeslotsComponent implements OnInit {
     private formBuilder: FormBuilder,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
     this.filterForm = this.formBuilder.group({
       owner: [''],
       type: [''],
@@ -52,10 +48,10 @@ export class AdminTimeslotsComponent implements OnInit {
   loadTimeslots(): void {
     const filters = this.filterForm.value;
     this.timeslotManagementService.getTimeslots(
-      this.pageIndex, 
-      this.pageSize, 
-      this.sortField, 
-      this.sortDescending,
+      this.page.page, 
+      this.page.size, 
+      this.page.sort, 
+      this.page.desc,
       filters.owner || undefined,
       undefined,
       undefined,
@@ -64,8 +60,7 @@ export class AdminTimeslotsComponent implements OnInit {
       filters.search || undefined
     ).subscribe({
       next: (data: any) => {
-        this.dataSource.data = data.content;
-        this.totalElements = data.totalElements;
+        this.timeslots = data;
       },
       error: (error) => {
         console.error('Error loading timeslots:', error);
@@ -73,20 +68,25 @@ export class AdminTimeslotsComponent implements OnInit {
     });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadTimeslots();
   }
 
-  onSortChange(sort: any): void {
-    this.sortField = sort.active || 'id';
-    this.sortDescending = sort.direction === 'desc';
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadTimeslots();
   }
 
   applyFilter(): void {
-    this.pageIndex = 0;
+    this.page.page = 0;
     this.loadTimeslots();
   }
 

src/app/pages/admin/user-aliases/user-aliases.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!userAliases) {
+<div>
+  <table mat-table [dataSource]="userAliases.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.user_aliases.id' | i18n}}</th>
       <td mat-cell *matCellDef="let alias">{{alias.id}}</td>
@@ -20,12 +21,12 @@
     </ng-container>
 
     <ng-container matColumnDef="target">
-      <th mat-header-cell *matHeaderCellDef>{{'admin.user_aliases.target' | i18n}}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.user_aliases.target' | i18n}}</th>
       <td mat-cell *matCellDef="let alias">{{alias.target}}</td>
     </ng-container>
 
     <ng-container matColumnDef="visibility">
-      <th mat-header-cell *matHeaderCellDef>{{'admin.user_aliases.visibility' | i18n}}</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.user_aliases.visibility' | i18n}}</th>
       <td mat-cell *matCellDef="let alias">{{alias.visibility}}</td>
     </ng-container>
 
@@ -46,10 +47,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="userAliases.page.totalElements"
+    [pageSize]="userAliases.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/user-aliases/user-aliases.component.ts

@@ -16,10 +16,10 @@ import { AdminUserAliasEditDialog } from './user-alias.edit';
 })
 export class AdminUserAliasesComponent implements OnInit {
   displayedColumns: string[] = ['id', 'alias', 'target', 'visibility', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  userAliases: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminUserAliasesComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminUserAliasesComponent implements OnInit {
   }
 
   loadAliases(): void {
-    this.userAliasManagementService.getAliases(this.pageIndex, this.pageSize).subscribe(
+    this.userAliasManagementService.getAliases(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.userAliases = data;
       },
       error => {
         console.error('Error loading user aliases:', error);
@@ -48,15 +46,21 @@ export class AdminUserAliasesComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadAliases();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadAliases();
   }
 
   deleteAlias(alias: any): void {

src/app/pages/admin/users/users.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!users) {
+<div>
+  <table mat-table [dataSource]="users.content" matSort (matSortChange)="updateSort($event)">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="id"> {{'admin.users.id' | i18n}} </th>
@@ -25,21 +26,18 @@
       <td mat-cell *matCellDef="let user"> {{user.status}} </td>
     </ng-container>
 
-    <ng-container matColumnDef="created">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="created"> {{'admin.users.created' | i18n}} </th>
-      <td mat-cell *matCellDef="let user"> {{user.created | date:'short'}} </td>
-    </ng-container>
-
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef> {{'admin.actions' | i18n}} </th>
       <td mat-cell *matCellDef="let user">
         <button mat-icon-button (click)="editUser(user)" [title]="'admin.users.edit' | i18n">
           <mat-icon>edit</mat-icon>
         </button>
-        <button mat-icon-button [routerLink]="['/admin/permissions']" [queryParams]="{username: user.username}" [title]="'admin.users.view_permissions' | i18n">
+        <button mat-icon-button [routerLink]="['/admin/permissions']" [queryParams]="{username: user.username}"
+          [title]="'admin.users.view_permissions' | i18n">
           <mat-icon>security</mat-icon>
         </button>
-        <button mat-icon-button [routerLink]="['/admin/quotas']" [queryParams]="{username: user.username}" [title]="'admin.users.view_quotas' | i18n">
+        <button mat-icon-button [routerLink]="['/admin/quotas']" [queryParams]="{username: user.username}"
+          [title]="'admin.users.view_quotas' | i18n">
           <mat-icon>data_usage</mat-icon>
         </button>
         <button mat-icon-button (click)="deleteUser(user.username)" [title]="'admin.users.delete' | i18n">
@@ -52,11 +50,8 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
-    showFirstLastButtons>
+  <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="users.page.totalElements" [pageSize]="users.page.size"
+    (page)="updatePages($event)" showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/users/users.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { I18nService } from './../../../services/i18n.service';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
 import { UserManagementService } from '../../../services/admin/user.management.service';
+import { I18nService } from './../../../services/i18n.service';
 import { ConfirmDialog } from './../../../ui/confirm/confirm.component';
 import { AdminUserEditDialog } from './user.edit';
 
@@ -16,14 +15,11 @@ import { AdminUserEditDialog } from './user.edit';
 })
 export class AdminUsersComponent implements OnInit {
 
-  displayedColumns: string[] = ['id', 'username', 'status', 'created', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
-  sortField = 'username';
-  sortDescending = false;
+  displayedColumns: string[] = ['id', 'username', 'status', 'actions'];
+
+  users: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -33,7 +29,6 @@ export class AdminUsersComponent implements OnInit {
     private i18n: I18nService,
     public dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource<any>([]);
   }
 
   ngOnInit(): void {
@@ -41,11 +36,10 @@ export class AdminUsersComponent implements OnInit {
   }
 
   loadUsers(): void {
-    this.userManagementService.getUsers(this.pageIndex, this.pageSize, this.sortField, this.sortDescending)
+    this.userManagementService.getUsers(this.page.page, this.page.size, this.page.sort, this.page.desc)
       .subscribe({
         next: (data: any) => {
-          this.dataSource.data = data.content;
-          this.totalElements = data.totalElements;
+          this.users = data;
         },
         error: (error) => {
           console.error('Error loading users:', error);
@@ -53,15 +47,20 @@ export class AdminUsersComponent implements OnInit {
       });
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadUsers();
   }
 
-  onSortChange(sort: any): void {
-    this.sortField = sort.active || 'username';
-    this.sortDescending = sort.direction === 'desc';
+  updateSort(sort: Sort): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
     this.loadUsers();
   }
 

src/app/pages/admin/voucher-mappings/voucher-mappings.component.html

@@ -7,8 +7,9 @@
   </button>
 </header>
 
-<div class="mat-elevation-z8">
-  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)">
+@if (!!voucherMappings) {
+<div>
+  <table mat-table [dataSource]="voucherMappings.content" matSort (matSortChange)="updateSort($event)">
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'admin.voucher_mappings.id' | i18n}}</th>
       <td mat-cell *matCellDef="let mapping">{{mapping.id}}</td>
@@ -51,10 +52,11 @@
   </table>
 
   <mat-paginator 
-    [length]="totalElements"
-    [pageSize]="pageSize"
-    [pageSizeOptions]="[5, 10, 25, 50, 100]"
-    (page)="onPageChange($event)"
+    [pageSizeOptions]="pageSizeOptions"
+    [length]="voucherMappings.page.totalElements"
+    [pageSize]="voucherMappings.page.size"
+    (page)="updatePages($event)"
     showFirstLastButtons>
   </mat-paginator>
 </div>
+}

src/app/pages/admin/voucher-mappings/voucher-mappings.component.ts

@@ -16,10 +16,10 @@ import { AdminVoucherMappingEditDialog } from './voucher-mapping.edit';
 })
 export class AdminVoucherMappingsComponent implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'voucher', 'quota', 'free', 'actions'];
-  dataSource: MatTableDataSource<any>;
-  totalElements = 0;
-  pageSize = 10;
-  pageIndex = 0;
+  
+  voucherMappings: any;
+  page: any = { page: 0, size: 10, sort: "id", desc: false };
+  pageSizeOptions: number[] = [5, 10, 25, 50];
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
@@ -29,7 +29,6 @@ export class AdminVoucherMappingsComponent implements OnInit {
     private i18n: I18nService,
     private dialog: MatDialog
   ) {
-    this.dataSource = new MatTableDataSource();
   }
 
   ngOnInit(): void {
@@ -37,10 +36,9 @@ export class AdminVoucherMappingsComponent implements OnInit {
   }
 
   loadMappings(): void {
-    this.voucherMappingManagementService.getVoucherMappings(this.pageIndex, this.pageSize).subscribe(
+    this.voucherMappingManagementService.getVoucherMappings(this.page.page, this.page.size).subscribe(
       (data: any) => {
-        this.dataSource.data = data.content || data;
-        this.totalElements = data.totalElements || data.length;
+        this.voucherMappings = data;
       },
       error => {
         console.error('Error loading voucher mappings:', error);
@@ -48,15 +46,21 @@ export class AdminVoucherMappingsComponent implements OnInit {
     );
   }
 
-  onPageChange(event: PageEvent): void {
-    this.pageIndex = event.pageIndex;
-    this.pageSize = event.pageSize;
+  updatePages(event: PageEvent): void {
+    this.page.page = event.pageIndex;
+    this.page.size = event.pageSize;
     this.loadMappings();
   }
 
-  onSortChange(sort: any): void {
-    // Sorting can be implemented when backend supports it
-    console.log('Sort change:', sort);
+  updateSort(sort: any): void {
+    if (sort.direction == "") {
+      this.page.sort = "id";
+      this.page.desc = false;
+    } else {
+      this.page.sort = sort.active;
+      this.page.desc = sort.direction == "desc";
+    }
+    this.loadMappings();
   }
 
   deleteMapping(mapping: any): void {

src/app/pages/borrow/items/items.component.html

@@ -62,7 +62,7 @@
       <tr mat-header-row *matHeaderRowDef="borrowItemColumns"></tr>
       <tr mat-row *matRowDef="let myRowData; columns: borrowItemColumns"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="borrowItems.totalElements" [pageSize]="borrowItems.size"
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="borrowItems.page.totalElements" [pageSize]="borrowItems.page.size"
     (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
   </div>
 }

src/app/pages/borrow/requests/requests.component.html

@@ -47,7 +47,7 @@
       <tr mat-header-row *matHeaderRowDef="borrowRequestColumns"></tr>
       <tr mat-row *matRowDef="let myRowData; columns: borrowRequestColumns"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="borrowRequests.totalElements"
-    [pageSize]="borrowRequests.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="borrowRequests.page.totalElements"
+    [pageSize]="borrowRequests.page.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
   </div>
 }

src/app/pages/invites/invites.component.html

@@ -91,7 +91,7 @@
   <tr mat-header-row *matHeaderRowDef="inviteColumns"></tr>
   <tr mat-row *matRowDef="let myRowData; columns: inviteColumns"></tr>
 </table>
-<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="invites.totalElements" [pageSize]="invites.size"
+<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="invites.page.totalElements" [pageSize]="invites.page.size"
 (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
 </div>
 }
@@ -176,7 +176,7 @@
       <tr mat-header-row *matHeaderRowDef="otherColumns"></tr>
       <tr mat-row *matRowDef="let myRowData; columns: otherColumns"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="others.totalElements" [pageSize]="others.size"
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="others.page.totalElements" [pageSize]="others.page.size"
     (page)="updateOthers($event)" showFirstLastButtons></mat-paginator>
   </div>
 }

src/app/pages/jitsi/jitsi.component.html

@@ -86,7 +86,7 @@
       <tr mat-header-row *matHeaderRowDef="jitsiRoomsColumns"></tr>
       <tr mat-row *matRowDef="let myRowData; columns: jitsiRoomsColumns"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="jitsiRooms.totalElements" [pageSize]="jitsiRooms.size"
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="jitsiRooms.page.totalElements" [pageSize]="jitsiRooms.page.size"
     (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
   </div>
 }

src/app/pages/partey/timeslots/timeslots.component.html

@@ -116,7 +116,7 @@
         <tr mat-header-row *matHeaderRowDef="timeslotsColumns"></tr>
         <tr mat-row *matRowDef="let myRowData; columns: timeslotsColumns"></tr>
       </table>
-      <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="timeslots.totalElements" [pageSize]="timeslots.size"
+      <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="timeslots.page.totalElements" [pageSize]="timeslots.page.size"
       (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
     </div>
   }

src/app/pages/urlshortener/urlshortener.component.html

@@ -68,8 +68,8 @@
         <tr mat-header-row *matHeaderRowDef="shortenedUrlColumns"></tr>
         <tr mat-row *matRowDef="let myRowData; columns: shortenedUrlColumns"></tr>
       </table>
-      <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="shortenedUrls.totalElements"
-      [pageSize]="shortenedUrls.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
+      <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="shortenedUrls.page.totalElements"
+      [pageSize]="shortenedUrls.page.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
     </div>
   }