Merge pull request #21209 from abpframework/auto-merge/rel-9-0/3140

Merge branch dev with rel-9.0

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

@@ -7,8 +7,21 @@
       </h4>
     </ng-template>
     <ng-template #abpBody>
-      <div class="row">
-        <div class="col-md-4 scroll-in-modal">
+      <div class="row d-flex align-items-center mb-2">
+        <div class="col">
+          <div class="input-group mb-2">
+            <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
+            <input
+              type="text"
+              class="form-control"
+              id="permission-search"
+              placeholder="Filter"
+              [ngModel]="filter()"
+              (ngModelChange)="filter.set($event)"
+            />
+          </div>
+        </div>
+        <div class="col-auto">
           <div class="form-check mb-2">
             <input
               #selectAllInAllTabsRef
@@ -24,78 +37,85 @@
               'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
             }}</label>
           </div>
+        </div>
+      </div>
+      <fieldset class="border rounded-4 p-3">
+        <legend class="px-1 h5 mb-0">{{ 'Permission Group' }}</legend>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="overflow-auto lpx-scroll-pills-container scroll-in-modal">
+              <ul class="nav nav-pills flex-column">
+                @for (group of permissionGroups(); track $index) {
+                  <li class="border nav-item">
+                    @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
+                      <a
+                        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 }}
+                          @if (count.assignedCount > 0) {
+                            <span>({{ count.assignedCount }})</span>
+                          }
+                        </div>
+                      </a>
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
 
