Merge pull request #2411 from tidusjar/feature/angular6-webpack4

Feature angular6 webpack4

build.cake

@@ -1,10 +1,10 @@
 
 #tool "nuget:?package=GitVersion.CommandLine"
 #addin "Cake.Gulp"
-#addin "nuget:?package=Cake.Npm&version=0.13.0"
 #addin "SharpZipLib"
 #addin nuget:?package=Cake.Compression&version=0.1.4
 #addin "Cake.Incubator"
+#addin "Cake.Yarn"
 
 //////////////////////////////////////////////////////////////////////
 // ARGUMENTS
@@ -122,36 +122,19 @@ Task("SetVersionInfo")
 
 Task("NPM")
 	.Does(() => {
-    var settings = new NpmInstallSettings {
+	Yarn.FromPath(webProjDir).Install();
-		LogLevel = NpmLogLevel.Silent,
-		WorkingDirectory = webProjDir,
-		Production = true
-	};
-
-	NpmInstall(settings);
 });
 
 Task("Gulp Publish")
 	.IsDependentOn("NPM")
 	.Does(() => { 	
- 
+	Yarn.FromPath(webProjDir).RunScript("publish");
-	var runScriptSettings = new NpmRunScriptSettings {
- 		ScriptName="publish",
- 		WorkingDirectory = webProjDir,
- 	};
- 	
- 	NpmRunScript(runScriptSettings);
  });
 
 Task("TSLint")
     .Does(() =>
 {
-	var settings = new NpmRunScriptSettings {
+	Yarn.FromPath(webProjDir).RunScript("lint");
-		WorkingDirectory = webProjDir,
-		ScriptName = "lint"
-	};
-	
-    NpmRunScript(settings);
 });
 
 Task("PrePublish")

src/Ombi.Core.Tests/Rule/Search/EmbyAvailabilityRuleTests.cs

@@ -29,7 +29,10 @@ namespace Ombi.Core.Tests.Rule.Search
             {
                 ProviderId = "123"
             });
-            var search = new SearchMovieViewModel();
+            var search = new SearchMovieViewModel()
+            {
+                TheMovieDbId = "123",
+            };
             var result = await Rule.Execute(search);
 
             Assert.True(result.Success);

src/Ombi.Core/Engine/Interfaces/ITvRequestEngine.cs

@@ -15,9 +15,7 @@ namespace Ombi.Core.Engine.Interfaces
         Task<RequestEngineResult> DenyChildRequest(int requestId);
         Task<RequestsViewModel<TvRequests>> GetRequestsLite(int count, int position, OrderFilterModel type);
         Task<IEnumerable<TvRequests>> SearchTvRequest(string search);
-        Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvRequestTree(string search);
         Task<TvRequests> UpdateTvRequest(TvRequests request);
-        Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetRequestsTreeNode(int count, int position);
         Task<IEnumerable<ChildRequests>> GetAllChldren(int tvId);
         Task<ChildRequests> UpdateChildRequest(ChildRequests request);
         Task RemoveTvChild(int requestId);

src/Ombi.Core/Engine/Interfaces/ITvSearchEngine.cs

@@ -7,16 +7,10 @@ namespace Ombi.Core.Engine.Interfaces
     public interface ITvSearchEngine
     {
         Task<IEnumerable<SearchTvShowViewModel>> Search(string searchTerm);
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTreeNode(string searchTerm);
-        Task<TreeNode<SearchTvShowViewModel>> GetShowInformationTreeNode(int tvdbid);
         Task<SearchTvShowViewModel> GetShowInformation(int tvdbid);
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTree();
         Task<IEnumerable<SearchTvShowViewModel>> Popular();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTree();
         Task<IEnumerable<SearchTvShowViewModel>> Anticipated();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchesTree();
         Task<IEnumerable<SearchTvShowViewModel>> MostWatches();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree();
         Task<IEnumerable<SearchTvShowViewModel>> Trending();
     }
 }

src/Ombi.Core/Engine/TreeNode.cs

@@ -1,23 +0,0 @@
-using System.Collections.Generic;
-
-namespace Ombi.Core.Engine
-{
-
-    public class TreeNode<T>
-    {
-        public string Label { get; set; }
-        public T Data { get; set; }
-        public List<TreeNode<T>> Children { get; set; }
-        public bool Leaf { get; set; }
-        public bool Expanded { get; set; }
-    }
-
-    public class TreeNode<T,U>
-    {
-        public string Label { get; set; }
-        public T Data { get; set; }
-        public List<TreeNode<U>> Children { get; set; }
-        public bool Leaf { get; set; }
-        public bool Expanded { get; set; }
-    }
-}

src/Ombi.Core/Engine/TvRequestEngine.cs

@@ -196,38 +196,6 @@ namespace Ombi.Core.Engine
                 Collection = allRequests
             };
         }
-
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetRequestsTreeNode(int count, int position)
-        {
-            var shouldHide = await HideFromOtherUsers();
-            List<TvRequests> allRequests;
-            if (shouldHide.Hide)
-            {
-                allRequests = await TvRepository.Get(shouldHide.UserId)
-                    .Include(x => x.ChildRequests)
-                    .ThenInclude(x => x.SeasonRequests)
-                    .ThenInclude(x => x.Episodes)
-                    .Where(x => x.ChildRequests.Any())
-                    .OrderByDescending(x => x.ChildRequests.Max(y => y.RequestedDate))
-                    .Skip(position).Take(count).ToListAsync();
-
-                FilterChildren(allRequests, shouldHide);
-            }
-            else
-            {
-                allRequests = await TvRepository.Get()
-                    .Include(x => x.ChildRequests)
-                    .ThenInclude(x => x.SeasonRequests)
-                    .ThenInclude(x => x.Episodes)
-                    .Where(x => x.ChildRequests.Any())
-                    .OrderByDescending(x => x.ChildRequests.Max(y => y.RequestedDate))
-                    .Skip(position).Take(count).ToListAsync();
-            }
-
-            allRequests.ForEach(async r => { await CheckForSubscription(shouldHide, r); });
-            return ParseIntoTreeNode(allRequests);
-        }
-
         public async Task<IEnumerable<TvRequests>> GetRequests()
         {
             var shouldHide = await HideFromOtherUsers();
@@ -350,23 +318,6 @@ namespace Ombi.Core.Engine
             return results;
         }
 
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvRequestTree(string search)
-        {
-            var shouldHide = await HideFromOtherUsers();
-            IQueryable<TvRequests> allRequests;
-            if (shouldHide.Hide)
-            {
-                allRequests = TvRepository.Get(shouldHide.UserId);
-            }
-            else
-            {
-                allRequests = TvRepository.Get();
-            }
-            var results = await allRequests.Where(x => x.Title.Contains(search, CompareOptions.IgnoreCase)).ToListAsync();
-            results.ForEach(async r => { await CheckForSubscription(shouldHide, r); });
-            return ParseIntoTreeNode(results);
-        }
-
       public async Task<TvRequests> UpdateTvRequest(TvRequests request)
         {
             await Audit.Record(AuditType.Updated, AuditArea.TvRequest, $"Updated Request {request.Title}", Username);
@@ -586,28 +537,6 @@ namespace Ombi.Core.Engine
             return await AfterRequest(model.ChildRequests.FirstOrDefault());
         }
 
