Initial TV Requests UI rebuild

pull/1488/head
Dhruv Bhavsar 7 years ago
parent 8b3c57431c
commit ec197fed94

@ -15,6 +15,7 @@ import { TvRequestsComponent } from './tvrequests.component';
import { TvRequestManageComponent } from './tvrequest-manage.component';
//import { RequestGridComponent } from '../request-grid/request-grid.component';
// import { RequestCardComponent } from '../request-grid/request-card.component';
import { TreeTableModule } from 'primeng/primeng';
import { IdentityService } from '../services/identity.service';
import { RequestService } from '../services/request.service';
@ -35,6 +36,7 @@ const routes: Routes = [
InfiniteScrollModule,
ButtonModule,
DialogModule,
TreeTableModule
],
declarations: [
RequestComponent,
@ -49,6 +51,6 @@ const routes: Routes = [
IdentityService,
RequestService
],
})
export class RequestsModule { }

@ -1,11 +1,17 @@
<div *ngIf="childRequests">
<div *ngFor="let child of childRequests">
<div class="col-md-12">
<div class="col-md-2">
<span>Requested By: {{child.requestedUser.userName}}</span>
<div *ngFor="let season of child.seasonRequests">
<!--<div *ngFor="let season of child.seasonRequests">
<span>Season {{season.seasonNumber}}</span>
<div>Episodes:</div>
<span *ngFor="let episode of season.episodes">
@ -13,10 +19,12 @@
</span>
<br />
<br />
</div>
</div>-->
</div>
<div class="col-md-1 col-md-push-9"> <!--// TODO ADMIN-->
<div class="col-md-1 col-md-push-9">
<!--// TODO ADMIN-->
<form>
<button style="text-align: right" *ngIf="child.CanApprove" (click)="approve(child)" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> Approve</button>
</form>
@ -28,8 +36,75 @@
</form>
</div>
</div>
<div class="col-md-12">
<ngb-tabset>
<div *ngFor="let season of child.seasonRequests">
<ngb-tab [id]="season.seasonNumber" [title]="season.seasonNumber">
<ng-template ngbTabContent>
<h2>Season: {{season.seasonNumber}}</h2>
<table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<th>
<a>
#
</a>
</th>
<th>
<a>
Title
</a>
</th>
<th>
<a>
Air Date
</a>
</th>
<th>
<a>
Status
</a>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let ep of season.episodes">
<td>
{{ep.episodeNumber}}
</td>
<td>
{{ep.title}}
</td>
<td>
{{ep.airDate | date: 'dd/MM/yyyy' }}
</td>
<td>
<span *ngIf="ep.available" class="label label-success">Available</span>
<span *ngIf="ep.approved && !ep.available" class="label label-info">Processing Request</span>
<div *ngIf="ep.requested && !ep.available; then requested else notRequested"></div>
<ng-template #requested>
<span *ngIf="!ep.available" class="label label-warning">Pending Approval</span>
</ng-template>
<ng-template #notRequested>
<span *ngIf="!ep.available" class="label label-danger">Not Yet Requested</span>
</ng-template>
</td>
</tr>
</tbody>
</table>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
</div>
<br />
<br />
<hr />
</div>
</div>

