fix a bug on permissions modal

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -25,7 +25,6 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
       sendNullsAsQueryParam: false,
       skipGetAppConfiguration: false,
     }),
-    NgxsModule.forRoot(),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot(),
     IdentityConfigModule.forRoot(),

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

@@ -1,8 +1,9 @@
-<abp-modal [(visible)]="visible" (init)="initModal()" [busy]="modalBusy">
-  <ng-container *ngIf="{ entityName: entityName$ | async } as data">
+<abp-modal [(visible)]="visible" [busy]="modalBusy">
+  <ng-container *ngIf="data.entityDisplayName">
     <ng-template #abpHeader>
       <h4>
-        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}
+        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
+        {{ data.entityDisplayName }}
       </h4>
     </ng-template>
     <ng-template #abpBody>
@@ -24,16 +25,16 @@
       <div class="row">
         <div class="overflow-scroll col-md-4">
           <ul class="nav nav-pills flex-column">
-            <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
+            <li *ngFor="let group of data.groups; trackBy: trackByFn" class="nav-item">
               <a
-                *ngIf="{ assignedCount: getAssignedCount(group.name) } as data"
+                *ngIf="{ assignedCount: getAssignedCount(group.name) } as count"
                 class="nav-link pointer"
                 [class.active]="selectedGroup?.name === group?.name"
                 (click)="onChangeGroup(group)"
               >
-                <div [class.font-weight-bold]="data.assignedCount">
+                <div [class.font-weight-bold]="count.assignedCount">
                   {{ group?.displayName }}
-                  <span>({{ data.assignedCount }})</span>
+                  <span>({{ count.assignedCount }})</span>
                 </div>
               </a>
             </li>
@@ -58,11 +59,7 @@
             </div>
             <hr class="mb-3" />
             <div
-              *ngFor="
-                let permission of selectedGroupPermissions$ | async;
-                let i = index;
-                trackBy: trackByFn
-              "
+              *ngFor="let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn"
               [ngStyle]="permission.style"
               class="custom-checkbox custom-control mb-2"
             >

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

@@ -1,9 +1,8 @@
 import { ConfigStateService, CurrentUserDto } from '@abp/ng.core';
 import { LocaleDirection } from '@abp/ng.theme.shared';
 import { Component, EventEmitter, Input, Output, TrackByFunction } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { finalize, map, pluck, switchMap, take, tap } from 'rxjs/operators';