-          <hr class="mt-2 mb-2" />
-          <div class="overflow-auto">
-            <ul class="nav nav-pills flex-column">
-              @for (group of data.groups; track $index) {
-                <li class="nav-item">
-                  @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
-                    <a
-                      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 }}
-                        @if (count.assignedCount > 0) {
-                          <span>({{ count.assignedCount }})</span>
+          <div class="col-md-8 scroll-in-modal">
+            <div class="ps-1">
+              @if (selectedGroupPermissions.length) {
+                <div class="form-check mb-2">
+                  <input
+                    #selectAllInThisTabsRef
+                    type="checkbox"
+                    id="select-all-in-this-tabs"
+                    name="select-all-in-this-tabs"
+                    class="form-check-input"
+                    [(ngModel)]="selectThisTab"
+                    [disabled]="disableSelectAllTab"
+                    (click)="onClickSelectThisTab()"
+                  />
+                  <label class="form-check-label" for="select-all-in-this-tabs">{{
+                    'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
+                  }}</label>
+                </div>
+                <hr class="my-2" />
+                @for (permission of selectedGroupPermissions; track $index; let i = $index) {
+                  <div [ngStyle]="permission.style" class="form-check mb-2">
+                    <input
+                      #permissionCheckbox
+                      type="checkbox"
+                      [checked]="getChecked(permission.name)"
+                      [value]="getChecked(permission.name)"
+                      [attr.id]="permission.name"
+                      class="form-check-input"
+                      [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
+                      (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                    />
+                    <label class="form-check-label" [attr.for]="permission.name"
+                      >{{ permission.displayName }}
+                      @if (!hideBadges) {
+                        @for (provider of permission.grantedProviders; track $index) {
+                          <span class="badge bg-primary text-dark"
+                            >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                          >
                         }
-                      </div>
-                    </a>
-                  }
-                </li>
+                      }
+                    </label>
+                  </div>
+                }
               }
-            </ul>
-          </div>
-        </div>
-
-        <div class="col-md-8 scroll-in-modal">
-          <div class="ps-1">
-            <div class="form-check mb-2">
-              <input
-                #selectAllInThisTabsRef
-                type="checkbox"
-                id="select-all-in-this-tabs"
-                name="select-all-in-this-tabs"
-                class="form-check-input"
-                [(ngModel)]="selectThisTab"
-                [disabled]="disableSelectAllTab"
-                (click)="onClickSelectThisTab()"
-              />
-              <label class="form-check-label" for="select-all-in-this-tabs">{{
-                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
-              }}</label>
             </div>
-            <hr class="my-2" />
-            @for (permission of selectedGroupPermissions; track $index; let i = $index) {
-              <div [ngStyle]="permission.style" class="form-check mb-2">
-                <input
-                  #permissionCheckbox
-                  type="checkbox"
-                  [checked]="getChecked(permission.name)"
-                  [value]="getChecked(permission.name)"
-                  [attr.id]="permission.name"
-                  class="form-check-input"
-                  [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                  (click)="onClickCheckbox(permission, permissionCheckbox.value)"
-                />
-                <label class="form-check-label" [attr.for]="permission.name"
-                  >{{ permission.displayName }}
-                  @if (!hideBadges) {
-                    @for (provider of permission.grantedProviders; track $index) {
-                      <span class="badge bg-primary text-dark"
-                        >{{ provider.providerName }}: {{ provider.providerKey }}</span
-                      >
-                    }
-                  }
-                </label>
-              </div>
-            }
           </div>
         </div>
-      </div>
+      </fieldset>
     </ng-template>
     <ng-template #abpFooter>
       <button type="button" class="btn btn-outline-primary" abpClose>

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

@@ -1,4 +1,5 @@
 import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
+import { LocaleDirection, ToasterService } from '@abp/ng.theme.shared';
 import {
   GetPermissionListResultDto,
   PermissionGrantInfoDto,
@@ -7,15 +8,16 @@ import {
   ProviderInfoDto,
   UpdatePermissionDto,
 } from '@abp/ng.permission-management/proxy';
-import { LocaleDirection, ToasterService } from '@abp/ng.theme.shared';
 import {
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
   QueryList,
+  signal,
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
@@ -41,10 +43,38 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
         max-height: 70vh;
         overflow-y: scroll;
       }
+
       .scroll-in-modal {
         overflow: auto;
         max-height: calc(100vh - 15rem);
       }
+
+      fieldset legend {
+        float: none;
+        width: auto;
+      }
+
+      .lpx-scroll-pills-container ul {
+        display: block;
+        max-height: 500px;
+        overflow-y: auto;
+      }
+
+      .lpx-scroll-pills-container .tab-content {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+      }
+
+      .lpx-scroll-pills-container ul li {
+        margin-bottom: 10px;
+        border-radius: 10px;
+      }
+
+      .lpx-scroll-pills-container ul li a.active {
+        color: #fff !important;
+        border-color: #6c5dd3 !important;
+        background-color: #6c5dd3 !important;
+      }
     `,
   ],
 })
@@ -77,7 +107,9 @@ export class PermissionManagementComponent
   }
 
   set visible(value: boolean) {
-    if (value === this._visible) return;
+    if (value === this._visible) {
+      return;
+    }
 
     if (value) {
       this.openModal().subscribe(() => {
@@ -93,6 +125,7 @@ export class PermissionManagementComponent
       this.setSelectedGroup(null);
       this._visible = false;
       this.visibleChange.emit(false);
+      this.filter.set('');
     }
   }
 
@@ -119,8 +152,38 @@ export class PermissionManagementComponent
 
   modalBusy = false;
 
+  filter = signal<string>('');
+
   selectedGroupPermissions: PermissionWithStyle[] = [];
 
+  permissionGroupSignal = signal<PermissionGroupDto[]>([]);
+
+  permissionGroups = computed(() => {
+    const search = this.filter().toLowerCase().trim();
+    let groups = this.permissionGroupSignal();
+
+    if (!search) {
+      return groups;
+    }
+
+    const includesSearch = text => text.toLowerCase().includes(search);
+    groups = groups.filter(group =>
+      group.permissions.some(
+        permission => includesSearch(permission.displayName) || includesSearch(group.displayName),
+      ),
+    );
+
+    if (groups.length) {
+      this.setSelectedGroup(groups[0]);
+      this.disabledSelectAllInAllTabs = false;
+    } else {
+      this.disabledSelectAllInAllTabs = true;
+      this.selectedGroupPermissions = [];
+    }
+
+    return groups;
+  });
+
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
   getChecked(name: string) {
@@ -307,14 +370,38 @@ export class PermissionManagementComponent
   }
 
   onClickSelectAll() {
-    this.permissions = this.permissions.map(permission => ({
-      ...permission,
-      isGranted:
-        this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
-    }));
+    if (this.filter()) {
+      this.permissionGroups().forEach(group => {
+        group.permissions.forEach(permission => {
+          if (
+            permission.isGranted &&
+            this.isGrantedByOtherProviderName(permission.grantedProviders)
+          )
+            return;
+
+          const index = this.permissions.findIndex(per => per.name === permission.name);
+
+          this.permissions = [
+            ...this.permissions.slice(0, index),
+            { ...this.permissions[index], isGranted: !this.selectAllTab },
+            ...this.permissions.slice(index + 1),
+          ];
+        });
+      });
+    } else {
+      this.permissions = this.permissions.map(permission => ({
+        ...permission,
+        isGranted:
+          this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
+      }));
+    }
+
     if (!this.disableSelectAllTab) {
       this.selectThisTab = !this.selectAllTab;
       this.setTabCheckboxState();
+      if (this.filter()) {
+        this.setGrantCheckboxState();
+      }
     }
     this.onChangeGroup(this.selectedGroup);
   }
@@ -364,9 +451,13 @@ export class PermissionManagementComponent
 
     return this.service.get(this.providerName, this.providerKey).pipe(
       tap((permissionRes: GetPermissionListResultDto) => {
+        const { groups } = permissionRes || {};
+
         this.data = permissionRes;
-        this.permissions = getPermissions(permissionRes.groups);
-        this.setSelectedGroup(permissionRes.groups[0]);
+        this.permissionGroupSignal.set(groups);
+        this.permissions = getPermissions(groups);
+        this.setSelectedGroup(groups[0]);
+
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&