_Bastler/we_bstly-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

pagination for invites

Browse Source
This commit is contained in:
_Bastler 2021-05-07 11:25:01 +02:00
parent 7b0364ae8e
commit e144a012b5
3 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/pages/invites/invites.component.html
View File

@ -1,40 +1,46 @@
<h3>{{'invites' | i18n}}</h3> <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"> <ng-container matColumnDef="starts">
<th mat-header-cell *matHeaderCellDef> {{'invite.starts' | i18n}} </th> <th mat-header-cell *matHeaderCellDef> {{'invite.starts' | i18n}} </th>
<td mat-cell *matCellDef="let invite"> {{ invite.starts | date:datetimeformat}} </td> <td mat-cell *matCellDef="let invite"> {{ invite.starts | date:datetimeformat}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="expires"> <ng-container matColumnDef="expires">
<th mat-header-cell *matHeaderCellDef> {{'invite.expires' | i18n}} </th> <th mat-header-cell *matHeaderCellDef> {{'invite.expires' | i18n}} </th>
<td mat-cell *matCellDef="let invite"> {{ invite.expires | date:datetimeformat}} </td> <td mat-cell *matCellDef="let invite"> {{ invite.expires | date:datetimeformat}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="link"> <ng-container matColumnDef="link">
<th mat-header-cell *matHeaderCellDef> {{'invite.link' | i18n}} </th> <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"> <td mat-cell *matCellDef="let invite"> <a href="{{ invite.codeLink}}" target="_blank" mat-button color="accent">
{{ {{
invite.code}}</a> </td> invite.code}}</a> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="note"> <ng-container matColumnDef="note">
<th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th> <th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th>
<td mat-cell *matCellDef="let invite"> {{ invite.note}} </td> <td mat-cell *matCellDef="let invite"> {{ invite.note}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="redeemed"> <ng-container matColumnDef="redeemed">
<th mat-header-cell *matHeaderCellDef> {{'invite.redeemed' | i18n}} </th> <th mat-header-cell *matHeaderCellDef> {{'invite.redeemed' | i18n}} </th>
<td mat-cell *matCellDef="let invite"> <td mat-cell *matCellDef="let invite">
<mat-icon *ngIf="invite.redeemed">how_to_reg</mat-icon> <mat-icon *ngIf="invite.redeemed">how_to_reg</mat-icon>
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="inviteColumns"></tr> <tr mat-header-row *matHeaderRowDef="inviteColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: inviteColumns"></tr> <tr mat-row *matRowDef="let myRowData; columns: inviteColumns"></tr>
</table> </table>
<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="invites.totalElements" [pageSize]="invites.size" (page)="updatePages($event)" showFirstLastButtons></mat-paginator>
</div>
<mat-card> <mat-card>
<mat-card-content> <mat-card-content>
@ -55,13 +61,13 @@
<h4>{{'invites.others' | i18n}}</h4> <h4>{{'invites.others' | i18n}}</h4>
<mat-form-field> <mat-form-field>
<input matInput [formControl]="searchFormControl" placeholder="{{'invites.search' | i18n}}"> <input matInput [formControl]="searchOthersFormControl" placeholder="{{'invites.search' | i18n}}">
</mat-form-field> </mat-form-field>
<table mat-table matSort [dataSource]="others.content"> <table mat-table matSort [dataSource]="others.content">
<ng-container matColumnDef="note"> <ng-container matColumnDef="note">
<th mat-header-cell *matHeaderCellDef> {{'invite.note' | i18n}} </th> <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> </ng-container>
<tr mat-header-row *matHeaderRowDef="otherColumns"></tr> <tr mat-header-row *matHeaderRowDef="otherColumns"></tr>
<tr mat-row *matRowDef="let myRowData; columns: otherColumns"></tr> <tr mat-row *matRowDef="let myRowData; columns: otherColumns"></tr>

17
src/app/pages/invites/invites.component.ts
View File

@ -18,7 +18,7 @@ import {debounceTime} from 'rxjs/operators';
export class InvitesComponent implements OnInit { export class InvitesComponent implements OnInit {
quota: string; quota: string;
invites: any[]; invites: any;
others: any; others: any;
inviteQuota: number = 0; inviteQuota: number = 0;
success: boolean; success: boolean;
@ -26,6 +26,7 @@ export class InvitesComponent implements OnInit {
datetimeformat: string; datetimeformat: string;
pageSizeOptions: number[] = [5, 10, 25, 50]; pageSizeOptions: number[] = [5, 10, 25, 50];
searchFormControl = new FormControl(); searchFormControl = new FormControl();
searchOthersFormControl = new FormControl();
inviteColumns = ["starts", "expires", "link", "note", "redeemed"]; inviteColumns = ["starts", "expires", "link", "note", "redeemed"];
otherColumns = ["note"]; otherColumns = ["note"];
@ -43,7 +44,11 @@ export class InvitesComponent implements OnInit {
this.datetimeformat = this.i18n.get('format.datetime', []); this.datetimeformat = this.i18n.get('format.datetime', []);
this.quota = this.route.snapshot.paramMap.get('quota'); this.quota = this.route.snapshot.paramMap.get('quota');
this.searchFormControl.valueChanges.pipe(debounceTime(500)).subscribe(value => { 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.inviteService.getOthersPages(this.quota, 0, this.others.size, value).subscribe((data: any) => {
this.others = data; this.others = data;
}, (error) => {}) }, (error) => {})
@ -72,6 +77,12 @@ export class InvitesComponent implements OnInit {
}, (error) => {}) }, (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 { create(): void {
this.working = true; this.working = true;
@ -92,7 +103,7 @@ export class InvitesComponent implements OnInit {
} }
updateOthers(event: PageEvent) { 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; this.others = data;
}, (error) => {}) }, (error) => {})
} }

5
src/app/services/invites.service.ts
View File

@ -15,12 +15,15 @@ export class InviteService {
return this.http.get(environment.apiUrl + "/invites" + (quota ? "?quota=" + quota : "")); 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) { getOthers(quota: string) {
return this.http.get(environment.apiUrl + "/invites/" + quota + "/others"); 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); return this.http.get(environment.apiUrl + "/invites/" + quota + "/others?page=" + page + "&size=" + size + "&search=" + search);
} }