CP - V7.1 : Story #11854 & Bug #13572 (cc): disable button when loading on create organisation and create tenant

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html

@@ -310,7 +310,9 @@
           </vitamui-common-input-error>
         </vitamui-common-input>
         <div class="actions">
-          <button type="submit" class="btn primary" [disabled]="form.pending || form.invalid">{{ 'COMMON.SUBMIT' | translate }}</button>
+          <button type="submit" class="btn primary" [disabled]="form.pending || form.invalid || isLoading">
+            {{ 'COMMON.SUBMIT' | translate }}
+          </button>
           <ng-container *ngTemplateOutlet="cancel"></ng-container>
         </div>
         <ng-container *ngTemplateOutlet="back"></ng-container>

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts

@@ -37,14 +37,14 @@
 import { ComponentType } from '@angular/cdk/portal';
 import { Component, Inject, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { merge, Observable, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { merge, Observable, Subscription } from 'rxjs';
+import { filter, finalize } from 'rxjs/operators';
 import { ConfirmDialogService, CountryOption, CountryService, Customer, Logo, OtpState, StartupService } from 'ui-frontend-common';
 import { CustomerService } from '../../core/customer.service';
 import { TenantFormValidators } from '../tenant-create/tenant-form.validators';
 import { CustomerAlertingComponent } from './customer-alerting/customer-alerting.component';
-import { ALPHA_NUMERIC_REGEX, CustomerCreateValidators, CUSTOMER_CODE_MAX_LENGTH } from './customer-create.validators';
+import { ALPHA_NUMERIC_REGEX, CUSTOMER_CODE_MAX_LENGTH, CustomerCreateValidators } from './customer-create.validators';
 
 interface CustomerInfo {
   code: string;
@@ -65,30 +65,36 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
   public form: FormGroup;
   public hasError = true;
   public message: string;
-  public creating = false;
+  public isLoading = false;
   public customerInfo: CustomerInfo = {
     code: null,
     name: null,
     companyName: null,
   };
+
   public get customerForm(): FormGroup {
     return this._customerForm;
   }
+
   public set customerForm(form: FormGroup) {
     this._customerForm = form;
   }
+
   public logos: Logo[];
   public countries: CountryOption[];
   public portalTitles: { [language: string]: string };
   public portalMessages: { [language: string]: string };
+
   public get homepageMessageForm(): FormGroup {
     return this._homepageMessageForm;
   }
+
   public set homepageMessageForm(form: FormGroup) {
     this._homepageMessageForm = form;
   }
+
   gdprReadOnlyStatus: boolean;
-  private destroy = new Subject();
+  private subscription: Subscription;
   // tslint:disable-next-line: variable-name
   private _homepageMessageForm: FormGroup;
   // tslint:disable-next-line: variable-name
@@ -157,18 +163,15 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
       this.customer = customerDetails;
     });
 
-    this.confirmDialogService
-      .listenToEscapeKeyPress(this.dialogRef)
-      .pipe(takeUntil(this.destroy))
-      .subscribe(() => this.onCancel());
+    this.subscription = this.confirmDialogService.listenToEscapeKeyPress(this.dialogRef).subscribe(() => this.onCancel());
 
     this.countryService.getAvailableCountries().subscribe((values: CountryOption[]) => {
       this.countries = values;
     });
   }
 
   ngOnDestroy() {
-    this.destroy.next();
+    this.subscription.unsubscribe();
   }
 
   onChanges() {
@@ -206,18 +209,17 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
     if (this.lastStepIsInvalid() || this.stepIndex !== this.stepCount - 1) {
       return;
     }
-    this.creating = true;
+    this.isLoading = true;
     const customer: Customer = this.getCustomerFromForm();
 
     this.customerService
       .create(customer, this.logos)
-      .pipe(takeUntil(this.destroy))
+      .pipe(finalize(() => (this.isLoading = false)))
       .subscribe(
         () => {
           this.dialogRef.close(true);
         },
         (error) => {
-          this.creating = false;
           console.error(error);
         },
       );
@@ -312,6 +314,6 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
 
   lastStepIsInvalid(): boolean {
     const invalid = this.firstStepInvalid() || this.secondStepInvalid() || !this.thirdStepValid() || !this.fourthStepValid();
-    return this.form.pending || this.form.invalid || invalid || this.creating;
+    return this.form.pending || this.form.invalid || invalid || this.isLoading;
   }
 }

ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html

@@ -11,10 +11,10 @@
         <app-owner-form formControlName="owner" [customerId]="data?.customer?.id"></app-owner-form>
 
         <div class="actions">
-          <button type="button" class="btn primary" cdkStepperNext [disabled]="ownerForm.pending || ownerForm.invalid">
+          <button type="button" class="btn primary" cdkStepperNext [disabled]="isLoading || ownerForm.pending || ownerForm.invalid">
             {{ 'CUSTOMER.OWNER.MODAL.ACTION_BUTTON' | translate }}
           </button>
-          <button type="submit" class="btn primary" [disabled]="ownerForm.pending || ownerForm.invalid">
+          <button type="submit" class="btn primary" [disabled]="isLoading || ownerForm.pending || ownerForm.invalid">
             {{ 'COMMON.SUBMIT' | translate }}
           </button>
           <button type="button" class="btn cancel link" (click)="onCancel()">{{ 'COMMON.UNDO' | translate }}</button>
@@ -38,7 +38,7 @@
         </vitamui-common-input>
 
         <div class="actions">
