refactor: update paginator settings and improve page change handling in groups component

ogWebconsole/src/app/components/groups/groups.component.html

@@ -358,12 +358,8 @@
                   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table>
               </section>
-              <mat-paginator
-                [length]="length"
-                [pageSize]="itemsPerPage"
-                [pageIndex]="page"
-                [pageSizeOptions]="pageSizeOptions"
-                (page)="onPageChange($event)">
+              <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+                [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
               </mat-paginator>
             </div>
 
@@ -381,4 +377,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>

ogWebconsole/src/app/components/groups/groups.component.spec.ts

@@ -123,6 +123,6 @@ describe('GroupsComponent', () => {
         spyOn(component['http'], 'get').and.callThrough();
         component.fetchClientsForNode(node);
         expect(component.isLoadingClients).toBeTrue();
-        expect(component['http'].get).toHaveBeenCalledWith(`${component.baseUrl}/clients?organizationalUnit.id=${node.id}`);
+        expect(component['http'].get).toHaveBeenCalledWith(`${component.baseUrl}/clients?organizationalUnit.id=${node.id}&page=1&itemsPerPage=20`);
     });
 });

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -19,7 +19,7 @@ import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/del
 import { ClassroomViewDialogComponent } from './shared/classroom-view/classroom-view-modal';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import {MatPaginator, PageEvent} from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component";
 import { SelectionModel } from "@angular/cdk/collections";
 
@@ -42,9 +42,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
   selectedUnidad: UnidadOrganizativa | null = null;
   selectedDetail: UnidadOrganizativa | null = null;
   length: number = 0;
-  itemsPerPage: number = 10;
+  itemsPerPage: number = 20;
   page: number = 0;
-  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
+  pageSizeOptions: number[] = [5, 10, 20, 50, 100];
   initialLoading: boolean = true;
   isLoadingClients: boolean = false;
   searchTerm = '';
@@ -69,7 +69,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
   displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
 
   private _sort!: MatSort;
-  private _paginator!: MatPaginator;
 
   @ViewChild(MatSort)
   set matSort(ms: MatSort) {
@@ -79,14 +78,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
     }
   }
 
-  @ViewChild(MatPaginator)
-  set matPaginator(mp: MatPaginator) {
-    this._paginator = mp;
-    if (this.selectedClients) {
-      this.selectedClients.paginator = this._paginator;
-    }
-  }
-
   private subscriptions: Subscription = new Subscription();
 
   constructor(
@@ -363,6 +354,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
     });
   }
 
+  onPageChange(event: PageEvent): void {
+    this.page = event.pageIndex;
+    this.itemsPerPage = event.pageSize;
+    this.fetchClientsForNode(this.selectedNode);
+  }
 
   addOU(event: MouseEvent, parent: TreeNode | null = null): void {
     event.stopPropagation();
@@ -737,11 +733,4 @@ export class GroupsComponent implements OnInit, OnDestroy {
     inputElement.value = '';
     this.filterClients('');
   }
-
-  onPageChange(event: PageEvent): void {
-    this.page = event.pageIndex;
-    this.itemsPerPage = event.pageSize;
-    this.length = event.length;
-    this.fetchClientsForNode(this.selectedNode);
-  }
 }