Added Paging to the Movie Requests Page

This commit is contained in:
Jamie Rees 2018-04-24 14:23:07 +01:00
commit 69e324c670
4 changed files with 17 additions and 8 deletions

View file

@ -56,7 +56,7 @@
<br /> <br />
<div infinite-scroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="100" (scrolled)="loadMore()"> <div>
<div *ngFor="let request of movieRequests | orderBy: order : reverse : 'case-insensitive'"> <div *ngFor="let request of movieRequests | orderBy: order : reverse : 'case-insensitive'">
@ -212,6 +212,8 @@
</div> </div>
<p-paginator [rows]="10" [totalRecords]="10000" (onPageChange)="paginate($event)"></p-paginator>
</div> </div>

View file

@ -8,7 +8,7 @@ import { Subject } from "rxjs/Subject";
import { AuthService } from "../auth/auth.service"; import { AuthService } from "../auth/auth.service";
import { NotificationService, RadarrService, RequestService } from "../services"; 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({ @Component({
selector: "movie-requests", selector: "movie-requests",
@ -65,8 +65,8 @@ export class MovieRequestsComponent implements OnInit {
} }
public ngOnInit() { public ngOnInit() {
this.amountToLoad = 100; this.amountToLoad = 10;
this.currentlyLoaded = 100; this.currentlyLoaded = 10;
this.loadInit(); this.loadInit();
this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser"); this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
this.filter = { this.filter = {
@ -74,8 +74,10 @@ export class MovieRequestsComponent implements OnInit {
statusFilter: FilterType.None}; statusFilter: FilterType.None};
} }
public loadMore() { public paginate(event: IPagenator) {
this.loadRequests(this.amountToLoad, this.currentlyLoaded); const skipAmount = event.first;
this.loadRequests(this.amountToLoad, skipAmount);
} }
public search(text: any) { public search(text: any) {
@ -226,7 +228,7 @@ export class MovieRequestsComponent implements OnInit {
if(!this.movieRequests) { if(!this.movieRequests) {
this.movieRequests = []; this.movieRequests = [];
} }
this.movieRequests.push.apply(this.movieRequests, x); this.movieRequests = x;
this.currentlyLoaded = currentlyLoaded + amountToLoad; this.currentlyLoaded = currentlyLoaded + amountToLoad;
}); });
} }

View file

@ -6,7 +6,7 @@ import { OrderModule } from "ngx-order-pipe";
import { InfiniteScrollModule } from "ngx-infinite-scroll"; import { InfiniteScrollModule } from "ngx-infinite-scroll";
import { ButtonModule, DialogModule } from "primeng/primeng"; import { ButtonModule, DialogModule, PaginatorModule } from "primeng/primeng";
import { MovieRequestsComponent } from "./movierequests.component"; import { MovieRequestsComponent } from "./movierequests.component";
// Request // Request
import { RequestComponent } from "./request.component"; import { RequestComponent } from "./request.component";
@ -36,6 +36,7 @@ const routes: Routes = [
SharedModule, SharedModule,
SidebarModule, SidebarModule,
OrderModule, OrderModule,
PaginatorModule,
], ],
declarations: [ declarations: [
RequestComponent, RequestComponent,

View file

@ -959,3 +959,7 @@ a > h4:hover {
width: 94%; width: 94%;
} }
.ui-state-active {
background-color: $primary-colour-outline $i;
color: black $i;
}