update: add search validation and filter disposal

abpframework · Oct 23, 2024 · 829d6fe · 829d6fe
1 parent fb269e2
commit 829d6fe
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 40 deletions.
diff --git a/...ks/packages/permission-management/src/lib/components/permission-management.component.html b/...ks/packages/permission-management/src/lib/components/permission-management.component.html
@@ -70,45 +70,47 @@ <h4>
 
           <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/...acks/packages/permission-management/src/lib/components/permission-management.component.ts b/...acks/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 &&