Small improvements on the discover page

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html

@@ -4,7 +4,9 @@
 <div *ngIf="!loading" mat-dialog-content class="background">
     <div class="row">
         <div class="col-4">
+            <a (click)="openDetails()">
             <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
+        </a>
         </div>
         <div class="col-8">
 
@@ -27,7 +29,8 @@
                     <strong *ngIf="movie">Studio: </strong>
                     <small *ngIf="movie">{{movie.productionCompanies[0].name}}</small>
                     <strong *ngIf="tv">Network: </strong>
-                    <small *ngIf="tv">{{tv.network.name}}</small>
+                    <small *ngIf="tv && tv.network">{{tv.network.name}}</small>
+                    <small *ngIf="tv && !tv.network">Unknown</small>
                 </div>
                 <div class="col-6" *ngIf="!data.available">
                     <strong>Request Status: </strong> <small>
@@ -117,7 +120,7 @@
                             target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                     translate}}</a>
                     </span>
-                    <button mat-raised-button class="btn-green btn-spacing"> {{
+                    <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
                         'Common.ViewDetails' | translate }}</button>
         </div>
     </div>

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts

@@ -5,6 +5,7 @@ import { SearchV2Service, RequestService, MessageService } from "../../services"
 import { RequestType } from "../../interfaces";
 import { ISearchMovieResultV2 } from "../../interfaces/ISearchMovieResultV2";
 import { ISearchTvResultV2 } from "../../interfaces/ISearchTvResultV2";
