refactor(identity): users

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
-      [requestType]="['POST', 'PUT']"
-      requestURLContainSearchValue="users"
-      iconClass="fa fa-check"
-      (click)="save()"
-      [disabled]="form.invalid"
-      >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-    >
+    <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;
       });
   }