update: add group names to search and use signals instead

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

@@ -16,7 +16,8 @@
               class="form-control"
               id="permission-search"
               placeholder="Filter"
-              [(ngModel)]="filter"
+              [ngModel]="filter()"
+              (ngModelChange)="filter.set($event)"
             />
           </div>
         </div>
@@ -44,7 +45,7 @@
           <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) {
+                @for (group of permissionGroups(); track $index) {
                   <li class="border nav-item">
                     @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
                       <a

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,19 +8,20 @@ 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';
-import { BehaviorSubject, concat, of } from 'rxjs';
+import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models/permission-management';
 
@@ -149,9 +151,25 @@ export class PermissionManagementComponent
 
   selectedGroupPermissions: PermissionWithStyle[] = [];
 
-  filter = '';
+  filter = signal<string>('');
+  permissionGroupSignal = signal<PermissionGroupDto[]>([]);
+
+  permissionGroups = computed(() => {
+    const search = this.filter().toLowerCase().trim();
+    const groups = this.permissionGroupSignal();
+
+    if (!search) {
+      return groups;
+    }
+
+    const includesSearch = text => text.toLowerCase().includes(search);
 
-  permissionGroupSubject = new BehaviorSubject<PermissionGroupDto[]>(null);
+    return groups.filter(group =>
+      group.permissions.some(
+        permission => includesSearch(permission.displayName) || includesSearch(group.displayName),
+      ),
+    );
+  });
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
@@ -398,7 +416,8 @@ export class PermissionManagementComponent
       tap((permissionRes: GetPermissionListResultDto) => {
         const { groups } = permissionRes;
         this.data = permissionRes;
-        this.permissionGroupSubject.next(groups);
+        // this.permissionGroupSubject.next(groups);
+        this.permissionGroupSignal.set(groups);
         this.permissions = getPermissions(groups);
         this.setSelectedGroup(groups[0]);
         this.disabledSelectAllInAllTabs = this.permissions.every(
@@ -435,17 +454,6 @@ export class PermissionManagementComponent
 
     return false;
   }
-
-  get permissionGroups(): PermissionGroupDto[] {
-    const permissionGroups = this.permissionGroupSubject.getValue();
-    if (!permissionGroups) {
-      return;
-    }
-    const search = this.filter.toLowerCase();
-    return permissionGroups.filter(group =>
-      group.permissions.some(permission => permission.displayName.toLowerCase().includes(search)),
-    );
-  }
 }
 
 function findParentPermissions(