update: identity package for the latest upgrade (state management and html properties)

npm/ng-packs/packages/identity/project.json

@@ -31,7 +31,7 @@
       "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
-        "reportsDirectory": "../../coverage/packages/identity"
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/identity"
       }
     }
   }

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

@@ -1,11 +1,11 @@
-<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
+<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data().items">
   <div id="identity-roles-wrapper" class="card">
     <div class="card-body">
       <abp-extensible-table
-        [data]="data.items"
-        [recordsTotal]="data.totalCount"
+        [data]="data().items"
+        [recordsTotal]="data().totalCount"
         [list]="list"
-      ></abp-extensible-table>
+      />
     </div>
   </div>
 
@@ -16,7 +16,7 @@
 
     <ng-template #abpBody>
       <form [formGroup]="form" (ngSubmit)="save()" [validateOnSubmit]="true">
-        <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+        <abp-extensible-form [selectedRecord]="selected" />
       </form>
     </ng-template>
 
@@ -26,26 +26,25 @@
       </button>
       <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
         'AbpIdentity::Save' | abpLocalization
-        }}</abp-button>
+      }}</abp-button>
     </ng-template>
   </abp-modal>
 
   <abp-permission-management
     #abpPermissionManagement="abpPermissionManagement"
     *abpReplaceableTemplate="
-    {
-      inputs: {
-        providerName: { value: 'R' },
-        providerKey: { value: providerKey },
-        visible: { value: visiblePermissions, twoWay: true },
-        hideBadges: { value: true }
-      },
-      outputs: { visibleChange: onVisiblePermissionChange },
-      componentKey: permissionManagementKey
-    };
-    let init = initTemplate
-  "
+      {
+        inputs: {
+          providerName: { value: 'R' },
+          providerKey: { value: providerKey },
+          visible: { value: visiblePermissions, twoWay: true },
+          hideBadges: { value: true },
+        },
+        outputs: { visibleChange: onVisiblePermissionChange },
+        componentKey: permissionManagementKey,
+      };
+      let init = initTemplate
+    "
     (abpInit)="init(abpPermissionManagement)"
-  >
-  </abp-permission-management>
+  />
 </abp-page>

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

