feat: Hide the 4K buttons when the user does not have the 4k permission

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -78,6 +78,7 @@
 </span>
 
                             <!-- 4k Status -->
+                            <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">
@@ -103,19 +104,20 @@
                                             {{ '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>

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;
 

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;
+		}
+	}
+}

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 {}

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,