PR changes - fixed pagination for multicast

Author: AugustHA-Iterator

src/app/applications/application-detail/application-detail.component.html

@@ -1,7 +1,6 @@
 <div *ngIf="application">
   <app-top-bar [data]="application" [backButton]="backButton" [subPage]="true"
-    [addDetailDowndown]="true" [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteApplication()"
-    [pageLimit]="pageLimit"  (updatePageLimit)="updatePageLimit($event)">
+    [addDetailDowndown]="true" [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteApplication()">
   </app-top-bar>
   <div class="container-fluid">
     <div class="row">
@@ -54,7 +53,7 @@ <h3>Detaljer</h3>
                   <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate">
                   </app-top-bar-table>
                 </ng-template>
-                  <app-multicast-table [pageLimit]="pageLimit"></app-multicast-table>
+                  <app-multicast-table></app-multicast-table>
               </div>
             </div>
           </div>

src/app/applications/application-detail/application-detail.component.ts

@@ -103,7 +103,4 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy {
             this.deleteDialogSubscription.unsubscribe();
         }
     }
-    updatePageLimit(limit: any) {
-        console.log(limit);
-      }
 }

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

@@ -20,7 +20,6 @@ import { DeleteDialogComponent } from '@shared/components/delete-dialog/delete-d
 import { DeviceType } from '@shared/enums/device-type';
 import { MatDialog } from '@angular/material/dialog';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
-import { ReceivedMessageMetadata } from '@shared/models/received-message-metadata.model';
 import { environment } from '@environments/environment';
 import { startWith, switchMap, map, catchError } from 'rxjs/operators';
 import { MeService } from '@shared/services/me.service';

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

@@ -2,7 +2,7 @@
     <div class="loading-shade" *ngIf="isLoadingResults">
       <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
     </div>
-    <table mat-table [dataSource]="dataSource" matSort matSortActive="groupName" matSortDirection="asc" matSortDisableClear>
+    <table mat-table [dataSource]="multicasts" matSort matSortActive="groupName" matSortDirection="asc" matSortDisableClear>
 
       <!-- Name Column -->
       <ng-container matColumnDef="groupName">

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

@@ -8,15 +8,14 @@ import {
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { environment } from '@environments/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
-import { tableSorter } from '@shared/helpers/table-sorting.helper';
 import { MeService } from '@shared/services/me.service';
 import { SnackService } from '@shared/services/snack.service';
-import { Subscription } from 'rxjs';
+import { merge, Observable, Subscription, of as observableOf } from 'rxjs';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
 import { Multicast, MulticastData } from '../multicast.model';
 import { MulticastService } from '../multicast.service';
 
@@ -30,15 +29,12 @@ export class MulticastTableComponent
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   displayedColumns: string[] = ['groupName', 'groupType', 'menu'];
-  dataSource = new MatTableDataSource<Multicast>();
-  multicasts: Multicast[];
+  multicasts: Multicast[] = [];
   resultsLength = 0;
   public canEdit = false;
   @Input() isLoadingResults: boolean = true;
   public pageSize = environment.tablePageSize;
-  @Input() pageLimit: number;
   public pageOffset = 0;
-  public pageTotal: number;
   public applicationId: number;
 
   private multicastSubscription: Subscription;
@@ -57,38 +53,52 @@ export class MulticastTableComponent
 
   ngOnInit(): void {
     this.applicationId = +Number(this.route.parent.snapshot.paramMap.get('id'));
-    this.getMulticasts();
     this.canEdit = this.meService.canWriteInTargetOrganization();
   }
 
   ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
+    // If the user changes the sort order, reset back to the first page.
+    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
+
+    merge(this.sort.sortChange, this.paginator.page)
+      .pipe(
+        startWith({}),
+        switchMap(() => {
+          this.isLoadingResults = true;
+          const multicasts = this.getMulticasts(
+            this.sort.active,
+            this.sort.direction
+          );
+          //TODO::: Snack here
+          return multicasts;
+        }),
+        map((data) => {
+          // Flip flag to show that loading has finished.
+          this.isLoadingResults = false;
+          this.resultsLength = data.count;
+
+          return data.data;
+        }),
+        catchError(() => {
+          this.isLoadingResults = false;
+          return observableOf([]);
+        })
+      )
+      .subscribe((data) => (this.multicasts = data));
   }
 
-  getMulticasts(): void {
+  getMulticasts(
+    orderByColumn: string,
+    orderByDirection: string
+  ): Observable<MulticastData> {
     if (this.applicationId) {
-      this.multicastSubscription = this.multicastService
-        .getMulticastsByApplicationId(
-          this.pageLimit,
-          this.pageOffset * this.pageLimit,
-          this.applicationId
-        )
-        .subscribe((multicasts: MulticastData) => {
-          this.multicasts = multicasts.data;
-          this.dataSource = new MatTableDataSource<Multicast>(this.multicasts); // these lines of code is inspired/taken from datatarget.
-          this.dataSource.paginator = this.paginator;
-          this.dataSource.sort = this.sort;
-          this.dataSource.sortingDataAccessor = tableSorter;
-          this.isLoadingResults = false;
-          if (this.pageLimit) {
-            this.pageTotal = Math.ceil(multicasts.count / this.pageLimit);
-          }
-          if (multicasts.ok === false) {
-            // ok is only defined when it's an error.
-            this.snackService.showLoadFailSnack();
-          }
-        });
+      return this.multicastService.getMulticastsByApplicationId(
+        this.paginator.pageSize,
+        this.paginator.pageIndex * this.paginator.pageSize,
+        orderByDirection,
+        orderByColumn,
+        this.applicationId
+      );
     }
   }
 
@@ -101,7 +111,11 @@ export class MulticastTableComponent
           this.multicastService.delete(multicast.id).subscribe((response) => {
             if (response.ok && response.body.affected > 0) {
               // if deleted succesfully, get the new array of multicasts and show a succesful snack.
-              this.getMulticasts();
+              this.paginator.page.emit({
+                pageIndex: this.paginator.pageIndex,
+                pageSize: this.paginator.pageSize,
+                length: this.resultsLength,
+              });
               this.snackService.showDeletedSnack();
             } else {
               this.snackService.showFailSnack();

src/app/applications/multicast/multicast.service.ts

@@ -23,11 +23,15 @@ export class MulticastService {
   getMulticastsByApplicationId(
     limit: number,
     offset: number,
+    sort: string,
+    orderOn: string,
     applicationId: number
   ): Observable<MulticastData> {
     const body = {
       limit,
       offset,
+      sort,
+      orderOn,
       applicationId,
     };
     return this.restService.get(this.multicastURL, body);