-        private static List<TreeNode<TvRequests, List<ChildRequests>>> ParseIntoTreeNode(IEnumerable<TvRequests> result)
-        {
-            var node = new List<TreeNode<TvRequests, List<ChildRequests>>>();
-
-            foreach (var value in result)
-            {
-                node.Add(new TreeNode<TvRequests, List<ChildRequests>>
-                {
-                    Data = value,
-                    Children = new List<TreeNode<List<ChildRequests>>>
-                    {
-                        new TreeNode<List<ChildRequests>>
-                        {
-                            Data = SortEpisodes(value.ChildRequests),
-                            Leaf = true
-                        }
-                    }
-                });
-            }
-            return node;
-        }
-
        private static List<ChildRequests> SortEpisodes(List<ChildRequests> items)
         {
             foreach (var value in items)

src/Ombi.Core/Engine/TvSearchEngine.cs

@@ -59,11 +59,6 @@ namespace Ombi.Core.Engine
             return null;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTreeNode(string searchTerm)
-        {
-            var result = await Search(searchTerm);
-            return result.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<SearchTvShowViewModel> GetShowInformation(int tvdbid)
         {
             var show = await TvMazeApi.ShowLookupByTheTvDbId(tvdbid);
@@ -116,19 +111,6 @@ namespace Ombi.Core.Engine
             return await ProcessResult(mapped);
         }
 
-        public async Task<TreeNode<SearchTvShowViewModel>> GetShowInformationTreeNode(int tvdbid)
-        {
-            var result = await GetShowInformation(tvdbid);
-            return ParseIntoTreeNode(result);
-        }
-
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.PopularTv, async () => await TraktApi.GetPopularShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
-
         public async Task<IEnumerable<SearchTvShowViewModel>> Popular()
         {
             var result = await Cache.GetOrAdd(CacheKeys.PopularTv, async () => await TraktApi.GetPopularShows(), DateTime.Now.AddHours(12));
@@ -136,12 +118,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-                public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.AnticipatedTv, async () => await TraktApi.GetAnticipatedShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<IEnumerable<SearchTvShowViewModel>> Anticipated()
         {
 
@@ -150,12 +126,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchesTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.MostWatchesTv, async () => await TraktApi.GetMostWatchesShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<IEnumerable<SearchTvShowViewModel>> MostWatches()
         {
             var result = await Cache.GetOrAdd(CacheKeys.MostWatchesTv, async () => await TraktApi.GetMostWatchesShows(), DateTime.Now.AddHours(12));
@@ -163,13 +133,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.TrendingTv, async () => await TraktApi.GetTrendingShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
-
         public async Task<IEnumerable<SearchTvShowViewModel>> Trending()
         {
             var result = await Cache.GetOrAdd(CacheKeys.TrendingTv, async () => await TraktApi.GetTrendingShows(), DateTime.Now.AddHours(12));
@@ -177,22 +140,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        private static TreeNode<SearchTvShowViewModel> ParseIntoTreeNode(SearchTvShowViewModel result)
-        {
-            return new TreeNode<SearchTvShowViewModel>
-            {
-                Data = result,
-                Children = new List<TreeNode<SearchTvShowViewModel>>
-                {
-                    new TreeNode<SearchTvShowViewModel>
-                    {
-                        Data = result, Leaf = true
-                    }
-                },
-                Leaf = false
-            };
-        }
-
         private async Task<IEnumerable<SearchTvShowViewModel>> ProcessResults<T>(IEnumerable<T> items)
         {
             var retVal = new List<SearchTvShowViewModel>();

src/Ombi/.gitignore

@@ -1,23 +1,10 @@
-/wwwroot/css/**
+node_modules
-/wwwroot/fonts/**
+bin
-/wwwroot/lib/**
+obj
-/wwwroot/maps/**
+wwwroot/dist
-/wwwroot/dist/**
+*.log
-/wwwroot/*.js.map
-/wwwroot/*.js
-
-# dependencies
-/node_modules
-/bower_components
-
-# misc
 /.sass-cache
 /connect.lock
 /coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log
-#/typings
-/systemjs.config.js*
 /Logs/**
 **.db

src/Ombi/.vscode/tasks.json

@@ -4,7 +4,7 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "taskName": "restore",
+            "label": "restore",
             "command": "npm",
             "type": "shell",
             "args": [
@@ -14,7 +14,16 @@
             "problemMatcher": []
         },
         {
-            "taskName": "build",
+            "label": "clean",
+            "command": "dotnet",
+            "type": "shell",
+            "args": [
+                "clean"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "build",
             "command": "dotnet",
             "type": "shell",
             "args": [
@@ -27,7 +36,7 @@
             "problemMatcher": "$msCompile"
         },
         {
-            "taskName": "lint",
+            "label": "lint",
             "type": "shell",
             "command": "npm",
             "args": [

src/Ombi/ClientApp/app/animations/fadeinout.ts

@@ -1,7 +1,7 @@
 import { animate, style, transition, trigger } from "@angular/animations";
-import { AnimationEntryMetadata } from "@angular/core";
+import { AnimationTriggerMetadata } from "@angular/animations";
 
-export const fadeInOutAnimation: AnimationEntryMetadata = trigger("fadeInOut", [
+export const fadeInOutAnimation: AnimationTriggerMetadata = trigger("fadeInOut", [
     transition(":enter", [   // :enter is alias to 'void => *'
         style({ opacity: 0 }),
         animate(1000, style({ opacity: 1 })),

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

@@ -67,6 +67,14 @@ export function HttpLoaderFactory(http: HttpClient, platformLocation: PlatformLo
     return new TranslateHttpLoader(http, "/translations/", `.json?v=${version}`);
 }
 
+export function JwtTokenGetter() {
+    const token = localStorage.getItem("id_token");
+    if (!token) {
+        return "";
+    }
+    return token;
+}
+
 @NgModule({
     imports: [
         RouterModule.forRoot(routes),
@@ -92,13 +100,7 @@ export function HttpLoaderFactory(http: HttpClient, platformLocation: PlatformLo
         CommonModule,
         JwtModule.forRoot({
             config: {
-              tokenGetter: () => {
+                tokenGetter: JwtTokenGetter,
-                  const token = localStorage.getItem("id_token");
-                  if (!token) {
-                      return "";
-                  }
-                  return token;
-                },
             },
         }),
         TranslateModule.forRoot({

src/Ombi/ClientApp/app/auth/auth.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { JwtHelperService } from "@auth0/angular-jwt";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../services";
 import { ILocalUser, IUserLogin } from "./IUserLogin";

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

@@ -71,6 +71,10 @@ export interface ITvRequests {
   status: string;
   childRequests: IChildRequests[];
   qualityOverride: number;
+  background: any;
+  totalSeasons: number;
+  tvDbId: number;
+  open: boolean; // THIS IS FOR THE UI
 
   // For UI display
   qualityOverrideTitle: string;

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

@@ -28,8 +28,16 @@ export interface ISearchTvResult {
     available: boolean;
     plexUrl: string;
     embyUrl: string;
+    quality: string;
     firstSeason: boolean;
     latestSeason: boolean;
+    theTvDbId: string;
+    subscribed: boolean;
+    showSubscribe: boolean;
+    fullyAvailable: boolean;
+    partlyAvailable: boolean;
+    background: any;
+    open: boolean; // THIS IS FOR THE UI
 }
 
 export interface ITvRequestViewModel {

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

@@ -61,5 +61,4 @@ export class IssuesComponent implements OnInit {
             this.resolvedIssues = x;
         });
     }
-    
 }

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

@@ -125,7 +125,7 @@ export class LoginComponent implements OnDestroy, OnInit {
     }
 
     public oauth() {
-        this.plexTv.GetPin(this.clientId, this.appName).subscribe(pin => {
+        this.plexTv.GetPin(this.clientId, this.appName).subscribe((pin: any) => {
 
             this.authService.login({ usePlexOAuth: true, password: "", rememberMe: true, username: "", plexTvPin: pin }).subscribe(x => {
                 if (window.frameElement) {

src/Ombi/ClientApp/app/login/loginoauth.component.ts

@@ -16,7 +16,6 @@ export class LoginOAuthComponent implements OnInit {
         this.route.params
             .subscribe((params: any) => {
                 this.pin = params.pin;
-                
             });
     }
 
@@ -40,7 +39,6 @@ export class LoginOAuthComponent implements OnInit {
 
         }, err => {
             this.notify.error(err.statusText);
-            
             this.router.navigate(["login"]);
         });
     }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { NguCarousel } from "@ngu/carousel";
+import { NguCarouselConfig } from "@ngu/carousel";
 
 import { ImageService, RecentlyAddedService } from "../services";
 import { IRecentlyAddedMovies, IRecentlyAddedTvShows } from "./../interfaces";
@@ -43,7 +43,7 @@ export class RecentlyAddedComponent implements OnInit {
     public groupTv: boolean = false;
 
     // https://github.com/sheikalthaf/ngu-carousel
-    public carouselTile: NguCarousel;
+    public carouselTile: NguCarouselConfig;
 
     constructor(private recentlyAddedService: RecentlyAddedService,
                 private imageService: ImageService) {}

src/Ombi/ClientApp/app/requests/movierequests.component.html

@@ -45,8 +45,6 @@
 
 
 <div>
-
-
     <div *ngFor="let request of movieRequests">
         <div class="row">
             <div class="myBg backdrop" [style.background-image]="request.backgroundPath"></div>

src/Ombi/ClientApp/app/requests/movierequests.component.ts

@@ -1,15 +1,12 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
-import { NotificationService, RadarrService, RequestService } from "../services";
-
 import { FilterType, IFilter, IIssueCategory, IMovieRequests, IPagenator, IRadarrProfile, IRadarrRootFolder, OrderType } from "../interfaces";
+import { NotificationService, RadarrService, RequestService } from "../services";
 
 @Component({
     selector: "movie-requests",
@@ -45,16 +42,17 @@ export class MovieRequestsComponent implements OnInit {
     private currentlyLoaded: number;
     private amountToLoad: number;
 
-    constructor(private requestService: RequestService,
+    constructor(
+        private requestService: RequestService,
         private auth: AuthService,
         private notificationService: NotificationService,
         private radarrService: RadarrService,
         private sanitizer: DomSanitizer,
         private readonly platformLocation: PlatformLocation) {
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
             this.searchText = x as string;
             if (this.searchText === "") {
                 this.resetSearch();

src/Ombi/ClientApp/app/requests/tvrequests.component.html

@@ -4,59 +4,41 @@
     </div>
 </div>
 <br />
-<!--TODO: I believe this +1 is causing off by one error skipping loading of tv shows
-    When removed and scrolling very slowly everything works as expected, however
-    if you scroll really quickly then you start getting duplicates of movies
-    since it's async and some subsequent results return first and then incrementer
-    is increased so you see movies which had already been gotten show up...
 
-    Removing infinte-scroll and setting max to 1000 till we work out some sort of fix
-
-    -->
-<!--<div infinite-scroll
-     [infiniteScrollDistance]="1"
-     [infiniteScrollThrottle]="100"
-     (scrolled)="loadMore()">-->
 <div>
-    <p-treeTable [value]="tvRequests">
+        <div  *ngFor="let node of tvRequests.collection">
-
-        <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>
                 <div class="row">
-                        <div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
+                    <div class="myBg backdrop" [style.background-image]="node?.background"></div>
                     <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
 
                     <div class="col-sm-2  small-padding">
 
-                            <img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
+                        <img class="img-responsive poster" src="{{node.posterPath || null}}" alt="poster">
 
                     </div>
 
                     <div class="col-sm-5 small-padding">
                         <div>
-                                <a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
+                            <a href="http://www.imdb.com/title/{{node.imdbId}}/" target="_blank">
-                                    <h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
+                                <h4 class="request-title">{{node.title}} ({{node.releaseDate | date: 'yyyy'}})</h4>
                             </a>
                         </div>
                         <br />
                         <div>
                             <span>Status: </span>
-                                <span class="label label-success">{{node.data.status}}</span>
+                            <span class="label label-success">{{node.status}}</span>
                         </div>
 
 
-                            <div>Release Date: {{node.data.releaseDate | date}}</div>
+                        <div>Release Date: {{node.releaseDate | date}}</div>
                         <div *ngIf="isAdmin">
-                                <div *ngIf="node.data.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
+                            <div *ngIf="node.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
-                                    <span>{{node.data.qualityOverrideTitle}} </span>
+                                <span>{{node.qualityOverrideTitle}} </span>
                             </div>
-                                <div *ngIf="node.data.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
+                            <div *ngIf="node.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
-                                    <span>{{node.data.rootPathOverrideTitle}} </span>
+                                <span>{{node.rootPathOverrideTitle}} </span>
                             </div>
                         </div>
 
@@ -64,7 +46,8 @@
                     </div>
                     <div class="col-sm-3 col-sm-push-3  small-padding">
 
-                            <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)"><i class="fa fa-plus"></i> View</button>
+                        <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab(node,$event)">
+                            <i class="fa fa-plus"></i> View</button>
                         <div *ngIf="isAdmin">
                             <!--Sonarr Root Folder-->
                             <div *ngIf="sonarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
@@ -77,7 +60,7 @@
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li *ngFor="let folder of sonarrRootFolders">
-                                            <a href="#" (click)="selectRootFolder(node.data, folder, $event)">{{folder.path}}</a>
+                                        <a href="#" (click)="selectRootFolder(node, folder, $event)">{{folder.path}}</a>
                                     </li>
                                 </ul>
                             </div>
@@ -93,35 +76,39 @@
                                 </button>
                                 <ul class="dropdown-menu">
                                     <li *ngFor="let profile of sonarrProfiles">
-                                            <a href="#" (click)="selectQualityProfile(node.data, profile, $event)">{{profile.name}}</a>
+                                        <a href="#" (click)="selectQualityProfile(node, profile, $event)">{{profile.name}}</a>
                                     </li>
                                 </ul>
                             </div>
 
                         </div>
                         <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issueBtn">
-                                <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                            <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
+                                aria-expanded="true">
                                 <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                                 <span class="caret"></span>
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                                    <li *ngFor="let cat of issueCategories"><a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a></li>
+                                <li *ngFor="let cat of issueCategories">
+                                    <a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
+                                </li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
             <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-                <div *ngIf="node.leaf">
+            <div *ngIf="node.open">
-                    <tvrequests-children [childRequests]="node.data" [isAdmin] ="isAdmin" 
+                <tvrequests-children [childRequests]="node.childRequests" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
-                    (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
+            </div>
+            
+        <br/>
+        <br/>
+
         </div>
-            </ng-template>
-        </p-column>
-    </p-treeTable>
 
     <p-paginator [rows]="10" [totalRecords]="totalTv" (onPageChange)="paginate($event)"></p-paginator>
 </div>
 
-    <issue-report [movie]="false" [visible]="issuesBarVisible" [title]="issueRequest?.title"
+<issue-report [movie]="false" [visible]="issuesBarVisible" [title]="issueRequest?.title" [issueCategory]="issueCategorySelected"
-                  [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"></issue-report>
+    [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"></issue-report>

src/Ombi/ClientApp/app/requests/tvrequests.component.ts

@@ -1,21 +1,13 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
-import { ImageService } from "./../services/image.service";
-
-import "rxjs/add/operator/debounceTime";
-import "rxjs/add/operator/distinctUntilChanged";
-import "rxjs/add/operator/map";
 
 import { AuthService } from "../auth/auth.service";
+import { FilterType, IIssueCategory, IPagenator, IRequestsViewModel, ISonarrProfile, ISonarrRootFolder, ITvRequests, OrderType } from "../interfaces";
 import { NotificationService, RequestService, SonarrService } from "../services";
-
+import { ImageService } from "./../services/image.service";
-import { TreeNode } from "primeng/primeng";
-import { IIssueCategory, IPagenator,  ISonarrProfile, ISonarrRootFolder, ITvRequests } from "../interfaces";
 
 @Component({
     selector: "tv-requests",
@@ -24,7 +16,7 @@ import { IIssueCategory, IPagenator,  ISonarrProfile, ISonarrRootFolder, ITvRequ
 })
 export class TvRequestsComponent implements OnInit {
 
-    public tvRequests: TreeNode[];
+    public tvRequests: IRequestsViewModel<ITvRequests>;
     public searchChanged = new Subject<string>();
     public searchText: string;
     public isAdmin: boolean;
@@ -46,27 +38,28 @@ export class TvRequestsComponent implements OnInit {
     private currentlyLoaded: number;
     private amountToLoad: number;
 
-    constructor(private requestService: RequestService,
+    constructor(
+        private requestService: RequestService,
         private auth: AuthService,
         private sanitizer: DomSanitizer,
         private imageService: ImageService,
         private sonarrService: SonarrService,
         private notificationService: NotificationService,
         private readonly platformLocation: PlatformLocation) {
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
             this.searchText = x as string;
             if (this.searchText === "") {
                 this.resetSearch();
                 return;
             }
-                this.requestService.searchTvRequestsTree(this.searchText)
+            this.requestService.searchTvRequests(this.searchText)
                 .subscribe(m => {
-                        this.tvRequests = m;
+                    this.tvRequests.collection = m;
-                        this.tvRequests.forEach((val) => this.loadBackdrop(val));
+                    this.tvRequests.collection.forEach((val) => this.loadBackdrop(val));
-                        this.tvRequests.forEach((val) => this.setOverride(val.data));
+                    this.tvRequests.collection.forEach((val) => this.setOverride(val));
                 });
         });
         this.defaultPoster = "../../../images/default_tv_poster.png";
@@ -76,47 +69,15 @@ export class TvRequestsComponent implements OnInit {
         }
     }
 
-    public openClosestTab(el: any) {
+    public openClosestTab(node: ITvRequests,el: any) {
-        const rowclass = "undefined ng-star-inserted";
+        el.preventDefault();
-        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
+        node.open = !node.open;
-
-        if (el.nodeName === "BUTTON") {
-
-            const isButtonAlreadyActive = el.parentElement.querySelector(".active");
-            // if a Button already has Class: .active
-            if (isButtonAlreadyActive) {
-                isButtonAlreadyActive.classList.remove("active");
-            } else {
-                el.className += " active";
-            }
-        }
-
-        while (el.className !== rowclass) {
-            // Increment the loop to the parent node until we find the row we need
-            el = el.parentNode;
-        }
-        // At this point, the while loop has stopped and `el` represents the element that has
-        // the class you specified
-
-        // Then we loop through the children to find the caret which we want to click
-        const caretright = "fa-caret-right";
-        const caretdown = "fa-caret-down";
-        for (const value of el.children) {
-            // the caret from the ui has 2 class selectors depending on if expanded or not
-            // we search for both since we want to still toggle the clicking
-            if (value.className.includes(caretright) || value.className.includes(caretdown)) {
-                // Then we tell JS to click the element even though we hid it from the UI
-                value.click();
-                //Break from loop since we no longer need to continue looking
-                break;
-            }
-        }
     }
 
     public ngOnInit() {
         this.amountToLoad = 10;
         this.currentlyLoaded = 10;
-        this.tvRequests = [];
+        this.tvRequests = {collection:[], total:0};
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
 
         this.loadInit();
@@ -125,7 +86,7 @@ export class TvRequestsComponent implements OnInit {
     public paginate(event: IPagenator) {
         const skipAmount = event.first;
 
-        this.requestService.getTvRequestsTree(this.amountToLoad, skipAmount)
+        this.requestService.getTvRequests(this.amountToLoad, skipAmount, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
             .subscribe(x => {
                 this.tvRequests = x;
                 this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
@@ -204,13 +165,13 @@ export class TvRequestsComponent implements OnInit {
 
     private loadInit() {
         this.requestService.getTotalTv().subscribe(x => this.totalTv = x);
-        this.requestService.getTvRequestsTree(this.amountToLoad, 0)
+        this.requestService.getTvRequests(this.amountToLoad, 0, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
             .subscribe(x => {
                 this.tvRequests = x;
-                this.tvRequests.forEach((val, index) => {
+                this.tvRequests.collection.forEach((val, index) => {
                     this.setDefaults(val);
                     this.loadBackdrop(val);
-                    this.setOverride(val.data);
+                    this.setOverride(val);
                 });
             });
 
@@ -228,20 +189,20 @@ export class TvRequestsComponent implements OnInit {
         this.loadInit();
     }
 
-    private setDefaults(val: any) {
+    private setDefaults(val: ITvRequests) {
-        if (val.data.posterPath === null) {
+        if (val.posterPath === null) {
-            val.data.posterPath = this.defaultPoster;
+            val.posterPath = this.defaultPoster;
         }
     }
 
-    private loadBackdrop(val: TreeNode): void {
+    private loadBackdrop(val: ITvRequests): void {
-        if (val.data.background != null) {
+        if (val.background != null) {
-            val.data.background = this.sanitizer.bypassSecurityTrustStyle
+            val.background = this.sanitizer.bypassSecurityTrustStyle
-                ("url(https://image.tmdb.org/t/p/w1280" + val.data.background + ")");
+                ("url(https://image.tmdb.org/t/p/w1280" + val.background + ")");
         } else {
-            this.imageService.getTvBanner(val.data.tvDbId).subscribe(x => {
+            this.imageService.getTvBanner(val.tvDbId).subscribe(x => {
                 if (x) {
-                    val.data.background = this.sanitizer.bypassSecurityTrustStyle
+                    val.background = this.sanitizer.bypassSecurityTrustStyle
                         ("url(" + x + ")");
                 }
             });

src/Ombi/ClientApp/app/search/moviesearch.component.ts

@@ -1,11 +1,9 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { TranslateService } from "@ngx-translate/core";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
 import { IIssueCategory, IRequestEngineResult, ISearchMovieResult } from "../interfaces";
@@ -32,15 +30,16 @@ export class MovieSearchComponent implements OnInit {
     public issueCategorySelected: IIssueCategory;
     public defaultPoster: string;
 
-    constructor(private searchService: SearchService, private requestService: RequestService,
+    constructor(
+        private searchService: SearchService, private requestService: RequestService,
         private notificationService: NotificationService, private authService: AuthService,
         private readonly translate: TranslateService, private sanitizer: DomSanitizer,
         private readonly platformLocation: PlatformLocation) {
 
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
             this.searchText = x as string;
             if (this.searchText === "") {
                 this.clearResults();

src/Ombi/ClientApp/app/search/moviesearchgrid.component.ts

@@ -1,13 +1,10 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
-import { NotificationService, RequestService, SearchService } from "../services";
-
 import { IRequestEngineResult, ISearchMovieResult, ISearchMovieResultContainer } from "../interfaces";
+import { NotificationService, RequestService, SearchService } from "../services";
 
 @Component({
     selector: "movie-search-grid",
@@ -22,13 +19,14 @@ export class MovieSearchGridComponent implements OnInit {
     public result: IRequestEngineResult;
     public searchApplied = false;
 
-    constructor(private searchService: SearchService, private requestService: RequestService,
+    constructor(
+        private searchService: SearchService, private requestService: RequestService,
         private notificationService: NotificationService, private authService: AuthService) {
 
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms afterthe last event before emitting last event
+            debounceTime(600), // Wait Xms afterthe last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
             this.searchText = x as string;
             if (this.searchText === "") {
                 this.clearResults();
@@ -157,7 +155,6 @@ export class MovieSearchGridComponent implements OnInit {
                 this.movieResultGrid.push(container);
                 container = <ISearchMovieResultContainer> { movies: [] };
             } else {
-                
                 container.movies.push(movie);
             }
         });

src/Ombi/ClientApp/app/search/seriesinformation.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit} from "@angular/core";
-import "rxjs/add/operator/takeUntil";
 
 import { NotificationService } from "../services";
 import { RequestService } from "../services";

src/Ombi/ClientApp/app/search/tvsearch.component.html

@@ -42,46 +42,46 @@
             <i class='fa fa-film no-search-results-icon'></i>
             <div class='no-search-results-text'>{{ 'Search.NoResults' | translate }}</div>
         </div>
-        <p-treeTable [value]="tvResults">
+        <div *ngIf="tvResults" >
-            <p-column>
+          <div  *ngFor="let node of tvResults">
-                <ng-template let-col let-node="rowData" pTemplate="header">
-                    {{ 'Search.TvShows.Results' | translate }}
-                </ng-template>
-                <ng-template let-col let-node="rowData" pTemplate="body">
                 <!--This is the section that holds the parent level search results set-->
-                    <div *ngIf="!node.leaf">
+                <div *ngIf="node">
                     <div class="row">
 
-                <div class="myBg backdrop" [style.background-image]="node?.data?.background"></div>
+                        <div class="myBg backdrop" [style.background-image]="node?.background"></div>
                         <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
                         <div class="col-sm-2 small-padding">
 
-                                <img *ngIf="node?.data?.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster">
+                            <img *ngIf="node.banner" class="img-responsive poster" width="150" [src]="node.banner" alt="poster">
 
                         </div>
                         <div class="col-sm-8 small-padding">
                             <div>
 
-                                    <a *ngIf="node.data.imdbId" href="{{node.data.imdbId}}" target="_blank">
+                                <a *ngIf="node.imdbId" href="{{node.imdbId}}" target="_blank">
-                                        <h4>{{node.data.title}} ({{node.data.firstAired | date: 'yyyy'}})</h4>
+                                    <h4>{{node.title}} ({{node.firstAired | date: 'yyyy'}})</h4>
 
                                 </a>
                                 <span class="tags">
-                                            <a *ngIf="node.data.homepage" id="homepageLabel" href="{{node.data.homepage}}" target="_blank"><span class="label label-info" >{{ 'Search.Movies.HomePage' | translate }}</span></a>
+                                    <a *ngIf="node.homepage" id="homepageLabel" href="{{node.homepage}}" target="_blank">
+                                        <span class="label label-info">{{ 'Search.Movies.HomePage' | translate }}</span>
+                                    </a>
 
-                                            <a *ngIf="node.data.trailer"  id="trailerLabel" href="{{node.data.trailer}}" target="_blank"><span class="label label-info">{{ 'Search.Movies.Trailer' | translate }}</span></a>
+                                    <a *ngIf="node.trailer" id="trailerLabel" href="{{node.trailer}}" target="_blank">
+                                        <span class="label label-info">{{ 'Search.Movies.Trailer' | translate }}</span>
+                                    </a>
 
-                                    <span *ngIf="node.data.status" class="label label-primary" id="statusLabel" target="_blank">{{node.data.status}}</span>
+                                    <span *ngIf="node.status" class="label label-primary" id="statusLabel" target="_blank">{{node.status}}</span>
 
 
-                                    <span *ngIf="node.data.firstAired" class="label label-info" target="_blank" id="airDateLabel">{{ 'Search.TvShows.AirDate' | translate }} {{node.data.firstAired | date: 'dd/MM/yyyy'}}</span>
+                                    <span *ngIf="node.firstAired" class="label label-info" target="_blank" id="airDateLabel">{{ 'Search.TvShows.AirDate' | translate }} {{node.firstAired | date: 'dd/MM/yyyy'}}</span>
 
-                                    <span *ngIf="node.data.network" class="label label-info" id="networkLabel" target="_blank">{{node.data.network}}</span>
+                                    <span *ngIf="node.network" class="label label-info" id="networkLabel" target="_blank">{{node.network}}</span>
 
 
-                                        <span *ngIf="node.data.available" class="label label-success" id="availableLabel">{{ 'Common.Available' | translate }}</span>
+                                    <span *ngIf="node.available" class="label label-success" id="availableLabel">{{ 'Common.Available' | translate }}</span>
 
-                                        <span *ngIf="node.data.partlyAvailable" class="label label-warning" id="partiallyAvailableLabel">{{ 'Common.PartlyAvailable' | translate }}</span>
+                                    <span *ngIf="node.partlyAvailable" class="label label-warning" id="partiallyAvailableLabel">{{ 'Common.PartlyAvailable' | translate }}</span>
 
 
 
@@ -90,47 +90,45 @@
                                 <br />
                                 <br />
                             </div>
-                                <p class="tv-overview">{{node.data.overview}}</p>
+                            <p class="tv-overview">{{node.overview}}</p>
                         </div>
 
 
                         <div class="col-sm-2 small-padding">
-                                <div *ngIf="!node.data.fullyAvailable" class="dropdown">
+                            <div *ngIf="!node.fullyAvailable" class="dropdown">
                                 <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                     <i class="fa fa-plus"></i> {{ 'Common.Request' | translate }}
                                     <span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                     <li>
-                                            <a href="#" (click)="allSeasons(node.data, $event)">{{ 'Search.TvShows.AllSeasons' | translate }}</a>
+                                        <a href="#" (click)="allSeasons(node, $event)">{{ 'Search.TvShows.AllSeasons' | translate }}</a>
                                     </li>
                                     <li>
-                                            <a href="#" (click)="firstSeason(node.data, $event)">{{ 'Search.TvShows.FirstSeason' | translate }}</a>
+                                        <a href="#" (click)="firstSeason(node, $event)">{{ 'Search.TvShows.FirstSeason' | translate }}</a>
                                     </li>
                                     <li>
-                                            <a href="#" (click)="latestSeason(node.data, $event)">{{ 'Search.TvShows.LatestSeason' | translate }}</a>
+                                        <a href="#" (click)="latestSeason(node, $event)">{{ 'Search.TvShows.LatestSeason' | translate }}</a>
                                     </li>
                                     <li>
-                                            <a href="#" (click)="openClosestTab($event)">{{ 'Search.TvShows.Select' | translate }}</a>
+                                        <a href="#" (click)="openClosestTab(node, $event)">{{ 'Search.TvShows.Select' | translate }}</a>
                                     </li>
                                 </ul>
                             </div>
 
-                                <div *ngIf="node.data.fullyAvailable">
+                            <div *ngIf="node.fullyAvailable">
                                 <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
                                     <i class="fa fa-check"></i> {{ 'Common.Available' | translate }}
                                 </button>
                             </div>
                             <br />
-                                <div *ngIf="node.data.plexUrl && node.data.available">
+                            <div *ngIf="node.plexUrl && node.available">
-                                    <a style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.data.plexUrl}}"
+                                <a style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.plexUrl}}" target="_blank">
-                                       target="_blank">
                                     <i class="fa fa-eye"></i> {{ 'Search.ViewOnPlex' | translate }}
                                 </a>
                             </div>
-                                <div *ngIf="node.data.embyUrl && node.data.available">
+                            <div *ngIf="node.embyUrl && node.available">
-                                    <a style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{node.data.embyUrl}}"
+                                <a style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{node.embyUrl}}" target="_blank">
-                                       target="_blank">
                                     <i class="fa fa-eye"></i> {{ 'Search.ViewOnEmby' | translate }}
                                 </a>
                             </div>
@@ -142,11 +140,11 @@
                                 </button>
                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                     <li *ngFor="let cat of issueCategories">
-                                            <a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a>
+                                        <a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
                                     </li>
                                 </ul>
                             </div>
-                                <div *ngIf="!node.data.available">
+                            <div *ngIf="!node.available">
                                 <br />
                                 <br />
                             </div>
@@ -156,15 +154,13 @@
                     </div>
                 </div>
                 <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-                    <div *ngIf="node.leaf">
+                <div *ngIf="node.open">
-                        <seriesinformation [seriesId]="node.data.id"></seriesinformation>
+                    <seriesinformation [seriesId]="node.id"></seriesinformation>
                 </div>
 
                 <br/>
                 <br/>
-                </ng-template>
+            </div>
-            </p-column>
-        </p-treeTable>
     </div>
 </div>
 

src/Ombi/ClientApp/app/search/tvsearch.component.ts

@@ -1,15 +1,13 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import { Subject } from "rxjs/Subject";
+import { Subject } from "rxjs";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
 
 import { AuthService } from "../auth/auth.service";
+import { IIssueCategory, IRequestEngineResult, ISearchTvResult, ISeasonsViewModel, ITvRequestViewModel } from "../interfaces";
 import { ImageService, NotificationService, RequestService, SearchService } from "../services";
 
-import { TreeNode } from "primeng/primeng";
-import { IRequestEngineResult } from "../interfaces";
-import { IIssueCategory, ISearchTvResult, ISeasonsViewModel, ITvRequestViewModel } from "../interfaces";
-
 @Component({
     selector: "tv-search",
     templateUrl: "./tvsearch.component.html",
@@ -19,7 +17,7 @@ export class TvSearchComponent implements OnInit {
 
     public searchText: string;
     public searchChanged = new Subject<string>();
-    public tvResults: TreeNode[];
+    public tvResults: ISearchTvResult[];
     public result: IRequestEngineResult;
     public searchApplied = false;
     public defaultPoster: string;
@@ -32,21 +30,22 @@ export class TvSearchComponent implements OnInit {
     public issueProviderId: string;
     public issueCategorySelected: IIssueCategory;
 
-    constructor(private searchService: SearchService, private requestService: RequestService,
+    constructor(
+        private searchService: SearchService, private requestService: RequestService,
         private notificationService: NotificationService, private authService: AuthService,
         private imageService: ImageService, private sanitizer: DomSanitizer,
         private readonly platformLocation: PlatformLocation) {
 
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
             this.searchText = x as string;
             if (this.searchText === "") {
                 this.clearResults();
                 return;
             }
-                this.searchService.searchTvTreeNode(this.searchText)
+            this.searchService.searchTv(this.searchText)
                 .subscribe(x => {
                     this.tvResults = x;
                     this.searchApplied = true;
@@ -59,30 +58,9 @@ export class TvSearchComponent implements OnInit {
             this.defaultPoster = "../../.." + base + "/images/default_tv_poster.png";
         }
     }
-    public openClosestTab(el: any) {
+    public openClosestTab(node: ISearchTvResult,el: any) {
         el.preventDefault();
-        const rowclass = "undefined ng-star-inserted";
+        node.open = !node.open;
-        el = el.toElement || el.relatedTarget || el.target;
-        while (el.className !== rowclass) {
-            // Increment the loop to the parent node until we find the row we need
-            el = el.parentNode;
-        }
-        // At this point, the while loop has stopped and `el` represents the element that has
-        // the class you specified
-
-        // Then we loop through the children to find the caret which we want to click
-        const caretright = "fa-caret-right";
-        const caretdown = "fa-caret-down";
-        for (const value of el.children) {
-            // the caret from the ui has 2 class selectors depending on if expanded or not
-            // we search for both since we want to still toggle the clicking
-            if (value.className.includes(caretright) || value.className.includes(caretdown)) {
-                // Then we tell JS to click the element even though we hid it from the UI
-                value.click();
-                //Break from loop since we no longer need to continue looking
-                break;
-            }
-        }
     }
 
     public ngOnInit() {
@@ -138,16 +116,16 @@ export class TvSearchComponent implements OnInit {
 
     public getExtraInfo() {
         this.tvResults.forEach((val, index) => {
-            this.imageService.getTvBanner(val.data.id).subscribe(x => {
+            this.imageService.getTvBanner(val.id).subscribe(x => {
                 if (x) {
-                    val.data.background = this.sanitizer.
+                    val.background = this.sanitizer.
                         bypassSecurityTrustStyle
                         ("url(" + x + ")");
                 }
             });
-            this.searchService.getShowInformationTreeNode(val.data.id)
+            this.searchService.getShowInformation(val.id)
                 .subscribe(x => {
-                    if (x.data) {
+                    if (x) {
                         this.setDefaults(x);
                         this.updateItem(val, x);
                     } else {
@@ -223,29 +201,29 @@ export class TvSearchComponent implements OnInit {
         this.issueProviderId = req.id.toString();
     }
 
-    private updateItem(key: TreeNode, updated: TreeNode) {
+    private updateItem(key: ISearchTvResult, updated: ISearchTvResult) {
         const index = this.tvResults.indexOf(key, 0);
         if (index > -1) {
             // Update certain properties, otherwise we will loose some data
-            this.tvResults[index].data.title = updated.data.title;
+            this.tvResults[index].title = updated.title;
-            this.tvResults[index].data.banner = updated.data.banner;
+            this.tvResults[index].banner = updated.banner;
-            this.tvResults[index].data.imdbId = updated.data.imdbId;
+            this.tvResults[index].imdbId = updated.imdbId;
-            this.tvResults[index].data.seasonRequests = updated.data.seasonRequests;
+            this.tvResults[index].seasonRequests = updated.seasonRequests;
-            this.tvResults[index].data.seriesId = updated.data.seriesId;
+            this.tvResults[index].seriesId = updated.seriesId;
-            this.tvResults[index].data.fullyAvailable = updated.data.fullyAvailable;
+            this.tvResults[index].fullyAvailable = updated.fullyAvailable;
-            this.tvResults[index].data.backdrop = updated.data.backdrop;
+            this.tvResults[index].background = updated.banner;
         }
     }
 
-    private setDefaults(x: any) {
+    private setDefaults(x: ISearchTvResult) {
-        if (x.data.banner === null) {
+            if (x.banner === null) {
-            x.data.banner = this.defaultPoster;
+                x.banner = this.defaultPoster;
             }
         
-        if (x.data.imdbId === null) {
+        if (x.imdbId === null) {
-            x.data.imdbId = "https://www.tvmaze.com/shows/" + x.data.seriesId;
+            x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
         } else {
-            x.data.imdbId = "http://www.imdb.com/title/" + x.data.imdbId + "/";
+            x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
         }
     }
 

src/Ombi/ClientApp/app/services/applications/couchpotato.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/emby.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/plex.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/plexoauth.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/plextv.service.ts

@@ -2,7 +2,7 @@
 import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IPlexPin } from "../../interfaces";
 
@@ -10,7 +10,6 @@ import { IPlexPin } from "../../interfaces";
 export class PlexTvService {
 
     constructor(private http: HttpClient, public platformLocation: PlatformLocation) {
-      
     }
 
     public GetPin(clientId: string, applicationName: string): Observable<IPlexPin> {

src/Ombi/ClientApp/app/services/applications/radarr.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
 import { IRadarrSettings } from "../../interfaces";

src/Ombi/ClientApp/app/services/applications/sonarr.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ISonarrSettings } from "../../interfaces";
 import { ISonarrProfile, ISonarrRootFolder } from "../../interfaces";

src/Ombi/ClientApp/app/services/applications/tester.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 
@@ -37,6 +37,7 @@ export class TesterService extends ServiceHelpers {
     public pushbulletTest(settings: IPushbulletNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}pushbullet`, JSON.stringify(settings),  {headers: this.headers});
     }
+
     public pushoverTest(settings: IPushoverNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}pushover`, JSON.stringify(settings),  {headers: this.headers});
     }
@@ -80,9 +81,11 @@ export class TesterService extends ServiceHelpers {
     public sickrageTest(settings: ISickRageSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}sickrage`, JSON.stringify(settings),  {headers: this.headers});
     }
+
     public newsletterTest(settings: INewsletterNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}newsletter`, JSON.stringify(settings),  {headers: this.headers});
     }
+
     public mobileNotificationTest(settings: IMobileNotificationTestSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}mobile`, JSON.stringify(settings),  {headers: this.headers});
     }

src/Ombi/ClientApp/app/services/identity.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ICheckbox, ICreateWizardUser, IIdentityResult, IResetPasswordToken, IUpdateLocalUser, IUser, IWizardUserResult } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";

src/Ombi/ClientApp/app/services/image.service.ts

@@ -1,6 +1,6 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 

src/Ombi/ClientApp/app/services/issues.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IIssueCategory, IIssueComments, IIssueCount, IIssues, IIssuesChat, INewIssueComments, IssueStatus, IUpdateStatus } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";

src/Ombi/ClientApp/app/services/job.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "./service.helpers";
 

src/Ombi/ClientApp/app/services/landingpage.service.ts

@@ -1,6 +1,6 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 

src/Ombi/ClientApp/app/services/mobile.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IMobileUsersViewModel } from "./../interfaces";
 import { ServiceHelpers } from "./service.helpers";

src/Ombi/ClientApp/app/services/notificationMessage.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IMassEmailModel } from "./../interfaces";
 

src/Ombi/ClientApp/app/services/recentlyAdded.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IRecentlyAddedMovies, IRecentlyAddedTvShows } from "./../interfaces";
 import { ServiceHelpers } from "./service.helpers";
@@ -19,6 +19,7 @@ export class RecentlyAddedService extends ServiceHelpers {
     public getRecentlyAddedTv(): Observable<IRecentlyAddedTvShows[]> {
         return this.http.get<IRecentlyAddedTvShows[]>(`${this.  url}tv/`, {headers: this.headers});
     }
+
     public getRecentlyAddedTvGrouped(): Observable<IRecentlyAddedTvShows[]> {
         return this.http.get<IRecentlyAddedTvShows[]>(`${this.url}tv/grouped`, {headers: this.headers});
     }

src/Ombi/ClientApp/app/services/request.service.ts

@@ -1,11 +1,11 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { TreeNode } from "primeng/primeng";
-import { IRequestEngineResult } from "../interfaces";
+import { IRequestEngineResult, FilterType } from "../interfaces";
 import { IChildRequests, IFilter, IMovieRequestModel, IMovieRequests, IMovieUpdateModel, IRequestsViewModel, ITvRequests, ITvUpdateModel, OrderType } from "../interfaces";
 import { ITvRequestViewModel } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
@@ -64,8 +64,8 @@ export class RequestService extends ServiceHelpers {
         return this.http.put<IMovieRequests>(`${this.url}movie/`, JSON.stringify(request), {headers: this.headers});
     }
 
-    public getTvRequests(count: number, position: number): Observable<ITvRequests[]> {
+    public getTvRequests(count: number, position: number, order: OrderType, status: FilterType, availability: FilterType): Observable<IRequestsViewModel<ITvRequests>> {
-        return this.http.get<ITvRequests[]>(`${this.url}tv/${count}/${position}`, {headers: this.headers});
+        return this.http.get<IRequestsViewModel<ITvRequests>>(`${this.url}tv/${count}/${position}/${order}/${status}/${availability}`, {headers: this.headers});
     }
 
     public getTvRequestsTree(count: number, position: number): Observable<TreeNode[]> {

src/Ombi/ClientApp/app/services/search.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { TreeNode } from "primeng/primeng";
 import { ISearchMovieResult } from "../interfaces";
@@ -56,16 +56,16 @@ export class SearchService extends ServiceHelpers {
         return this.http.get<ISearchTvResult>(`${this.url}/Tv/info/${theTvDbId}`, {headers: this.headers});
     }
 
-    public popularTv(): Observable<TreeNode[]> {
+    public popularTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/popular/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/popular`, {headers: this.headers});
     }
-    public mostWatchedTv(): Observable<TreeNode[]> {
+    public mostWatchedTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/mostwatched/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/mostwatched`, {headers: this.headers});
     }
-    public anticipatedTv(): Observable<TreeNode[]> {
+    public anticipatedTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/anticipated/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/anticipated`, {headers: this.headers});
     }
-    public trendingTv(): Observable<TreeNode[]> {
+    public trendingTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/trending/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/trending`, {headers: this.headers});
     }
 }

src/Ombi/ClientApp/app/services/service.helpers.ts

@@ -1,6 +1,5 @@
 import { PlatformLocation } from "@angular/common";
 import { HttpClient, HttpHeaders } from "@angular/common/http";
-import "rxjs/add/observable/throw";
 
 export class ServiceHelpers {
 

src/Ombi/ClientApp/app/services/settings.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import {
     IAbout,

src/Ombi/ClientApp/app/services/status.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "./service.helpers";
 

src/Ombi/ClientApp/app/settings/plex/plex.component.ts

@@ -1,10 +1,8 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
-import "rxjs/add/operator/takeUntil";
+import { Subject } from "rxjs";
-import { Subject } from "rxjs/Subject";
+import { takeUntil } from "rxjs/operators";
-
-import { IPlexServerResponse, IPlexServerViewModel } from "../../interfaces";
-import { IPlexLibrariesSettings, IPlexServer, IPlexSettings } from "../../interfaces";
 
+import { IPlexLibrariesSettings, IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
 import { JobService, NotificationService, PlexService, SettingsService, TesterService } from "../../services";
 
 @Component({
@@ -21,7 +19,8 @@ export class PlexComponent implements OnInit, OnDestroy {
 
     private subscriptions = new Subject<void>();
 
-    constructor(private settingsService: SettingsService,
+    constructor(
+        private settingsService: SettingsService,
         private notificationService: NotificationService,
         private plexService: PlexService,
         private testerService: TesterService,
@@ -34,9 +33,9 @@ export class PlexComponent implements OnInit, OnDestroy {
     }
 
     public requestServers(server: IPlexServer) {
-        this.plexService.getServers(this.username, this.password)
+        this.plexService.getServers(this.username, this.password).pipe(
-            .takeUntil(this.subscriptions)
+            takeUntil(this.subscriptions),
-            .subscribe(x => {
+        ).subscribe(x => {
             if (x.success) {
                 this.loadedServers = x;
                 this.serversButton = true;

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

@@ -1,14 +1,16 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule, Routes } from "@angular/router";
 import { NgbAccordionModule, NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { ClipboardModule } from "ngx-clipboard/dist";
+import { ClipboardModule } from "ngx-clipboard";
 
 import { AuthGuard } from "../auth/auth.guard";
 import { AuthService } from "../auth/auth.service";
-import { CouchPotatoService, EmbyService, IssuesService, JobService, MobileService, NotificationMessageService, PlexService, RadarrService,
+import {
-         SonarrService, TesterService, ValidationService } from "../services";
+    CouchPotatoService, EmbyService, IssuesService, JobService, MobileService, NotificationMessageService, PlexService, RadarrService,
+    SonarrService, TesterService, ValidationService,
+} from "../services";
 
 import { PipeModule } from "../pipes/pipe.module";
 import { AboutComponent } from "./about/about.component";

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

@@ -21,9 +21,9 @@ export class UserManagementComponent implements OnInit {
     public bulkMovieLimit?: number;
     public bulkEpisodeLimit?: number;
 
-    constructor(private readonly identityService: IdentityService,
+    constructor(private identityService: IdentityService,
-                private readonly settingsService: SettingsService,
+                private settingsService: SettingsService,
-                private readonly notificationService: NotificationService) { }
+                private notificationService: NotificationService) { }
 
     public ngOnInit() {
         this.users = [];

src/Ombi/ClientApp/app/wizard/emby/emby.component.ts

@@ -11,7 +11,7 @@ import { IEmbySettings } from "../../interfaces";
 })
 export class EmbyComponent implements OnInit {
 
-    private embySettings: IEmbySettings;
+    public embySettings: IEmbySettings;
 
     constructor(private embyService: EmbyService,
                 private router: Router,

src/Ombi/ClientApp/app/wizard/plex/plex.component.ts

@@ -50,7 +50,7 @@ export class PlexComponent implements OnInit {
     }
 
     public oauth() {
-        this.plexTv.GetPin(this.clientId, "Ombi").subscribe(pin => {
+        this.plexTv.GetPin(this.clientId, "Ombi").subscribe((pin: any) => {
             this.plexService.oAuth({ wizard: true, pin }).subscribe(x => {
                 if (x.url) {
                     window.location.href = x.url;

src/Ombi/ClientApp/app/wizard/plex/plexoauth.component.ts

@@ -50,5 +50,4 @@ export class PlexOAuthComponent implements OnInit {
                  
         });
     }
-    
 }

src/Ombi/ClientApp/imports.ts

@@ -1,2 +0,0 @@
-import "rxjs/add/operator/catch";
-import "rxjs/add/operator/map";

src/Ombi/ClientApp/main.ts

@@ -1,5 +1,6 @@
-import * as Pace from "pace-progress";
+// Main
 
+import * as Pace from "pace-progress";
 Pace.start();
 
 import "bootstrap/dist/js/bootstrap";
@@ -11,8 +12,6 @@ import "./polyfills";
 
 import "hammerjs";
 
-import "./imports";
-
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
@@ -29,7 +28,9 @@ if (module.hot) {
             oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
             oldRootElem.parentNode.removeChild(oldRootElem);
         }
+        if (modulePromise) {
             modulePromise.then(appModule => appModule.destroy());
+        }
     });
 } else {
     enableProdMode();

src/Ombi/ClientApp/polyfills.ts

@@ -9,6 +9,7 @@ declare var module: any;
 
 if (module.hot) {
     Error.stackTraceLimit = Infinity;
-    // tslint:disable:no-var-requires
+
+    // tslint:disable-next-line
     require("zone.js/dist/long-stack-trace-zone");
 }

src/Ombi/ClientApp/styles/Styles.scss

@@ -24,3 +24,7 @@ $bg-colour-disabled: #252424;
     background: $primary-colour !important;
     color: white;
 }*/
+
+.label {
+    margin: 3px;
+}

src/Ombi/ClientApp/styles/base.scss

@@ -883,11 +883,6 @@ textarea {
     display: none;
 }
 
-.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-right,
-.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-down {
-    display: none;
-}
-
 .ui-state-highlight {
     background: $primary-colour;
 }
@@ -900,15 +895,6 @@ textarea {
     border: 1px solid $form-color-lighter;
 }
 
-.ui-treetable tfoot td, .ui-treetable th {
-    text-align: left;
-}
-
-.ui-treetable tbody td {
-    white-space: inherit;
-    overflow: visible;
-}
-
 table a:not(.btn) {
     text-decoration: none;
 }

src/Ombi/Controllers/RequestController.cs

@@ -153,18 +153,6 @@ namespace Ombi.Controllers
             return await MovieRequestEngine.DenyMovieById(model.Id);
         }
 
-        /// <summary>
-        /// Gets the tv requests.
-        /// </summary>
-        /// <param name="count">The count of items you want to return.</param>
-        /// <param name="position">The position.</param>
-        /// <returns></returns>
-        [HttpGet("tv/{count:int}/{position:int}/tree")]
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetTvRequestsTree(int count, int position)
-        {
-            return await TvRequestEngine.GetRequestsTreeNode(count, position);
-        }
-
         /// <summary>
         /// Gets the total amount of TV requests.
         /// </summary>
@@ -267,17 +255,6 @@ namespace Ombi.Controllers
             return await TvRequestEngine.SearchTvRequest(searchTerm);
         }
 
-        /// <summary>
-        /// Searches for a specific tv request
-        /// </summary>
-        /// <param name="searchTerm">The search term.</param>
-        /// <returns></returns>
-        [HttpGet("tv/search/{searchTerm}/tree")]
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvTree(string searchTerm)
-        {
-            return await TvRequestEngine.SearchTvRequestTree(searchTerm);
-        }
-
         /// <summary>
         /// Deletes the a specific tv request
         /// </summary>

src/Ombi/Controllers/SearchController.cs

@@ -1,5 +1,4 @@
-using System;
+using System.Collections.Generic;
-using System.Collections.Generic;
 using System.Threading.Tasks;
 
 using Microsoft.AspNetCore.Authorization;
@@ -127,31 +126,6 @@ namespace Ombi.Controllers
             return await TvEngine.Search(searchTerm);
         }
 
-        /// <summary>
-        /// Searches for a Tv Show.
-        /// </summary>
-        /// <param name="searchTerm">The search term.</param>
-        /// <remarks>We use TvMaze as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/{searchTerm}/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTvTreeNode(string searchTerm)
-        {
-            return await TvEngine.SearchTreeNode(searchTerm);
-        }
-
-        /// <summary>
-        /// Gets extra show information.
-        /// </summary>
-        /// <param name="tvdbId">The TVDB identifier.</param>
-        /// <remarks>We use TvMaze as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/info/{tvdbId}/tree")]
-        public async Task<TreeNode<SearchTvShowViewModel>> GetShowInfoTreeNode(int tvdbId)
-        {
-            if (tvdbId == 0) return new TreeNode<SearchTvShowViewModel>();
-            return await TvEngine.GetShowInformationTreeNode(tvdbId);
-        }
-
         /// <summary>
         /// Gets extra show information.
         /// </summary>
@@ -164,17 +138,6 @@ namespace Ombi.Controllers
             return await TvEngine.GetShowInformation(tvdbId);
         }
 
-        /// <summary>
-        /// Returns Popular Tv Shows
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/popular/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTvTree()
-        {
-            return await TvEngine.PopularTree();
-        }
-
         /// <summary>
         /// Returns Popular Tv Shows
         /// </summary>
@@ -186,18 +149,6 @@ namespace Ombi.Controllers
             return await TvEngine.Popular();
         }
 
-        /// <summary>
-        /// Returns most Anticiplateds tv shows.
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/anticipated/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTvTree()
-        {
-            return await TvEngine.AnticipatedTree();
-        }
-
-
         /// <summary>
         /// Returns most Anticiplateds tv shows.
         /// </summary>
@@ -209,16 +160,6 @@ namespace Ombi.Controllers
             return await TvEngine.Anticipated();
         }
 
-        /// <summary>
-        /// Returns Most watched shows.
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/mostwatched/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchedTree()
-        {
-            return await TvEngine.MostWatchesTree();
-        }
 
         /// <summary>
         /// Returns Most watched shows.
@@ -231,17 +172,6 @@ namespace Ombi.Controllers
             return await TvEngine.MostWatches();
         }
 
