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

@ -1,11 +1,17 @@
<div *ngIf="childRequests"> <div *ngIf="childRequests">
<div *ngFor="let child of childRequests"> <div *ngFor="let child of childRequests">
<div class="col-md-12"> <div class="col-md-12">
<div class="col-md-2"> <div class="col-md-2">
<span>Requested By: {{child.requestedUser.userName}}</span> <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> <span>Season {{season.seasonNumber}}</span>
<div>Episodes:</div> <div>Episodes:</div>
<span *ngFor="let episode of season.episodes"> <span *ngFor="let episode of season.episodes">
@ -13,10 +19,12 @@
</span> </span>
<br /> <br />
<br /> <br />
</div> </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> <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> <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>
@ -28,8 +36,75 @@
</form> </form>
</div> </div>
</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 />
<br /> <br />
<hr /> <hr />
</div> </div>
</div> </div>

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

@ -9,48 +9,201 @@
[infiniteScrollDistance]="1" [infiniteScrollDistance]="1"
[infiniteScrollThrottle]="100" [infiniteScrollThrottle]="100"
(scrolled)="loadMore()"> (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>
<div class="col-sm-2">
<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>
<div> <div>Release Date: {{node.data.releaseDate | date}}</div>
<a href="http://www.imdb.com/title/{{request.imdbId}}/" target="_blank"> <br />
<h4 class="request-title">{{request.title}} ({{request.releaseDate | date: 'yyyy'}})</h4> <div>Requested Date: {{node.data.requestedDate | date}}</div>
</a> </div>
</div> <div class="col-sm-3 col-sm-push-3">
<br />
<div> <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>
<span>Status: </span> </div>
<span class="label label-success">{{request.status}}</span> </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> </tr>
<span>Request status: </span> </tbody>
<span *ngIf="request.available" class="label label-success">Available</span> </table>
<span *ngIf="request.approved && !request.available" class="label label-info">Processing Request</span> </ng-template>
<span *ngIf="request.denied" class="label label-danger">Request Denied</span> </ngb-tab>
<span *ngIf="request.deniedReason" title="{{request.deniedReason}}"><i class="fa fa-info-circle"></i></span> </div>
<span *ngIf="!request.approved && !request.availble && !request.denied" class="label label-warning">Pending Approval</span> </ngb-tabset>
</div>
<br />
<br />
<hr />
</div>
</div>
</div> </div>
<div>Release Date: {{request.releaseDate | date}}</div> </ng-template>
<br /> </p-column>
<div>Requested Date: {{request.requestedDate | date}}</div> </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>
<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>
<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>
<hr />
</div> </div>
<hr />-->
<!--</div>-->
</div> </div>

@ -12,7 +12,8 @@ import 'rxjs/add/operator/map';
import { RequestService } from '../services/request.service'; import { RequestService } from '../services/request.service';
import { IdentityService } from '../services/identity.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({ @Component({
selector: 'tv-requests', selector: 'tv-requests',
@ -32,11 +33,24 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
} }
this.requestService.searchTvRequests(this.searchText) this.requestService.searchTvRequests(this.searchText)
.takeUntil(this.subscriptions) .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>(); private subscriptions = new Subject<void>();
tvRequests: ITvRequests[]; tvRequests: ITvRequests[];
@ -52,15 +66,23 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
public showChildDialogue = false; // This is for the child modal popup public showChildDialogue = false; // This is for the child modal popup
public selectedSeason: ITvRequests; 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() { ngOnInit() {
this.amountToLoad = 5; this.amountToLoad = 5;
this.currentlyLoaded = 5; this.currentlyLoaded = 5;
this.tvRequests = [];
this.loadInit(); this.loadInit();
} }
public loadMore() { public loadMore() {
this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1) this.requestService.getTvRequests(this.amountToLoad, this.currentlyLoaded + 1)
.takeUntil(this.subscriptions) .takeUntil(this.subscriptions)
@ -78,6 +100,11 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.removeTvRequest(request); this.requestService.removeTvRequest(request);
this.removeRequestFromUi(request); this.removeRequestFromUi(request);
} }
public removeChildRequest(request: IChildRequests) {
this.requestService.deleteChild(request)
.subscribe();
this.removeChildRequestFromUi(request);
}
public changeAvailability(request: IChildRequests, available: boolean) { public changeAvailability(request: IChildRequests, available: boolean) {
request.available = available; request.available = available;
@ -85,16 +112,29 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
//this.updateRequest(request); //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) { public approve(request: IChildRequests) {
request.approved = true; request.approved = true;
request.denied = false; 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) { public deny(request: IChildRequests) {
request.approved = false; request.approved = false;
request.denied = true; request.denied = true;
//this.updateRequest(request); this.requestService.updateChild(request)
.subscribe();
} }
public approveSeasonRequest(request: IChildRequests) { public approveSeasonRequest(request: IChildRequests) {
@ -110,12 +150,28 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.updateTvRequest(this.selectedSeason) this.requestService.updateTvRequest(this.selectedSeason)
.subscribe(); .subscribe();
} }
public denyChildSeasonRequest(request: IChildRequests) {
request.approved = false;
request.denied = true;
this.requestService.updateChild(request)
.subscribe();
}
public showChildren(request: ITvRequests) { public showChildren(request: ITvRequests) {
this.selectedSeason = request; this.selectedSeason = request;
this.showChildDialogue = true; this.showChildDialogue = true;
} }
public getColour(ep: IEpisodesRequests): string {
if (ep.available) {
return "lime";
}
if (ep.approved) {
return "#00c0ff";
}
return "white";
}
//private updateRequest(request: ITvRequests) { //private updateRequest(request: ITvRequests) {
// this.requestService.updateTvRequest(request) // this.requestService.updateTvRequest(request)
// .takeUntil(this.subscriptions) // .takeUntil(this.subscriptions)
@ -126,7 +182,7 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.requestService.getTvRequests(this.amountToLoad, 0) this.requestService.getTvRequests(this.amountToLoad, 0)
.takeUntil(this.subscriptions) .takeUntil(this.subscriptions)
.subscribe(x => { .subscribe(x => {
this.tvRequests = x; this.tvRequests = this.transformData(x);
}); });
this.isAdmin = this.identityService.hasRole("Admin"); this.isAdmin = this.identityService.hasRole("Admin");
} }
@ -142,6 +198,14 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
this.tvRequests.splice(index, 1); 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 { ngOnDestroy(): void {
this.subscriptions.next(); this.subscriptions.next();

Loading…
Cancel
Save