Merge pull request #1636 from abpframework/refactor/apply-modal-busy

Refactor/apply modal busy

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -67,13 +67,13 @@
   </div>
 </div>
 
-<abp-modal size="md" [(visible)]="isModalVisible">
+<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
-    <form [formGroup]="form">
+    <form [formGroup]="form" (ngSubmit)="save()">
       <div class="form-group">
         <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
         ><span> * </span>
@@ -100,13 +100,7 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="save()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-      [requestType]="['POST', 'PUT']"
-      requestURLContainSearchValue="roles"
-      iconClass="fa fa-check"
-      (click)="save()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>
 

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -36,6 +36,8 @@ export class RolesComponent {
 
   loading: boolean = false;
 
+  modalBusy: boolean = false;
+
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
@@ -79,6 +81,7 @@ export class RolesComponent {
 
   save() {
     if (!this.form.valid) return;
+    this.modalBusy = true;
 
     this.store
       .dispatch(
@@ -87,6 +90,7 @@ export class RolesComponent {
           : new CreateRole(this.form.value),
       )
       .subscribe(() => {
+        this.modalBusy = false;
         this.isModalVisible = false;
       });
   }

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -77,14 +77,14 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible">
+<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
     <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
-      <form [formGroup]="form" validateOnSubmit>
+      <form [formGroup]="form" (ngSubmit)="save()">
         <ngb-tabset>
           <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
             <ng-template ngbTabContent>
@@ -183,14 +183,9 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="form.invalid">{{
-      [requestType]="['POST', 'PUT']"
+      'AbpIdentity::Save' | abpLocalization
-      requestURLContainSearchValue="users"
+    }}</abp-button>
-      iconClass="fa fa-check"
-      (click)="save()"
-      [disabled]="form.invalid"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>
 

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -50,6 +50,8 @@ export class UsersComponent {
 
   loading: boolean = false;
 
+  modalBusy: boolean = false;
+
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   get roleGroups(): FormGroup[] {
@@ -114,6 +116,7 @@ export class UsersComponent {
 
   save() {
     if (!this.form.valid) return;
+    this.modalBusy = true;
 
     const { roleNames } = this.form.value;
     const mappedRoleNames = snq(
@@ -135,6 +138,7 @@ export class UsersComponent {
             }),
       )
       .subscribe(() => {
+        this.modalBusy = false;
         this.isModalVisible = false;
       });
   }

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html

@@ -1,4 +1,4 @@
-<abp-modal [(visible)]="visible" (init)="initModal()">
+<abp-modal [(visible)]="visible" (init)="initModal()" [busy]="modalBusy">
   <ng-container *ngIf="{ entityName: entityName$ | async } as data">
     <ng-template #abpHeader>
       <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>
@@ -86,13 +86,7 @@
       <button type="button" class="btn btn-secondary" #abpClose>
         {{ 'AbpIdentity::Cancel' | abpLocalization }}
       </button>
-      <abp-button
+      <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-        [requestType]="['PUT']"
-        requestURLContainSearchValue="permissions"
-        iconClass="fa fa-check"
-        (click)="onSubmit()"
-        >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-      >
     </ng-template>
   </ng-container>
 </abp-modal>

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -64,6 +64,8 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
 
   selectAllTab: boolean = false;
 
+  modalBusy: boolean = false;
+
   trackByFn: TrackByFunction<PermissionManagement.Group> = (_, item) => item.name;
 
   get selectedGroupPermissions$(): Observable<PermissionWithMargin[]> {
@@ -175,6 +177,7 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
   }
 
   onSubmit() {
+    this.modalBusy = true;
     const unchangedPermissions = getPermissions(
       this.store.selectSnapshot(PermissionManagementState.getPermissionGroups),
     );
@@ -195,9 +198,11 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
           }),
         )
         .subscribe(() => {
+          this.modalBusy = false;
           this.visible = false;
         });
     } else {
+      this.modalBusy = false;
       this.visible = false;
     }
   }

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -90,7 +90,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible">
+<abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
   </ng-template>
@@ -103,13 +103,7 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="save()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-      [requestType]="['POST', 'PUT', 'DELETE']"
-      requestURLContainSearchValue="multi-tenancy"
-      iconClass="fa fa-check"
-      (click)="save()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>
 

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

@@ -52,6 +52,8 @@ export class TenantsComponent {
 
   loading: boolean = false;
 
+  modalBusy: boolean = false;
+
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
@@ -144,11 +146,13 @@ export class TenantsComponent {
   }
 
   saveConnectionString() {
+    this.modalBusy = true;
     if (this.useSharedDatabase) {
       this.tenantService
         .deleteDefaultConnectionString(this.selected.id)
         .pipe(take(1))
         .subscribe(() => {
+          this.modalBusy = false;
           this.isModalVisible = false;
         });
     } else {
@@ -156,6 +160,7 @@ export class TenantsComponent {
         .updateDefaultConnectionString({ id: this.selected.id, defaultConnectionString: this.connectionString })
         .pipe(take(1))
         .subscribe(() => {
+          this.modalBusy = false;
           this.isModalVisible = false;
         });
     }
@@ -163,6 +168,7 @@ export class TenantsComponent {
 
   saveTenant() {
     if (!this.tenantForm.valid) return;
+    this.modalBusy = true;
 
     this.store
       .dispatch(
@@ -171,6 +177,7 @@ export class TenantsComponent {
           : new CreateTenant(this.tenantForm.value),
       )
       .subscribe(() => {
+        this.modalBusy = false;
         this.isModalVisible = false;
       });
   }
@@ -183,6 +190,7 @@ export class TenantsComponent {
       .subscribe((status: Toaster.Status) => {
         if (status === Toaster.Status.confirm) {
           this.store.dispatch(new DeleteTenant(id));
+          this.modalBusy = false;
         }
       });
   }

npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html

@@ -1,9 +1,9 @@
-<abp-modal [(visible)]="visible">
+<abp-modal [(visible)]="visible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form [formGroup]="form" novalidate>
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
         ><span> * </span
@@ -27,12 +27,6 @@
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-      [requestType]="['POST']"
-      requestURLContainSearchValue="change-password"
-      iconClass="fa fa-check"
-      (click)="onSubmit()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts

@@ -15,6 +15,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { comparePasswords } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
 import snq from 'snq';
+import { finalize } from 'rxjs/operators';
 
 const { minLength, required } = Validators;
 
@@ -43,6 +44,8 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   form: FormGroup;
 
+  modalBusy: boolean = false;
+
   constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
   ngOnInit(): void {
@@ -60,6 +63,7 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   onSubmit() {
     if (this.form.invalid) return;
+    this.modalBusy = true;
 
     this.store
       .dispatch(
@@ -68,6 +72,11 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
           newPassword: this.form.get('newPassword').value,
         }),
       )
+      .pipe(
+        finalize(() => {
+          this.modalBusy = false;
+        }),
+      )
       .subscribe({
         next: () => {
           this.visible = false;

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html

@@ -1,9 +1,9 @@
-<abp-modal [(visible)]="visible">
+<abp-modal [(visible)]="visible" [busy]="modalBusy">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form *ngIf="form" [formGroup]="form" novalidate>
+    <form novalidate *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmit()">
       <div class="form-group">
         <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
         ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" autofocus />
@@ -36,12 +36,6 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button
+    <abp-button iconClass="fa fa-check" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
-      [requestType]="['PUT']"
-      requestURLContainSearchValue="my-profile"
-      iconClass="fa fa-check"
-      (click)="onSubmit()"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts

@@ -32,6 +32,8 @@ export class ProfileComponent implements OnChanges {
 
   form: FormGroup;
 
+  modalBusy: boolean = false;
+
   constructor(private fb: FormBuilder, private store: Store) {}
 
   buildForm() {
@@ -54,8 +56,10 @@ export class ProfileComponent implements OnChanges {
 
   onSubmit() {
     if (this.form.invalid) return;
+    this.modalBusy = true;
 
     this.store.dispatch(new UpdateProfile(this.form.value)).subscribe(() => {
+      this.modalBusy = false;
       this.visible = false;
       this.form.reset();
     });