feature(permission-management): change modal

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

@@ -1,15 +1,9 @@
-<ng-template #modalContent let-modal>
+<abp-modal *ngIf="visible" size="lg" [(visible)]="visible" [centered]="true">
   <ng-container *ngIf="{ entityName: entityName$ | async } as data">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">
-        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
-        {{ data.entityName }}
-      </h4>
-      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="modal-body">
+    <ng-template #abpHeader>
+      <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>
+    </ng-template>
+    <ng-template #abpBody>
       <div class="custom-checkbox custom-control mb-2">
         <input
           type="checkbox"
@@ -31,7 +25,7 @@
             <perfect-scrollbar class="ps-show-always" style="max-height: 70vh;">
               <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
                 <a class="nav-link" [class.active]="selectedGroup.name === group.name" (click)="onChangeGroup(group)">{{
-                  group.displayName
+                  group?.displayName
                 }}</a>
               </li>
             </perfect-scrollbar>
@@ -80,15 +74,14 @@
           </div>
         </div>
       </div>
-    </div>
-
-    <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()">
+    </ng-template>
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-secondary" #abpClose>
         {{ 'AbpIdentity::Cancel' | abpLocalization }}
       </button>
       <button type="submit" class="btn btn-primary" (click)="onSubmit()">
         <i class="fa fa-check mr-1"></i> <span>{{ 'AbpIdentity::Save' | abpLocalization }}</span>
       </button>
-    </div>
+    </ng-template>
   </ng-container>
-</ng-template>
+</abp-modal>

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

@@ -7,11 +7,8 @@ import {
   Output,
   Renderer2,
   SimpleChanges,
-  TemplateRef,
   TrackByFunction,
-  ViewChild,
 } from '@angular/core';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Select, Store } from '@ngxs/store';
 import { from, Observable } from 'rxjs';
 import { map, pluck, take } from 'rxjs/operators';
@@ -35,23 +32,33 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
   @Input()
   providerKey: string;
 
+  protected _visible;
+
   @Input()
-  visible: boolean;
+  get visible(): boolean {
+    return this._visible;
+  }
+
+  set visible(value: boolean) {
+    if (!this.selectedGroup) return;
+
+    this._visible = value;
+    this.visibleChange.emit(value);
+
+    if (!value) {
+      this.selectedGroup = null;
+    }
+  }
 
   @Output()
   visibleChange = new EventEmitter<boolean>();
 
-  @ViewChild('modalContent', { static: false })
-  modalContent: TemplateRef<any>;
-
   @Select(PermissionManagementState.getPermissionGroups)
   groups$: Observable<PermissionManagement.Group[]>;
 
   @Select(PermissionManagementState.getEntitiyDisplayName)
   entityName$: Observable<string>;
 
-  modalRef: NgbModalRef;
-
   selectedGroup: PermissionManagement.Group;
 
   permissions: PermissionManagement.Permission[] = [];
@@ -80,7 +87,7 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
     );
   }
 
-  constructor(private modalService: NgbModal, private store: Store, private renderer: Renderer2) {}
+  constructor(private store: Store, private renderer: Renderer2) {}
 
   ngOnInit(): void {}
 
@@ -186,9 +193,11 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
             permissions: changedPermissions,
           }),
         )
-        .subscribe(() => this.modalRef.close());
+        .subscribe(() => {
+          this.visible = false;
+        });
     } else {
-      this.modalRef.close();
+      this.visible = false;
     }
   }
 
@@ -206,39 +215,22 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
         this.selectedGroup = permissionRes.groups[0];
         this.permissions = getPermissions(permissionRes.groups);
 
-        this.modalRef = this.modalService.open(this.modalContent, { size: 'lg' });
-        this.visibleChange.emit(true);
+        this.visible = true;
 
         setTimeout(() => {
           this.setTabCheckboxState();
           this.setGrantCheckboxState();
         }, 0);
-
-        from(this.modalRef.result)
-          .pipe(take(1))
-          .subscribe(
-            data => {
-              this.setVisible(false);
-            },
-            reason => {
-              this.setVisible(false);
-            },
-          );
       });
   }
 
-  setVisible(value: boolean) {
-    this.visible = value;
-    this.visibleChange.emit(value);
-  }
-
   ngOnChanges({ visible }: SimpleChanges): void {
     if (!visible) return;
 
     if (visible.currentValue) {
       this.openModal();
-    } else if (visible.currentValue === false && this.modalService.hasOpenModals()) {
-      this.modalRef.close();
+    } else if (visible.currentValue === false && this.visible) {
+      this.visible = false;
     }
   }
 }