refactor(identity): roles

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;
       });
   }