-          <button type="submit" class="btn primary" [disabled]="tenantForm.pending || tenantForm.invalid">
+          <button type="submit" class="btn primary" [disabled]="isLoading || tenantForm.pending || tenantForm.invalid">
             {{ 'COMMON.SUBMIT' | translate }}
           </button>
           <button type="button" class="btn cancel link" (click)="onCancel()">{{ 'COMMON.UNDO' | translate }}</button>

ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.ts

@@ -37,11 +37,12 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { ConfirmDialogService, Customer, Owner, Tenant } from 'ui-frontend-common';
 import { OwnerService } from '../owner.service';
 import { TenantFormValidators } from '../tenant-create/tenant-form.validators';
 import { TenantService } from '../tenant.service';
+import { concatMap, finalize, map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-owner-create',
@@ -54,6 +55,7 @@ export class OwnerCreateComponent implements OnInit, OnDestroy {
   public stepIndex = 0;
 
   private keyPressSubscription: Subscription;
+  isLoading = false;
 
   constructor(
     public dialogRef: MatDialogRef<OwnerCreateComponent>,
@@ -94,36 +96,46 @@ export class OwnerCreateComponent implements OnInit, OnDestroy {
     if (this.ownerForm.pending || this.ownerForm.invalid) {
       return;
     }
-    this.ownerService.create(this.ownerForm.value.owner).subscribe(
-      (newOwner: Owner) => this.dialogRef.close({ owner: newOwner }),
-      (error) => {
-        // TODO
-        console.error(error);
-      },
-    );
+    this.isLoading = true;
+    this.ownerCreation()
+      .pipe(finalize(() => (this.isLoading = false)))
+      .subscribe(
+        (newOwner: Owner) => this.dialogRef.close({ owner: newOwner }),
+        (error) => {
+          // TODO
+          console.error(error);
+        },
+      );
+  }
+
+  private ownerCreation(): Observable<Owner> {
+    return this.ownerService.create(this.ownerForm.value.owner);
   }
 
   onTenantSubmit() {
     if (this.ownerForm.pending || this.ownerForm.invalid || this.tenantForm.pending || this.tenantForm.invalid) {
       return;
     }
-    this.ownerService.create(this.ownerForm.value.owner).subscribe(
-      (newOwner) => {
-        this.tenantForm.get('ownerId').setValue(newOwner.id);
-        this.tenantService.create(this.tenantForm.value, newOwner.name).subscribe(
-          (newTenant: Tenant) => {
-            this.dialogRef.close({ owner: newOwner, tenant: newTenant });
-          },
-          (error) => {
-            console.error(error);
-            this.dialogRef.close();
-          },
-        );
-      },
-      (error) => {
-        // TODO
-        console.error(error);
-      },
-    );
+    this.isLoading = true;
+    this.ownerCreation()
+      .pipe(
+        tap((newOwner: Owner) => this.tenantForm.get('ownerId').setValue(newOwner.id)),
+        concatMap((newOwner: Owner) =>
+          this.tenantService.create(this.tenantForm.value, newOwner.name).pipe(
+            map((newTenant: Tenant) => {
+              return { owner: newOwner, tenant: newTenant };
+            }),
+          ),
+        ),
+        finalize(() => (this.isLoading = false)),
+      )
+      .subscribe(
+        (ownerAndTenant) => {
+          this.dialogRef.close(ownerAndTenant);
+        },
+        (error) => {
+          console.error(error);
+        },
+      );
   }
 }

ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html

@@ -9,7 +9,9 @@
     <vitamui-common-input formControlName="name" required [placeholder]="'CUSTOMER.OWNER.SAFE_NAME' | translate"></vitamui-common-input>
 
     <div class="actions">
-      <button type="submit" class="btn primary" [disabled]="form.pending || form.invalid">{{ 'COMMON.SUBMIT' | translate }}</button>
+      <button type="submit" class="btn primary" [disabled]="isLoading || form.pending || form.invalid">
+        {{ 'COMMON.SUBMIT' | translate }}
+      </button>
       <button type="button" class="btn cancel link" (click)="onCancel()">{{ 'COMMON.UNDO' | translate }}</button>
     </div>
   </div>

ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.ts

@@ -38,9 +38,10 @@ import { ConfirmDialogService, Owner, Tenant } from 'ui-frontend-common';
 
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
+
+import { finalize } from 'rxjs/operators';
 import { TenantService } from '../tenant.service';
 import { TenantFormValidators } from './tenant-form.validators';
 
@@ -53,6 +54,7 @@ export class TenantCreateComponent implements OnInit, OnDestroy {
   form: FormGroup;
 
   private keyPressSubscription: Subscription;
+  isLoading = false;
 
   constructor(
     public dialogRef: MatDialogRef<TenantCreateComponent>,
@@ -89,14 +91,18 @@ export class TenantCreateComponent implements OnInit, OnDestroy {
     if (this.form.pending || this.form.invalid) {
       return;
     }
-    this.tenantService.create(this.form.value, this.data.owner.name).subscribe(
-      (newTenant: Tenant) => {
-        this.dialogRef.close(newTenant);
-      },
-      (error) => {
-        console.error(error);
-        this.dialogRef.close(null);
-      },
-    );
+    this.isLoading = true;
+    this.tenantService
+      .create(this.form.value, this.data.owner.name)
+      .pipe(finalize(() => (this.isLoading = false)))
+      .subscribe(
+        (newTenant: Tenant) => {
+          this.dialogRef.close(newTenant);
+        },
+        (error) => {
+          console.error(error);
+          this.dialogRef.close(null);
+        },
+      );
   }
 }