Ombi/src/Ombi/ClientApp/app/requests/music/musicrequests.component.html

<div class="form-group">
    <div class="input-group">
        <input type="text" id="search" class="form-control form-control-custom searchwidth" placeholder="Search"
            (keyup)="search($event)">
        <span class="input-group-btn">
            <button id="filterBtn" class="btn btn-sm btn-info-outline" (click)="filterDisplay = !filterDisplay">
                <i class="fa fa-filter"></i> {{ 'Requests.Filter' | translate }}
            </button>


            <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="true">
                <i class="fa fa-sort"></i> {{ 'Requests.Sort' | translate }}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li>
                    <a (click)="setOrder(OrderType.RequestedDateAsc, $event)">{{ 'Requests.SortRequestDateAsc' |
                        translate }}

                    </a>
                    <a class="active" (click)="setOrder(OrderType.RequestedDateDesc, $event)">{{
                        'Requests.SortRequestDateDesc' | translate }}

                    </a>
                    <a (click)="setOrder(OrderType.TitleAsc, $event)">{{ 'Requests.SortTitleAsc' | translate}}

                    </a>
                    <a (click)="setOrder(OrderType.TitleDesc, $event)">{{ 'Requests.SortTitleDesc' | translate}}

                    </a>
                    <a (click)="setOrder(OrderType.StatusAsc, $event)">{{ 'Requests.SortStatusAsc' | translate}}

                    </a>
                    <a (click)="setOrder(OrderType.StatusDesc, $event)">{{ 'Requests.SortStatusDesc' | translate}}

                    </a>

                </li>
            </ul>
        </span>

    </div>


</div>
<br />


<div class="col-md-12">
    <div *ngFor="let request of albumRequests" class="col-md-4">
        <div class="row">
            <div class="album-bg backdrop" [style.background-image]="request.background"></div>
            <div class="album-tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>

            <div class="col-sm-12 small-padding">
                <img *ngIf="request.disk" class="img-responsive poster album-cover" src="{{request.disk}}" alt="poster">
            </div>


            <div class="col-sm-12 small-padding">
                <div>
                    <h4>
                        <a href="" target="_blank">
                            {{request.title | truncate: 36}}
                        </a>

                    </h4>
                    <h5>
                        <a href="">
                            {{request.artistName}}
                        </a>
                    </h5>
                </div>

                <div class="request-info">
                    <div class="request-by">
                        <span>{{ 'Requests.RequestedBy' | translate }} </span>
                        <span *ngIf="request.requestedByAlias">{{request.requestedByAlias}}</span>
                        <span *ngIf="!request.requestedByAlias">
                            <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>
                        </span>
                    </div>

                    <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" pTooltip="{{request.deniedReason}}"></i>

                    </div>


                    <div id="releaseDate">{{ 'Requests.ReleaseDate' | translate: {date: request.releaseDate | amLocal |
                        amDateFormat: 'LL'} }}</div>
                    <div id="requestedDate">{{ 'Requests.RequestDate' | translate }} {{request.requestedDate | amLocal
                        | amDateFormat: 'LL'}}</div>
                    <br />
                </div>
                <!-- <div *ngIf="isAdmin">
                    <div *ngIf="request.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
                        <span>{{request.qualityOverrideTitle}} </span>
                    </div>
                    <div *ngIf="request.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
                        <span>{{request.rootPathOverrideTitle}} </span>
                    </div>
                </div> -->

            </div>
            <div class="col-sm-12 small-padding">
                <!-- <div class="row">
                    <div class="col-md-2 col-md-push-6">

                        <a *ngIf="request.showSubscribe && !request.subscribed" style="color:white" (click)="subscribe(request)" pTooltip="Subscribe for notifications">
                            <i class="fa fa-rss"></i>
                        </a>
                        <a *ngIf="request.showSubscribe && request.subscribed" style="color:red" (click)="unSubscribe(request)" pTooltip="Unsubscribe notification">
                            <i class="fa fa-rss"></i>
                        </a>
                    </div>
                </div> -->
                <div *ngIf="isAdmin">
                    <div *ngIf="!request.approved" id="approveBtn">
                        <form class="col-md-6">
                            <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>
                        </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>
                            <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>
                            </button>
                            <ul class="dropdown-menu">
                                <li *ngFor="let folder of radarrRootFolders">
                                    <a href="#" (click)="selectRootFolder(request, folder, $event)">{{folder.path}}</a>
                                </li>
                            </ul>
                        </div> -->

                        <!--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>
                            <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>
                            </button>
                            <ul class="dropdown-menu">
                                <li *ngFor="let profile of radarrProfiles">
                                    <a href="#" (click)="selectQualityProfile(request, profile, $event)">{{profile.name}}</a>
                                </li>
                            </ul>
                        </div> -->

                        <div *ngIf="!request.denied" id="denyBtn" class="col-md-6">
                            <button type="button" (click)="deny(request)" class="btn btn-sm btn-danger-outline deny">
                                <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}
                            </button>
                        </div>
                    </div>


                    <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>
                        <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>
                    </form>



                </div>
                <div *ngIf="isAdmin || isRequestUser(request)">
                    <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>
                    </form>
                </div>
                <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">
                        <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li *ngFor="let cat of issueCategories">
                            <a [routerLink]="" (click)="reportIssue(cat, request)">{{cat.value}}</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <br />
        <br />




    </div>

    <p-paginator [rows]="10" [totalRecords]="totalAlbums" (onPageChange)="paginate($event)"></p-paginator>
