From 5a0a051de1ee52a1f90fda1d90ec07d2eeb62d58 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Fri, 11 Feb 2022 20:30:23 +0000
Subject: [PATCH] fix: fixed the templateref issue

---
 .../movie/movie-details.component.html        | 41 ++++++++++---------
 .../shared/role-directive/role-directive.ts   |  4 +-
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index ea6ccbe18..2eed39df9 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -75,10 +75,10 @@
                                         {{'Common.Request' | translate }}
                                     </button>
                                 </ng-template>
-</span>
+                        </span>
 
                             <!-- 4k Status -->
-                            <span *role="roleName4k">
+                            <span *permission="roleName4k">
                                 <button mat-raised-button class="btn-green btn-spacing" id="availableBtn" *ngIf="movie.available4K && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
                                     'Common.Available4K' | translate }}</button>
                                 <span *ngIf="!movie.available4K">
@@ -110,34 +110,37 @@
                                     <button id="approveBtn" *ngIf="!movie.approved && movie.requested" (click)="approve(false)" mat-raised-button class="btn-spacing" color="accent">
                                         <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
                                     </button>
-                                    <button *role="roleName4k" id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest" (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent">
-                                        <i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }}
-                                    </button>
                                     <button id="markAvailableBtn" *ngIf="!movie.available && movie.requested" (click)="markAvailable(false)" mat-raised-button class="btn-spacing"
                                         color="accent">
                                         <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
                                     </button>
-                                    <button *role="roleName4k" id="markAvailable4kBtn" *ngIf="!movie.available4K && movie.has4KRequest" (click)="markAvailable(true)" mat-raised-button class="btn-spacing"
-                                        color="accent">
-                                        <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable4K' | translate }}
-                                    </button>
-
                                     <button id="markUnavailableBtn" *ngIf="movie.available && movie.requested" (click)="markUnavailable(false)" mat-raised-button class="btn-spacing"
                                         color="accent">
                                         <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
                                     </button>
-                                    <button *role="roleName4k" id="markUnavailable4kBtn" *ngIf="movie.available4K" (click)="markUnavailable(true)" mat-raised-button class="btn-spacing"
-                                        color="accent">
-                                        <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }}
-                                    </button>
 
-                                        <button id="denyBtn" *ngIf="!movieRequest.denied && movie.requested" mat-raised-button class="btn-spacing" color="warn" (click)="deny(false)">
-                                            <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
+                                    <!-- 4k -->
+                                    <span *permission="roleName4k">
+                                        <button id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest" (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent">
+                                            <i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }}
                                         </button>
-
-                                        <button id="deniedButton" *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
-                                            <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
+                                        <button id="markAvailable4kBtn" *ngIf="!movie.available4K && movie.has4KRequest" (click)="markAvailable(true)" mat-raised-button class="btn-spacing"
+                                            color="accent">
+                                            <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable4K' | translate }}
+                                        </button>
+                                        <button id="markUnavailable4kBtn" *ngIf="movie.available4K" (click)="markUnavailable(true)" mat-raised-button class="btn-spacing"
+                                            color="accent">
+                                            <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }}
                                         </button>
+                                    </span>
+
+                                    <button id="denyBtn" *ngIf="!movieRequest.denied && movie.requested" mat-raised-button class="btn-spacing" color="warn" (click)="deny(false)">
+                                        <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
+                                    </button>
+
+                                    <button id="deniedButton" *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
+                                        <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
+                                    </button>
                             </span>
 
                             <button id="reportIssueBtn" mat-raised-button class="btn-spacing" color="danger" (click)="issue()" *ngIf="issuesEnabled">
diff --git a/src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts b/src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts
index d897072f2..906041726 100644
--- a/src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts
+++ b/src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts
@@ -2,14 +2,14 @@ import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from "@angula
 import { AuthService } from "../../auth/auth.service";
 
 @Directive({
-	selector: '[role]',
+	selector: '[permission]',
 })
 export class RoleDirective implements OnInit {
 	private roleName: string;
 
 	private isHidden = true;
 
-	@Input() public set role(val: string) {
+	@Input() public set permission(val: string) {
 		if (val) {
 			this.roleName = val;
 			this.updateView();