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

npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html

@@ -1,5 +1,10 @@
-@if (form) {
-  <form [formGroup]="form" class="py-2 abp-md-form" (ngSubmit)="submit()" [validateOnSubmit]="true">
+@if (form(); as emailForm) {
+  <form
+    [formGroup]="emailForm"
+    class="py-2 abp-md-form"
+    (ngSubmit)="submit()"
+    [validateOnSubmit]="true"
+  >
     <div class="mb-3 form-group">
       <label class="form-label"
         >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
@@ -49,28 +54,30 @@
     </div>
 
     <div
-      [@collapse]="{
-        value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
-        params: { time: '200ms', easing: 'linear' },
-      }"
+      class="abp-collapse-y"
+      [class.abp-collapse-y-collapsed]="emailForm.get('smtpUseDefaultCredentials')?.value"
     >
-      <div class="mb-3 form-group">
-        <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
-        <input type="text" class="form-control" formControlName="smtpDomain" />
-      </div>
+      <div class="abp-collapse-y-inner">
+        <div class="mb-3 form-group">
+          <label class="form-label">{{
+            'AbpSettingManagement::SmtpDomain' | abpLocalization
+          }}</label>
+          <input type="text" class="form-control" formControlName="smtpDomain" />
+        </div>
 
-      <div class="mb-3 form-group">
-        <label class="form-label">{{
-          'AbpSettingManagement::SmtpUserName' | abpLocalization
-        }}</label>
-        <input type="text" class="form-control" formControlName="smtpUserName" />
-      </div>
+        <div class="mb-3 form-group">
+          <label class="form-label">{{
+            'AbpSettingManagement::SmtpUserName' | abpLocalization
+          }}</label>
+          <input type="text" class="form-control" formControlName="smtpUserName" />
+        </div>
 
-      <div class="form-group">
-        <label class="form-label">{{
-          'AbpSettingManagement::SmtpPassword' | abpLocalization
-        }}</label>
-        <input type="password" class="form-control" formControlName="smtpPassword" />
+        <div class="form-group">
+          <label class="form-label">{{
+            'AbpSettingManagement::SmtpPassword' | abpLocalization
+          }}</label>
+          <input type="password" class="form-control" formControlName="smtpPassword" />
+        </div>
       </div>
     </div>
 

npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.ts

@@ -1,12 +1,11 @@
 import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
 import {
   ButtonComponent,
-  collapse,
   ModalCloseDirective,
   ModalComponent,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
   ReactiveFormsModule,
@@ -22,17 +21,15 @@ import {
   ConfigStateService,
   LocalizationPipe,
   LocalizationService,
-  PermissionDirective
+  PermissionDirective,
 } from '@abp/ng.core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
-
 const { required, email } = Validators;
 
 @Component({
   selector: 'abp-email-setting-group',
   templateUrl: 'email-setting-group.component.html',
-  animations: [collapse],
   imports: [
     ReactiveFormsModule,
     LocalizationPipe,
@@ -40,8 +37,8 @@ const { required, email } = Validators;
     ModalComponent,
     ModalCloseDirective,
     NgxValidateCoreModule,
-    PermissionDirective
-],
+    PermissionDirective,
+  ],
 })
 export class EmailSettingGroupComponent implements OnInit {
   private emailSettingsService = inject(EmailSettingsService);
@@ -54,8 +51,10 @@ export class EmailSettingGroupComponent implements OnInit {
     this.configStateSevice.getDeep$(['currentUser', 'email']),
   );
 
-  form!: UntypedFormGroup;
-  emailTestForm: UntypedFormGroup;
+  readonly form = signal<UntypedFormGroup | undefined>(undefined);
+  readonly loading = signal(true);
+
+  emailTestForm!: UntypedFormGroup;
   saving = false;
   emailingPolicy = SettingManagementPolicyNames.Emailing;
   isEmailTestModalOpen = false;
@@ -66,13 +65,20 @@ export class EmailSettingGroupComponent implements OnInit {
   }
 
   private getData() {
-    this.emailSettingsService.get().subscribe(res => {
-      this.buildForm(res);
+    this.loading.set(true);
+    this.emailSettingsService.get().subscribe({
+      next: res => {
+        this.form.set(this.buildForm(res));
+        this.loading.set(false);
+      },
+      error: () => {
+        this.loading.set(false);
+      },
     });
   }
 
   private buildForm(emailSettings: EmailSettingsDto) {
-    this.form = this.fb.group({
+    return this.fb.group({
       defaultFromDisplayName: [emailSettings.defaultFromDisplayName, [Validators.required]],
       defaultFromAddress: [emailSettings.defaultFromAddress, [Validators.required]],
       smtpHost: [emailSettings.smtpHost],
@@ -86,11 +92,12 @@ export class EmailSettingGroupComponent implements OnInit {
   }
 
   submit() {
-    if (this.saving || this.form.invalid) return;
+    const form = this.form();
+    if (!form || this.saving || form.invalid) return;
 
     this.saving = true;
     this.emailSettingsService
-      .update(this.form.value)
+      .update(form.value)
       .pipe(finalize(() => (this.saving = false)))
       .subscribe(() => {
         this.toasterService.success('AbpSettingManagement::SavedSuccessfully');
@@ -104,7 +111,7 @@ export class EmailSettingGroupComponent implements OnInit {
   }
 
   buildEmailTestForm() {
-    const { defaultFromAddress } = this.form.value || {};
+    const { defaultFromAddress } = this.form()?.value || {};
     const defaultSubject = this.localizationService.instant(
       'AbpSettingManagement::TestEmailSubject',
       ...[Math.floor(Math.random() * 9999).toString()],
@@ -124,7 +131,7 @@ export class EmailSettingGroupComponent implements OnInit {
       return;
     }
 
-    this.emailSettingsService.sendTestEmail(this.emailTestForm.value).subscribe(res => {
+    this.emailSettingsService.sendTestEmail(this.emailTestForm.value).subscribe(() => {
       this.toasterService.success('AbpSettingManagement::SentSuccessfully');
       this.isEmailTestModalOpen = false;
     });

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

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

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

@@ -5,31 +5,52 @@
         @if (settings.length) {
           <div class="row" ngTabs>
             <div class="col-12 col-md-3 mb-2 mb-md-0">
-              <div class="nav flex-column nav-pills" id="nav-tab" ngTabList orientation="vertical"
-                [selectedTab]="selected?.name">
-                <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-                  <button ngTab #tab="ngTab" [value]="setting.name" (click)="selected = setting"
-                    class="nav-link text-start" [class.active]="tab.selected()" *abpPermission="setting.requiredPolicy">
+              <div
+                class="nav flex-column nav-pills"
+                id="nav-tab"
+                ngTabList
+                orientation="vertical"
+                [selectedTab]="selected?.name"
+              >
+                <ng-container *abpFor="let setting of settings">
+                  <button
+                    ngTab
+                    #tab="ngTab"
+                    [value]="setting.name"
+                    (click)="selected = setting"
+                    class="nav-link text-start"
+                    [class.active]="tab.selected()"
+                    *abpPermission="setting.requiredPolicy"
+                  >
                     {{ setting.name | abpLocalization }}
                   </button>
                 </ng-container>
               </div>
             </div>
             <div class="col-12 col-md-9">
-              <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-                <div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
-                  <ng-container *ngComponentOutlet="setting.component" />
+              <ng-container *abpFor="let setting of settings">
+                <div
+                  ngTabPanel
+                  [value]="setting.name"
+                  class="tab-pane"
+                  *abpPermission="setting.requiredPolicy"
+                >
+                  <ng-template ngTabContent>
+                    <ng-container *ngComponentOutlet="setting.component" />
+                  </ng-template>
                 </div>
               </ng-container>
             </div>
           </div>
         } @else {
           <div class="text-center text-muted py-5">
-            <i class="bi bi-gear-fill" style="font-size: 3rem; opacity: 0.4;" aria-hidden="true"></i>
-            <p class="mt-3 mb-0">{{ 'AbpSettingManagement::NoSettingsAvailable' | abpLocalization }}</p>
+            <i class="bi bi-gear-fill" style="font-size: 3rem; opacity: 0.4" aria-hidden="true"></i>
+            <p class="mt-3 mb-0">
+              {{ 'AbpSettingManagement::NoSettingsAvailable' | abpLocalization }}
+            </p>
           </div>
         }
       </div>
     </div>
   </div>
-</abp-page>
+</abp-page>

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

@@ -1,20 +1,33 @@
 import { ABP, ForDirective, LocalizationPipe, PermissionDirective } from '@abp/ng.core';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
-import { Component, inject, OnDestroy, OnInit, TrackByFunction } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { NgComponentOutlet } from '@angular/common';
 import { PageComponent } from '@abp/ng.components/page';
-import { Tab, Tabs, TabList, TabPanel } from '@angular/aria/tabs';
+import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
 
 @Component({
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
-  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective, Tabs, TabList, Tab, TabPanel],
-  styles: [`
-    :host [ngTabPanel][inert] {
-      display: none;
-    }
-  `],
+  imports: [
+    NgComponentOutlet,
+    PageComponent,
+    LocalizationPipe,
+    PermissionDirective,
+    ForDirective,
+    Tabs,
+    TabList,
+    Tab,
+    TabPanel,
+    TabContent,
+  ],
+  styles: [
+    `
+      :host [ngTabPanel][inert] {
+        display: none;
+      }
+    `,
+  ],
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
   private settingTabsService = inject(SettingTabsService);
@@ -24,8 +37,6 @@ export class SettingManagementComponent implements OnDestroy, OnInit {
 
   selected!: ABP.Tab;
 
-  trackByFn: TrackByFunction<ABP.Tab> = (_, item) => item.name;
-
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }