Merge pull request #7869 from abpframework/feat/7680

Angular UI: Created "Emailing" settings tab

npm/ng-packs/apps/dev-app/src/environments/environment.ts

@@ -38,5 +38,9 @@ export const environment = {
       url: 'https://localhost:44305',
       rootNamespace: 'Volo.Abp',
     },
+    AbpSettingManagement: {
+      url: 'https://localhost:44305',
+      rootNamespace: 'Volo.Abp.SettingManagement',
+    },
   },
 } as Environment;

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

@@ -0,0 +1,68 @@
+<h2>{{ 'AbpSettingManagement::Menu:Emailing' | abpLocalization }}</h2>
+
+<hr class="my-3" />
+
+<form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="defaultFromAddress" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::SmtpHost' | abpLocalization }}</label>
+    <input type="text" class="form-control" formControlName="smtpHost" />
+  </div>
+  <div class="form-group">
+    <label>{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}</label>
+    <input type="number" class="form-control" formControlName="smtpPort" />
+  </div>
+
+  <div class="custom-checkbox custom-control mb-2">
+    <input
+      type="checkbox"
+      id="smtp-enable-ssl"
+      class="custom-control-input"
+      formControlName="smtpEnableSsl"
+    />
+    <label class="custom-control-label" for="smtp-enable-ssl">{{
+      'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
+    }}</label>
+  </div>
+  <div class="custom-checkbox custom-control mb-2">
+    <input
+      type="checkbox"
+      id="smtp-use-default-credentials"
+      class="custom-control-input"
+      formControlName="smtpUseDefaultCredentials"
+    />
+    <label class="custom-control-label" for="smtp-use-default-credentials">{{
+      'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
+    }}</label>
+  </div>
+
+  <div [@collapse]="form.get('smtpUseDefaultCredentials').value ? 'collapsed' : 'expanded'">
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpDomain" />
+    </div>
+
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpUserName' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpUserName" />
+    </div>
+
+    <div class="form-group">
+      <label>{{ 'AbpSettingManagement::SmtpPassword' | abpLocalization }}</label>
+      <input type="text" class="form-control" formControlName="smtpPassword" />
+    </div>
+  </div>
+
+  <hr />
+
+  <button type="submit" class="btn btn-primary">
+    {{ 'AbpSettingManagement::Save' | abpLocalization }}
+  </button>
+</form>

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

@@ -0,0 +1,60 @@
+import { collapse, ToasterService } from '@abp/ng.theme.shared';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { finalize } from 'rxjs/operators';
+import { EmailSettingsService } from '../../proxy/email-settings.service';
+import { EmailSettingsDto } from '../../proxy/models';
+
+@Component({
+  selector: 'abp-email-setting-group',
+  templateUrl: 'email-setting-group.component.html',
+  animations: [collapse],
+})
+export class EmailSettingGroupComponent implements OnInit {
+  form: FormGroup;
+
+  saving = false;
+
+  constructor(
+    private emailSettingsService: EmailSettingsService,
+    private fb: FormBuilder,
+    private toasterService: ToasterService,
+  ) {}
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  private getData() {
+    this.emailSettingsService.get().subscribe(res => {
+      this.buildForm(res);
+    });
+  }
+
+  private buildForm(emailSettings: EmailSettingsDto) {
+    this.form = this.fb.group({
+      defaultFromDisplayName: [emailSettings.defaultFromDisplayName, [Validators.required]],
+      defaultFromAddress: [emailSettings.defaultFromAddress, [Validators.required]],
+      smtpHost: [emailSettings.smtpHost],
+      smtpPort: [emailSettings.smtpPort, [Validators.required]],
+      smtpEnableSsl: [emailSettings.smtpEnableSsl],
+      smtpUseDefaultCredentials: [emailSettings.smtpUseDefaultCredentials],
+      smtpDomain: [emailSettings.smtpDomain],
+      smtpUserName: [emailSettings.smtpUserName],
+      smtpPassword: [emailSettings.smtpPassword],
+    });
+  }
+
+  submit() {
+    if (this.saving || this.form.invalid) return;
+
+    this.saving = true;
+    this.emailSettingsService
+      .update(this.form.value)
+      .pipe(finalize(() => (this.saving = false)))
+      .subscribe(() => {
+        this.toasterService.success('AbpSettingManagement::SuccessfullySaved');
+        this.getData();
+      });
+  }
+}

npm/ng-packs/packages/setting-management/config/src/enums/index.ts

@@ -1 +1,2 @@
 export * from './route-names';
+export * from './setting-tab-names';

npm/ng-packs/packages/setting-management/config/src/enums/setting-tab-names.ts

@@ -0,0 +1,3 @@
+export const enum eSettingManamagementSettingTabNames {
+  EmailSettingGroup = 'AbpSettingManagement::Menu:Emailing',
+}

npm/ng-packs/packages/setting-management/config/src/providers/index.ts

@@ -1 +1,2 @@
 export * from './route.provider';
+export * from './setting-tab.provider';

npm/ng-packs/packages/setting-management/config/src/providers/setting-tab.provider.ts

