Updated groups paginator

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

@@ -356,7 +356,13 @@
                   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table>
               </section>
-              <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
+              <mat-paginator
+                [length]="length"
+                [pageSize]="itemsPerPage"
+                [pageIndex]="page"
+                [pageSizeOptions]="pageSizeOptions"
+                (page)="onPageChange($event)">
+              </mat-paginator>
             </div>
           </div>
           <!-- No clients view -->
@@ -371,4 +377,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>

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 } 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";
 
@@ -41,6 +41,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
   organizationalUnits: UnidadOrganizativa[] = [];
   selectedUnidad: UnidadOrganizativa | null = null;
   selectedDetail: UnidadOrganizativa | null = null;
+  length: number = 0;
+  itemsPerPage: number = 10;
+  page: number = 0;
+  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
   initialLoading: boolean = true;
   isLoadingClients: boolean = false;
   searchTerm = '';
@@ -334,11 +338,12 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
 
-  public fetchClientsForNode(node: TreeNode, selectedClientsBeforeEdit: string[] = []): void {
+  public fetchClientsForNode(node: any, selectedClientsBeforeEdit: string[] = []): void {
     this.isLoadingClients = true;
-    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}`).subscribe({
+    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`).subscribe({
       next: (response) => {
         this.selectedClients.data = response['hydra:member'];
+        this.length = response['hydra:totalItems'];
         this.arrayClients = this.selectedClients.data;
         this.hasClients = node.hasClients ?? false;
         this.isLoadingClients = false;
@@ -732,4 +737,11 @@ 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);
+  }
 }