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

npm/ng-packs/packages/tenant-management/project.json

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

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

@@ -1,4 +1,4 @@
-<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data.items">
+<abp-page [title]="'AbpTenantManagement::Tenants' | abpLocalization" [toolbar]="data().items">
   <div id="wrapper" class="card">
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
@@ -13,8 +13,8 @@
       </div>
 
       <abp-extensible-table
-        [data]="data.items || []"
-        [recordsTotal]="data.totalCount || 0"
+        [data]="data().items"
+        [recordsTotal]="data().totalCount"
         [list]="list"
       ></abp-extensible-table>
     </div>

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

@@ -24,7 +24,8 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.components/extensible';
-import { Component, DOCUMENT, inject, Injector, makeStateKey, OnInit } from '@angular/core';
+import { Component, DOCUMENT, inject, Injector, makeStateKey } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   FormsModule,
   ReactiveFormsModule,
@@ -61,7 +62,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     NgxValidateCoreModule,
   ],
 })
-export class TenantsComponent implements OnInit {
+export class TenantsComponent {
   protected readonly list = inject(ListService<GetTenantsInput>);
   protected readonly confirmationService = inject(ConfirmationService);
   protected readonly service = inject(TenantService);
@@ -70,7 +71,9 @@ export class TenantsComponent implements OnInit {
   private readonly injector = inject(Injector);
   private document = inject(DOCUMENT);
 
-  data: PagedResultDto<TenantDto> = { items: [], totalCount: 0 };
+  readonly data = toSignal(this.list.hookToQuery(query => this.service.getList(query)), {
+    initialValue: { items: [], totalCount: 0 } as PagedResultDto<TenantDto>,
+  });
 
   selected!: TenantDto;
 
@@ -95,10 +98,6 @@ export class TenantsComponent implements OnInit {
     this.visibleFeatures = value;
   };
 
-  ngOnInit() {
-    this.hookToQuery();
-  }
-
   private createTenantForm() {
     const data = new FormPropData(this.injector, this.selected);
     this.tenantForm = generateFormFromProps(data);
@@ -153,14 +152,6 @@ export class TenantsComponent implements OnInit {
       });
   }
 
-  hookToQuery() {
-    this.list
-      .hookToQuery(query => this.service.getList(query))
-      .subscribe(res => {
-        this.data = res;
-      });
-  }
-
   onSharedDatabaseChange(value: boolean) {
     if (!value) {
       setTimeout(() => {