@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
import { RequestService } from '../services/request.service';
import { IdentityService } from '../services/identity.service';
import { IChildRequests, IEpisodesRequests } from '../interfaces/IRequestModel';
import { IChildRequests, IEpisodesRequests, INewSeasonRequests } from '../interfaces/IRequestModel';
@Component({
templateUrl: './tvrequest-manage.component.html'
@ -17,7 +17,7 @@ export class TvRequestManageComponent {
.subscribe(params => {
this.tvId = +params['id']; // (+) converts string 'id' to a number
this.requestService.getChildRequests(this.tvId).subscribe(x => {
this.childRequests = x;
this.childRequests = this.fixEpisodeSort(x);
});
});
@ -27,7 +27,16 @@ export class TvRequestManageComponent {
tvId: number;
childRequests: IChildRequests[];
isAdmin: boolean;
public fixEpisodeSort(items: IChildRequests[]) {
items.forEach(function (value) {
value.seasonRequests.forEach(function (requests: INewSeasonRequests) {
requests.episodes.sort(function (a: IEpisodesRequests, b: IEpisodesRequests) {
return a.episodeNumber - b.episodeNumber;
})
})
})
return items;
}
public removeRequest(request: IChildRequests) {
this.requestService.deleteChild(request)
.subscribe();
@ -49,7 +58,7 @@ export class TvRequestManageComponent {
request.approved = true;
request.denied = false;
this.requestService.updateChild(request)
.subscribe();
.subscribe();
}
public denySeasonRequest(request: IChildRequests) {
@ -60,12 +69,10 @@ export class TvRequestManageComponent {
}
public getColour(ep: IEpisodesRequests): string {
if (ep.available)
{
if (ep.available) {
return "lime";
}
if (ep.approved)
{
if (ep.approved) {
return "#00c0ff";
}
return "white";

@ -9,48 +9,201 @@
[infiniteScrollDistance]="1"
[infiniteScrollThrottle]="100"
(scrolled)="loadMore()">
<!--<div>-->
<p-treeTable [value]="tvRequests">
<!--<p-column>
<ng-template let-col let-node="rowData" pTemplate="body">
<img src="{{node.data.data.banner}}" class="img-responsive poster" width="150" />
</ng-template>
</p-column>-->
<div *ngFor="let request of tvRequests">
<p-column>
<ng-template let-col let-node="rowData" pTemplate="header">
Results
</ng-template>
<ng-template let-col let-node="rowData" pTemplate="body">
<!--This is the section that holds the parent level results set-->
<div *ngIf="!node.leaf">
<div class="row">
<div class="col-sm-2">
<img class="img-responsive poster" src="{{node.data.posterPath}}" alt="poster">
<div class="row">
<div class="col-sm-2">
</div>
<img class="img-responsive poster" src="{{request.posterPath}}" alt="poster">
<div class="col-sm-5 ">
<div>
<a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
<h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
</a>
</div>
<br />
<div>
<span>Status: </span>
<span class="label label-success">{{node.data.status}}</span>
</div>
</div>
<div>
<span>Request status: </span>
<span *ngIf="node.data.available" class="label label-success">Available</span>
<span *ngIf="node.data.approved && !node.data.available" class="label label-info">Processing Request</span>
<span *ngIf="node.data.denied" class="label label-danger">Request Denied</span>
<span *ngIf="node.data.deniedReason" title="{{node.data.deniedReason}}"><i class="fa fa-info-circle"></i></span>
<span *ngIf="!node.data.approved && !node.data.availble && !node.data.denied" class="label label-warning">Pending Approval</span>
<div class="col-sm-5 ">
<div>
<a href="http://www.imdb.com/title/{{request.imdbId}}/" target="_blank">
<h4 class="request-title">{{request.title}} ({{request.releaseDate | date: 'yyyy'}})</h4>
</a>
</div>
<br />
<div>
<span>Status: </span>
<span class="label label-success">{{request.status}}</span>
</div>
<div>Release Date: {{node.data.releaseDate | date}}</div>
<br />
<div>Requested Date: {{node.data.requestedDate | date}}</div>
</div>
<div class="col-sm-3 col-sm-push-3">
<button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>
</div>
</div>
</div>
<!--This is the section that holds the child seasons if they want to specify specific episodes-->
<div *ngIf="node.leaf">
<hr />
<div *ngIf="node.data">
<div *ngFor="let child of node.data">
<div class="col-md-12">
<div class="col-md-2">
<span>Requested By: {{child.requestedUser.userName}}</span>
</div>
<div class="col-md-1 col-md-push-9">
<!--// TODO ADMIN-->
<form>
<button style="text-align: right" *ngIf="child.CanApprove" (click)="approve(child)" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> Approve</button>
</form>
<form>
<button type="button" (click)="deny(child)" class="btn btn-sm btn-danger-outline deny"><i class="fa fa-times"></i> Deny</button>
</form>
<form>
<button type="button" (click)="deny(child)" class="btn btn-sm btn-danger-outline deny"><i class="fa fa-times"></i> Remove</button>
</form>
</div>
</div>
<div class="col-md-12">
<ngb-tabset>
<div *ngFor="let season of child.seasonRequests">
<ngb-tab [id]="season.seasonNumber" [title]="season.seasonNumber">
<ng-template ngbTabContent>
<h2>Season: {{season.seasonNumber}}</h2>
<table class="table table-striped table-hover table-responsive table-condensed">
<thead>
<tr>
<th>
<a>
#
</a>
</th>
<th>
<a>
Title
</a>
</th>
<th>
<a>
Air Date
</a>
</th>
<th>
<a>
Status
</a>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let ep of season.episodes">
<td>
{{ep.episodeNumber}}
</td>
<td>
{{ep.title}}
</td>
<td>
{{ep.airDate | date: 'dd/MM/yyyy' }}
</td>
<td>
<span *ngIf="ep.available" class="label label-success">Available</span>
<span *ngIf="ep.approved && !ep.available" class="label label-info">Processing Request</span>
<div *ngIf="ep.requested && !ep.available; then requested else notRequested"></div>
<ng-template #requested>
<span *ngIf="!ep.available" class="label label-warning">Pending Approval</span>
</ng-template>
<ng-template #notRequested>
<span *ngIf="!ep.available" class="label label-danger">Not Yet Requested</span>
</ng-template>
</td>
<div>
<span>Request status: </span>
<span *ngIf="request.available" class="label label-success">Available</span>
<span *ngIf="request.approved && !request.available" class="label label-info">Processing Request</span>
<span *ngIf="request.denied" class="label label-danger">Request Denied</span>
<span *ngIf="request.deniedReason" title="{{request.deniedReason}}"><i class="fa fa-info-circle"></i></span>
<span *ngIf="!request.approved && !request.availble && !request.denied" class="label label-warning">Pending Approval</span>
</tr>
</tbody>
</table>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
</div>
<br />
<br />
<hr />
</div>
</div>
</div>
<div>Release Date: {{request.releaseDate | date}}</div>
<br />
<div>Requested Date: {{request.requestedDate | date}}</div>
</ng-template>
</p-column>
</p-treeTable>
<!--<div *ngFor="let request of tvRequests">-->
<!--<div class="row">
<div class="col-sm-2">
<img class="img-responsive poster" src="{{node.data.posterPath}}" alt="poster">
</div>
<div class="col-sm-5 ">
<div>
<a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
<h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
</a>
</div>
<br />
<div>
<span>Status: </span>
<span class="label label-success">{{node.data.status}}</span>
</div>
<div class="col-sm-3 col-sm-push-3">
<button [routerLink]="[request.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>
<div>
<span>Request status: </span>
<span *ngIf="node.data.available" class="label label-success">Available</span>
<span *ngIf="node.data.approved && !node.data.available" class="label label-info">Processing Request</span>
<span *ngIf="node.data.denied" class="label label-danger">Request Denied</span>
<span *ngIf="node.data.deniedReason" title="{{node.data.deniedReason}}"><i class="fa fa-info-circle"></i></span>
<span *ngIf="!node.data.approved && !node.data.availble && !node.data.denied" class="label label-warning">Pending Approval</span>
</div>
<div>Release Date: {{node.data.releaseDate | date}}</div>
<br />
<div>Requested Date: {{node.data.requestedDate | date}}</div>
</div>
<div class="col-sm-3 col-sm-push-3">
<button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>
</div>
<hr />
</div>
<hr />-->
<!--</div>-->
</div>

@ -12,7 +12,8 @@ import 'rxjs/add/operator/map';
import { RequestService } from '../services/request.service';
import { IdentityService } from '../services/identity.service';
import { ITvRequests, IChildRequests } from '../interfaces/IRequestModel';
import { ITvRequests, IChildRequests, INewSeasonRequests, IEpisodesRequests } from '../interfaces/IRequestModel';
import { /*TreeTableModule,*/ TreeNode, /*SharedModule*/ } from "primeng/primeng";
@Component({
selector: 'tv-requests',
@ -32,11 +33,24 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
}
this.requestService.searchTvRequests(this.searchText)
.takeUntil(this.subscriptions)
.subscribe(m => this.tvRequests = m);
.subscribe(m => this.tvRequests = this.transformData(m));
});
}
transformData(datain: ITvRequests[]): any {
var temp: TreeNode[] = [];
datain.forEach(function (value) {
temp.push({
"data": value,
"children": [{
"data": this.fixEpisodeSort(value.childRequests), leaf: true
}],
leaf: false
});
}, this)
console.log(temp);
return <TreeNode[]>temp;
}
private subscriptions = new Subject<void>();
tvRequests: ITvRequests[];
@ -52,15 +66,23 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
public showChildDialogue = false; // This is for the child modal popup
public selectedSeason: ITvRequests;
fixEpisodeSort(items: IChildRequests[]) {
items.forEach(function (value) {
value.seasonRequests.forEach(function (requests: INewSeasonRequests) {
requests.episodes.sort(function (a: IEpisodesRequests, b: IEpisodesRequests) {
return a.episodeNumber - b.episodeNumber;
})
})
})
return items;
}
ngOnInit() {
this.amountToLoad = 5;
this.currentlyLoaded = 5;
this.tvRequests = [];
this.loadInit();
}
public loadMore() {
this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1)
.takeUntil(this.subscriptions)
@ -78,6 +100,11 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.removeTvRequest(request);
this.removeRequestFromUi(request);
}
public removeChildRequest(request: IChildRequests) {
this.requestService.deleteChild(request)
.subscribe();
this.removeChildRequestFromUi(request);
}
public changeAvailability(request: IChildRequests, available: boolean) {
request.available = available;
@ -85,16 +112,29 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
//this.updateRequest(request);
}
//Was already here but not sure what's using it...'
//public approve(request: IChildRequests) {
// request.approved = true;
// request.denied = false;
// //this.updateRequest(request);
//}
public approve(request: IChildRequests) {
request.approved = true;
request.denied = false;
//this.updateRequest(request);
this.requestService.updateChild(request)
.subscribe();
}
//Was already here but not sure what's using it...'
//public deny(request: IChildRequests) {
// request.approved = false;
// request.denied = true;
// //this.updateRequest(request);
//}
public deny(request: IChildRequests) {
request.approved = false;
request.denied = true;
//this.updateRequest(request);
this.requestService.updateChild(request)
.subscribe();
}
public approveSeasonRequest(request: IChildRequests) {
@ -110,12 +150,28 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.updateTvRequest(this.selectedSeason)
.subscribe();
}
public denyChildSeasonRequest(request: IChildRequests) {
request.approved = false;
request.denied = true;
this.requestService.updateChild(request)
.subscribe();
}
public showChildren(request: ITvRequests) {
this.selectedSeason = request;
this.showChildDialogue = true;
}
public getColour(ep: IEpisodesRequests): string {
if (ep.available) {
return "lime";
}
if (ep.approved) {
return "#00c0ff";
}
return "white";
}
//private updateRequest(request: ITvRequests) {
// this.requestService.updateTvRequest(request)
// .takeUntil(this.subscriptions)
@ -126,7 +182,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.getTvRequests(this.amountToLoad, 0)
.takeUntil(this.subscriptions)
.subscribe(x => {
this.tvRequests = x;
this.tvRequests = this.transformData(x);
});
this.isAdmin = this.identityService.hasRole("Admin");
}
@ -142,6 +198,14 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.tvRequests.splice(index, 1);
}
}
private removeChildRequestFromUi(key: IChildRequests) {
//var index = this.childRequests.indexOf(key, 0);
//if (index > -1) {
// this.childRequests.splice(index, 1);
//}
//TODO FIX THIS
}
ngOnDestroy(): void {
this.subscriptions.next();

Loading…
Cancel
Save