From e144a012b5aa96cca93a572eb34cbafe9e16ec41 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Fri, 7 May 2021 11:25:01 +0200
Subject: [PATCH] pagination for invites

---
 src/app/pages/invites/invites.component.html | 66 +++++++++++---------
 src/app/pages/invites/invites.component.ts   | 17 ++++-
 src/app/services/invites.service.ts          |  5 +-
 3 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/app/pages/invites/invites.component.html b/src/app/pages/invites/invites.component.html
index bd183cf..ae8c7ed 100644
--- a/src/app/pages/invites/invites.component.html
+++ b/src/app/pages/invites/invites.component.html
@@ -1,40 +1,46 @@
 <h3>{{'invites' | i18n}}</h3>
 
-<table mat-table matSort [dataSource]="invites">
+<div *ngIf="invites">
+    <mat-form-field>
+        <input matInput [formControl]="searchFormControl" placeholder="{{'invites.search' | i18n}}">
+    </mat-form-field>
+    <table mat-table matSort [dataSource]="invites.content">
 
-    <ng-container matColumnDef="starts">
-        <th mat-header-cell *matHeaderCellDef> {{'invite.starts' | i18n}} </th>
-        <td mat-cell *matCellDef="let invite"> {{ invite.starts | date:datetimeformat}} </td>
-    </ng-container>
+        <ng-container matColumnDef="starts">
+            <th mat-header-cell *matHeaderCellDef> {{'invite.starts' | i18n}} </th>
+            <td mat-cell *matCellDef="let invite"> {{ invite.starts | date:datetimeformat}} </td>
+        </ng-container>
 
-    <ng-container matColumnDef="expires">
-        <th mat-header-cell *matHeaderCellDef> {{'invite.expires' | i18n}} </th>
-        <td mat-cell *matCellDef="let invite"> {{ invite.expires | date:datetimeformat}} </td>
-    </ng-container>
+        <ng-container matColumnDef="expires">
+            <th mat-header-cell *matHeaderCellDef> {{'invite.expires' | i18n}} </th>
+            <td mat-cell *matCellDef="let invite"> {{ invite.expires | date:datetimeformat}} </td>
+        </ng-container>
 
 
-    <ng-container matColumnDef="link">
-        <th mat-header-cell *matHeaderCellDef> {{'invite.link' | i18n}} </th>
-        <td mat-cell *matCellDef="let invite"> <a href="{{ invite.codeLink}}" target="_blank" mat-button color="accent">
-                {{
-                invite.code}}</a> </td>
-    </ng-container>
+        <ng-container matColumnDef="link">
+            <th mat-header-cell *matHeaderCellDef> {{'invite.link' | i18n}} </th>
+            <td mat-cell *matCellDef="let invite"> <a href="{{ invite.codeLink}}" target="_blank" mat-button color="accent">
+                    {{
+                    invite.code}}</a> </td>
+        </ng-container>
 
-    <ng-container matColumnDef="note">
-        <th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th>
-        <td mat-cell *matCellDef="let invite"> {{ invite.note}} </td>
-    </ng-container>
+        <ng-container matColumnDef="note">
+            <th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th>
+            <td mat-cell *matCellDef="let invite"> {{ invite.note}} </td>
+        </ng-container>
 
-    <ng-container matColumnDef="redeemed">
-        <th mat-header-cell *matHeaderCellDef> {{'invite.redeemed' | i18n}} </th>
-        <td mat-cell *matCellDef="let invite">
-            <mat-icon *ngIf="invite.redeemed">how_to_reg</mat-icon>
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="redeemed">
+            <th mat-header-cell *matHeaderCellDef> {{'invite.redeemed' | i18n}} </th>
+            <td mat-cell *matCellDef="let invite">
+                <mat-icon *ngIf="invite.redeemed">how_to_reg</mat-icon>
+            </td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="inviteColumns"></tr>
-    <tr mat-row *matRowDef="let myRowData; columns: inviteColumns"></tr>
-</table>
+        <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" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
+</div>
 
 <mat-card>
     <mat-card-content>
@@ -55,13 +61,13 @@
     <h4>{{'invites.others' | i18n}}</h4>
 
     <mat-form-field>
-        <input matInput [formControl]="searchFormControl" placeholder="{{'invites.search' | i18n}}">
+        <input matInput [formControl]="searchOthersFormControl" placeholder="{{'invites.search' | i18n}}">
     </mat-form-field>
 
     <table mat-table matSort [dataSource]="others.content">
         <ng-container matColumnDef="note">
             <th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th>
-            <td mat-cell *matCellDef="let invite"> {{ invite.note}} </td>
+            <td mat-cell *matCellDef="let invite"> <span *ngIf="invite.note">{{ invite.note}}</span> <i *ngIf="!invite.note">{{ 'invite.noNote' | i18n}}</i> </td>
         </ng-container>
         <tr mat-header-row *matHeaderRowDef="otherColumns"></tr>
         <tr mat-row *matRowDef="let myRowData; columns: otherColumns"></tr>
diff --git a/src/app/pages/invites/invites.component.ts b/src/app/pages/invites/invites.component.ts
index 6a0f73d..8f724ed 100644
--- a/src/app/pages/invites/invites.component.ts
+++ b/src/app/pages/invites/invites.component.ts
@@ -18,7 +18,7 @@ import {debounceTime} from 'rxjs/operators';
 export class InvitesComponent implements OnInit {
 
   quota: string;
-  invites: any[];
+  invites: any;
   others: any;
   inviteQuota: number = 0;
   success: boolean;
@@ -26,6 +26,7 @@ export class InvitesComponent implements OnInit {
   datetimeformat: string;
   pageSizeOptions: number[] = [5, 10, 25, 50];
   searchFormControl = new FormControl();
+  searchOthersFormControl = new FormControl();
 
   inviteColumns = ["starts", "expires", "link", "note", "redeemed"];
   otherColumns = ["note"];
@@ -43,7 +44,11 @@ export class InvitesComponent implements OnInit {
     this.datetimeformat = this.i18n.get('format.datetime', []);
     this.quota = this.route.snapshot.paramMap.get('quota');
     this.searchFormControl.valueChanges.pipe(debounceTime(500)).subscribe(value => {
-
+      this.inviteService.getPages(this.quota, 0, this.invites.size, value).subscribe((data: any) => {
+        this.invites = data;
+      }, (error) => {})
+    })
+    this.searchOthersFormControl.valueChanges.pipe(debounceTime(500)).subscribe(value => {
       this.inviteService.getOthersPages(this.quota, 0, this.others.size, value).subscribe((data: any) => {
         this.others = data;
       }, (error) => {})
@@ -72,6 +77,12 @@ export class InvitesComponent implements OnInit {
     }, (error) => {})
   }
 
+  updatePages(event: PageEvent) {
+    this.inviteService.getPages(this.quota, event.pageIndex, event.pageSize, this.searchFormControl.value ? this.searchFormControl.value : "").subscribe((data: any) => {
+      this.invites = data;
+    }, (error) => {})
+  }
+
   create(): void {
     this.working = true;
 
@@ -92,7 +103,7 @@ export class InvitesComponent implements OnInit {
   }
 
   updateOthers(event: PageEvent) {
-    this.inviteService.getOthersPages(this.quota, event.pageIndex, event.pageSize, "").subscribe((data: any) => {
+    this.inviteService.getOthersPages(this.quota, event.pageIndex, event.pageSize, this.searchOthersFormControl.value ? this.searchOthersFormControl.value : "").subscribe((data: any) => {
       this.others = data;
     }, (error) => {})
   }
diff --git a/src/app/services/invites.service.ts b/src/app/services/invites.service.ts
index 2355c2c..fd6499c 100644
--- a/src/app/services/invites.service.ts
+++ b/src/app/services/invites.service.ts
@@ -15,12 +15,15 @@ export class InviteService {
         return this.http.get(environment.apiUrl + "/invites" + (quota ? "?quota=" + quota : ""));
     }
 
+    getPages(quota: string, page: number, size: number, search: string) {
+        return this.http.get(environment.apiUrl + "/invites" + (quota ? "?quota=" + quota + "&" : "?") + "page=" + page + "&size=" + size  + "&search=" + search);
+    }
 
     getOthers(quota: string) {
         return this.http.get(environment.apiUrl + "/invites/" + quota + "/others");
     }
 
-    getOthersPages(quota: string, page : number, size : number, search : string) {
+    getOthersPages(quota: string, page: number, size: number, search: string) {
         return this.http.get(environment.apiUrl + "/invites/" + quota + "/others?page=" + page + "&size=" + size + "&search=" + search);
     }