fix when click to tab permission

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

@@ -49,9 +49,8 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
 })
 export class PermissionManagementComponent
   implements
-    PermissionManagement.PermissionManagementComponentInputs,
+  PermissionManagement.PermissionManagementComponentInputs,
-    PermissionManagement.PermissionManagementComponentOutputs
+  PermissionManagement.PermissionManagementComponentOutputs {
-{
   @Input()
   readonly providerName!: string;
 
@@ -118,7 +117,7 @@ export class PermissionManagementComponent
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
-  constructor(protected service: PermissionsService, protected configState: ConfigStateService) {}
+  constructor(protected service: PermissionsService, protected configState: ConfigStateService) { }
 
   getChecked(name: string) {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
@@ -131,21 +130,19 @@ export class PermissionManagementComponent
       return;
     }
 
-    const margin = `margin-${
+    const margin = `margin-${(document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
-      (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
+      }.px`;
-    }.px`;
 
     const permissions =
       (this.data.groups.find(group => group.name === this.selectedGroup?.name) || {}).permissions ||
       [];
-
     this.selectedGroupPermissions = permissions.map(
       permission =>
-        ({
+      ({
-          ...permission,
+        ...permission,
-          style: { [margin]: findMargin(permissions, permission) },
+        style: { [margin]: findMargin(permissions, permission) },
-          isGranted: (this.permissions.find(per => per.name === permission.name) || {}).isGranted,
+        isGranted: (this.permissions.find(per => per.name === permission.name) || {}).isGranted,
-        } as unknown as PermissionWithStyle),
+      } as unknown as PermissionWithStyle),
     );
   }
 
@@ -174,7 +171,7 @@ export class PermissionManagementComponent
       this.isGrantedByOtherProviderName(clickedPermission.grantedProviders)
     )
       return;
-
+    this.setSelectedGroup(this.selectedGroup);
     setTimeout(() => {
       this.permissions = this.permissions.map(per => {
         if (clickedPermission.name === per.name) {
@@ -186,11 +183,21 @@ export class PermissionManagementComponent
         }
         return per;
       });
+      this.updateSelectedGroupPermissions(clickedPermission);
       this.setTabCheckboxState();
       this.setGrantCheckboxState();
     }, 0);
   }
 
+  updateSelectedGroupPermissions(clickedPermissions: PermissionGrantInfoDto) {
+    this.selectedGroupPermissions = this.selectedGroupPermissions.map(per => {
+      if (per.name === clickedPermissions.name) {
+        per.isGranted = !per.isGranted
+      }
+      return per;
+    })
+  }
+
   setTabCheckboxState() {
     const selectableGroupPermissions = this.selectedGroupPermissions.filter(per =>
       per.grantedProviders.every(p => p.providerName === this.providerName),
@@ -269,7 +276,7 @@ export class PermissionManagementComponent
     const changedPermissions: UpdatePermissionDto[] = this.permissions
       .filter(per =>
         (unchangedPermissions.find(unchanged => unchanged.name === per.name) || {}).isGranted ===
-        per.isGranted
+          per.isGranted
           ? false
           : true,
       )