-        /// <summary>
-        /// Returns trending shows
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/trending/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree()
-        {
-            return await TvEngine.TrendingTree();
-        }
-
         /// <summary>
         /// Returns trending shows
         /// </summary>

src/Ombi/Ombi.csproj

@@ -1,5 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
-
   <PropertyGroup>
     <TargetFramework>netcoreapp2.1</TargetFramework>
     <RuntimeIdentifiers>win10-x64;win10-x86;osx-x64;ubuntu-x64;debian.8-x64;centos.7-x64;linux-x64;linux-arm;linux-arm64;</RuntimeIdentifiers>
@@ -9,6 +8,7 @@
     <FileVersion>$(SemVer)</FileVersion>
     <Version>$(FullVer)</Version>
     <PackageVersion></PackageVersion>
+    <TypeScriptToolsVersion>2.8</TypeScriptToolsVersion>
   </PropertyGroup>
   <PropertyGroup>
     <ServerGarbageCollection>false</ServerGarbageCollection>
@@ -24,10 +24,6 @@
     <DefineConstants>TRACE;RELEASE;NETCOREAPP2_0</DefineConstants>
   </PropertyGroup>
   
-  <Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
-    <Exec Command="npm run-script vendor" />
-  </Target>
-  
   <ItemGroup>
     <!-- Files not to show in IDE -->
     <Compile Remove="Logs\**" />
