item: add spinner during request process

Closes rero/rero-ils#2317. Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
rero · Aug 20, 2021 · 41f0b51 · 41f0b51
1 parent 1eaf2ce
commit 41f0b51
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/.../src/app/record/detail-view/document-detail-view/item-request/item-request.component.html b/.../src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
@@ -59,7 +59,16 @@ <h5 class="card-title">{{ patron.last_name }}, {{ patron.first_name }}</h5>
         <form [formGroup]="form" (ngSubmit)="submit(model)">
           <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
           <div class="text-right">
-            <button id="new-request-button" class="btn btn-primary" [disabled]="!form.valid" translate>New request</button>
+            <button id="new-request-button"
+                    type="submit"
+                    class="btn btn-sm btn-primary"
+                    [disabled]="!form.valid || requestInProgress">
+              <ng-container *ngIf="!requestInProgress; else inProcess">{{ 'New request' | translate }}</ng-container>
+              <ng-template #inProcess>
+                <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+                {{ 'Request in progress' | translate }}
+              </ng-template>
+            </button>
           </div>
         </form>
       </div>

diff --git a/...in/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts b/...in/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
@@ -25,7 +25,7 @@ import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ToastrService } from 'ngx-toastr';
 import { User, UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
-import { debounceTime, map, shareReplay } from 'rxjs/operators';
+import { debounceTime, map, shareReplay, tap } from 'rxjs/operators';
 import { ItemsService } from '../../../../service/items.service';
 import { LoanService } from '../../../../service/loan.service';
 
@@ -35,36 +35,32 @@ import { LoanService } from '../../../../service/loan.service';
 })
 export class ItemRequestComponent implements OnInit {
 
+  // COMPONENTS ATTRIBUTES ====================================================
   /** Item pid */
   itemPid: string;
-
   /** form */
   form: FormGroup = new FormGroup({});
-
   /** form fields */
   formFields: FormlyFieldConfig[];
-
   /** model */
   model: FormModel;
-
   /** patron record */
   patron: any;
-
   /** Dynamic message for can_request validator */
   canRequestMessage: string;
-
   /** On submit event */
   onSubmit: EventEmitter<any> = new EventEmitter();
-
   /** Requested item(s) */
   requestedBy$: Observable<any>;
+  /** Request in progress */
+  requestInProgress = false;
 
   /** Pickup default $ref */
   private pickupDefaultValue: string;
-
   /** Current user */
   private currentUser: User;
 
+  // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
    * @param _modalService - BsModalService
@@ -89,9 +85,7 @@ export class ItemRequestComponent implements OnInit {
     private _itemService: ItemsService
   ) { }
 
-  /**
-   * Init
-   */
+  /** OnInit hook */
   ngOnInit() {
     this.currentUser = this._userService.user;
     const initialState: any = this._modalService.config.initialState;
@@ -103,35 +97,39 @@ export class ItemRequestComponent implements OnInit {
     this.initForm();
   }
 
+  // COMPONENTS FUNCTIONS =====================================================
   /**
    * Submit form
    * @param model - Object
    */
   submit(model: FormModel) {
+    this.requestInProgress = true;
     const body = {
       item_pid: this.itemPid,
       pickup_location_pid: model.pickupPid,
       patron_pid: this.patron.pid,
       transaction_library_pid: this.currentUser.currentLibrary,
       transaction_user_pid: this.currentUser.patronLibrarian.pid
     };
-    this._http.post('/api/item/request', body).subscribe(
-      () => {
-        this.onSubmit.next();
-        this.closeModal();
-        this._toastr.success(
-          this._translateService.instant('Request registered.'),
-          this._translateService.instant('Item request')
-        );
-      },
-      () => {
-        this._toastr.error(
-          this._translateService.instant('An error has occurred. Please try again.'),
-          this._translateService.instant('Item request'),
-          { disableTimeOut: true }
-        );
-      }
-    );
+    this._http.post('/api/item/request', body)
+      .pipe(tap(() => this.requestInProgress = false))
+      .subscribe(
+        (_: unknown) => {
+          this.onSubmit.next();
+          this.closeModal();
+          this._toastr.success(
+            this._translateService.instant('Request registered.'),
+            this._translateService.instant('Item request')
+          );
+        },
+        (error: unknown) => {
+          this._toastr.error(
+            this._translateService.instant('An error has occurred. Please try again.'),
+            this._translateService.instant('Item request'),
+            { disableTimeOut: true }
+          );
+        }
+      );
   }
 
   /**