Added the paginator to the issues #4014

pull/4040/head
tidusjar 3 years ago
parent 162a1fda1a
commit 4249a3e7a8

@ -4,6 +4,8 @@ import { IssuesService } from "../services";
import { IIssueCount, IIssues, IPagenator, IssueStatus } from "../interfaces";
import { PageEvent } from '@angular/material/paginator';
@Component({
templateUrl: "issues.component.html",
styleUrls: ['issues.component.scss']
@ -16,7 +18,7 @@ export class IssuesComponent implements OnInit {
public count: IIssueCount;
private takeAmount = 10;
private takeAmount = 50;
private pendingSkip = 0;
private inProgressSkip = 0;
private resolvedSkip = 0;
@ -30,18 +32,18 @@ export class IssuesComponent implements OnInit {
this.issueService.getIssuesCount().subscribe(x => this.count = x);
}
public changePagePending(event: IPagenator) {
this.pendingSkip = event.first;
public changePagePending(event: PageEvent) {
this.pendingSkip = event.pageSize * event.pageIndex++;
this.getPending();
}
public changePageInProg(event: IPagenator) {
this.inProgressSkip = event.first;
public changePageInProg(event: PageEvent) {
this.inProgressSkip = event.pageSize * event.pageIndex++;
this.getInProg();
}
public changePageResolved(event: IPagenator) {
this.resolvedSkip = event.first;
public changePageResolved(event: PageEvent) {
this.resolvedSkip = event.pageSize * event.pageIndex++;
this.getResolved();
}

@ -26,94 +26,17 @@
<td mat-cell *matCellDef="let element"> {{element.userReported.userAlias}} </td>
</ng-container>
<!-- <ng-container matColumnDef="requestedUser.requestedBy">
<th mat-header-cell *matHeaderCellDef> {{'Requests.RequestedBy' | translate}} </th>
<td mat-cell *matCellDef="let element"> {{element.requestedUser?.userAlias}} </td>
</ng-container>
<ng-container matColumnDef="requestedDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.RequestDate' | translate}} </th>
<td mat-cell *matCellDef="let element"> {{element.requestedDate | amLocal | amDateFormat: 'LL'}} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.Status' | translate}} </th>
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
</ng-container>
<ng-container matColumnDef="requestStatus">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> {{ 'Requests.RequestStatus' | translate}} </th>
<td mat-cell *matCellDef="let element"> {{element.requestStatus | translate}} </td>
</ng-container>-->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element">
<button *ngIf="element.requestType === 1" mat-raised-button color="accent" [routerLink]="'/details/movie/' + element.providerId">{{ 'Issues.Details' | translate}}</button>
<button *ngIf="element.requestType === 0" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.providerId">{{ 'Issues.Details' | translate}}</button>
<button *ngIf="element.requestType === 2" mat-raised-button color="accent" [routerLink]="'/details/artist/request/' + element.providerId">{{ 'Issues.Details' | translate}}</button>
<!-- <button mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin"> {{ 'Requests.Options' | translate}}</button> -->
</td>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- <table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<th (click)="setOrder('title', $event)">
<a [translate]="'Issues.ColumnTitle'"></a>
<span *ngIf="order === 'title'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('issueCategory.value', $event)">
<a [translate]="'Issues.Category'"></a>
<span *ngIf="order === 'issueCategory.value'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('status', $event)">
<a [translate]="'Issues.Status'"></a>
<span *ngIf="order === 'status'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th (click)="setOrder('reportedUser', $event)">
<a [translate]="'Issues.ReportedBy'"></a>
<span *ngIf="order === 'reportedUser'">
<span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
</span>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let issue of issues | orderBy: order : reverse : 'case-insensitive'">
<td>
{{issue.title}}
</td>
<td>
{{issue.issueCategory.value}}
</td>
<td>
{{IssueStatus[issue.status] | humanize}}
</td>
<td *ngIf="issue.userReported?.alias">
{{issue.userReported.alias}}
</td>
<td *ngIf="!issue.userReported?.alias">
{{issue.userReported.userName}}
</td>
<td>
<a [routerLink]="['/issues/' + issue.id]" class="btn btn-sm btn-info-outline" [translate]="'Issues.Details'"></a>
</td>
</tr>
</tbody>
</table>
<p-paginator [rows]="rowCount" [totalRecords]="totalRecords" (onPageChange)="paginate($event)"></p-paginator> -->
<mat-paginator (page)="paginate($event)" [length]="totalRecords"></mat-paginator>

@ -14,7 +14,9 @@ export class IssuesTableComponent {
@Output() public changePage = new EventEmitter<IPagenator>();
public displayedColumns = ["title", "category", "subject", "status", "reportedBy", "actions"]
public IssueStatus = IssueStatus;
public IssueStatus = IssueStatus;
public resultsLength: number;
public gridCount: string = "15";
public order: string = "id";
public reverse = false;
@ -44,11 +46,6 @@ export class IssuesTableComponent {
}
public paginate(event: IPagenator) {
//event.first = Index of the first record (current index)
//event.rows = Number of rows to display in new page
//event.page = Index of the new page
//event.pageCount = Total number of pages
this.changePage.emit(event);
}

@ -88,7 +88,7 @@
</div>
<button *ngIf="selection.hasValue() && isAdmin" mat-fab color="accent" class="floating-fab" [matMenuTriggerFor]="aboveMenu">
<mat-icon>add</mat-icon></button>
<i class="fas fa-bars"></i></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item (click)="bulkDelete()">{{'Requests.RequestPanel.Delete' | translate}}</button>
<button mat-menu-item (click)="bulkApprove()">{{'Requests.RequestPanel.Approve' | translate}}</button>

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
Loading…
Cancel
Save