@@ -46,7 +42,17 @@
     <None Remove="Styles\**" />
     <None Remove="wwwroot\dist\**" />
   </ItemGroup>
-  
+  <Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
+    <Exec Command="npm run vendor" />
+  </Target>
+  <!-- Disabled as run by CI once for many different runtime builds
+  <Target Name="NpmCommandsRelease" Condition="'$(Configuration)'=='Release'" AfterTargets="Build">
+    <Exec Command="npm run publish" />
+  </Target>
+  -->
+  <Target Name="NpmCommandsClean" AfterTargets="Clean">
+    <Exec Command="npm run clean" />
+  </Target>
   <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
     <ItemGroup>
       <DistFiles Include="wwwroot\dist\**" />
@@ -56,8 +62,6 @@
       </ResolvedFileToPublish>
     </ItemGroup>
   </Target>
-
-
   <ItemGroup>
     <PackageReference Include="AutoMapper" Version="6.1.1" />
     <PackageReference Include="CommandLineParser" Version="2.1.1-beta" />
@@ -94,18 +98,4 @@
     <ProjectReference Include="..\Ombi.TheMovieDbApi\Ombi.Api.TheMovieDb.csproj" />
     <ProjectReference Include="..\Ombi.Updater\Ombi.Updater.csproj" />
   </ItemGroup>