@@ -1,10 +1,15 @@
+import { Component, inject, Injector } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { finalize } from 'rxjs/operators';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 import {
   InitDirective,
   ListService,
   LocalizationPipe,
   PagedAndSortedResultRequestDto,
   PagedResultDto,
-  ReplaceableTemplateDirective
+  ReplaceableTemplateDirective,
 } from '@abp/ng.core';
 import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
 import {
@@ -26,12 +31,8 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
-import { Component, inject, Injector, OnInit } from '@angular/core';
-import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
-import { finalize } from 'rxjs/operators';
-import { eIdentityComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { eIdentityComponents } from '../../enums/components';
 
 @Component({
   selector: 'abp-roles',
@@ -58,14 +59,17 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     InitDirective,
   ],
 })
-export class RolesComponent implements OnInit {
+export class RolesComponent {
   protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>);
   protected readonly confirmationService = inject(ConfirmationService);
   protected readonly toasterService = inject(ToasterService);
   private readonly injector = inject(Injector);
   protected readonly service = inject(IdentityRoleService);
 
-  data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
+  readonly data = toSignal(
+    this.list.hookToQuery(query => this.service.getList(query)),
+    { initialValue: { items: [], totalCount: 0 } as PagedResultDto<IdentityRoleDto> },
+  );
   form!: UntypedFormGroup;
   selected?: IdentityRoleDto;
   isModalVisible!: boolean;
@@ -78,10 +82,6 @@ export class RolesComponent implements OnInit {
     this.visiblePermissions = event;
   };
 
-  ngOnInit() {
-    this.hookToQuery();
-  }
-
   buildForm() {
     const data = new FormPropData(this.injector, this.selected);
     this.form = generateFormFromProps(data);
@@ -128,20 +128,14 @@ export class RolesComponent implements OnInit {
       })
       .subscribe((status: Confirmation.Status) => {
         if (status === Confirmation.Status.confirm) {
-          this.toasterService.success('AbpUi::DeletedSuccessfully');
-          this.service.delete(id).subscribe(() => this.list.get());
+          this.service.delete(id).subscribe(() => {
+            this.toasterService.success('AbpUi::DeletedSuccessfully');
+            this.list.get();
+          });
         }
       });
   }
 
-  private hookToQuery() {
-    this.list
-      .hookToQuery(query => this.service.getList(query))
-      .subscribe(res => {
-        this.data = res;
-      });
-  }
-
   openPermissionsModal(providerKey: string) {
     this.providerKey = providerKey;
     setTimeout(() => {

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

@@ -1,4 +1,4 @@
-<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
+<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data().items">
   <div id="identity-roles-wrapper" class="card">
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
@@ -13,10 +13,10 @@
       </div>
 
       <abp-extensible-table
-        [data]="data.items"
-        [recordsTotal]="data.totalCount"
+        [data]="data().items"
+        [recordsTotal]="data().totalCount"
         [list]="list"
-      ></abp-extensible-table>
+      />
     </div>
   </div>
 
@@ -32,28 +32,27 @@
             <li ngbNavItem="user-info">
               <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
               <ng-template ngbNavContent>
-                <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+                <abp-extensible-form [selectedRecord]="selected" />
               </ng-template>
             </li>
             <li ngbNavItem="roles">
               <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
               <ng-template ngbNavContent>
                 @for (roleGroup of roleGroups; track $index; let i = $index) {
-                  <div class="form-check mb-2">
+                  <div class="form-check mb-2" [formGroup]="roleGroup">
                     <abp-checkbox
                       *abpReplaceableTemplate="{
                         inputs: {
-                          checkboxId: 'roles-' + i,
-                          label: roles[i].name,
-                          formControl: roleGroup.controls[roles[i].name]
+                          checkboxId: { value: 'roles-' + i },
+                          label: { value: roles[i].name },
+                          formControl: { value: roleGroup.get(roles[i].name!), twoWay: true },
                         },
-                        componentKey: inputKey
+                        componentKey: inputKey,
                       }"
                       [checkboxId]="'roles-' + i"
-                      [formControl]="roleGroup.controls[roles[i].name]"
+                      [formControlName]="roles[i].name!"
                       [label]="roles[i].name"
-                    >
-                    </abp-checkbox>
+                    />
                   </div>
                 }
               </ng-template>
@@ -84,15 +83,14 @@
         inputs: {
           providerName: { value: 'U' },
           providerKey: { value: providerKey },
-          visible: { value: visiblePermissions, twoWay: true }
+          visible: { value: visiblePermissions, twoWay: true },
         },
         outputs: { visibleChange: onVisiblePermissionChange },
-        componentKey: permissionManagementKey
+        componentKey: permissionManagementKey,
       };
       let init = initTemplate
     "
     [entityDisplayName]="entityDisplayName"
     (abpInit)="init(abpPermissionManagement)"
-  >
-  </abp-permission-management>
+  />
 </abp-page>

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

@@ -36,11 +36,11 @@ import {
   Component,
   inject,
   Injector,
-  OnInit,
   TemplateRef,
   TrackByFunction,
-  viewChild
+  viewChild,
 } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   AbstractControl,
   FormsModule,
@@ -84,7 +84,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     InitDirective,
   ],
 })
-export class UsersComponent implements OnInit {
+export class UsersComponent {
   protected readonly list = inject(ListService<GetIdentityUsersInput>);
   protected readonly confirmationService = inject(ConfirmationService);
   protected readonly service = inject(IdentityUserService);
@@ -92,7 +92,12 @@ export class UsersComponent implements OnInit {
   private readonly fb = inject(UntypedFormBuilder);
   private readonly injector = inject(Injector);
 
-  data: PagedResultDto<IdentityUserDto> = { items: [], totalCount: 0 };
+  readonly data = toSignal(
+    this.list.hookToQuery(query => this.service.getList(query)),
+    {
+      initialValue: { items: [], totalCount: 0 } as PagedResultDto<IdentityUserDto>,
+    },
+  );
 
   readonly modalContent = viewChild.required<TemplateRef<any>>('modalContent');
 
@@ -130,10 +135,6 @@ export class UsersComponent implements OnInit {
     return ((this.form.get('roleNames') as UntypedFormArray)?.controls as UntypedFormGroup[]) || [];
   }
 
-  ngOnInit() {
-    this.hookToQuery();
-  }
-
   buildForm() {
     const data = new FormPropData(this.injector, this.selected);
     this.form = generateFormFromProps(data);
@@ -233,14 +234,6 @@ export class UsersComponent implements OnInit {
     this.list.sortOrder = dir;
   }
 
-  private hookToQuery() {
-    this.list
-      .hookToQuery(query => this.service.getList(query))
-      .subscribe(res => {
-        this.data = res;
-      });
-  }
-
   openPermissionsModal(providerKey: string, entityDisplayName?: string) {
     this.providerKey = providerKey;
     this.entityDisplayName = entityDisplayName;