From b82c43356f00bd8c079a4ed5523cae1bcb5d5f52 Mon Sep 17 00:00:00 2001
From: Anojh <anojh@hotmail.com>
Date: Sat, 31 Mar 2018 17:22:43 -0700
Subject: [PATCH] Adding wrappers and classes for LC and toggling active style
 for UI elements.

---
 .../app/requests/movierequests.component.html | 93 ++++++++++--------
 .../app/requests/movierequests.component.ts   | 13 ++-
 .../app/requests/tvrequests.component.ts      | 14 ++-
 .../usermanagement-edit.component.html        | 98 ++++++++++---------
 .../usermanagement.component.html             | 10 +-
 .../usermanagement.component.ts               | 16 ++-
 6 files changed, 143 insertions(+), 101 deletions(-)

diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.html b/src/Ombi/ClientApp/app/requests/movierequests.component.html
index f798e4b70..6b2300f38 100644
--- a/src/Ombi/ClientApp/app/requests/movierequests.component.html
+++ b/src/Ombi/ClientApp/app/requests/movierequests.component.html
@@ -14,32 +14,32 @@
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                         <li>
-                                <a (click)="setOrder('requestedDate')">{{ 'Requests.SortRequestDate' | translate }}
+                                <a class="active" (click)="setOrder('requestedDate', $event)">{{ 'Requests.SortRequestDate' | translate }}
                                         <span *ngIf="order === 'requestedDate'">
                                         <span [hidden]="reverse"><small><i class="fa fa-arrow-down" aria-hidden="true"></i></small></span>
                                         <span [hidden]="!reverse"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></span>
                                         </span>
                                     </a>
-                            <a (click)="setOrder('title')">{{ 'Requests.SortTitle' | translate}}
+                            <a (click)="setOrder('title', $event)">{{ 'Requests.SortTitle' | translate}}
                                     <span *ngIf="order === 'title'">
                                             <span [hidden]="reverse"><small><i class="fa fa-arrow-down" aria-hidden="true"></i></small></span>
                                             <span [hidden]="!reverse"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></span>
                                             </span>
                             </a>                       
-                            <a (click)="setOrder('releaseDate')">{{ 'Requests.TheatricalReleaseSort' | translate }}
+                            <a (click)="setOrder('releaseDate', $event)">{{ 'Requests.TheatricalReleaseSort' | translate }}
                                     <span *ngIf="order === 'releaseDate'">
                                             <span [hidden]="reverse"><small><i class="fa fa-arrow-down" aria-hidden="true"></i></small></span>
                                             <span [hidden]="!reverse"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></span>
                                             </span>
                             </a>                      
-                            <a (click)="setOrder('requestedUser.userAlias')">{{ 'Requests.SortRequestedBy' | translate }}
+                            <a (click)="setOrder('requestedUser.userAlias', $event)">{{ 'Requests.SortRequestedBy' | translate }}
                                     <span *ngIf="order === 'requestedUser.userAlias'">
                                             <span [hidden]="reverse"><small><i class="fa fa-arrow-down" aria-hidden="true"></i></small></span>
                                             <span [hidden]="!reverse"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></span>
                                             </span>
                                         </a>
 
-                            <a (click)="setOrder('status')">{{ 'Requests.SortStatus' | translate }}
+                            <a (click)="setOrder('status', $event)">{{ 'Requests.SortStatus' | translate }}
                                     <span *ngIf="order === 'status'">
                                             <span [hidden]="reverse"><small><i class="fa fa-arrow-down" aria-hidden="true"></i></small></span>
                                             <span [hidden]="!reverse"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></span>
@@ -78,40 +78,42 @@
                     </a>
                 </div>
                 <br />
