update: some upgrade enhancements for the identity

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -9,7 +9,11 @@
     </div>
   </div>
 
-  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+  <abp-modal
+    [visible]="isModalVisible()"
+    (visibleChange)="isModalVisible.set($event)"
+    [busy]="modalBusy()"
+  >
     <ng-template #abpHeader>
       <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
     </ng-template>
@@ -37,7 +41,7 @@
         inputs: {
           providerName: { value: 'R' },
           providerKey: { value: providerKey },
-          visible: { value: visiblePermissions, twoWay: true },
+          visible: { value: visiblePermissions(), twoWay: true },
           hideBadges: { value: true },
         },
         outputs: { visibleChange: onVisiblePermissionChange },

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Injector } from '@angular/core';
+import { Component, inject, Injector, signal, ChangeDetectionStrategy } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { finalize } from 'rxjs/operators';
@@ -35,6 +35,7 @@ import { PageComponent } from '@abp/ng.components/page';
 import { eIdentityComponents } from '../../enums/components';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
   providers: [
@@ -70,16 +71,20 @@ export class RolesComponent {
     this.list.hookToQuery(query => this.service.getList(query)),
     { initialValue: { items: [], totalCount: 0 } as PagedResultDto<IdentityRoleDto> },
   );
+
   form!: UntypedFormGroup;
   selected?: IdentityRoleDto;
-  isModalVisible!: boolean;
+
-  visiblePermissions = false;
+  readonly isModalVisible = signal(false);
+  readonly visiblePermissions = signal(false);
+
   providerKey?: string;
-  modalBusy = false;
+  readonly modalBusy = signal(false);
+
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
   onVisiblePermissionChange = (event: boolean) => {
-    this.visiblePermissions = event;
+    this.visiblePermissions.set(event);
   };
 
   buildForm() {
@@ -89,7 +94,7 @@ export class RolesComponent {
 
   openModal() {
     this.buildForm();
-    this.isModalVisible = true;
+    this.isModalVisible.set(true);
   }
 
   add() {
@@ -106,16 +111,16 @@ export class RolesComponent {
 
   save() {
     if (!this.form.valid) return;
-    this.modalBusy = true;
+    this.modalBusy.set(true);
 
     const { id } = this.selected || {};
     (id
       ? this.service.update(id, { ...this.selected, ...this.form.value })
       : this.service.create(this.form.value)
     )
-      .pipe(finalize(() => (this.modalBusy = false)))
+      .pipe(finalize(() => this.modalBusy.set(false)))
       .subscribe(() => {
-        this.isModalVisible = false;
+        this.isModalVisible.set(false);
         this.toasterService.success('AbpUi::SavedSuccessfully');
         this.list.get();
       });
@@ -139,7 +144,7 @@ export class RolesComponent {
   openPermissionsModal(providerKey: string) {
     this.providerKey = providerKey;
     setTimeout(() => {
-      this.visiblePermissions = true;
+      this.visiblePermissions.set(true);
     }, 0);
   }
 

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -20,7 +20,11 @@
     </div>
   </div>
 
-  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+  <abp-modal
+    [visible]="isModalVisible()"
+    (visibleChange)="isModalVisible.set($event)"
+    [busy]="modalBusy()"
+  >
     <ng-template #abpHeader>
       <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
     </ng-template>
@@ -44,14 +48,14 @@
                       *abpReplaceableTemplate="{
                         inputs: {
                           checkboxId: { value: 'roles-' + i },
-                          label: { value: roles[i].name },
+                          label: { value: roles()[i].name },
-                          formControl: { value: roleGroup.get(roles[i].name!), twoWay: true },
+                          formControl: { value: roleGroup.get(roles()[i].name!), twoWay: true },
                         },
                         componentKey: inputKey,
                       }"
                       [checkboxId]="'roles-' + i"
-                      [formControlName]="roles[i].name!"
+                      [formControlName]="roles()[i].name!"
-                      [label]="roles[i].name"
+                      [label]="roles()[i].name"
                     />
                   </div>
                 }
@@ -83,7 +87,7 @@
         inputs: {
           providerName: { value: 'U' },
           providerKey: { value: providerKey },
-          visible: { value: visiblePermissions, twoWay: true },
+          visible: { value: visiblePermissions(), twoWay: true },
         },
         outputs: { visibleChange: onVisiblePermissionChange },
         componentKey: permissionManagementKey,

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -36,9 +36,11 @@ import {
   Component,
   inject,
   Injector,
+  signal,
   TemplateRef,
   TrackByFunction,
   viewChild,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
@@ -56,6 +58,7 @@ import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-users',
   templateUrl: './users.component.html',
   providers: [
@@ -109,15 +112,15 @@ export class UsersComponent {
 
   selectedUserRoles?: IdentityRoleDto[];
 
-  roles?: IdentityRoleDto[];
+  readonly roles = signal<IdentityRoleDto[]>([]);
 
-  visiblePermissions = false;
+  readonly visiblePermissions = signal(false);
 
   providerKey?: string;
 
-  isModalVisible?: boolean;
+  readonly isModalVisible = signal(false);
 
-  modalBusy = false;
+  readonly modalBusy = signal(false);
 
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
@@ -128,7 +131,7 @@ export class UsersComponent {
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   onVisiblePermissionChange = (event: boolean) => {
-    this.visiblePermissions = event;
+    this.visiblePermissions.set(event);
   };
 
   get roleGroups(): UntypedFormGroup[] {
@@ -140,12 +143,12 @@ export class UsersComponent {
     this.form = generateFormFromProps(data);
 
     this.service.getAssignableRoles().subscribe(({ items }) => {
-      this.roles = items;
+      this.roles.set(items);
-      if (this.roles) {
+      if (items?.length) {
         this.form.addControl(
           'roleNames',
           this.fb.array(
-            this.roles.map(role =>
+            items.map(role =>
               this.fb.group({
                 [role.name as string]: [
                   this.selected?.id
@@ -163,7 +166,7 @@ export class UsersComponent {
   openModal() {
     this.selectedTab = 'user-info';
     this.buildForm();
-    this.isModalVisible = true;
+    this.isModalVisible.set(true);
   }
 
   add() {
@@ -186,8 +189,8 @@ export class UsersComponent {
   }
 
   save() {
-    if (!this.form.valid || this.modalBusy) return;
+    if (!this.form.valid || this.modalBusy()) return;
-    this.modalBusy = true;
+    this.modalBusy.set(true);
 
     const { roleNames = [] } = this.form.value;
     const mappedRoleNames =
@@ -205,9 +208,9 @@ export class UsersComponent {
         })
       : this.service.create({ ...this.form.value, roleNames: mappedRoleNames })
     )
-      .pipe(finalize(() => (this.modalBusy = false)))
+      .pipe(finalize(() => this.modalBusy.set(false)))
       .subscribe(() => {
-        this.isModalVisible = false;
+        this.isModalVisible.set(false);
         this.toasterService.success('AbpUi::SavedSuccessfully');
         this.list.get();
       });
@@ -238,7 +241,7 @@ export class UsersComponent {
     this.providerKey = providerKey;
     this.entityDisplayName = entityDisplayName;
     setTimeout(() => {
-      this.visiblePermissions = true;
+      this.visiblePermissions.set(true);
     }, 0);
   }
 }