Merge pull request #15703 from abpframework/refactor-permission-management

make selected group permissions as array

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

@@ -81,7 +81,7 @@ export class PermissionManagementComponent
           });
       });
     } else {
-      this.selectedGroup = null;
+      this.setSelectedGroup(null);
       this._visible = false;
       this.visibleChange.emit(false);
     }
@@ -110,10 +110,22 @@ export class PermissionManagementComponent
 
   modalBusy = false;
 
+  selectedGroupPermissions: PermissionWithStyle[] = [];
+
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
-  get selectedGroupPermissions(): PermissionWithStyle[] {
-    if (!this.selectedGroup) return [];
+  constructor(protected service: PermissionsService, protected configState: ConfigStateService) {}
+
+  getChecked(name: string) {
+    return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
+  }
+
+  setSelectedGroup(group: PermissionGroupDto) {
+    this.selectedGroup = group;
+    if (!this.selectedGroup) {
+      this.selectedGroupPermissions = [];
+      return;
+    }
 
     const margin = `margin-${
       (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
@@ -123,7 +135,7 @@ export class PermissionManagementComponent
       group => group.name === this.selectedGroup.name,
     ).permissions;
 
-    return permissions.map(
+    this.selectedGroupPermissions = permissions.map(
       permission =>
         ({
           ...permission,
@@ -133,12 +145,6 @@ export class PermissionManagementComponent
     );
   }
 
-  constructor(protected service: PermissionsService, protected configState: ConfigStateService) {}
-
-  getChecked(name: string) {
-    return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
-  }
-
   setDisabled(permissions: PermissionGrantInfoDto[]) {
     if (permissions.length) {
       this.disableSelectAllTab = permissions.every(
@@ -248,7 +254,7 @@ export class PermissionManagementComponent
 
   onChangeGroup(group: PermissionGroupDto) {
     this.setDisabled(group.permissions);
-    this.selectedGroup = group;
+    this.setSelectedGroup(group);
     this.setTabCheckboxState();
   }
 
@@ -291,8 +297,8 @@ export class PermissionManagementComponent
     return this.service.get(this.providerName, this.providerKey).pipe(
       tap((permissionRes: GetPermissionListResultDto) => {
         this.data = permissionRes;
-        this.selectedGroup = permissionRes.groups[0];
         this.permissions = getPermissions(permissionRes.groups);
+        this.setSelectedGroup(permissionRes.groups[0]);
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&