Merge pull request #15474 from abpframework/fix/permission-manage-grant

Permission management grant checkbox behavior change

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

@@ -7,45 +7,46 @@
       </h4>
     </ng-template>
     <ng-template #abpBody>
-      <div class="form-check mb-2">
-        <input
-          #selectAllInAllTabsRef
-          type="checkbox"
-          id="select-all-in-all-tabs"
-          name="select-all-in-all-tabs"
-          class="form-check-input"
-          [(ngModel)]="selectAllTab"
-          (click)="onClickSelectAll()"
-        />
-        <label class="form-check-label" for="select-all-in-all-tabs">{{
-          'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
-        }}</label>
-      </div>
-
-      <hr class="mt-2 mb-2" />
       <div class="row">
-        <div class="overflow-auto col-md-4">
-          <ul class="nav nav-pills flex-column">
-            <li *ngFor="let group of data.groups; trackBy: trackByFn" class="nav-item">
-              <a
-                *ngIf="{ assignedCount: getAssignedCount(group.name) } as count"
-                class="nav-link pointer"
-                [class.active]="selectedGroup?.name === group?.name"
-                (click)="onChangeGroup(group)"
-                (select)="setDisabled(group.permissions)"
-              >
-                <div [class.font-weight-bold]="count.assignedCount">
-                  {{ group?.displayName }}
-                  <span *ngIf="count.assignedCount > 0">({{ count.assignedCount }})</span>
-                </div>
-              </a>
-            </li>
-          </ul>
+        <div class="col-md-4">
+          <div class="form-check mb-2">
+            <input
+              #selectAllInAllTabsRef
+              type="checkbox"
+              id="select-all-in-all-tabs"
+              name="select-all-in-all-tabs"
+              class="form-check-input"
+              [(ngModel)]="selectAllTab"
+              (click)="onClickSelectAll()"
+              [disabled]="disabledSelectAllInAllTabs"
+            />
+            <label class="form-check-label" for="select-all-in-all-tabs">{{
+              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
+            }}</label>
+          </div>
+
+          <hr class="mt-2 mb-2" />
+          <div class="overflow-auto">
+            <ul class="nav nav-pills flex-column">
+              <li *ngFor="let group of data.groups; trackBy: trackByFn" class="nav-item">
+                <a
+                  *ngIf="{ assignedCount: getAssignedCount(group.name) } as count"
+                  class="nav-link pointer"
+                  [class.active]="selectedGroup?.name === group?.name"
+                  (click)="onChangeGroup(group)"
+                  (select)="setDisabled(group.permissions)"
+                >
+                  <div [class.font-weight-bold]="count.assignedCount">
+                    {{ group?.displayName }}
+                    <span *ngIf="count.assignedCount > 0">({{ count.assignedCount }})</span>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="col-md-8 overflow-auto">
-          <h4>{{ selectedGroup?.displayName }}</h4>
-          <hr class="mt-2 mb-3" />
-          <div class="ps-1 pt-1">
+          <div class="ps-1">
             <div class="form-check mb-2">
               <input
                 #selectAllInThisTabsRef
@@ -61,7 +62,7 @@
                 'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
               }}</label>
             </div>
-            <hr class="mb-3" />
+            <hr class="my-2" />
             <div
               *ngFor="let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn"
               [ngStyle]="permission.style"

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

@@ -1,13 +1,13 @@
-import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
+import { ConfigStateService, CurrentUserDto } from "@abp/ng.core";
 import {
   GetPermissionListResultDto,
   PermissionGrantInfoDto,
   PermissionGroupDto,
   PermissionsService,
   ProviderInfoDto,
-  UpdatePermissionDto,
-} from '@abp/ng.permission-management/proxy';
-import { LocaleDirection } from '@abp/ng.theme.shared';
+  UpdatePermissionDto
+} from "@abp/ng.permission-management/proxy";
+import { LocaleDirection } from "@abp/ng.theme.shared";
 import {
   Component,
   ElementRef,
@@ -16,11 +16,11 @@ import {
   Output,
   QueryList,
   TrackByFunction,
-  ViewChildren,
-} from '@angular/core';
-import { concat, of } from 'rxjs';
-import { finalize, switchMap, take, tap } from 'rxjs/operators';
-import { PermissionManagement } from '../models/permission-management';
+  ViewChildren
+} from "@angular/core";
+import { concat, of } from "rxjs";
+import { finalize, switchMap, take, tap } from "rxjs/operators";
+import { PermissionManagement } from "../models/permission-management";
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
   style: string;
