Added Paging to the Movie Requests Page

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>
 
 

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

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,

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;
+}