Enforce same page size options

src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html

@@ -85,7 +85,7 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
   <mat-paginator
-    [pageSizeOptions]="[5, 10, 20]"
+    [pageSizeOptions]="pageSizeOptions"
     [pageSize]="pageSize"
     [length]="resultsLength"
     showFirstLastButtons

src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.ts

@@ -10,6 +10,7 @@ import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 import { ApiKeyGetManyResponse, ApiKeyResponse } from '../../api-key.model';
 import { ApiKeyService } from '../../api-key.service';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-api-key-table',
@@ -30,6 +31,7 @@ export class ApiKeyTableComponent implements AfterViewInit {
   @ViewChild(MatSort) sort: MatSort;
   resultsLength = 0;
   public pageSize = environment.tablePageSize;
+  pageSizeOptions = DefaultPageSizeOptions;
 
   constructor(
     private meService: MeService,

src/app/admin/organisation/organisation-list/organisation-tabel/organisation-tabel.component.html

@@ -57,6 +57,6 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
-</div>
+</div>

src/app/admin/organisation/organisation-list/organisation-tabel/organisation-tabel.component.ts

@@ -10,6 +10,7 @@ import { merge, Observable, of as observableOf } from 'rxjs';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { environment } from '@environments/environment';
 import { startWith, switchMap, map, catchError } from 'rxjs/operators';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
     selector: 'app-organisation-tabel',
@@ -29,6 +30,8 @@ export class OrganisationTabelComponent implements AfterViewInit {
 
     resultsLength = 0;
     public pageSize = environment.tablePageSize;
+    pageSizeOptions = DefaultPageSizeOptions;
+
     isLoadingResults = true;
 
     constructor(

src/app/admin/permission/permission-list/permission-tabel/permission-tabel.component.html

@@ -81,6 +81,6 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
 </div>

src/app/admin/permission/permission-list/permission-tabel/permission-tabel.component.ts

@@ -15,6 +15,7 @@ import {
 } from '../../permission.model';
 import { PermissionService } from '../../permission.service';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
     selector: 'app-permission-tabel',
@@ -39,6 +40,8 @@ export class PermissionTabelComponent implements AfterViewInit {
 
     resultsLength = 0;
     public pageSize = environment.tablePageSize;
+    pageSizeOptions = DefaultPageSizeOptions;
+
     isLoadingResults = true;
 
     constructor(

src/app/admin/users/user-list/awaiting-users-table/awaiting-users-table.component.html

@@ -81,10 +81,10 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
   <mat-paginator
-    [pageSizeOptions]="[5, 10, 20]"
+    [pageSizeOptions]="pageSizeOptions"
     [pageSize]="pageSize"
     [length]="resultsLength"
     showFirstLastButtons
   >
   </mat-paginator>
-</div>
+</div>

src/app/admin/users/user-list/awaiting-users-table/awaiting-users-table.component.ts

@@ -13,6 +13,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-awaiting-users-table',
@@ -24,6 +25,8 @@ export class AwaitingUsersTableComponent implements AfterViewInit {
   users: UserResponse[];
 
   public pageSize = environment.tablePageSize;
+  pageSizeOptions = DefaultPageSizeOptions;
+
   resultsLength = 0;
   public errorMessage: string;
   isLoadingResults = true;
@@ -41,9 +44,9 @@ export class AwaitingUsersTableComponent implements AfterViewInit {
     private userService: UserService,
     private sharedService: SharedVariableService,
     private deleteDialogService: DeleteDialogService
-  ) {} 
+  ) {}
 
-  ngAfterViewInit() {    
+  ngAfterViewInit() {
     this.organizationId = this.sharedService.getSelectedOrganisationId();
     // If the user changes the sort order, reset back to the first page.
     this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));

src/app/admin/users/user-list/user-table/user-table.component.html

@@ -81,7 +81,7 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
 </div>
-<!-- </ng-template> -->
+<!-- </ng-template> -->

src/app/admin/users/user-list/user-table/user-table.component.ts

@@ -12,6 +12,7 @@ import { UserGetManyResponse, UserResponse } from '../../user.model';
 import { UserService } from '../../user.service';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { environment } from '@environments/environment';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
     selector: 'app-user-table',
@@ -30,6 +31,7 @@ export class UserTableComponent implements AfterViewInit {
     data: UserResponse[];
 
     public pageSize = environment.tablePageSize;
+    pageSizeOptions = DefaultPageSizeOptions;
     resultsLength = 0;
     isLoadingResults = true;
     @ViewChild(MatPaginator) paginator: MatPaginator;

src/app/applications/applications-list/applications-table/applications-table.component.html

@@ -56,6 +56,6 @@
     </table>
   </div>
 
-  <mat-paginator [length]="resultsLength" [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" showFirstLastButtons>
+  <mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons>
   </mat-paginator>
 </div>

src/app/applications/applications-list/applications-table/applications-table.component.ts

@@ -16,8 +16,8 @@ import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dia
 import { MeService } from '@shared/services/me.service';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { catchError, map, startWith, switchMap } from 'rxjs/operators';
-import { DeviceType } from '@shared/enums/device-type';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 /**
  * @title Table retrieving data through HTTP
@@ -34,6 +34,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
   data: Application[] = [];
 
   public pageSize = environment.tablePageSize;
+  pageSizeOptions = DefaultPageSizeOptions;
   resultsLength = 0;
   isLoadingResults = true;
   public errorMessage: string;

src/app/applications/datatarget/datatarget-table/datatarget-table.component.html

@@ -48,6 +48,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+  <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
   </mat-paginator>
 </div>

src/app/applications/datatarget/datatarget-table/datatarget-table.component.ts

@@ -12,6 +12,7 @@ import { environment } from '@environments/environment';
 import { tableSorter } from '@shared/helpers/table-sorting.helper';
 import { MeService } from '@shared/services/me.service';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
     selector: 'app-datatarget-table',
@@ -28,6 +29,7 @@ export class DatatargetTableComponent implements OnInit, AfterViewInit, OnDestro
     public canEdit = false;
     @Input() isLoadingResults = true;
     public pageSize = environment.tablePageSize;
+    pageSizeOptions = DefaultPageSizeOptions;
 
     @Input() pageLimit: number;
     public pageOffset = 0;
@@ -47,7 +49,7 @@ export class DatatargetTableComponent implements OnInit, AfterViewInit, OnDestro
     }
 
     ngOnInit(): void {
-        this.applicationId = +Number(this.route.parent.snapshot.paramMap.get('id'));        
+        this.applicationId = +Number(this.route.parent.snapshot.paramMap.get('id'));
         this.getDatatarget();
         this.canEdit = this.meService.hasAccessToTargetOrganization(OrganizationAccessScope.ApplicationWrite);
     }

src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html

@@ -112,6 +112,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-  <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+  <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
   </mat-paginator>
 </div>

src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts

@@ -24,6 +24,7 @@ import { merge, Observable, of as observableOf } from 'rxjs';
 import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 import { RestService } from 'src/app/shared/services/rest.service';
 import { IoTDeviceService } from '../iot-device.service';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-iot-devices-table',
@@ -36,6 +37,7 @@ export class IotDevicesTableComponent implements AfterViewInit, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   public pageSize = environment.tablePageSize;
+  public pageSizeOptions = DefaultPageSizeOptions;
   displayedColumns: string[] = [
     'name',
     'technology',

src/app/applications/multicast/multicast-table/multicast-table.component.html

@@ -3,7 +3,7 @@
       <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
     </div>
     <table mat-table [dataSource]="multicasts" matSort matSortActive="groupName" matSortDirection="asc" matSortDisableClear>
-  
+
       <!-- Name Column -->
       <ng-container matColumnDef="groupName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>
@@ -14,16 +14,16 @@
             class="application-link">{{element.groupName}}</a>
         </td>
       </ng-container>
-  
+
       <!-- Type Column -->
       <ng-container matColumnDef="groupType">
         <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
           {{ 'MULTICAST-TABLE.TYPE' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-  
+
           {{element.lorawanMulticastDefinition.groupType}}</td>
       </ng-container>
-  
+
       <!-- Options Column -->
       <ng-container matColumnDef="menu">
         <th mat-header-cell *matHeaderCellDef class="col-1"></th>
@@ -44,10 +44,10 @@
           </div>
         </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
-  </div>
+  </div>

src/app/applications/multicast/multicast-table/multicast-table.component.ts

@@ -19,6 +19,7 @@ import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 import { Multicast, MulticastData } from '../multicast.model';
 import { MulticastService } from '../multicast.service';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-multicast-table',
@@ -35,6 +36,7 @@ export class MulticastTableComponent
   public canEdit = false;
   @Input() isLoadingResults = true;
   public pageSize = environment.tablePageSize;
+  public pageSizeOptions = DefaultPageSizeOptions;
   public pageOffset = 0;
   public applicationId: number;
 

src/app/device-model/device-model-table/device-model-table.component.html

@@ -49,6 +49,6 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
-</div>
+</div>

src/app/device-model/device-model-table/device-model-table.component.ts

@@ -19,6 +19,7 @@ import { startWith, switchMap, map, catchError } from 'rxjs/operators';
 import { DeviceModelService } from '../device-model.service';
 import { DeviceModel, DeviceModelResponse } from '../device.model';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-device-model-table',
@@ -31,6 +32,7 @@ export class DeviceModelTableComponent implements OnInit, AfterViewInit {
   public data: DeviceModel[];
   public displayedColumns: string[] = ['name', 'id', 'menu'];
   public pageSize = environment.tablePageSize;
+  public pageSizeOptions = DefaultPageSizeOptions;
   public isLoadingResults = false;
   public resultsLength = 0;
   deleteDialogSubscription: Subscription;

src/app/gateway/gateway-detail/gateway-detail.component.html

@@ -92,7 +92,7 @@ <h3>{{ 'GATEWAY.DATA-PACKETS' | translate }}</h3>
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </table>
-            <mat-paginator [length]="resultLength" [pageSizeOptions]="[5, 10, 20]" [pageSize]="pageSize" showFirstLastButtons>
+            <mat-paginator [length]="resultLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons>
             </mat-paginator>
         </div>
     </div>

src/app/gateway/gateway-detail/gateway-detail.component.ts

@@ -15,6 +15,7 @@ import { OrganizationAccessScope } from '@shared/enums/access-scopes';
 import { ChartConfiguration } from 'chart.js';
 import { ColorGraphBlue1 } from '@shared/constants/color-constants';
 import { formatDate } from '@angular/common';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
     selector: 'app-gateway-detail',
@@ -26,6 +27,7 @@ export class GatewayDetailComponent implements OnInit, OnDestroy, AfterViewInit
     displayedColumns: string[] = ['rxPacketsReceived', 'txPacketsEmitted', 'txPacketsReceived'];
     private gatewayStats: GatewayStats[];
     public pageSize = environment.tablePageSize;
+    public pageSizeOptions = DefaultPageSizeOptions;
     public dataSource = new MatTableDataSource<GatewayStats>();
     @ViewChild(MatPaginator) paginator: MatPaginator;
     public resultLength = 0;

src/app/gateway/gateway-status/gateway-status.component.html

@@ -48,7 +48,7 @@ <h3 *ngIf="title" class="title">{{title}}</h3>
     <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
   </table>
 </div>
-<mat-paginator [ngClass]="paginatorClass" [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize"
+<mat-paginator [ngClass]="paginatorClass" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize"
   [length]="resultsLength" showFirstLastButtons>
 </mat-paginator>
 <div class="status-legend d-flex flex-row mt-3">

src/app/gateway/gateway-status/gateway-status.component.ts

@@ -17,6 +17,7 @@ import { Observable, Subject, Subscription } from 'rxjs';
 import { GatewayStatusInterval } from '../enums/gateway-status-interval.enum';
 import { GatewayStatus, AllGatewayStatusResponse } from '../gateway.model';
 import { map } from 'rxjs/operators';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 interface TimeColumn {
   exactTimestamp: string;
@@ -51,6 +52,7 @@ export class GatewayStatusComponent implements AfterContentInit, OnDestroy {
   timestampText = '';
   visibleFooterTimeInterval = 1;
   pageSize = environment.tablePageSize;
+  public pageSizeOptions = DefaultPageSizeOptions;
   resultsLength = 0;
   organizationId: number | undefined;
   isLoadingResults = false;

src/app/gateway/gateway-table/gateway-table.component.html

@@ -93,6 +93,6 @@
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <mat-paginator [pageSizeOptions]="[25, 50, 100]" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" [length]="resultsLength" showFirstLastButtons>
     </mat-paginator>
-</div>
+</div>

src/app/gateway/gateway-table/gateway-table.component.ts

@@ -17,6 +17,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { tableSorter } from '@shared/helpers/table-sorting.helper';
 import { OrganizationAccessScope } from '@shared/enums/access-scopes';
+import { DefaultPageSizeOptions } from '@shared/constants/page.constants';
 
 @Component({
   selector: 'app-gateway-table',
@@ -38,6 +39,7 @@ export class GatewayTableComponent implements AfterViewInit {
   data: Gateway[] = [];
   dataSource: MatTableDataSource<Gateway>;
   public pageSize = environment.tablePageSize;
+  public pageSizeOptions = DefaultPageSizeOptions;
 
   faExclamationTriangle = faExclamationTriangle;
   faCheckCircle = faCheckCircle;