mirror of https://github.com/Ombi-app/Ombi
Jamie Rees
6 years ago
parent
40c9c82eaf
commit
f80ef6bb24
@ -0,0 +1,5 @@
|
||||
<div class="loading-shade" *ngIf="loading">
|
||||
<div class="row justify-content-md-center top-spacing loading-spinner">
|
||||
<mat-spinner [color]="'accent'"></mat-spinner>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
.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;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { Component, Input } from "@angular/core";
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: "./grid-spinner.component.html",
|
||||
selector: "grid-spinner",
|
||||
styleUrls: ["./grid-spinner.component.scss"]
|
||||
})
|
||||
export class GridSpinnerComponent{
|
||||
@Input() public loading = false;
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
<div class="mat-elevation-z8">
|
||||
|
||||
<grid-spinner [loading]="isLoading"></grid-spinner>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Requests to Display" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
|
||||
<mat-option value="10">10</mat-option>
|
||||
<mat-option value="15">15</mat-option>
|
||||
<mat-option value="30">30</mat-option>
|
||||
<mat-option value="100">100</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" class="table" matSort matSortActive="title"
|
||||
matSortDisableClear matSortDirection="desc">
|
||||
|
||||
|
||||
<ng-container matColumnDef="title">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="requestCount">
|
||||
<th mat-header-cell *matHeaderCellDef > Request Count </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.childRequests.length}} </td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<ng-container matColumnDef="overview">
|
||||
<th mat-header-cell *matHeaderCellDef > Overview </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<small>{{element.overview}}</small>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Status </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<small>{{element.status}}</small>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="releaseDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Release Date </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<small>{{element.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-raised-button color="primary" [routerLink]="'/details/movie/' + element.theMovieDbId">Details</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [length]="resultsLength" [pageSize]="gridCount"></mat-paginator>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
import { Component, AfterViewInit, ViewChild } from "@angular/core";
|
||||
import { IRequestsViewModel, ITvRequests } from "../../../interfaces";
|
||||
import { MatPaginator, MatSort } from "@angular/material";
|
||||
import { merge, Observable, of as observableOf } from 'rxjs';
|
||||
import { catchError, map, startWith, switchMap } from 'rxjs/operators';
|
||||
|
||||
import { RequestServiceV2 } from "../../../services/requestV2.service";
|
||||
|
||||
@Component({
|
||||
templateUrl: "./tv-grid.component.html",
|
||||
selector: "tv-grid",
|
||||
styleUrls: ["../requests-list.component.scss"]
|
||||
})
|
||||
export class TvGridComponent implements AfterViewInit {
|
||||
public dataSource: ITvRequests[] = [];
|
||||
public resultsLength: number;
|
||||
public isLoadingResults = true;
|
||||
public displayedColumns: string[] = ['title', 'overview', 'status', 'requestCount', 'releaseDate','actions'];
|
||||
public gridCount: string = "15";
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
constructor(private requestService: RequestServiceV2) {
|
||||
|
||||
}
|
||||
|
||||
public async ngAfterViewInit() {
|
||||
|
||||
// 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;
|
||||
return this.requestService.getTvRequests(+this.gridCount, this.paginator.pageIndex * +this.gridCount, this.sort.active, this.sort.direction);
|
||||
}),
|
||||
map((data: IRequestsViewModel<ITvRequests>) => {
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue