diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
index 23490a43a..0ae9b89c8 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
@@ -1,47 +1,57 @@
-
-
-
-
-
- Requested By |
- {{element.requestedUser.userAlias}} |
-
-
-
- Title |
- {{element.title}} ({{element.releaseDate | amLocal | amDateFormat: 'YYYY'}}) |
-
-
-
- Request Date |
- {{element.requestedDate | amLocal | amDateFormat: 'LL'}} |
-
-
-
- Status |
- {{element.status}} |
-
-
-
-
- Request Status |
-
- {{'Common.ProcessingRequest' | translate}}
- {{'Common.PendingApproval' | translate}}
-
- {{'Common.NotRequested' | translate}}
-
- |
-
-
-
- |
-
-
- |
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+ Requested By |
+ {{element.requestedUser?.userAlias}} |
+
+
+
+ Title |
+ {{element.title}} ({{element.releaseDate | amLocal | amDateFormat:
+ 'YYYY'}}) |
+
+
+
+ Request Date |
+ {{element.requestedDate | amLocal | amDateFormat: 'LL'}} |
+
+
+
+ Status |
+ {{element.status}} |
+
+
+
+
+ Request Status |
+
+ {{'Common.ProcessingRequest' | translate}}
+ {{'Common.PendingApproval' |
+ translate}}
+
+ {{'Common.NotRequested' |
+ translate}}
+
+ |
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts
index 3dad4584f..29b86112e 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts
@@ -1,23 +1,59 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, AfterViewInit, ViewChild } from "@angular/core";
import { RequestService } from "../../../services";
import { IMovieRequests, OrderType, FilterType, IRequestsViewModel } from "../../../interfaces";
+import { MatPaginator, MatSort } from "@angular/material";
+import { merge, Observable, of as observableOf } from 'rxjs';
+import { catchError, map, startWith, switchMap } from 'rxjs/operators';
@Component({
templateUrl: "./movies-grid.component.html",
selector: "movies-grid",
styleUrls: ["../requests-list.component.scss"]
})
-export class MoviesGridComponent implements OnInit {
- public dataSource: IRequestsViewModel;
-
+export class MoviesGridComponent implements AfterViewInit {
+ public dataSource: IMovieRequests[] = [];
+ public resultsLength: number;
+ public isLoadingResults = true;
public displayedColumns: string[] = ['requestedBy', 'title', 'requestedDate', 'status', 'requestStatus', 'actions'];
+ public gridCount = 30;
+
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+ @ViewChild(MatSort) sort: MatSort;
constructor(private requestService: RequestService) {
-
+
}
- public async ngOnInit() {
- this.dataSource = await this.requestService.getMovieRequests(30,0, OrderType.RequestedDateDesc,
- {availabilityFilter: FilterType.None, statusFilter: FilterType.None}).toPromise();
+ public async ngAfterViewInit() {
+ // const results = await this.requestService.getMovieRequests(this.gridCount, 0, OrderType.RequestedDateDesc,
+ // { availabilityFilter: FilterType.None, statusFilter: FilterType.None }).toPromise();
+ // this.dataSource = results.collection;
+ // this.resultsLength = results.total;
+
+ // If the user changes the sort order, reset back to the first page.
+ this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
+
+ merge(this.sort.sortChange, this.paginator.page)
+ .pipe(
+ startWith({}),
+ switchMap(() => {
+ this.isLoadingResults = true;
+ // eturn this.exampleDatabase!.getRepoIssues(
+ // this.sort.active, this.sort.direction, this.paginator.pageIndex);
+ return this.requestService.getMovieRequests(this.gridCount, this.paginator.pageIndex * this.gridCount, OrderType.RequestedDateDesc,
+ { availabilityFilter: FilterType.None, statusFilter: FilterType.None});
+ }),
+ map((data: IRequestsViewModel) => {
+ // Flip flag to show that loading has finished.
+ this.isLoadingResults = false;
+ this.resultsLength = data.total;
+
+ return data.collection;
+ }),
+ catchError((err) => {
+ this.isLoadingResults = false;
+ return observableOf([]);
+ })
+ ).subscribe(data => this.dataSource = data);
}
}
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss b/src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss
index a420998bc..041f7e285 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.scss
@@ -5,4 +5,22 @@
.table {
width: 100%;
-}
\ No newline at end of file
+}
+.example-table-container {
+ position: relative;
+ max-height: 400px;
+ overflow: auto;
+ }
+
+.example-loading-shade {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 56px;
+ right: 0;
+ background: rgba(0, 0, 0, 0.15);
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/shared/shared.module.ts b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
index 00a17e891..5998ff4fb 100644
--- a/src/Ombi/ClientApp/src/app/shared/shared.module.ts
+++ b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
@@ -10,7 +10,7 @@ import { IssuesReportComponent } from "./issues-report.component";
import { InputSwitchModule, SidebarModule } from "primeng/primeng";
import {
- MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule} from '@angular/material';
+ MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule, MatPaginatorModule, MatSortModule} from '@angular/material';
import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
MatChipsModule } from "@angular/material";
import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
@@ -45,6 +45,8 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
MatDialogModule,
MatTooltipModule,
MatSelectModule,
+ MatPaginatorModule,
+ MatSortModule,
],
entryComponents: [
EpisodeRequestComponent
@@ -77,6 +79,8 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
MatExpansionModule,
MatDialogModule,
MatTableModule,
+ MatPaginatorModule,
+ MatSortModule,
],
})
export class SharedModule {}