From 69e324c6701ce373c7562f9b6ef02f16e0f7277d Mon Sep 17 00:00:00 2001
From: Jamie Rees <Jamie.Rees@moneybarn.com>
Date: Tue, 24 Apr 2018 14:23:07 +0100
Subject: [PATCH] Added Paging to the Movie Requests Page

---
 .../app/requests/movierequests.component.html      |  4 +++-
 .../app/requests/movierequests.component.ts        | 14 ++++++++------
 src/Ombi/ClientApp/app/requests/requests.module.ts |  3 ++-
 src/Ombi/ClientApp/styles/base.scss                |  4 ++++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.html b/src/Ombi/ClientApp/app/requests/movierequests.component.html
index 8eded8dba..19814b330 100644
--- a/src/Ombi/ClientApp/app/requests/movierequests.component.html
+++ b/src/Ombi/ClientApp/app/requests/movierequests.component.html
@@ -56,7 +56,7 @@
 <br />
 
 
-<div infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="100" (scrolled)="loadMore()">
+<div>
 
 
     <div *ngFor="let request of movieRequests | orderBy: order : reverse : 'case-insensitive'">
@@ -212,6 +212,8 @@
 
 
     </div>
+    
+    <p-paginator [rows]="10" [totalRecords]="10000" (onPageChange)="paginate($event)"></p-paginator>
 </div>
 
 
diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.ts b/src/Ombi/ClientApp/app/requests/movierequests.component.ts
index e28b86eaa..bb6e17b7f 100644
--- a/src/Ombi/ClientApp/app/requests/movierequests.component.ts
+++ b/src/Ombi/ClientApp/app/requests/movierequests.component.ts
@@ -8,7 +8,7 @@ import { Subject } from "rxjs/Subject";
 import { AuthService } from "../auth/auth.service";
 import { NotificationService, RadarrService, RequestService } from "../services";
 
-import { FilterType, IFilter, IIssueCategory, IMovieRequests, IRadarrProfile, IRadarrRootFolder } from "../interfaces";
+import { FilterType, IFilter, IIssueCategory, IMovieRequests, IPagenator, IRadarrProfile, IRadarrRootFolder } from "../interfaces";
 
 @Component({
     selector: "movie-requests",
@@ -65,8 +65,8 @@ export class MovieRequestsComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.amountToLoad = 100;
-        this.currentlyLoaded = 100;
+        this.amountToLoad = 10;
+        this.currentlyLoaded = 10;
         this.loadInit();
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
         this.filter = {
@@ -74,8 +74,10 @@ export class MovieRequestsComponent implements OnInit {
             statusFilter: FilterType.None};
     }
 
-    public loadMore() {
-        this.loadRequests(this.amountToLoad, this.currentlyLoaded);
+    public paginate(event: IPagenator) {
+        const skipAmount = event.first;
+        
+        this.loadRequests(this.amountToLoad, skipAmount);
     }
 
     public search(text: any) {
@@ -226,7 +228,7 @@ export class MovieRequestsComponent implements OnInit {
                 if(!this.movieRequests) {
                     this.movieRequests = [];
                 }
-                this.movieRequests.push.apply(this.movieRequests, x);
+                this.movieRequests = x;
                 this.currentlyLoaded = currentlyLoaded + amountToLoad;
             });
     }
diff --git a/src/Ombi/ClientApp/app/requests/requests.module.ts b/src/Ombi/ClientApp/app/requests/requests.module.ts
index 7bddee71c..18be5ed25 100644
--- a/src/Ombi/ClientApp/app/requests/requests.module.ts
+++ b/src/Ombi/ClientApp/app/requests/requests.module.ts
@@ -6,7 +6,7 @@ import { OrderModule } from "ngx-order-pipe";
 
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 
-import { ButtonModule, DialogModule } from "primeng/primeng";
+import { ButtonModule, DialogModule, PaginatorModule } from "primeng/primeng";
 import { MovieRequestsComponent } from "./movierequests.component";
 // Request
 import { RequestComponent } from "./request.component";
@@ -36,6 +36,7 @@ const routes: Routes = [
         SharedModule,
         SidebarModule,
         OrderModule,
+        PaginatorModule,
     ],
     declarations: [
         RequestComponent,
diff --git a/src/Ombi/ClientApp/styles/base.scss b/src/Ombi/ClientApp/styles/base.scss
index 3a5deb2a3..2f9b35982 100644
--- a/src/Ombi/ClientApp/styles/base.scss
+++ b/src/Ombi/ClientApp/styles/base.scss
@@ -959,3 +959,7 @@ a > h4:hover {
     width: 94%;
 }
 
+.ui-state-active {
+    background-color: $primary-colour-outline $i;
+    color: black $i;
+}
\ No newline at end of file