Skip to content

Commit

Permalink
Bug #13572: create tenant disable button when loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@laedanrex
laedanrex committed Oct 28, 2024
1 parent caf3750 commit 02a09a0
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 53 deletions.
19 changes: 7 additions & 12 deletions ...-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { finalize, 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;
Expand Down Expand Up @@ -94,7 +94,7 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
}

gdprReadOnlyStatus: boolean;
private destroy = new Subject();
private subscription: Subscription;
// tslint:disable-next-line: variable-name
private _homepageMessageForm: FormGroup;
// tslint:disable-next-line: variable-name
Expand Down Expand Up @@ -163,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() {
Expand Down Expand Up @@ -218,13 +215,11 @@ export class CustomerCreateComponent implements OnInit, OnDestroy {
this.customerService
.create(customer, this.logos)
.pipe(finalize(() => (this.isLoading = false)))
.pipe(takeUntil(this.destroy))
.subscribe(
() => {
this.dialogRef.close(true);
},
(error) => {
this.creating = false;
console.error(error);
},
);
Expand Down
6 changes: 3 additions & 3 deletions ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
64 changes: 38 additions & 26 deletions ui/ui-frontend/projects/identity/src/app/customer/owner-create/owner-create.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -54,6 +55,7 @@ export class OwnerCreateComponent implements OnInit, OnDestroy {
public stepIndex = 0;

private keyPressSubscription: Subscription;
isLoading = false;

constructor(
public dialogRef: MatDialogRef<OwnerCreateComponent>,
Expand Down Expand Up @@ -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);
},
);
}
}
4 changes: 3 additions & 1 deletion ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 17 additions & 11 deletions ui/ui-frontend/projects/identity/src/app/customer/tenant-create/tenant-create.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -53,6 +54,7 @@ export class TenantCreateComponent implements OnInit, OnDestroy {
form: FormGroup;

private keyPressSubscription: Subscription;
isLoading = false;

constructor(
public dialogRef: MatDialogRef<TenantCreateComponent>,
Expand Down Expand Up @@ -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);
},
);
}
}

0 comments on commit 02a09a0

Please sign in to comment.