From 062f1dedee65aaa019975f44aaee169c22bdeaf6 Mon Sep 17 00:00:00 2001
From: muhammedaltug <muhammetaltug@gmail.com>
Date: Tue, 2 Nov 2021 16:05:15 +0300
Subject: [PATCH] fix permission management querySelector null issue

---
 .../permission-management.component.html      |  2 ++
 .../permission-management.component.ts        | 33 +++++++++++++++----
 2 files changed, 29 insertions(+), 6 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 773bdaaead..5e37a7ba97 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
@@ -9,6 +9,7 @@
     <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"
@@ -46,6 +47,7 @@
           <div class="ps-1 pt-1">
             <div class="form-check mb-2">
               <input
+                #selectAllInThisTabsRef
                 type="checkbox"
                 id="select-all-in-this-tabs"
                 name="select-all-in-this-tabs"
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 c6dd19f795..20aeef530c 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
@@ -8,9 +8,18 @@ import {
   UpdatePermissionDto,
 } from '@abp/ng.permission-management/proxy';
 import { LocaleDirection } from '@abp/ng.theme.shared';
-import { Component, EventEmitter, Input, Output, TrackByFunction } from '@angular/core';
-import { of } from 'rxjs';
-import { finalize, switchMap, tap } from 'rxjs/operators';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  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';
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
@@ -58,7 +67,11 @@ export class PermissionManagementComponent
       this.openModal().subscribe(() => {
         this._visible = true;
         this.visibleChange.emit(true);
-        this.initModal();
+        concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
+          .pipe(take(1))
+          .subscribe(() => {
+            this.initModal();
+          });
       });
     } else {
       this.selectedGroup = null;
@@ -69,6 +82,11 @@ export class PermissionManagementComponent
 
   @Output() readonly visibleChange = new EventEmitter<boolean>();
 
+  @ViewChildren('selectAllInThisTabsRef')
+  selectAllInThisTabsRef: QueryList<ElementRef<HTMLInputElement>>;
+  @ViewChildren('selectAllInAllTabsRef')
+  selectAllInAllTabsRef: QueryList<ElementRef<HTMLInputElement>>;
+
   data: GetPermissionListResultDto = { groups: [], entityDisplayName: null };
 
   selectedGroup: PermissionGroupDto;
@@ -250,8 +268,11 @@ export class PermissionManagementComponent
   }
 
   initModal() {
-    this.setTabCheckboxState();
-    this.setGrantCheckboxState();
+    // TODO: Refactor
+    setTimeout(() => {
+      this.setTabCheckboxState();
+      this.setGrantCheckboxState();
+    });
   }
 
   getAssignedCount(groupName: string) {