Added some feedback on the request buttons for movies #1536

src/Ombi/ClientApp/app/interfaces/ISearchMovieResult.ts

@@ -22,4 +22,8 @@
     available: boolean;
     plexUrl: string;
     quality: string;
+
+    // for the UI
+    requestProcessing: boolean;
+    processed: boolean;
 }

src/Ombi/ClientApp/app/search/moviesearch.component.html

@@ -85,7 +85,9 @@
                         <button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]><i class="fa fa-check"></i> Requested</button>
                     </ng-template>
                     <ng-template #notRequestedBtn>
-                        <button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)"><i class="fa fa-plus"></i> Request</button>
+                        <button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)">
+                            <i *ngIf="result.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i *ngIf="!result.requestProcessing && !result.processed" class="fa fa-plus"></i>
+                            <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i>Request</button>
                     </ng-template>
                         </div>
 

src/Ombi/ClientApp/app/search/moviesearch.component.ts

@@ -60,10 +60,12 @@ export class MovieSearchComponent implements OnInit {
 
     public request(searchResult: ISearchMovieResult) {
         searchResult.requested = true;
+        searchResult.requestProcessing = true;
         if (this.authService.hasRole("admin") || this.authService.hasRole("AutoApproveMovie")) {
             searchResult.approved = true;
         }
 
+        try {
             this.requestService.requestMovie(searchResult)
                 .subscribe(x => {
                     this.result = x;
@@ -71,12 +73,25 @@ export class MovieSearchComponent implements OnInit {
                     if (this.result.requestAdded) {
                         this.notificationService.success("Request Added",
                             `Request for ${searchResult.title} has been added successfully`);
+                        searchResult.processed = true;
+                    } else {
+                        if (this.result.errorMessage && this.result.message) {
+                            this.notificationService.warning("Request Added", `${this.result.message} - ${this.result.errorMessage}`);
                         } else {
                             this.notificationService.warning("Request Added", this.result.message ? this.result.message : this.result.errorMessage);
+                        }
                         searchResult.requested = false;
                         searchResult.approved = false;
+                        searchResult.processed = false;
+                        searchResult.requestProcessing = false;
                     }
                 });
+        } catch (e) {
+
+            searchResult.processed = false;
+            searchResult.requestProcessing = false;
+            this.notificationService.error("Something went wrong", e);
+        }
     }
 
     public popularMovies() {

src/Ombi/ClientApp/app/search/tvsearch.component.ts

@@ -157,9 +157,13 @@ export class TvSearchComponent implements OnInit, OnDestroy {
                 if (this.result.requestAdded) {
                     this.notificationService.success("Request Added",
                         `Request for ${searchResult.title} has been added successfully`);
+                } else {
+                    if (this.result.errorMessage && this.result.message) {
+                        this.notificationService.warning("Request Added", `${this.result.message} - ${this.result.errorMessage}`);
                     } else {
                         this.notificationService.warning("Request Added", this.result.message ? this.result.message : this.result.errorMessage);
                     }
+                }
             });
     }