</div>


<issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequest?.title"
    [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId"></issue-report>


<p-sidebar [(visible)]="filterDisplay" styleClass="ui-sidebar-md side-back side-small">
    <h3>{{ 'Requests.Filter' | translate }}</h3>
    <hr>
    <div>
        <h4>{{ 'Filter.FilterHeaderAvailability' | translate }}</h4>
        <div class="form-group">
            <div class="radio">
                <input type="radio" id="Available" name="Availability" (click)="filterAvailability(filterType.Available, $event)">
                <label for="Available">{{ 'Common.Available' | translate }}</label>
            </div>
        </div>
        <div class="form-group">
            <div class="radio">
                <input type="radio" id="notAvailable" name="Availability" (click)="filterAvailability(filterType.NotAvailable, $event)">
                <label for="notAvailable">{{ 'Common.NotAvailable' | translate }}</label>
            </div>
        </div>
    </div>
    <div>
        <h4>{{ 'Filter.FilterHeaderRequestStatus' | translate }}</h4>
        <div class="form-group">
            <div class="radio">
                <input type="radio" id="approved" name="Status" (click)="filterStatus(filterType.Approved, $event)">
                <label for="approved">{{ 'Filter.Approved' | translate }}</label>
            </div>
        </div>
        <div class="form-group">
            <div class="radio">
                <input type="radio" id="Processing" name="Status" (click)="filterStatus(filterType.Processing, $event)">
                <label for="Processing">{{ 'Common.ProcessingRequest' | translate }}</label>
            </div>
        </div>
        <div class="form-group">
            <div class="radio">
                <input type="radio" id="pendingApproval" name="Status" (click)="filterStatus(filterType.PendingApproval, $event)">
                <label for="pendingApproval">{{ 'Filter.PendingApproval' | translate }}</label>
            </div>
        </div>
    </div>

    <button class="btn btn-sm btn-primary-outline" (click)="clearFilter($event)">
        <i class="fa fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}</button>
</p-sidebar>



<p-dialog *ngIf="requestToDeny" header="Deny Request '{{requestToDeny.title}}''" [(visible)]="denyDisplay" [draggable]="false">
    <span>Please enter a rejection reason, the user will be notified of this:</span>
    <textarea [(ngModel)]="rejectionReason" class="form-control-custom form-control"></textarea>
    <p-footer>
        <button type="button" (click)="denyRequest();" label="Reject" class="btn btn-success">Deny</button>
        <button type="button" (click)="denyDisplay=false" label="Close" class="btn btn-danger">Close</button>
    </p-footer>
</p-dialog>