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,23 +60,38 @@ 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;
         }
 
-        this.requestService.requestMovie(searchResult)
-            .subscribe(x => {
-                this.result = x;
+        try {
+            this.requestService.requestMovie(searchResult)
+                .subscribe(x => {
+                    this.result = x;
 
-                if (this.result.requestAdded) {
-                    this.notificationService.success("Request Added",
-                        `Request for ${searchResult.title} has been added successfully`);
-                } else {
-                    this.notificationService.warning("Request Added", this.result.message ? this.result.message : this.result.errorMessage);
-                    searchResult.requested = false;
-                    searchResult.approved = false;
-                }
-            });
+                    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

@@ -158,7 +158,11 @@ export class TvSearchComponent implements OnInit, OnDestroy {
                     this.notificationService.success("Request Added",
                         `Request for ${searchResult.title} has been added successfully`);
                 } else {
-                    this.notificationService.warning("Request Added", this.result.message ? this.result.message : this.result.errorMessage);
+                    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);
+                    }
                 }
             });
     }