Added the paginator to the issues #4014

src/Ombi/ClientApp/src/app/issues/issues.component.ts

@@ -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();
     }
 

src/Ombi/ClientApp/src/app/issues/issuestable.component.html

@@ -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>

src/Ombi/ClientApp/src/app/issues/issuestable.component.ts

@@ -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);
     }
 

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html

@@ -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>

src/Ombi/yarn.lock

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