From 9196158a76c636a843ba4230fdcfc174f49595f4 Mon Sep 17 00:00:00 2001
From: Dhruv Bhavsar <dhruvhbhavsar@gmail.com>
Date: Fri, 18 Aug 2017 23:14:43 -0400
Subject: [PATCH] Working UI for Requests. Approval/Deny does not work as it
 doesn't in your code either.

---
 global.json                                   |  5 +++
 .../app/requests/tvrequests.component.html    |  4 +-
 .../app/requests/tvrequests.component.scss    | 14 +++++++
 .../app/requests/tvrequests.component.ts      | 39 +++++++++++++++++--
 4 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 global.json
 create mode 100644 src/Ombi/ClientApp/app/requests/tvrequests.component.scss

diff --git a/global.json b/global.json
new file mode 100644
index 000000000..567b2be99
--- /dev/null
+++ b/global.json
@@ -0,0 +1,5 @@
+{
+    "sdk": {
+      "version": "1.0.0-preview2-003121"
+    }
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/app/requests/tvrequests.component.html
index 892c5bd94..a0d9be84e 100644
--- a/src/Ombi/ClientApp/app/requests/tvrequests.component.html
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.html
@@ -10,7 +10,6 @@
      [infiniteScrollThrottle]="100"
      (scrolled)="loadMore()">
     <!--<div>-->
-
     <p-treeTable [value]="tvRequests">
         <!--<p-column>
             <ng-template let-col let-node="rowData" pTemplate="body">
@@ -59,7 +58,8 @@
                         </div>
                         <div class="col-sm-3 col-sm-push-3">
 
-                            <button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>
+                            <button  style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)"><i class="fa fa-plus"></i> View</button>
+                            <!--<button [routerLink]="[node.data.id]" style="text-align: right" class="btn btn-sm btn-success-outline" type="submit"><i class="fa fa-plus"></i> View</button>-->
                         </div>
                     </div>
                 </div>
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.scss b/src/Ombi/ClientApp/app/requests/tvrequests.component.scss
new file mode 100644
index 000000000..5fd85eddd
--- /dev/null
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.scss
@@ -0,0 +1,14 @@
+table.ui-widget-content {
+    border: 1px solid #1f1f1f !important;
+    background: #1f1f1f !important;
+}
+.ui-widget-content {
+     color: #ffffff; 
+}
+.ui-state-default.ui-unselectable-text{
+    display:none;
+}
+.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-right,
+.ui-treetable-toggler.fa.fa-fw.ui-c.fa-caret-down {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
index 3c21ed4cc..70b922eba 100644
--- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
@@ -13,11 +13,16 @@ import { RequestService } from '../services/request.service';
 import { IdentityService } from '../services/identity.service';
 
 import { ITvRequests, IChildRequests, INewSeasonRequests, IEpisodesRequests } from '../interfaces/IRequestModel';
-import { /*TreeTableModule,*/ TreeNode, /*SharedModule*/ } from "primeng/primeng";
+import { TreeNode, } from "primeng/primeng";
 
 @Component({
     selector: 'tv-requests',
-    templateUrl: './tvrequests.component.html'
+    templateUrl: './tvrequests.component.html',
+    styleUrls: ['./tvrequests.component.scss'],
+    //Was required to turn off encapsulation since CSS only should be overridden for this component
+    //However when encapsulation is on angular injects prefixes to all classes so css selectors
+    //Stop working
+    encapsulation: ViewEncapsulation.None
 })
 export class TvRequestsComponent implements OnInit, OnDestroy {
     constructor(private requestService: RequestService, private identityService: IdentityService) {
@@ -36,7 +41,33 @@ export class TvRequestsComponent implements OnInit, OnDestroy {
                     .subscribe(m => this.tvRequests = this.transformData(m));
             });
     }
-
+    openClosestTab(el:any): void {
+        var rowclass = "undefined";
+        el = el.toElement;
+        while (el.className != rowclass) {
+            // Increment the loop to the parent node until we find the row we need
+            el = el.parentNode;
+            if (!el) {
+            }
+        }
+        // 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
+        var caretright = "ui-treetable-toggler fa fa-fw ui-c fa-caret-right";
+        var caretdown = "ui-treetable-toggler fa fa-fw ui-c fa-caret-down";
+        for (var 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 === caretright || value.className === 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;
+            }
+        };
+    }
     transformData(datain: ITvRequests[]): any {
         var temp: TreeNode[] = [];
         datain.forEach(function (value) {