-import { GetPermissions, UpdatePermissions } from '../actions/permission-management.actions';
+import { of } from 'rxjs';
+import { finalize, switchMap, tap } from 'rxjs/operators';
 import { PermissionManagement } from '../models/permission-management';
 import {
   GetPermissionListResultDto,
@@ -12,7 +11,7 @@ import {
   ProviderInfoDto,
   UpdatePermissionDto,
 } from '../proxy/models';
-import { PermissionManagementState } from '../states/permission-management.state';
+import { PermissionsService } from '../proxy/permissions.service';
 
 type PermissionWithStyle = PermissionGrantInfoDto & {
   style: string;
@@ -59,6 +58,7 @@ export class PermissionManagementComponent
       this.openModal().subscribe(() => {
         this._visible = true;
         this.visibleChange.emit(true);
+        this.initModal();
       });
     } else {
       this.selectedGroup = null;
@@ -69,11 +69,7 @@ export class PermissionManagementComponent
 
   @Output() readonly visibleChange = new EventEmitter<boolean>();
 
-  @Select(PermissionManagementState.getPermissionGroups)
-  groups$: Observable<PermissionGroupDto[]>;
-
-  @Select(PermissionManagementState.getEntityDisplayName)
-  entityName$: Observable<string>;
+  data: GetPermissionListResultDto = { groups: [], entityDisplayName: null };
 
   selectedGroup: PermissionGroupDto;
 
@@ -87,31 +83,28 @@ export class PermissionManagementComponent
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
-  get selectedGroupPermissions$(): Observable<PermissionWithStyle[]> {
+  get selectedGroupPermissions(): PermissionWithStyle[] {
+    if (!this.selectedGroup) return [];
+
     const margin = `margin-${
       (document.body.dir as LocaleDirection) === 'rtl' ? 'right' : 'left'
     }.px`;
 
-    return this.groups$.pipe(
-      map(groups =>
-        this.selectedGroup
-          ? groups.find(group => group.name === this.selectedGroup.name).permissions
-          : [],
-      ),
-      map<PermissionGrantInfoDto[], PermissionWithStyle[]>(permissions =>
-        permissions.map(
-          permission =>
-            ({
-              ...permission,
-              style: { [margin]: findMargin(permissions, permission) },
-              isGranted: this.permissions.find(per => per.name === permission.name).isGranted,
-            } as any as PermissionWithStyle),
-        ),
-      ),
+    const permissions = this.data.groups.find(
+      group => group.name === this.selectedGroup.name,
+    ).permissions;
+
+    return permissions.map(
+      permission =>
+        ({
+          ...permission,
+          style: { [margin]: findMargin(permissions, permission) },
+          isGranted: this.permissions.find(per => per.name === permission.name).isGranted,
+        } as unknown as PermissionWithStyle),
     );
   }
 
-  constructor(protected store: Store, protected configState: ConfigStateService) {}
+  constructor(protected service: PermissionsService, protected configState: ConfigStateService) {}
 
   getChecked(name: string) {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
@@ -150,20 +143,18 @@ export class PermissionManagementComponent
   }
 
   setTabCheckboxState() {
-    this.selectedGroupPermissions$.pipe(take(1)).subscribe(permissions => {
-      const selectedPermissions = permissions.filter(per => per.isGranted);
-      const element = document.querySelector('#select-all-in-this-tabs') as any;
-
-      if (selectedPermissions.length === permissions.length) {
-        element.indeterminate = false;
-        this.selectThisTab = true;
-      } else if (selectedPermissions.length === 0) {
-        element.indeterminate = false;
-        this.selectThisTab = false;
-      } else {
-        element.indeterminate = true;
-      }
-    });
+    const selectedPermissions = this.selectedGroupPermissions.filter(per => per.isGranted);
+    const element = document.querySelector('#select-all-in-this-tabs') as any;
+
+    if (selectedPermissions.length === this.selectedGroupPermissions.length) {
+      element.indeterminate = false;
+      this.selectThisTab = true;
+    } else if (selectedPermissions.length === 0) {
+      element.indeterminate = false;
+      this.selectThisTab = false;
+    } else {
+      element.indeterminate = true;
+    }
   }
 
   setGrantCheckboxState() {
@@ -182,19 +173,17 @@ export class PermissionManagementComponent
   }
 
   onClickSelectThisTab() {
-    this.selectedGroupPermissions$.pipe(take(1)).subscribe(permissions => {
-      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.selectThisTab },
-          ...this.permissions.slice(index + 1),
-        ];
-      });
+    this.selectedGroupPermissions.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.selectThisTab },
+        ...this.permissions.slice(index + 1),
+      ];
     });
 
     this.setGrantCheckboxState();
@@ -216,9 +205,7 @@ export class PermissionManagementComponent
   }
 
   submit() {
-    const unchangedPermissions = getPermissions(
-      this.store.selectSnapshot(PermissionManagementState.getPermissionGroups),
-    );
+    const unchangedPermissions = getPermissions(this.data.groups);
 
     const changedPermissions: UpdatePermissionDto[] = this.permissions
       .filter(per =>
@@ -235,14 +222,8 @@ export class PermissionManagementComponent
     }
 
     this.modalBusy = true;
-    this.store
-      .dispatch(
-        new UpdatePermissions({
-          providerKey: this.providerKey,
-          providerName: this.providerName,
-          permissions: changedPermissions,
-        }),
-      )
+    this.service
+      .update(this.providerName, this.providerKey, { permissions: changedPermissions })
       .pipe(
         switchMap(() =>
           this.shouldFetchAppConfig() ? this.configState.refreshAppState() : of(null),
@@ -259,20 +240,13 @@ export class PermissionManagementComponent
       throw new Error('Provider Key and Provider Name are required.');
     }
 
-    return this.store
-      .dispatch(
-        new GetPermissions({
-          providerKey: this.providerKey,
-          providerName: this.providerName,
-        }),
-      )
-      .pipe(
-        pluck('PermissionManagementState', 'permissionRes'),
-        tap((permissionRes: GetPermissionListResultDto) => {
-          this.selectedGroup = permissionRes.groups[0];
-          this.permissions = getPermissions(permissionRes.groups);
-        }),
-      );
+    return this.service.get(this.providerName, this.providerKey).pipe(
+      tap((permissionRes: GetPermissionListResultDto) => {
+        this.data = permissionRes;
+        this.selectedGroup = permissionRes.groups[0];
+        this.permissions = getPermissions(permissionRes.groups);
+      }),
+    );
   }
 
   initModal() {