-                <div>
-                    <span>{{ 'Requests.RequestedBy' | translate }} </span>
-                    <span *ngIf="!isAdmin">{{request.requestedUser.userName}}</span>
-                    <span *ngIf="isAdmin && request.requestedUser.alias">{{request.requestedUser.alias}}</span>
-                    <span *ngIf="isAdmin && !request.requestedUser.alias">{{request.requestedUser.userName}}</span>
-                </div>
-                <div>
-                    <span>{{ 'Requests.Status' | translate }} </span>
-                    <span class="label label-success" id="requestedStatusLabel">{{request.status}}</span>
-                </div>
+                <div class="request-info">
+                    <div class="request-by">
+                        <span>{{ 'Requests.RequestedBy' | translate }} </span>
+                        <span *ngIf="!isAdmin">{{request.requestedUser.userName}}</span>
+                        <span *ngIf="isAdmin && request.requestedUser.alias">{{request.requestedUser.alias}}</span>
+                        <span *ngIf="isAdmin && !request.requestedUser.alias">{{request.requestedUser.userName}}</span>
+                    </div>
+                    <div class="request-status">
+                        <span>{{ 'Requests.Status' | translate }} </span>
+                        <span class="label label-success" id="requestedStatusLabel">{{request.status}}</span>
+                    </div>
 
-                <div>
-                    <span>{{ 'Requests.RequestStatus' | translate }} </span>
-                    <span *ngIf="request.available" class="label label-success" id="availableLabel" [translate]="'Common.Available'"></span>
-                    <span *ngIf="request.approved && !request.available" id="processingRequestLabel" class="label label-info" [translate]="'Common.ProcessingRequest'"></span>
-                    <span *ngIf="request.denied" class="label label-danger" id="requestDeclinedLabel" [translate]="'Common.RequestDenied'"></span>
-                    <span *ngIf="request.deniedReason" title="{{request.deniedReason}}">
-                        <i class="fa fa-info-circle"></i>
-                    </span>
-                    <span *ngIf="!request.approved && !request.availble && !request.denied" id="pendingApprovalLabel" class="label label-warning"
-                        [translate]="'Common.PendingApproval'"></span>
+                    <div class="requested-status">
+                        <span>{{ 'Requests.RequestStatus' | translate }} </span>
+                        <span *ngIf="request.available" class="label label-success" id="availableLabel" [translate]="'Common.Available'"></span>
+                        <span *ngIf="request.approved && !request.available" id="processingRequestLabel" class="label label-info" [translate]="'Common.ProcessingRequest'"></span>
+                        <span *ngIf="request.denied" class="label label-danger" id="requestDeclinedLabel" [translate]="'Common.RequestDenied'"></span>
+                        <span *ngIf="request.deniedReason" title="{{request.deniedReason}}">
+                            <i class="fa fa-info-circle"></i>
+                        </span>
+                        <span *ngIf="!request.approved && !request.availble && !request.denied" id="pendingApprovalLabel" class="label label-warning"
+                              [translate]="'Common.PendingApproval'"></span>
 
-                </div>
-                <div *ngIf="request.denied" id="requestDenied">
-                    {{ 'Requests.Denied' | translate }}
-                    <i style="color:red;" class="fa fa-check"></i>
+                    </div>
+                    <div *ngIf="request.denied" id="requestDenied">
+                        {{ 'Requests.Denied' | translate }}
+                        <i style="color:red;" class="fa fa-check"></i>
 
-                </div>
+                    </div>
 
 
-                <div id="releaseDate">{{ 'Requests.TheatricalRelease' | translate: {date: request.releaseDate | date: 'mediumDate'} }}</div>
-                <div *ngIf="request.digitalReleaseDate" id="digitalReleaseDate">{{ 'Requests.DigitalRelease' | translate: {date: request.digitalReleaseDate | date: 'mediumDate'} }}</div>
-                <div id="requestedDate">{{ 'Requests.RequestDate' | translate }} {{request.requestedDate | date}}</div>
-                <br />
+                    <div id="releaseDate">{{ 'Requests.TheatricalRelease' | translate: {date: request.releaseDate | date: 'mediumDate'} }}</div>
+                    <div *ngIf="request.digitalReleaseDate" id="digitalReleaseDate">{{ 'Requests.DigitalRelease' | translate: {date: request.digitalReleaseDate | date: 'mediumDate'} }}</div>
+                    <div id="requestedDate">{{ 'Requests.RequestDate' | translate }} {{request.requestedDate | date}}</div>
+                    <br />
+                </div>
                 <div *ngIf="isAdmin">
                     <div *ngIf="request.qualityOverrideTitle">{{ 'Requests.QualityOverride' | translate }}
                         <span>{{request.qualityOverrideTitle}} </span>