+import { RouterLink, Router } from "@angular/router";
 
 @Component({
     selector: "discover-card-details",
@@ -18,39 +19,55 @@ export class DiscoverCardDetailsComponent implements OnInit {
     public tvCreator: string;
     public tvProducer: string;
     public loading: boolean;;
+    public RequestType = RequestType;
 
     constructor(
         public dialogRef: MatDialogRef<DiscoverCardDetailsComponent>,
         @Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult, private searchService: SearchV2Service,
-        private requestService: RequestService, public messageService: MessageService) { }
-        
-        public async ngOnInit() {
-            this.loading = true;
-            if (this.data.type === RequestType.movie) {
-                this.movie = await this.searchService.getFullMovieDetailsPromise(this.data.id);
-            } else if (this.data.type === RequestType.tvShow) {
-                this.tv = await this.searchService.getTvInfo(this.data.id);
-                const creator = this.tv.crew.filter(tv => {
-                    return tv.type === "Creator";
-                })[0];       
-                if(creator) {
-                    this.tvCreator = creator.person.name;
-                }         
-                this.tvProducer = this.tv.crew.filter(tv => {
-                    return tv.type === "Executive Producer";
-                })[0].person.name;
+        private requestService: RequestService, public messageService: MessageService, private router: Router) { }
+
+    public async ngOnInit() {
+        this.loading = true;
+        if (this.data.type === RequestType.movie) {
+            this.movie = await this.searchService.getFullMovieDetailsPromise(this.data.id);
+        } else if (this.data.type === RequestType.tvShow) {
+            this.tv = await this.searchService.getTvInfo(this.data.id);
+            const creator = this.tv.crew.filter(tv => {
+                return tv.type === "Creator";
+            })[0];
+            if (creator && creator.person) {
+                this.tvCreator = creator.person.name;
+            }
+            const crewResult = this.tv.crew.filter(tv => {
+                return tv.type === "Executive Producer";
+            })[0]
+            if (crewResult && crewResult.person) {
+                this.tvProducer = crewResult.person.name;
             }
-            this.loading = false;
         }
+        this.loading = false;
+    }
 
-      public onNoClick(): void {
+    public onNoClick(): void {
         this.dialogRef.close();
-      }
+    }
 
-      public async request() {
+    public openDetails() {
+        if (this.data.type === RequestType.movie) {
+            this.router.navigate(['/details/movie/', this.data.id]);
+        } else if (this.data.type === RequestType.tvShow) {
+            this.router.navigate(['/details/tv/', this.data.id]);
+        }
+
+        this.dialogRef.close();
+    }
+
+    public async request() {
         this.loading = true;
         if (this.data.type === RequestType.movie) {
-            const result = await this.requestService.requestMovie({theMovieDbId: this.data.id, languageCode: ""}).toPromise();
+            const result = await this.requestService.requestMovie({ theMovieDbId: this.data.id, languageCode: "" }).toPromise();
+            this.loading = false;
+
             if (result.result) {
                 this.movie.requested = true;
                 this.messageService.send(result.message, "Ok");
@@ -58,6 +75,8 @@ export class DiscoverCardDetailsComponent implements OnInit {
                 this.messageService.send(result.errorMessage, "Ok");
             }
         }
+        this.loading = false;
 
-      }
+        this.dialogRef.close();
+    }
 }

src/Ombi/ClientApp/src/app/discover/discover.component.html

@@ -2,16 +2,20 @@
 
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group" aria-label="Basic example">
-            <button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Popular</button>
-            <button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Trending</button>
-            <button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''" mat-raised-button class="btn" color="primary">Upcoming</button>
+            <button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
+                class="btn" color="primary">Popular</button>
+            <button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
+                mat-raised-button class="btn" color="primary">Trending</button>
+            <button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''"
+                mat-raised-button class="btn" color="primary">Upcoming</button>
         </div>
     </div>
-
+    <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
+        <mat-spinner [color]="'accent'"></mat-spinner>
+    </div>
     <div *ngIf="discoverResults" class="row full-height">
         <div class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding" *ngFor="let result of discoverResults">
             <discover-card [result]="result"></discover-card>
         </div>
     </div>
-</div>
-
+</div>

src/Ombi/ClientApp/src/app/discover/discover.component.scss

@@ -12,4 +12,8 @@
     padding-left: 20px;
     padding-right: 20px;
     margin-bottom: 28px;
+}
+
+.loading-spinner {
+    margin: 10%;
 }

src/Ombi/ClientApp/src/app/discover/discover.component.ts

@@ -28,28 +28,37 @@ export class DiscoverComponent implements OnInit {
     public trendingActive: boolean;
     public upcomingActive: boolean;
 
-    constructor(private searchService: SearchV2Service) {
+    public loadingFlag: boolean;
+
+    constructor(private searchService: SearchV2Service) { }
 
-    }
     public async ngOnInit() {
+        this.loading()
+
         this.movies = await this.searchService.popularMovies().toPromise();
         this.tvShows = await this.searchService.popularTv().toPromise();
 
+                
         this.createModel();
 
     }
 
     public async popular() {
+        this.clear();
+        this.loading()
         this.popularActive = true;
         this.trendingActive = false;
         this.upcomingActive = false;
         this.movies = await this.searchService.popularMovies().toPromise();
         this.tvShows = await this.searchService.popularTv().toPromise();
 
+        
         this.createModel();
     }
     
-    public async trending() {
+    public async trending() {      
+        this.clear();
+        this.loading()
         this.popularActive = false;
         this.trendingActive = true;
         this.upcomingActive = false;
@@ -59,7 +68,9 @@ export class DiscoverComponent implements OnInit {
         this.createModel();
     }  
 
-    public async upcoming() {
+    public async upcoming() {    
+        this.clear();
+        this.loading()
         this.popularActive = false;
         this.trendingActive = false;
         this.upcomingActive = true;
@@ -70,7 +81,7 @@ export class DiscoverComponent implements OnInit {
     }
 
     private createModel() {
-        this.discoverResults = [];
+        this.finishLoading();
         this.movies.forEach(m => {
             this.discoverResults.push({
                 available: m.available,
@@ -81,7 +92,8 @@ export class DiscoverComponent implements OnInit {
                 id: m.id,
                 url: `http://www.imdb.com/title/${m.imdbId}/`,
                 rating: m.voteAverage,
-                overview: m.overview
+                overview: m.overview,
+                approved: m.approved
             });
         });
         this.tvShows.forEach(m => {
@@ -94,7 +106,8 @@ export class DiscoverComponent implements OnInit {
                 id: m.id,
                 url: undefined,
                 rating: +m.rating,
-                overview: m.overview
+                overview: m.overview,
+                approved: m.approved
             });
         });
         
@@ -108,4 +121,16 @@ export class DiscoverComponent implements OnInit {
         }
         return discover;
     }
+
+    private loading() {
+        this.loadingFlag = true;
+    }
+
+    private clear() {
+        this.discoverResults = [];
+    }
+
+    private finishLoading() {
+        this.loadingFlag = false;
+    }
 }

src/Ombi/ClientApp/src/app/discover/discover.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
-import { SearchService } from "../services";
+import { SearchService, RequestService } from "../services";
 
 import { SharedModule } from "../shared/shared.module";
 import { DiscoverComponent } from "./discover.component";
@@ -34,6 +34,7 @@ const routes: Routes = [
     providers: [
         SearchService,
         MatDialog,
+        RequestService,
         ],
 
 })

src/Ombi/ClientApp/src/app/discover/interfaces.ts

@@ -7,6 +7,7 @@ export interface IDiscoverCardResult {
     title: string;
     type: RequestType;
     available: boolean;
+    approved: boolean;
     requested: boolean;
     rating: number;
     overview: string;