-
-  <ItemGroup>
-    <None Include="wwwroot\loading.css" />
-    <None Include="wwwroot\translations\*.json" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <None Remove="ClientApp\app\animations\fadeinout.ts" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <TypeScriptCompile Include="ClientApp\app\animations\fadeinout.ts" />
-  </ItemGroup>
- 
 </Project>

src/Ombi/Startup.cs

@@ -156,7 +156,12 @@ namespace Ombi
                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                 {
                     HotModuleReplacement = true,
-                    ConfigFile = "webpack.dev.js"
+                    ConfigFile = "webpack.config.ts",
+                    
+                    //EnvParam = new
+                    //{
+                    //    aot = true // can't use AOT with HMR currently https://github.com/angular/angular-cli/issues/6347
+                    //}
                 });
             }
 

src/Ombi/Views/Shared/_Layout.cshtml

@@ -98,8 +98,10 @@
 
     <link rel="stylesheet" href="~/loading.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
+    <environment include="Development">
         <script src="~/dist/vendor.js" asp-append-version="true" defer></script>
-    <script src="~/dist/main.js" asp-append-version="true" defer></script>
+    </environment>
+    <script src="~/dist/app.js" asp-append-version="true" defer></script>
 </head>
 <body>
     @{

src/Ombi/gulpfile.js

@@ -1,21 +1,25 @@
-'use strict';
+"use strict";
 
-const gulp = require('gulp');
+const gulp = require("gulp");
-const run = require('gulp-run');
+const run = require("gulp-run");
-const runSequence = require('run-sequence');
+const runSequence = require("run-sequence");
-const del = require('del');
+const del = require("del");
-const path = require('path');
+const path = require("path");
-const fs = require('fs');
+const fs = require("fs");
 
-const outputDir = './wwwroot/dist';
+const outputDir = "./wwwroot/dist";
+global.aot = true;
 
 function getEnvOptions() {
-    var options = [];
+    const options = [];
     if (global.prod) {
-        options.push('--env.prod');
+        options.push("--env.prod");
     }
     if (global.analyse) {
-        options.push('--env.analyse');
+        options.push("--env.analyse");
+    }
+    if (global.aot) {
+        options.push("--env.aot");
     }
     if (options.length > 0) {
         return " " + options.join(" ");
@@ -24,12 +28,12 @@ function getEnvOptions() {
     }
 }
 
-
+function webpack(type) {
-function webpack(vendor) {
+    // 'webpack' instead of direct path can cause https://github.com/angular/angular-cli/issues/6417
-    return run(`webpack --config webpack.config${vendor ? '.vendor' : ''}.ts${getEnvOptions()}`).exec();
+    return run(`node node_modules\\webpack\\bin\\webpack.js --config webpack.config${type ? `.${type}` : ""}.ts${getEnvOptions()}`).exec();
 }
 
-gulp.task('vendor', () => {
+gulp.task("vendor", () => {
     let build = false;
     const vendorPath = path.join(outputDir, "vendor.js");
     const vendorExists = fs.existsSync(vendorPath);
@@ -37,44 +41,47 @@ gulp.task('vendor', () => {
         const vendorStat = fs.statSync(vendorPath);
         const packageStat = fs.statSync("package.json");
         const vendorConfigStat = fs.statSync("webpack.config.vendor.ts");
+        const commonConfigStat = fs.statSync("webpack.config.common.ts");
         if (packageStat.mtime > vendorStat.mtime) {
             build = true;
         }
         if (vendorConfigStat.mtime > vendorStat.mtime) {
             build = true;
         }
+        if (commonConfigStat.mtime > vendorStat.mtime) {
+            build = true;
+        }
     } else {
         build = true;
     }
     if (build) {
-        return webpack(true);
+        return webpack("vendor");
     }
 });
 
-
+gulp.task("vendor_force", () => {
-gulp.task('vendor_force', () => {
+    return webpack("vendor");
-    return webpack(true);
 })
 
-gulp.task('main', () => {
+gulp.task("main", () => {
     return webpack()
 });
 
-gulp.task('prod_var', () => {
+gulp.task("prod_var", () => {
     global.prod = true;
 })
 
-gulp.task('analyse_var', () => {
+gulp.task("analyse_var", () => {
     global.analyse = true;
 })
 
-gulp.task('clean', () => {
+gulp.task("clean", () => {
     del.sync(outputDir, { force: true });
 });
 
-
+gulp.task("lint", () => run("npm run lint").exec());
-gulp.task('lint', () => run("npm run lint").exec());
+gulp.task("lint_fix", () => run("npm run lint -- --fix").exec());
-gulp.task('build', callback => runSequence('vendor', 'main', callback));
+gulp.task("build", callback => runSequence("vendor", "main", callback));
-gulp.task('analyse', callback => runSequence('analyse_var', 'build'));
+gulp.task("analyse", callback => runSequence("analyse_var", "clean", "build", callback));
-gulp.task('full', callback => runSequence('clean', 'build'));
+gulp.task("full", callback => runSequence("clean", "build", callback));
-gulp.task('publish', callback => runSequence('prod_var', 'build'));
+gulp.task("publish", callback => runSequence("prod_var", "full", callback));

src/Ombi/package.json

@@ -1,94 +1,93 @@
 {
   "name": "ombi",
+  "version": "2.6.0",
   "private": true,
-  "version": "1.0.0",
   "scripts": {
     "vendor": "gulp vendor",
-    "main": "gulp main",
+    "lint": "tslint -p .",
     "publish": "gulp publish",
-    "lint": "tslint ClientApp/**/*.ts",
+    "restore": "dotnet restore && yarn install",
-    "restore": "dotnet restore && npm install"
+    "clean": "gulp clean"
   },
   "dependencies": {
-    "@angular/animations": "^5.2.5",
+    "@angular/animations": "^6.0.7",
-    "@angular/cdk": "^5.2.1",
+    "@angular/cdk": "^6.3.1",
-    "@angular/common": "^5.2.5",
+    "@angular/common": "^6.0.7",
-    "@angular/compiler": "^5.2.5",
+    "@angular/compiler": "^6.0.7",
-    "@angular/core": "^5.2.5",
+    "@angular/compiler-cli": "^6.0.7",
-    "@angular/forms": "^5.2.5",
+    "@angular/core": "^6.0.7",
-    "@angular/http": "^5.2.5",
+    "@angular/forms": "^6.0.7",
-    "@angular/material": "^5.2.1",
+    "@angular/http": "^6.0.7",
-    "@angular/platform-browser": "^5.2.5",
+    "@angular/material": "^6.3.1",
-    "@angular/platform-browser-dynamic": "^5.2.5",
+    "@angular/platform-browser": "^6.0.7",
-    "@angular/platform-server": "^5.2.5",
+    "@angular/platform-browser-dynamic": "^6.0.7",
-    "@angular/router": "^5.2.5",
+    "@angular/platform-server": "^6.0.7",
-    "@auth0/angular-jwt": "1.0.0-beta.9",
+    "@angular/router": "^6.0.7",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
+    "@auth0/angular-jwt": "^2.0.0",
-    "@ngu/carousel": "^1.4.8",
+    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
-    "@ngx-translate/core": "^8.0.0",
+    "@ngtools/webpack": "^6.1.0-beta.2",
-    "@ngx-translate/http-loader": "^2.0.1",
+    "@ngu/carousel": "^1.4.9-beta-2",
-    "@types/core-js": "^0.9.46",
+    "@ngx-translate/core": "^10.0.2",
-    "@types/extract-text-webpack-plugin": "^3.0.1",
+    "@ngx-translate/http-loader": "^3.0.1",
-    "@types/intro.js": "^2.4.3",
+    "@types/core-js": "^2.5.0",
-    "@types/node": "^8.9.4",
+    "@types/mini-css-extract-plugin": "^0.2.0",
-    "@types/webpack": "^3.8.7",
+    "@types/node": "^10.5.1",
-    "angular-router-loader": "^0.8.2",
+    "@types/webpack": "^4.4.4",
-    "angular2-moment": "^1.8.0",
+    "@types/webpack-bundle-analyzer": "^2.9.2",
+    "@types/webpack-merge": "^4.1.3",
+    "angular-router-loader": "^0.8.5",
     "angular2-template-loader": "^0.6.2",
-    "aspnet-webpack": "^2.0.3",
+    "aspnet-webpack": "^3.0.0",
-    "awesome-typescript-loader": "^3.4.1",
+    "awesome-typescript-loader": "^5.2.0",
     "bootstrap": "3.3.7",
     "bootswatch": "3.3.7",
-    "core-js": "^2.5.3",
+    "copy-webpack-plugin": "^4.5.2",
-    "css": "^2.2.1",
+    "core-js": "^2.5.7",
-    "css-loader": "^0.28.9",
+    "css": "^2.2.3",
+    "css-loader": "^0.28.11",
     "del": "^3.0.0",
-    "event-source-polyfill": "^0.0.11",
+    "event-source-polyfill": "^0.0.12",
-    "expose-loader": "^0.7.4",
+    "expose-loader": "^0.7.5",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.11",
-    "file-loader": "^1.1.6",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
     "gulp-run": "^1.7.1",
     "hammerjs": "^2.0.8",
-    "html-loader": "0.5.1",
+    "html-loader": "^0.5.5",
     "jquery": "^3.3.1",
+    "mini-css-extract-plugin": "^0.4.1",
+    "moment": "^2.22.2",
     "ng2-cookies": "^1.0.12",
-    "ngx-clipboard": "8.1.1",
+    "ngx-clipboard": "^11.1.1",
-    "ngx-infinite-scroll": "^0.6.1",
+    "ngx-infinite-scroll": "^6.0.1",
+    "ngx-moment": "^3.0.1",
     "ngx-order-pipe": "^2.0.1",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.0",
-    "npm": "^5.6.0",
     "pace-progress": "^1.0.2",
-    "primeng": "5.0.2",
+    "primeng": "^6.0.0",
-    "reflect-metadata": "0.1.10",
+    "raw-loader": "^0.5.1",
+    "reflect-metadata": "^0.1.12",
     "run-sequence": "^2.2.1",
-    "rxjs": "5.5.2",
+    "rxjs": "^6.2.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.0.3",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.21.0",
     "to-string-loader": "^1.1.5",
-    "ts-node": "^3.3.0",
+    "ts-node": "^7.0.0",
-    "tslint": "^5.9.1",
+    "tslint": "^5.10.0",
-    "tslint-language-service": "^0.9.8",
+    "tslint-language-service": "^0.9.9",
-    "typescript": "^2.7.1",
+    "typescript": "2.7.2",
-    "uglify-es": "^3.3.10",
+    "uglify-es": "^3.3.9",
-    "uglifyjs-webpack-plugin": "^1.1.8",
+    "uglifyjs-webpack-plugin": "^1.2.7",
-    "url-loader": "^0.6.2",
+    "url-loader": "^1.0.1",
-    "webpack": "^3.11.0",
+    "webpack": "^4.14.0",
-    "webpack-bundle-analyzer": "^2.10.0",
+    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-hot-middleware": "^2.21.0",
+    "webpack-cli": "^3.0.8",
-    "zone.js": "^0.8.20"
+    "webpack-dev-middleware": "^3.1.3",
+    "webpack-hot-middleware": "^2.22.2",
+    "webpack-merge": "^4.1.3",
+    "zone.js": "^0.8.26"
   },
-  "devDependencies": {
+  "resolutions": {
-    "@types/chai": "4.0.4",
+    "@types/tapable": "1.0.0"
-    "@types/jasmine": "2.6.2",
-    "chai": "4.1.2",
-    "jasmine-core": "2.8.0",
-    "karma": "1.7.1",
-    "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-jasmine": "1.1.0",
-    "karma-webpack": "2.0.5"
   }
 }

src/Ombi/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": [
-      "es6",
+      "es2017",
       "dom"
     ],
     "moduleResolution": "node",
@@ -27,11 +27,15 @@
       }
     ]
   },
-  "exclude": [
+  "include": [
-    "bin",
+    "ClientApp/**/*",
-    "node_modules"
+    "typings/**/*",
+    "webpack.config.*"
   ],
   "angularCompilerOptions": {
-    "preserveWhitespaces": false
+    "preserveWhitespaces": false,
-  }
+    "genDir": "./ClientApp/app/ngfactory",
+    "entryModule": "ClientApp/app/app.module#AppModule"
+  },
+  "compileOnSave": false
 }

src/Ombi/tslint.json

@@ -8,7 +8,7 @@
     ],
     "max-line-length": [
       true,
-      200
+      250
     ],
     "arrow-parens": false,
     "radix": false,
@@ -16,22 +16,33 @@
     "indent": [
       false
     ],
-    "whitespace": [
-      false
-    ],
     "no-unused-expression": [
       true,
       "allow-new"
     ],
-    "no-trailing-whitespace": [
-      false
-    ],
     "max-classes-per-file": [
       false
     ],
     "no-shadowed-variable": false,
     "comment-format": [
       false
+    ],
+    "no-namespace": [
+      false
+    ],
+    "no-internal-module": [
+      false
+    ],
+    "whitespace": [
+      false, 
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "no-trailing-whitespace":[
+      false
     ]
   }
 }

src/Ombi/typings/globals.d.ts

@@ -0,0 +1,4 @@
+// Globals
+
+declare module "pace-progress";
+declare var __webpack_public_path__: any;

src/Ombi/typings/globals/globals.d.ts

@@ -1,12 +0,0 @@
-// Globals
-
-declare var module: any;
-declare var require: any;
-declare var localStorage: any;
-declare var introJs: any;
-
-declare var __webpack_public_path__: any;
-
-declare module "pace-progress";
-declare module "webpack-bundle-analyzer";
-declare module "uglifyjs-webpack-plugin";

src/Ombi/typings/index.d.ts

@@ -1 +1 @@
-/// <reference path="globals/globals.d.ts" />
+/// <reference path="globals.d.ts" />

src/Ombi/webpack.config.common.ts

@@ -0,0 +1,83 @@
+import { AngularCompilerPlugin } from "@ngtools/webpack";
+import * as MiniCssExtractPlugin from "mini-css-extract-plugin";
+import * as path from "path";
+import { Configuration, ContextReplacementPlugin, ProvidePlugin } from "webpack";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+
+export const outputDir = "./wwwroot/dist";
+
+export function isProd(env: any) {
+    return env && env.prod as boolean;
+}
+
+export function isAOT(env: any) {
+    return env && env.aot as boolean;
+}
+
+export const WebpackCommonConfig = (env: any, type: string) => {
+    const prod = isProd(env);
+    const aot = isAOT(env);
+    const vendor = type === "vendor";
+    console.log(`${prod ? "Production" : "Dev"} ${type} build`);
+    console.log(`Output directory: ${outputDir}`);
+    console.log(`${aot ? "Using" : "Not using"} AOT compiler`);
+    const analyse = env && env.analyse as boolean;
+    if (analyse) { console.log("Analysing build"); }
+    const cssLoader = prod ? "css-loader?minimize" : "css-loader";
+    const bundleConfig: Configuration = {
+        mode: prod ? "production" : "development",
+        resolve: {
+            extensions: [".ts", ".js"],
+            alias: {
+                pace: "pace-progress",
+            },
+        },
+        output: {
+            path: path.resolve(outputDir),
+            filename: "[name].js",
+            chunkFilename: "[id].chunk.js",
+            publicPath: "/dist/",
+        },
+        module: {
+            rules: [
+                { test: /\.ts$/, loader: aot ? "@ngtools/webpack" : ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"] },
+                { test: /\.html$/, use: "html-loader?minimize=false" },
+                { test: /\.css$/, use: [MiniCssExtractPlugin.loader, cssLoader] },
+                { test: /\.scss$/, exclude: /ClientApp/, use: [MiniCssExtractPlugin.loader, cssLoader, "sass-loader"] },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
+                { test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|svg)(\?|$)/, use: "url-loader?limit=8192" },
+                { test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } }, // ignore System.import warnings https://github.com/angular/angular/issues/21560
+            ],
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
+            new ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers
+        ].concat(aot && !vendor ? [
+            new AngularCompilerPlugin({
+                mainPath: "./ClientApp/main.ts",
+                tsConfigPath: "./tsconfig.json",
+                skipCodeGeneration: false,
+                compilerOptions: {
+                    noEmit: false,
+                },
+            }),
+        ] : [
+            // AOT chunk splitting does not work while this is active but doesn't seem to be needed under AOT anyway https://github.com/angular/angular-cli/issues/4431
+            new ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898
+        ]).concat(analyse ? [
+            new BundleAnalyzerPlugin({
+                analyzerMode: "static",
+                reportFilename: `${type}.html`,
+                openAnalyzer: false,
+            }),
+        ] : []),
+        node: {
+            fs: "empty",
+        },
+    };
+
+    return bundleConfig;
+};

src/Ombi/webpack.config.ts

@@ -1,59 +1,26 @@
-import { CheckerPlugin } from "awesome-typescript-loader";
 import * as path from "path";
-import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
+import { Configuration, DllReferencePlugin } from "webpack";
-import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import * as webpackMerge from "webpack-merge";
 
-import * as webpack from "webpack";
+import { isAOT, isProd, outputDir, WebpackCommonConfig } from "./webpack.config.common";
 
 module.exports = (env: any) => {
-    // const prod = env && env.prod as boolean;
+    const prod = isProd(env);
-    const prod = true;
+    const aot = isAOT(env);
-    console.log(prod ? "Production" : "Dev" + " main build");
+    if (!prod && aot) { console.warn("Vendor dll bundle will not be used as AOT is enabled"); }
-    const analyse = env && env.analyse as boolean;
+    const bundleConfig: Configuration = webpackMerge(WebpackCommonConfig(env, "main"), {
-    if (analyse) { console.log("Analysing build"); }
+        entry: {
-    const cssLoader = prod ? "css-loader?-url&minimize" : "css-loader?-url";
+            app: "./ClientApp/main.ts",
-    const outputDir = "./wwwroot/dist";
+        },
-    const bundleConfig: webpack.Configuration = {
-        entry: { main: "./ClientApp/main.ts" },
-        stats: { modules: false },
-        context: __dirname,
-        resolve: { extensions: [".ts", ".js"] },
         devtool: prod ? "source-map" : "eval-source-map",
-        output: {
+        plugins: prod || aot ? [] : [
-            filename: "[name].js",
+            // AOT chunk splitting does not work while this is active https://github.com/angular/angular-cli/issues/4565
-            chunkFilename: "[id].[chunkhash].js",
+            new DllReferencePlugin({
-            publicPath: "/dist/",
-            path: path.join(__dirname, outputDir),
-        },
-        module: {
-            rules: [
-                { test: /\.ts$/, include: /ClientApp/, use: ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"] },
-                { test: /\.html$/, use: "html-loader?minimize=false" },
-                { test: /\.css$/, use: ["to-string-loader", cssLoader] },
-                { test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
-                { test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
-                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" },
-            ],
-        },
-        plugins: [
-            new CheckerPlugin(),
-            new webpack.DllReferencePlugin({
                 context: __dirname,
                 manifest: require(path.join(__dirname, outputDir, "vendor-manifest.json")),
             }),
-        ].concat(prod ? [
+        ],
-            // Plugins that apply in production builds only
+    });
-            new UglifyJSPlugin({ sourceMap: true }),
-        ] : [
-            // Plugins that apply in development builds only
-        ]).concat(analyse ? [
-            new BundleAnalyzerPlugin({
-                analyzerMode: "static",
-                reportFilename: "main.html",
-                openAnalyzer: false,
-            }),
-        ] : []),
-    };
 
     return bundleConfig;
 };

src/Ombi/webpack.config.vendor.ts

@@ -1,41 +1,25 @@
-import * as ExtractTextPlugin from "extract-text-webpack-plugin";
 import * as path from "path";
-import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
 import * as webpack from "webpack";
-import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import * as webpackMerge from "webpack-merge";
+import { isProd, outputDir, WebpackCommonConfig } from "./webpack.config.common";
 
 module.exports = (env: any) => {
-    const extractCSS = new ExtractTextPlugin("vendor.css");
+    const prod = isProd(env);
-    const prod = env && env.prod as boolean;
+    const bundleConfig = webpackMerge(WebpackCommonConfig(env, "vendor"), {
-    console.log(prod ? "Production" : "Dev" + " vendor build");
+        output: {
-    const analyse = env && env.analyse as boolean;
+            library: "[name]_[hash]",
-    if (analyse) { console.log("Analysing build"); }
-    const outputDir = "./wwwroot/dist";
-    const bundleConfig = {
-        stats: { modules: false },
-        resolve: {
-            extensions: [".js"],
-            alias: {
-                pace: "pace-progress",
-            },
-        },
-        module: {
-            rules: [
-                { test: /\.(png|woff|woff2|eot|ttf|svg|gif)(\?|$)/, use: "url-loader?limit=100000" },
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: prod ? "css-loader?minimize" : "css-loader" }) },
-                { test: /\.scss(\?|$)/, use: extractCSS.extract({ use: [prod ? "css-loader?minimize" : "css-loader", "sass-loader"] }) },
-            ],
         },
         entry: {
-            vendor: [
+            vendor: (<string[]>[ // add any vendor styles here e.g. bootstrap/dist/css/bootstrap.min.css
                 "pace-progress/themes/orange/pace-theme-flash.css",
                 "primeng/resources/primeng.min.css",
                 "@angular/material/prebuilt-themes/deeppurple-amber.css",
                 "font-awesome/scss/font-awesome.scss",
                 "bootswatch/superhero/bootstrap.min.css",
-
+            ]).concat(prod ? [] : [ // used to speed up dev launch time
                 "@angular/animations",
                 "@angular/common",
+                "@angular/common/http",
                 "@angular/compiler",
                 "@angular/core",
                 "@angular/forms",
@@ -67,41 +51,14 @@ module.exports = (env: any) => {
                 "@ngx-translate/core",
                 "@ngx-translate/http-loader",
                 "ngx-order-pipe",
-                //"smartbanner.js/dist/smartbanner.js",
+            ]),
-                //"smartbanner.js/dist/smartbanner.css",
-            ],
         },
-        output: {
+        plugins: prod ? [] : [
-            publicPath: "/dist/",
-            filename: "[name].js",
-            library: "[name]_[hash]",
-            path: path.join(__dirname, outputDir),
-        },
-        node: {
-            fs: "empty",
-        },
-        plugins: [
-            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers
-            new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, "./client")), // Workaround for https://github.com/angular/angular/issues/20357
-            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/11580
-            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898
-            extractCSS,
             new webpack.DllPlugin({
                 path: path.join(__dirname, outputDir, "[name]-manifest.json"),
                 name: "[name]_[hash]",
             }),
-        ].concat(prod ? [
+        ],
-            // Plugins that apply in production builds only
+    });
-            new UglifyJSPlugin(),
-        ] : [
-                // Plugins that apply in development builds only
-            ]).concat(analyse ? [
-                new BundleAnalyzerPlugin({
-                    analyzerMode: "static",
-                    reportFilename: "vendor.html",
-                    openAnalyzer: false,
-                }),
-            ] : []),
-    };
     return bundleConfig;
 };

src/Ombi/webpack.dev.js

@@ -1,4 +0,0 @@
-// https://github.com/aspnet/JavaScriptServices/issues/1046
-
-require('ts-node/register')
-module.exports = require("./webpack.config.ts");