@@ -106,6 +106,8 @@ export class PermissionManagementComponent
 
   disableSelectAllTab = false;
 
+  disabledSelectAllInAllTabs = false;
+
   modalBusy = false;
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
@@ -137,13 +139,13 @@ export class PermissionManagementComponent
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
   }
 
-  setDisabled(grantedProviders) {
-    if (grantedProviders.length) {
-      grantedProviders.forEach(permission => {
-        this.disableSelectAllTab = permission.grantedProviders?.some(
-          p => p.providerName !== this.providerName,
-        );
-      });
+  setDisabled(permissions: PermissionGrantInfoDto[]) {
+    if (permissions.length) {
+      this.disableSelectAllTab = permissions.every(
+        permission =>
+          permission.isGranted &&
+          permission.grantedProviders?.every(p => p.providerName !== this.providerName),
+      );
     } else {
       this.disableSelectAllTab = false;
     }
@@ -180,10 +182,13 @@ export class PermissionManagementComponent
   }
 
   setTabCheckboxState() {
-    const selectedPermissions = this.selectedGroupPermissions.filter(per => per.isGranted);
+    const selectableGroupPermissions = this.selectedGroupPermissions.filter(per =>
+      per.grantedProviders.every(p => p.providerName === this.providerName),
+    );
+    const selectedPermissions = selectableGroupPermissions.filter(per => per.isGranted);
     const element = document.querySelector('#select-all-in-this-tabs') as any;
 
-    if (selectedPermissions.length === this.selectedGroupPermissions.length) {
+    if (selectedPermissions.length === selectableGroupPermissions.length) {
       element.indeterminate = false;
       this.selectThisTab = true;
     } else if (selectedPermissions.length === 0) {
@@ -195,10 +200,13 @@ export class PermissionManagementComponent
   }
 
   setGrantCheckboxState() {
-    const selectedAllPermissions = this.permissions.filter(per => per.isGranted);
+    const selectablePermissions = this.permissions.filter(per =>
+      per.grantedProviders.every(p => p.providerName === this.providerName),
+    );
+    const selectedAllPermissions = selectablePermissions.filter(per => per.isGranted);
     const checkboxElement = document.querySelector('#select-all-in-all-tabs') as any;
 
-    if (selectedAllPermissions.length === this.permissions.length) {
+    if (selectedAllPermissions.length === selectablePermissions.length) {
       checkboxElement.indeterminate = false;
       this.selectAllTab = true;
     } else if (selectedAllPermissions.length === 0) {
@@ -232,8 +240,10 @@ export class PermissionManagementComponent
       isGranted:
         this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
     }));
-
-    this.selectThisTab = !this.selectAllTab;
+    if (!this.disableSelectAllTab) {
+      this.selectThisTab = !this.selectAllTab;
+      this.setTabCheckboxState();
+    }
   }
 
   onChangeGroup(group: PermissionGroupDto) {
@@ -283,6 +293,11 @@ export class PermissionManagementComponent
         this.data = permissionRes;
         this.selectedGroup = permissionRes.groups[0];
         this.permissions = getPermissions(permissionRes.groups);
+        this.disabledSelectAllInAllTabs = this.permissions.every(
+          per =>
+            per.isGranted &&
+            per.grantedProviders.every(provider => provider.providerName !== this.providerName),
+        );
       }),
     );
   }
@@ -290,7 +305,7 @@ export class PermissionManagementComponent
   initModal() {
     // TODO: Refactor
     setTimeout(() => {
-      this.setDisabled(this.permissions);
+      this.setDisabled(this.selectedGroup.permissions);
       this.setTabCheckboxState();
       this.setGrantCheckboxState();
     });