From 26bcf1e4e145d6e57d3e577fd14b389da3e05186 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Fri, 11 Feb 2022 20:03:10 +0000
Subject: [PATCH] feat: Hide the 4K buttons when the user does not have the 4k
 permission

---
 .../movie/movie-details.component.html        | 56 ++++++++++---------
 .../movie/movie-details.component.ts          |  3 +-
 .../shared/role-directive/role-directive.ts   | 36 ++++++++++++
 .../app/shared/role-directive/role.module.ts  |  8 +++
 .../ClientApp/src/app/shared/shared.module.ts |  3 +
 5 files changed, 78 insertions(+), 28 deletions(-)
 create mode 100644 src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts
 create mode 100644 src/Ombi/ClientApp/src/app/shared/role-directive/role.module.ts

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 708709ff1..ea6ccbe18 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
@@ -78,44 +78,46 @@
 </span>
 
                             <!-- 4k Status -->
-                            <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">
-                                <span *ngIf="movie.has4KRequest || movie.approved4K; then requestedBtn4K else notRequestedBtn4K"></span>
-                                <ng-template #requestedBtn4K>
-                                    <button id="requestedBtn4K" mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied4K" class="btn-spacing" color="warn" [disabled]>
-                                        <i class="fas fa-check"></i>
-                                        {{ 'Common.Requested4K' | translate }}
-                                    </button>
-                                </ng-template>
-                                <ng-template #notRequestedBtn4K>
-                                    <button *ngIf="!movie.has4KRequest" id="requestBtn4k" mat-raised-button class="btn-spacing" color="primary" (click)="request(true)">
-                                        <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> 
-                                        <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
-                                        <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
-                                        {{'Common.Request4K' | translate }}
-                                    </button>
-                                </ng-template>
-                                <span *ngIf="!isAdmin && movie.showSubscribe" >
-                                    <button *ngIf="!movie.subscribed" (click)="notify()" id="notifyBtn" mat-raised-button  class="btn-spacing" >  <i class="fas fa-bell"></i>
-                                        {{ 'Requests.Notify' | translate }}</button>
-                                    <button *ngIf="movie.subscribed" (click)="unNotify()" id="unnotifyBtn" mat-raised-button  class="btn-spacing" >  <i class="fas fa-bell-slash"></i>
-                                        {{ 'Requests.RemoveNotification' | translate }}</button>
-                                    </span>
+                            <span *role="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">
+                                    <span *ngIf="movie.has4KRequest || movie.approved4K; then requestedBtn4K else notRequestedBtn4K"></span>
+                                    <ng-template #requestedBtn4K>
+                                        <button id="requestedBtn4K" mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied4K" class="btn-spacing" color="warn" [disabled]>
+                                            <i class="fas fa-check"></i>
+                                            {{ 'Common.Requested4K' | translate }}
+                                        </button>
+                                    </ng-template>
+                                    <ng-template #notRequestedBtn4K>
+                                        <button *ngIf="!movie.has4KRequest" id="requestBtn4k" mat-raised-button class="btn-spacing" color="primary" (click)="request(true)">
+                                            <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> 
+                                            <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                                            <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
+                                            {{'Common.Request4K' | translate }}
+                                        </button>
+                                    </ng-template>
+                                    <span *ngIf="!isAdmin && movie.showSubscribe" >
+                                        <button *ngIf="!movie.subscribed" (click)="notify()" id="notifyBtn" mat-raised-button  class="btn-spacing" >  <i class="fas fa-bell"></i>
+                                            {{ 'Requests.Notify' | translate }}</button>
+                                        <button *ngIf="movie.subscribed" (click)="unNotify()" id="unnotifyBtn" mat-raised-button  class="btn-spacing" >  <i class="fas fa-bell-slash"></i>
+                                            {{ 'Requests.RemoveNotification' | translate }}</button>
+                                        </span>
+                                </span>
                             </span>
 
                             <span *ngIf="isAdmin && hasRequest">
                                     <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 id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest" (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent">
+                                    <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 id="markAvailable4kBtn" *ngIf="!movie.available4K && movie.has4KRequest" (click)="markAvailable(true)" mat-raised-button class="btn-spacing"
+                                    <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>
@@ -124,7 +126,7 @@
                                         color="accent">
                                         <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
                                     </button>
-                                    <button id="markUnavailable4kBtn" *ngIf="movie.available4K" (click)="markUnavailable(true)" mat-raised-button class="btn-spacing"
+                                    <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>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
index 139e7be76..6f67230f8 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from "@angular/core";
+import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
 import { ImageService, SearchV2Service, RequestService, MessageService, RadarrService, SettingsStateService } from "../../../services";
 import { ActivatedRoute } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
@@ -29,6 +29,7 @@ export class MovieDetailsComponent {
     public advancedOptions: IAdvancedData;
     public showAdvanced: boolean; // Set on the UI
     public issuesEnabled: boolean;
+    public roleName4k = "Request4KMovie";
 
     public requestType = RequestType.movie;
 
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
new file mode 100644
index 000000000..d897072f2
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/shared/role-directive/role-directive.ts
@@ -0,0 +1,36 @@
+import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+import { AuthService } from "../../auth/auth.service";
+
+@Directive({
+	selector: '[role]',
+})
+export class RoleDirective implements OnInit {
+	private roleName: string;
+
+	private isHidden = true;
+
+	@Input() public set role(val: string) {
+		if (val) {
+			this.roleName = val;
+			this.updateView();
+		}
+	}
+
+	public constructor(private templateRef: TemplateRef<unknown>, private viewContainer: ViewContainerRef, private auth: AuthService) {}
+
+	public ngOnInit(): void {
+		this.updateView();
+	}
+
+	private updateView(): void {
+		if (this.auth.hasRole(this.roleName)) {
+			if (this.isHidden) {
+				this.viewContainer.createEmbeddedView(this.templateRef);
+				this.isHidden = false;
+			}
+		} else {
+			this.viewContainer.clear();
+			this.isHidden = true;
+		}
+	}
+}
diff --git a/src/Ombi/ClientApp/src/app/shared/role-directive/role.module.ts b/src/Ombi/ClientApp/src/app/shared/role-directive/role.module.ts
new file mode 100644
index 000000000..15cea8923
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/shared/role-directive/role.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { RoleDirective } from './role-directive';
+
+@NgModule({
+	declarations: [RoleDirective],
+	exports: [RoleDirective],
+})
+export class RoleModule {}
diff --git a/src/Ombi/ClientApp/src/app/shared/shared.module.ts b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
index 01d70f1c6..f14eb43f2 100644
--- a/src/Ombi/ClientApp/src/app/shared/shared.module.ts
+++ b/src/Ombi/ClientApp/src/app/shared/shared.module.ts
@@ -43,6 +43,7 @@ import { TheMovieDbService } from "../services";
 import { TranslateModule } from "@ngx-translate/core";
 import { TruncateModule } from "@yellowspot/ng-truncate";
 import { WatchProvidersSelectComponent } from "./components/watch-providers-select/watch-providers-select.component";
+import { RoleModule } from "./role-directive/role.module";
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { WatchProvidersSelectComponent } from "./components/watch-providers-sele
     WatchProvidersSelectComponent,
   ],
   imports: [
+    RoleModule,
     SidebarModule,
     ReactiveFormsModule,
     FormsModule,
@@ -91,6 +93,7 @@ import { WatchProvidersSelectComponent } from "./components/watch-providers-sele
     PipeModule,
   ],
   exports: [
+      RoleModule,
       TranslateModule,
       CommonModule,
       FormsModule,