Added the ability to approve from the requests list page

src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild, EventEmitter, Output } from "@angular/core";
+import { Component, AfterViewInit, ViewChild, EventEmitter, Output, ChangeDetectorRef } from "@angular/core";
 import { IMovieRequests, IRequestsViewModel } from "../../../interfaces";
 import { MatPaginator, MatSort } from "@angular/material";
 import { merge, Observable, of as observableOf } from 'rxjs';
@@ -19,12 +19,12 @@ export class MoviesGridComponent implements AfterViewInit {
     public gridCount: string = "15";
     public showUnavailableRequests: boolean;
     
-    @Output() public onOpenOptions = new EventEmitter<{request: any, filter: any}>();
+    @Output() public onOpenOptions = new EventEmitter<{request: any, filter: any, onChange: any}>();
 
     @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
     @ViewChild(MatSort, { static: false }) sort: MatSort;
 
-    constructor(private requestService: RequestServiceV2) {
+    constructor(private requestService: RequestServiceV2, private ref: ChangeDetectorRef) {
 
     }
 
@@ -73,6 +73,10 @@ export class MoviesGridComponent implements AfterViewInit {
             return req.id !== request.id;
         })};
 
-        this.onOpenOptions.emit({request: request, filter: filter});
+        const onChange = () => {
+            this.ref.detectChanges();
+        };
+
+        this.onOpenOptions.emit({request: request, filter: filter, onChange: onChange});
     }
 }

src/Ombi/ClientApp/src/app/requests-list/components/options/request-options.component.html

@@ -2,4 +2,7 @@
   <a (click)="delete()" mat-list-item>
     <span mat-line>Delete Request</span>
   </a>
+  <a *ngIf="data.canApprove" (click)="approve()" mat-list-item>
+    <span mat-line>Approve Request</span>
+  </a>
 </mat-nav-list>

src/Ombi/ClientApp/src/app/requests-list/components/options/request-options.component.ts

@@ -1,7 +1,8 @@
-import {Component, Inject} from '@angular/core';
-import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from '@angular/material/bottom-sheet';
+import { Component, Inject } from '@angular/core';
+import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef } from '@angular/material/bottom-sheet';
 import { RequestService } from '../../../services';
 import { RequestType } from '../../../interfaces';
+import { UpdateType } from '../../models/UpdateType';
 
 @Component({
   selector: 'request-options',
@@ -9,17 +10,29 @@ import { RequestType } from '../../../interfaces';
 })
 export class RequestOptionsComponent {
   constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any,
-            private requestService: RequestService, private bottomSheetRef: MatBottomSheetRef<RequestOptionsComponent>) { }
+    private requestService: RequestService, private bottomSheetRef: MatBottomSheetRef<RequestOptionsComponent>) { }
 
   public async delete() {
     if (this.data.type === RequestType.movie) {
-        await this.requestService.removeMovieRequestAsync(this.data.id);
+      await this.requestService.removeMovieRequestAsync(this.data.id);
     }
-    if(this.data.type === RequestType.tvShow) {
-        await this.requestService.deleteChild(this.data.id).toPromise();
+    if (this.data.type === RequestType.tvShow) {
+      await this.requestService.deleteChild(this.data.id).toPromise();
     }
 
-    this.bottomSheetRef.dismiss(true);
+    this.bottomSheetRef.dismiss({type: UpdateType.Delete});
+    return;
+  }
+
+  public async approve() {
+    if (this.data.type === RequestType.movie) {
+      await this.requestService.approveMovie({id: this.data.id}).toPromise();
+    }
+    if (this.data.type === RequestType.tvShow) {
+      await this.requestService.approveChild({id: this.data.id}).toPromise();
+    }
+
+    this.bottomSheetRef.dismiss({type: UpdateType.Approve});
     return;
   }
 }

src/Ombi/ClientApp/src/app/requests-list/components/requests-list.component.ts

@@ -1,6 +1,8 @@
-import { Component } from "@angular/core";
+import { Component, ViewChild } from "@angular/core";
 import { MatBottomSheet } from "@angular/material";
 import { RequestOptionsComponent } from "./options/request-options.component";
+import { UpdateType } from "../models/UpdateType";
+import { MoviesGridComponent } from "./movies-grid/movies-grid.component";
 
 @Component({
     templateUrl: "./requests-list.component.html",
@@ -9,15 +11,24 @@ import { RequestOptionsComponent } from "./options/request-options.component";
 export class RequestsListComponent {
 
     constructor(private bottomSheet: MatBottomSheet) { }
-    
-    public onOpenOptions(event: {request: any, filter: any}) {
-        const ref = this.bottomSheet.open(RequestOptionsComponent, { data: { id: event.request.id, type: event.request.requestType } });
+
+    public onOpenOptions(event: { request: any, filter: any, onChange: any }) {
+        const ref = this.bottomSheet.open(RequestOptionsComponent, { data: { id: event.request.id, type: event.request.requestType, canApprove: event.request.canApprove } });
 
         ref.afterDismissed().subscribe((result) => {
-            if (!result) {
+            if(!result) {
+                return;
+            }
+            if (result.type == UpdateType.Delete) {
+                event.filter();
+                return;
+            }
+            if (result.type == UpdateType.Approve) {
+                // Need to do this here, as the status is calculated on the server
+                event.request.requestStatus = 'Common.ProcessingRequest';
+                event.onChange();
                 return;
             }
-            event.filter();
         });
     }
 }

src/Ombi/ClientApp/src/app/requests-list/models/UpdateType.ts

@@ -0,0 +1,4 @@
+export enum UpdateType {
+    Delete,
+    Approve
+}