@@ -127,13 +129,15 @@
                     <div *ngIf="!request.approved" id="approveBtn">
                         <form>
                             <button (click)="approve(request)" style="text-align: right" class="btn btn-sm btn-success-outline approve" type="submit">
-                                <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}</button>
+                                <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                            </button>
                         </form>
 
                         <!--Radarr Root Folder-->
                         <div *ngIf="radarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}</button>
+                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
+                            </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="caret"></span>
                                 <span class="sr-only">Toggle Dropdown</span>
@@ -148,7 +152,8 @@
                         <!--Radarr Quality Profiles -->
                         <div *ngIf="radarrProfiles" class="btn-group btn-split" id="changeQualityBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}</button>
+                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                            </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="caret"></span>
                                 <span class="sr-only">Toggle Dropdown</span>
@@ -162,19 +167,23 @@
 
                         <div *ngIf="!request.denied" id="denyBtn">
                             <button type="button" (click)="deny(request)" class="btn btn-sm btn-danger-outline deny">
-                                <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}</button>
+                                <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}
+                            </button>
                         </div>
                     </div>
                     <form id="removeBtn">
                         <button (click)="removeRequest(request)" style="text-align: right" class="btn btn-sm btn-danger-outline delete">
-                            <i class="fa fa-minus"></i> {{ 'Requests.Remove' | translate }}</button>
+                            <i class="fa fa-minus"></i> {{ 'Requests.Remove' | translate }}
+                        </button>
                     </form>
 
                     <form id="markBtnGroup">
                         <button id="unavailableBtn" *ngIf="request.available" (click)="changeAvailability(request, false)" style="text-align: right" value="false" class="btn btn-sm btn-info-outline change">
-                            <i class="fa fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}</button>
+                            <i class="fa fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
+                        </button>
                         <button id="availableBtn" *ngIf="!request.available" (click)="changeAvailability(request, true)" style="text-align: right" value="true" class="btn btn-sm btn-success-outline change">
-                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}</button>
+                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                        </button>
                     </form>
 
 
@@ -183,7 +192,7 @@
 
                 <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issuesBtn">
                     <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
-                        aria-expanded="true">
+                            aria-expanded="true">
                         <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                         <span class="caret"></span>
                     </button>
diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.ts b/src/Ombi/ClientApp/app/requests/movierequests.component.ts
index fc695c898..de52fd949 100644
--- a/src/Ombi/ClientApp/app/requests/movierequests.component.ts
+++ b/src/Ombi/ClientApp/app/requests/movierequests.component.ts
@@ -175,11 +175,18 @@ export class MovieRequestsComponent implements OnInit {
         });
     }
 
