refactor tenants component

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

@@ -32,29 +32,31 @@
 
 <abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
   <ng-template #abpHeader>
-    <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
+    <h3>
+      {{
+        selected?.id
+          ? 'AbpTenantManagement::Edit'
+          : ('AbpTenantManagement::NewTenant' | abpLocalization)
+      }}
+    </h3>
   </ng-template>
 
   <ng-template #abpBody>
-    <ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
+    <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
+      <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+    </form>
   </ng-template>
 
   <ng-template #abpFooter>
     <button abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{
+    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="tenantForm?.invalid">{{
       'AbpTenantManagement::Save' | abpLocalization
     }}</abp-button>
   </ng-template>
 </abp-modal>
 
-<ng-template #tenantModalTemplate>
-  <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
-    <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-  </form>
-</ng-template>
-
 <abp-feature-management
   *abpReplaceableTemplate="{
     inputs: {

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

@@ -6,19 +6,13 @@ import {
   FormPropData,
   generateFormFromProps,
 } from '@abp/ng.theme.shared/extensions';
-import { Component, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { finalize, take } from 'rxjs/operators';
+import { finalize } from 'rxjs/operators';
 import { eTenantManagementComponents } from '../../enums/components';
 import { GetTenantsInput, TenantDto } from '../../proxy/models';
 import { TenantService } from '../../proxy/tenant.service';
 
-interface SelectedModalContent {
-  type: 'saveConnStr' | 'saveTenant';
-  title: string;
-  template: TemplateRef<any>;
-}
-
 @Component({
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
@@ -31,20 +25,14 @@ interface SelectedModalContent {
   ],
 })
 export class TenantsComponent implements OnInit {
-  data: PagedResultDto<TenantDto>;
+  data: PagedResultDto<TenantDto> = { items: [], totalCount: 0 };
 
   selected: TenantDto;
 
   tenantForm: FormGroup;
 
-  defaultConnectionStringForm: FormGroup;
-
-  defaultConnectionString: string;
-
   isModalVisible: boolean;
 
-  selectedModalContent = {} as SelectedModalContent;
-
   visibleFeatures = false;
 
   providerKey: string;
@@ -59,37 +47,6 @@ export class TenantsComponent implements OnInit {
     return Boolean(this.selected.id);
   }
 
-  get useSharedDatabase(): boolean {
-    return this.defaultConnectionStringForm.get('useSharedDatabase').value;
-  }
-
-  get connectionString(): string {
-    return this.defaultConnectionStringForm.get('defaultConnectionString').value;
-  }
-
-  @ViewChild('tenantModalTemplate')
-  tenantModalTemplate: TemplateRef<any>;
-
-  get isDisabledSaveButton(): boolean {
-    if (!this.selectedModalContent) return false;
-
-    if (
-      this.selectedModalContent.type === 'saveConnStr' &&
-      this.defaultConnectionStringForm &&
-      this.defaultConnectionStringForm.invalid
-    ) {
-      return true;
-    } else if (
-      this.selectedModalContent.type === 'saveTenant' &&
-      this.tenantForm &&
-      this.tenantForm.invalid
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
   onVisibleFeaturesChange = (value: boolean) => {
     this.visibleFeatures = value;
   };
@@ -111,72 +68,21 @@ export class TenantsComponent implements OnInit {
     this.tenantForm = generateFormFromProps(data);
   }
 
-  private createDefaultConnectionStringForm() {
-    this.defaultConnectionStringForm = this.fb.group({
-      useSharedDatabase: this._useSharedDatabase,
-      defaultConnectionString: [this.defaultConnectionString || ''],
-    });
-  }
-
-  openModal(title: string, template: TemplateRef<any>, type: 'saveConnStr' | 'saveTenant') {
-    this.selectedModalContent = {
-      title,
-      template,
-      type,
-    };
-
-    this.isModalVisible = true;
-  }
-
   addTenant() {
     this.selected = {} as TenantDto;
     this.createTenantForm();
-    this.openModal('AbpTenantManagement::NewTenant', this.tenantModalTemplate, 'saveTenant');
+    this.isModalVisible = true;
   }
 
   editTenant(id: string) {
     this.service.get(id).subscribe(res => {
       this.selected = res;
       this.createTenantForm();
-      this.openModal('AbpTenantManagement::Edit', this.tenantModalTemplate, 'saveTenant');
+      this.isModalVisible = true;
     });
   }
 
   save() {
-    const { type } = this.selectedModalContent;
-    if (!type) return;
-    if (type === 'saveTenant') this.saveTenant();
-    else if (type === 'saveConnStr') this.saveConnectionString();
-  }
-
-  saveConnectionString() {
-    if (this.modalBusy) return;
-
-    this.modalBusy = true;
-    if (this.useSharedDatabase || (!this.useSharedDatabase && !this.connectionString)) {
-      this.service
-        .deleteDefaultConnectionString(this.selected.id)
-        .pipe(
-          take(1),
-          finalize(() => (this.modalBusy = false)),
-        )
-        .subscribe(() => {
-          this.isModalVisible = false;
-        });
-    } else {
-      this.service
-        .updateDefaultConnectionString(this.selected.id, this.connectionString)
-        .pipe(
-          take(1),
-          finalize(() => (this.modalBusy = false)),
-        )
-        .subscribe(() => {
-          this.isModalVisible = false;
-        });
-    }
-  }
-
-  saveTenant() {
     if (!this.tenantForm.valid || this.modalBusy) return;
     this.modalBusy = true;
 
@@ -210,7 +116,11 @@ export class TenantsComponent implements OnInit {
   }
 
   hookToQuery() {
-    this.list.hookToQuery(query => this.service.getList(query)).subscribe();
+    this.list
+      .hookToQuery(query => this.service.getList(query))
+      .subscribe(res => {
+        this.data = res;
+      });
   }
 
   onSharedDatabaseChange(value: boolean) {