mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-30 11:38:32 -07:00
feat: Hide the 4K buttons when the user does not have the 4k permission
This commit is contained in:
tidusjar
parent
5e8f06cd24
commit
26bcf1e4e1
5 changed files with 78 additions and 28 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { RoleDirective } from './role-directive';
|
||||
|
||||
@NgModule({
|
||||
declarations: [RoleDirective],
|
||||
exports: [RoleDirective],
|
||||
})
|
||||
export class RoleModule {}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue