From 98591e8fcd0c15caa8c4dcffd7b9271d65d020f6 Mon Sep 17 00:00:00 2001
From: sumeyyeKurtulus <sumeyye.kurtulus.business@gmail.com>
Date: Fri, 18 Oct 2024 16:26:19 +0300
Subject: [PATCH 1/5] add: search for the permission modal

---
 .../permission-management.component.html      | 147 ++++++++++--------
 .../permission-management.component.ts        |  51 +++++-
 2 files changed, 130 insertions(+), 68 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 129d5fc0be..5b76e94dbe 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -7,8 +7,20 @@
       </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"
+            />
+          </div>
+        </div>
+        <div class="col-auto">
           <div class="form-check mb-2">
             <input
               #selectAllInAllTabsRef
@@ -24,78 +36,83 @@
               'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization
             }}</label>
           </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>
-                    </a>
-                  }
-                </li>
-              }
-            </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>
+      <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>
-            <hr class="my-2" />
-            @for (permission of selectedGroupPermissions; track $index; let i = $index) {
-              <div [ngStyle]="permission.style" class="form-check mb-2">
+          </div>
+
+          <div class="col-md-8 scroll-in-modal">
+            <div class="ps-1">
+              <div class="form-check mb-2">
                 <input
-                  #permissionCheckbox
+                  #selectAllInThisTabsRef
                   type="checkbox"
-                  [checked]="getChecked(permission.name)"
-                  [value]="getChecked(permission.name)"
-                  [attr.id]="permission.name"
+                  id="select-all-in-this-tabs"
+                  name="select-all-in-this-tabs"
                   class="form-check-input"
-                  [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                  (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                  [(ngModel)]="selectThisTab"
+                  [disabled]="disableSelectAllTab"
+                  (click)="onClickSelectThisTab()"
                 />
-                <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>
+                <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>
-      </div>
+      </fieldset>
     </ng-template>
     <ng-template #abpFooter>
       <button type="button" class="btn btn-outline-primary" abpClose>
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 8ad2fd2320..ae33e0e872 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -19,7 +19,7 @@ import {
   TrackByFunction,
   ViewChildren,
 } from '@angular/core';
-import { concat, of } from 'rxjs';
+import { BehaviorSubject, concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models/permission-management';
 
@@ -41,10 +41,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;
+      }
     `,
   ],
 })
@@ -121,6 +149,10 @@ export class PermissionManagementComponent
 
   selectedGroupPermissions: PermissionWithStyle[] = [];
 
+  filter = '';
+
+  permissionGroupSubject = new BehaviorSubject<PermissionGroupDto[]>(null);
+
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
   getChecked(name: string) {
@@ -364,9 +396,11 @@ 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.permissionGroupSubject.next(groups);
+        this.permissions = getPermissions(groups);
+        this.setSelectedGroup(groups[0]);
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&
@@ -401,6 +435,17 @@ 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(

From ac7b4f644e55063ec5142f9672698449de2b3e76 Mon Sep 17 00:00:00 2001
From: sumeyyeKurtulus <sumeyye.kurtulus.business@gmail.com>
Date: Mon, 21 Oct 2024 16:49:03 +0300
Subject: [PATCH 2/5] update: add group names to search and use signals instead

---
 .../permission-management.component.html      |  5 ++-
 .../permission-management.component.ts        | 40 +++++++++++--------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 5b76e94dbe..14ffec22a2 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/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
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index ae33e0e872..b75517f0eb 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/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(

From fb269e258994d82a93e22862c19f3266f995d2c9 Mon Sep 17 00:00:00 2001
From: Masum ULU <49063256+masum-ulu@users.noreply.github.com>
Date: Tue, 22 Oct 2024 09:21:43 +0300
Subject: [PATCH 3/5] Update permission-management.component.ts

---
 .../src/lib/components/permission-management.component.ts   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index b75517f0eb..49aad404d7 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -414,12 +414,14 @@ export class PermissionManagementComponent
 
     return this.service.get(this.providerName, this.providerKey).pipe(
       tap((permissionRes: GetPermissionListResultDto) => {
-        const { groups } = permissionRes;
+        const { groups } = permissionRes || {};
+
         this.data = permissionRes;
-        // this.permissionGroupSubject.next(groups);
+
         this.permissionGroupSignal.set(groups);
         this.permissions = getPermissions(groups);
         this.setSelectedGroup(groups[0]);
+        
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&

From 829d6fe5338d2d3185d9b581618ded98d8484728 Mon Sep 17 00:00:00 2001
From: sumeyyeKurtulus <sumeyye.kurtulus.business@gmail.com>
Date: Wed, 23 Oct 2024 14:38:14 +0300
Subject: [PATCH 4/5] update: add search validation and filter disposal

---
 .../permission-management.component.html      | 70 ++++++++++---------
 .../permission-management.component.ts        | 36 ++++++++--
 2 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 14ffec22a2..a2cf136c7b 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -70,45 +70,47 @@
 
           <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">
+              @if (selectedGroupPermissions.length) {
+                <div class="form-check mb-2">
                   <input
-                    #permissionCheckbox
+                    #selectAllInThisTabsRef
                     type="checkbox"
-                    [checked]="getChecked(permission.name)"
-                    [value]="getChecked(permission.name)"
-                    [attr.id]="permission.name"
+                    id="select-all-in-this-tabs"
+                    name="select-all-in-this-tabs"
                     class="form-check-input"
-                    [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                    (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                    [(ngModel)]="selectThisTab"
+                    [disabled]="disableSelectAllTab"
+                    (click)="onClickSelectThisTab()"
                   />
-                  <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>
+                  <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>
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 49aad404d7..32383e9384 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -107,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(() => {
@@ -123,6 +125,7 @@ export class PermissionManagementComponent
       this.setSelectedGroup(null);
       this._visible = false;
       this.visibleChange.emit(false);
+      this.filter.set('');
     }
   }
 
@@ -149,9 +152,10 @@ export class PermissionManagementComponent
 
   modalBusy = false;
 
+  filter = signal<string>('');
+
   selectedGroupPermissions: PermissionWithStyle[] = [];
 
-  filter = signal<string>('');
   permissionGroupSignal = signal<PermissionGroupDto[]>([]);
 
   permissionGroups = computed(() => {
@@ -163,12 +167,20 @@ export class PermissionManagementComponent
     }
 
     const includesSearch = text => text.toLowerCase().includes(search);
-
-    return groups.filter(group =>
+    const matchingGroups = groups.filter(group =>
       group.permissions.some(
         permission => includesSearch(permission.displayName) || includesSearch(group.displayName),
       ),
     );
+
+    if (matchingGroups.length) {
+      this.setSelectedGroup(matchingGroups[0]);
+      this.disabledSelectAllInAllTabs = false;
+      return matchingGroups;
+    } else {
+      this.disabledSelectAllInAllTabs = true;
+      this.selectedGroupPermissions = [];
+    }
   });
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
@@ -357,11 +369,24 @@ export class PermissionManagementComponent
   }
 
   onClickSelectAll() {
+    // TODO: To be updated for the latest point
+    // const filteredPermissions = getPermissions(this.permissionGroups());
+
+    // if (filteredPermissions) {
+    //   this.permissions = filteredPermissions;
+    // }
+
     this.permissions = this.permissions.map(permission => ({
       ...permission,
       isGranted:
         this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
     }));
+    // .filter(permission => {
+    //   return filteredPermissions.find(
+    //     filteredPermission => filteredPermission.name === permission.name,
+    //   );
+    // });
+
     if (!this.disableSelectAllTab) {
       this.selectThisTab = !this.selectAllTab;
       this.setTabCheckboxState();
@@ -417,11 +442,10 @@ export class PermissionManagementComponent
         const { groups } = permissionRes || {};
 
         this.data = permissionRes;
-
         this.permissionGroupSignal.set(groups);
         this.permissions = getPermissions(groups);
         this.setSelectedGroup(groups[0]);
-        
+
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&

From 1e6096512e0eb83faba5158db1965f85176c8c5c Mon Sep 17 00:00:00 2001
From: sumeyyeKurtulus <sumeyye.kurtulus.business@gmail.com>
Date: Thu, 24 Oct 2024 15:16:02 +0300
Subject: [PATCH 5/5] update: selecting only filtered elements if necessary

---
 .../permission-management.component.ts        | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index 32383e9384..966a39fd0b 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -160,27 +160,28 @@ export class PermissionManagementComponent
 
   permissionGroups = computed(() => {
     const search = this.filter().toLowerCase().trim();
-    const groups = this.permissionGroupSignal();
+    let groups = this.permissionGroupSignal();
 
     if (!search) {
       return groups;
     }
 
     const includesSearch = text => text.toLowerCase().includes(search);
-    const matchingGroups = groups.filter(group =>
+    groups = groups.filter(group =>
       group.permissions.some(
         permission => includesSearch(permission.displayName) || includesSearch(group.displayName),
       ),
     );
 
-    if (matchingGroups.length) {
-      this.setSelectedGroup(matchingGroups[0]);
+    if (groups.length) {
+      this.setSelectedGroup(groups[0]);
       this.disabledSelectAllInAllTabs = false;
-      return matchingGroups;
     } else {
       this.disabledSelectAllInAllTabs = true;
       this.selectedGroupPermissions = [];
     }
+
+    return groups;
   });
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
@@ -369,27 +370,38 @@ export class PermissionManagementComponent
   }
 
   onClickSelectAll() {
-    // TODO: To be updated for the latest point
-    // const filteredPermissions = getPermissions(this.permissionGroups());
-
-    // if (filteredPermissions) {
-    //   this.permissions = filteredPermissions;
-    // }
-
-    this.permissions = this.permissions.map(permission => ({
-      ...permission,
-      isGranted:
-        this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
-    }));
-    // .filter(permission => {
-    //   return filteredPermissions.find(
-    //     filteredPermission => filteredPermission.name === permission.name,
-    //   );
-    // });
+    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);
   }