@@ -0,0 +1,26 @@
+import { SettingTabsService } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+import { EmailSettingGroupComponent } from '../components/email-setting-group/email-setting-group.component';
+import { eSettingManamagementSettingTabNames } from '../enums/setting-tab-names';
+
+export const SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureSettingTabs,
+    deps: [SettingTabsService],
+    multi: true,
+  },
+];
+
+export function configureSettingTabs(settingTabs: SettingTabsService) {
+  return () => {
+    settingTabs.add([
+      {
+        name: eSettingManamagementSettingTabNames.EmailSettingGroup,
+        order: 1,
+        requiredPolicy: 'SettingManagement.Emailing',
+        component: EmailSettingGroupComponent,
+      },
+    ]);
+  };
+}

npm/ng-packs/packages/setting-management/config/src/proxy/README.md

@@ -0,0 +1,17 @@
+# Proxy Generation Output
+
+This directory includes the output of the latest proxy generation.
+The files and folders in it will be overwritten when proxy generation is run again.
+Therefore, please do not place your own content in this folder.
+
+In addition, `generate-proxy.json` works like a lock file.
+It includes information used by the proxy generator, so please do not delete or modify it.
+
+Finally, the name of the files and folders should not be changed for two reasons:
+- Proxy generator will keep creating them at those paths and you will have multiple copies of the same content.
+- ABP Suite generates files which include imports from this folder.
+
+> **Important Notice:** If you are building a module and are planning to publish to npm,
+> some of the generated proxies are likely to be exported from public-api.ts file. In such a case,
+> please make sure you export files directly and not from barrel exports. In other words,
+> do not include index.ts exports in your public-api.ts exports.

npm/ng-packs/packages/setting-management/config/src/proxy/email-settings.service.ts

@@ -0,0 +1,27 @@
+import type { EmailSettingsDto, UpdateEmailSettingsDto } from './models';
+import { RestService } from '@abp/ng.core';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EmailSettingsService {
+  apiName = 'SettingManagement';
+
+  get = () =>
+    this.restService.request<any, EmailSettingsDto>({
+      method: 'GET',
+      url: '/api/setting-management/emailing',
+    },
+    { apiName: this.apiName });
+
+  update = (input: UpdateEmailSettingsDto) =>
+    this.restService.request<any, void>({
+      method: 'POST',
+      url: '/api/setting-management/emailing',
+      body: input,
+    },
+    { apiName: this.apiName });
+
+  constructor(private restService: RestService) {}
+}

npm/ng-packs/packages/setting-management/config/src/proxy/index.ts

@@ -0,0 +1,2 @@
+export * from './email-settings.service';
+export * from './models';

npm/ng-packs/packages/setting-management/config/src/proxy/models.ts

@@ -0,0 +1,24 @@
+
+export interface EmailSettingsDto {
+  smtpHost?: string;
+  smtpPort: number;
+  smtpUserName?: string;
+  smtpPassword?: string;
+  smtpDomain?: string;
+  smtpEnableSsl: boolean;
+  smtpUseDefaultCredentials: boolean;
+  defaultFromAddress?: string;
+  defaultFromDisplayName?: string;
+}
+
+export interface UpdateEmailSettingsDto {
+  smtpHost?: string;
+  smtpPort: number;
+  smtpUserName?: string;
+  smtpPassword?: string;
+  smtpDomain?: string;
+  smtpEnableSsl: boolean;
+  smtpUseDefaultCredentials: boolean;
+  defaultFromAddress: string;
+  defaultFromDisplayName: string;
+}

npm/ng-packs/packages/setting-management/config/src/public-api.ts

@@ -1,3 +1,5 @@
 export * from './enums';
 export * from './providers';
 export * from './setting-management-config.module';
+export * from './proxy';
+export * from './components/email-setting-group/email-setting-group.component';

npm/ng-packs/packages/setting-management/config/src/setting-management-config.module.ts

@@ -1,12 +1,20 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CoreModule } from '@abp/ng.core';
+import { EmailSettingGroupComponent } from './components/email-setting-group/email-setting-group.component';
 import { SETTING_MANAGEMENT_ROUTE_PROVIDERS } from './providers/route.provider';
+import { SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS } from './providers/setting-tab.provider';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
-@NgModule()
+@NgModule({
+  imports: [CoreModule, NgxValidateCoreModule],
+  declarations: [EmailSettingGroupComponent],
+  exports: [EmailSettingGroupComponent],
+})
 export class SettingManagementConfigModule {
   static forRoot(): ModuleWithProviders<SettingManagementConfigModule> {
     return {
       ngModule: SettingManagementConfigModule,
-      providers: [SETTING_MANAGEMENT_ROUTE_PROVIDERS],
+      providers: [SETTING_MANAGEMENT_ROUTE_PROVIDERS, SETTING_MANAGEMENT_SETTING_TAB_PROVIDERS],
     };
   }
 }

npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts

@@ -138,4 +138,8 @@ background-color: rgba(0, 0, 0, 0.6);
     border-top: 1px solid #eee;
     margin-top: -1px;
 }
+.breadcrumb {
+    background-color: transparent;
+    padding: 0.27rem;
+}
 `;