-    public setOrder(value: string) {
+    public setOrder(value: string, el: any) {
+        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
+
+        let parent = el.parentElement;
+        let previousFilter = parent.querySelector(".active");
+
         if (this.order === value) {
-          this.reverse = !this.reverse;
+            this.reverse = !this.reverse;
+        } else {
+            previousFilter.className = "";
+            el.className = "active";
         }
-    
         this.order = value;
       }
 
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
index a09d49bca..06242b4ac 100644
--- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
+++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts
@@ -66,7 +66,19 @@ export class TvRequestsComponent implements OnInit {
 
     public openClosestTab(el: any) {
         const rowclass = "undefined ng-star-inserted";
-        el = el.toElement || el.relatedTarget || el.target;
+        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
+
+        if (el.nodeName === "BUTTON") {
+
+            let 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;
diff --git a/src/Ombi/ClientApp/app/usermanagement/usermanagement-edit.component.html b/src/Ombi/ClientApp/app/usermanagement/usermanagement-edit.component.html
index e0bb0a096..95a70cab0 100644
--- a/src/Ombi/ClientApp/app/usermanagement/usermanagement-edit.component.html
+++ b/src/Ombi/ClientApp/app/usermanagement/usermanagement-edit.component.html
@@ -1,68 +1,70 @@
 <div *ngIf="user">
-    <h3>User: {{user.userName}}</h3>
-    <button type="button" class="btn btn-primary-outline" style="float:right;" [routerLink]="['/usermanagement/']">Back</button>
+    <div class="user-details">
+        <h3>User: {{user.userName}}</h3>
+        <button type="button" class="btn btn-primary-outline" style="float:right;" [routerLink]="['/usermanagement/']">Back</button>
 
 
-    <p-confirmDialog></p-confirmDialog>
-    
-    <div class="modal-body" style="margin-top: 45px;">
-        <div class="col-md-6">
-            <h4>User Details</h4>
-        </div>
-        <div class="col-md-6">
-            <h4>Roles</h4>
-        </div>
-        <div class="col-md-6">
-            <div class="form-group">
-                <label for="username" class="control-label">Username</label>
-                <div>
-                    <input type="text" [(ngModel)]="user.userName" [readonly]="true" class="form-control form-control-custom " id="username" name="username" value="{{user?.userName}}">
-                </div>
+        <p-confirmDialog></p-confirmDialog>
+
+        <div class="modal-body" style="margin-top: 45px;">
+            <div class="col-md-6">
+                <h4>User Details</h4>
             </div>
-            <div class="form-group">
-                <label for="alias" class="control-label">Alias</label>
-                <div>
-                    <input type="text" [(ngModel)]="user.alias" class="form-control form-control-custom " id="alias" name="alias" value="{{user?.alias}}">
-                </div>
+            <div class="col-md-6">
+                <h4>Roles</h4>
             </div>
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="username" class="control-label">Username</label>
+                    <div>
+                        <input type="text" [(ngModel)]="user.userName" [readonly]="true" class="form-control form-control-custom " id="username" name="username" value="{{user?.userName}}">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="alias" class="control-label">Alias</label>
+                    <div>
+                        <input type="text" [(ngModel)]="user.alias" class="form-control form-control-custom " id="alias" name="alias" value="{{user?.alias}}">
+                    </div>
+                </div>
 
-            <div class="form-group">
-                <label for="emailAddress" class="control-label">Email Address</label>
-                <div>
-                    <input type="text" [(ngModel)]="user.emailAddress" class="form-control form-control-custom " id="emailAddress" name="emailAddress" value="{{user?.emailAddress}}" [disabled]="user?.userType == 2">
+                <div class="form-group">
+                    <label for="emailAddress" class="control-label">Email Address</label>
+                    <div>
+                        <input type="text" [(ngModel)]="user.emailAddress" class="form-control form-control-custom " id="emailAddress" name="emailAddress" value="{{user?.emailAddress}}" [disabled]="user?.userType == 2">
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="col-md-6">
-            <div *ngFor="let c of user.claims">
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}" [attr.name]="'create' + c.value" ng-checked="c.enabled">
-                        <label for="create{{c.value}}">{{c.value | humanize}}</label>
+            <div class="col-md-6">
+                <div *ngFor="let c of user.claims">
+                    <div class="form-group">
+                        <div class="checkbox">
+                            <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" id="create{{c.value}}" [attr.name]="'create' + c.value" ng-checked="c.enabled">
+                            <label for="create{{c.value}}">{{c.value | humanize}}</label>
 
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="form-group">
-                <label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
-                <div>
-                    <input type="text" [(ngModel)]="user.movieRequestLimit" class="form-control form-small form-control-custom " id="movieRequestLimit" name="movieRequestLimit" value="{{user?.movieRequestLimit}}">
+                <div class="form-group">
+                    <label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
+                    <div>
+                        <input type="text" [(ngModel)]="user.movieRequestLimit" class="form-control form-small form-control-custom " id="movieRequestLimit" name="movieRequestLimit" value="{{user?.movieRequestLimit}}">
+                    </div>
                 </div>
-            </div>
 
-            <div class="form-group">
-                <label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
-                <div>
-                    <input type="text" [(ngModel)]="user.episodeRequestLimit" class="form-control form-small form-control-custom " id="episodeRequestLimit" name="episodeRequestLimit" value="{{user?.episodeRequestLimit}}">
+                <div class="form-group">
+                    <label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
+                    <div>
+                        <input type="text" [(ngModel)]="user.episodeRequestLimit" class="form-control form-small form-control-custom " id="episodeRequestLimit" name="episodeRequestLimit" value="{{user?.episodeRequestLimit}}">
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div>
-        <button type="button" class="btn btn-primary-outline" (click)="update()">Update</button>
-        <button type="button" class="btn btn-danger-outline" (click)="delete()">Delete</button>
-        <button type="button"  style="float:right;"  class="btn btn-info-outline" (click)="resetPassword()"  pTooltip="You need your SMTP settings setup">Send Reset Password Link</button>
+        <div>
+            <button type="button" class="btn btn-primary-outline" (click)="update()">Update</button>
+            <button type="button" class="btn btn-danger-outline" (click)="delete()">Delete</button>
+            <button type="button" style="float:right;" class="btn btn-info-outline" (click)="resetPassword()" pTooltip="You need your SMTP settings setup">Send Reset Password Link</button>
 
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html b/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html
index ae33598f1..37ea2eea5 100644
--- a/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html
+++ b/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html
@@ -16,7 +16,7 @@
                             </td>
                 </a>
             </th>
-            <th (click)="setOrder('userName')">
+            <th class="active" (click)="setOrder('userName', $event)">
                 <a>
                     Username
                 </a>
@@ -24,7 +24,7 @@
                     <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                 </span>
             </th>
-            <th (click)="setOrder('alias')">
+            <th (click)="setOrder('alias', $event)">
                 <a>
                     Alias
                 </a>
@@ -32,7 +32,7 @@
                     <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
                 </span>
             </th>
-            <th (click)="setOrder('emailAddress')">
+            <th (click)="setOrder('emailAddress', $event)">
                 <a>
                     Email
                 </a>
@@ -44,13 +44,13 @@
             <th>
                 Roles
             </th>
-            <th (click)="setOrder('lastLoggedIn')">
+            <th (click)="setOrder('lastLoggedIn', $event)">
                <a> Last Logged In</a>
                <span *ngIf="order === 'lastLoggedIn'">
                 <span [hidden]="reverse"><i class="fa fa-arrow-down" aria-hidden="true"></i></span><span [hidden]="!reverse"><i class="fa fa-arrow-up" aria-hidden="true"></i></span>
             </span>
             </th>
-            <th (click)="setOrder('userType')">
+            <th (click)="setOrder('userType', $event)">
                 <a>
                     User Type
                 </a>
diff --git a/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts b/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts
index 3620e0f20..ec2673056 100644
--- a/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts
+++ b/src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts
@@ -93,9 +93,21 @@ export class UserManagementComponent implements OnInit {
         this.bulkEpisodeLimit = undefined;
     }
     
-    public setOrder(value: string) {
+    public setOrder(value: string, el: any) {
+        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
+
+        if (el.nodeName === "A") {
+            el = el.parentElement;
+        }
+
+        let parent = el.parentElement;
+        let previousFilter = parent.querySelector(".active");
+
         if (this.order === value) {
-          this.reverse = !this.reverse;
+            this.reverse = !this.reverse;
+        } else {
+            previousFilter.className = "";
+            el.className = "active";
         }
     
         this.order = value;