diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html index 795c3a51a6d..c3cdf276495 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html +++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.html @@ -310,7 +310,9 @@
- +
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts index 8eaa104a260..fcb448d1ab0 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts +++ b/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,10 +163,7 @@ 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; @@ -168,7 +171,7 @@ export class CustomerCreateComponent implements OnInit, OnDestroy { } 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; } } diff --git a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html index 03c30d814d1..e9e49283638 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html +++ b/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html @@ -11,10 +11,10 @@
- - @@ -38,7 +38,7 @@
- diff --git a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.ts index 0e1e11c5a62..95802392dfe 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.ts +++ b/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, @@ -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 { + 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); + }, + ); } } diff --git a/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html b/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html index 55a327d3eba..86867d1d3bb 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html +++ b/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html @@ -9,7 +9,9 @@
- +
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.ts b/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.ts index 49f78fe1d9d..bdfcc834ab2 100644 --- a/ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.ts +++ b/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, @@ -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); + }, + ); } }