From dec6e4a0e563bccabadb9fd68fda328a174c44f5 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Tue, 30 Jul 2019 16:06:32 +0300
Subject: [PATCH] feature(tenant-management): change all modals

---
 .../components/tenants/tenants.component.html |  96 +++++++-------
 .../components/tenants/tenants.component.ts   | 121 +++++++++---------
 2 files changed, 112 insertions(+), 105 deletions(-)

diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index 199c118b19..4488d0fc34 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -12,7 +12,7 @@
           id="create-tenants"
           class="btn btn-primary"
           type="button"
-          (click)="onAdd()"
+          (click)="onAddTenant()"
         >
           <i class="fa fa-plus mr-1"></i>
           <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
@@ -53,14 +53,14 @@
                 <button
                   [abpPermission]="'AbpTenantManagement.Tenants.Update'"
                   ngbDropdownItem
-                  (click)="onEdit(data.id)"
+                  (click)="onEditTenant(data.id)"
                 >
                   {{ 'AbpTenantManagement::Edit' | abpLocalization }}
                 </button>
                 <button
                   [abpPermission]="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
                   ngbDropdownItem
-                  (click)="onEditConnStr(data.id)"
+                  (click)="onEditConnectionString(data.id)"
                 >
                   {{ 'AbpTenantManagement::ConnectionStrings' | abpLocalization }}
                 </button>
@@ -88,60 +88,62 @@
   </div>
 </div>
 
-<ng-template #modalWrapper let-modal>
-  <div class="modal-header">
-    <h5 class="modal-title" id="modal-basic-title">
-      {{ selectedModalContent.title | abpLocalization }}
-    </h5>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-  </div>
+<abp-modal *ngIf="isModalVisible" size="md" [(visible)]="isModalVisible" [centered]="true">
+  <ng-template #abpHeader>
+    <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
+  </ng-template>
 
-  <form [formGroup]="tenantForm" (ngSubmit)="selectedModalContent.onSave()">
-    <div class="modal-body">
-      <ng-container *ngTemplateOutlet="selectedModalContent.template; context: { $implicit: modal }"></ng-container>
-    </div>
+  <ng-template #abpBody>
+    <ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
+  </ng-template>
 
-    <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()">
-        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
-      </button>
-      <button type="submit" class="btn btn-primary">
-        <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
-      </button>
-    </div>
-  </form>
-</ng-template>
+  <ng-template #abpFooter>
+    <button #abpClose type="button" class="btn btn-secondary">
+      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+    </button>
+    <button class="btn btn-primary" type="button" (click)="save()">
+      {{ 'AbpTenantManagement::Save' | abpLocalization }}
+    </button>
+  </ng-template>
+</abp-modal>
 
-<ng-template #mTemplateTenant let-modal>
-  <div class="mt-2">
-    <div class="form-group">
-      <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
-      <input type="text" id="name" class="form-control" formControlName="name" />
+<ng-template #TenantModalTemplate>
+  <form [formGroup]="tenantForm">
+    <div class="mt-2">
+      <div class="form-group">
+        <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
+        <input type="text" id="name" class="form-control" formControlName="name" />
+      </div>
     </div>
-  </div>
+  </form>
 </ng-template>
 
-<ng-template #mTemplateConnStr let-modal>
-  <div class="mt-2">
-    <div class="form-group">
-      <div class="form-check">
-        <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
-        <label for="useSharedDatabase" class="font-check-label">{{
-          'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
+<ng-template #ConnectionStringModalTemplate>
+  <form [formGroup]="defaultConnectionStringForm">
+    <div class="mt-2">
+      <div class="form-group">
+        <div class="form-check">
+          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
+          <label for="useSharedDatabase" class="font-check-label">{{
+            'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
+          }}</label>
+        </div>
+      </div>
+      <div class="form-group" *ngIf="!useSharedDatabase">
+        <label for="defaultConnectionString">{{
+          'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
         }}</label>
+        <input
+          type="text"
+          id="defaultConnectionString"
+          class="form-control"
+          formControlName="defaultConnectionString"
+        />
       </div>
     </div>
-    <div class="form-group" *ngIf="showInput">
-      <label for="defaultConnectionString">{{
-        'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
-      }}</label>
-      <input type="text" id="defaultConnectionString" class="form-control" formControlName="defaultConnectionString" />
-    </div>
-  </div>
+  </form>
 </ng-template>
 
-<ng-template #mTemplateFeatures let-modal>
+<ng-template #FeaturesModalTemplate>
   Manage Features
 </ng-template>
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
index 443ab95187..38dd2f9d8a 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
@@ -2,7 +2,6 @@ import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { pluck, switchMap, take } from 'rxjs/operators';
@@ -15,6 +14,12 @@ import {
 import { TenantManagementService } from '../../services/tenant-management.service';
 import { TenantManagementState } from '../../states/tenant-management.state';
 
+type SelectedModalContent = {
+  type: string;
+  title: string;
+  template: TemplateRef<any>;
+};
+
 @Component({
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
@@ -31,46 +36,36 @@ export class TenantsComponent {
 
   defaultConnectionString: string;
 
-  useSharedDatabase: boolean;
+  _useSharedDatabase: boolean;
+
+  isModalVisible: boolean;
 
-  selectedModalContent: {
-    title: string;
-    template: TemplateRef<any>;
-    onSave: () => void;
-  };
+  selectedModalContent = {} as SelectedModalContent;
 
-  get showInput(): boolean {
-    return !this.defaultConnectionStringForm.get('useSharedDatabase').value;
+  get useSharedDatabase(): boolean {
+    return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
 
   get connectionString(): string {
     return this.defaultConnectionStringForm.get('defaultConnectionString').value;
   }
 
-  @ViewChild('modalWrapper', { static: false })
-  modalWrapper: TemplateRef<any>;
-
-  @ViewChild('mTemplateConnStr', { static: false })
-  mTemplateConnStr: TemplateRef<any>;
+  @ViewChild('TenantModalTemplate', { static: false })
+  tenantModalTemplate: TemplateRef<any>;
 
-  @ViewChild('mTemplateFeatures', { static: false })
-  mTemplateFeatures: TemplateRef<any>;
+  @ViewChild('ConnectionStringModalTemplate', { static: false })
+  connectionStringModalTemplate: TemplateRef<any>;
 
-  @ViewChild('mTemplateTenant', { static: false })
-  mTemplateTenant: TemplateRef<any>;
+  @ViewChild('FeaturesModalTemplate', { static: false })
+  featuresModalTemplate: TemplateRef<any>;
 
   constructor(
     private confirmationService: ConfirmationService,
     private tenantService: TenantManagementService,
-    private modalService: NgbModal,
     private fb: FormBuilder,
     private store: Store,
   ) {}
 
-  openModal() {
-    this.modalService.open(this.modalWrapper);
-  }
-
   private createTenantForm() {
     this.tenantForm = this.fb.group({
       name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@@ -79,17 +74,22 @@ export class TenantsComponent {
 
   private createDefaultConnectionStringForm() {
     this.defaultConnectionStringForm = this.fb.group({
-      useSharedDatabase: this.useSharedDatabase,
+      useSharedDatabase: this._useSharedDatabase,
       defaultConnectionString: this.defaultConnectionString || '',
     });
   }
 
-  onEditConnStr(id: string) {
+  openModal(title: string, template: TemplateRef<any>, type: string) {
     this.selectedModalContent = {
-      title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
-      template: this.mTemplateConnStr,
-      onSave: () => this.saveConnStr,
+      title,
+      template,
+      type,
     };
+
+    this.isModalVisible = true;
+  }
+
+  onEditConnectionString(id: string) {
     this.store
       .dispatch(new TenantManagementGetById(id))
       .pipe(
@@ -100,56 +100,59 @@ export class TenantsComponent {
         }),
       )
       .subscribe(fetchedConnectionString => {
-        this.useSharedDatabase = fetchedConnectionString ? false : true;
+        this._useSharedDatabase = fetchedConnectionString ? false : true;
         this.defaultConnectionString = fetchedConnectionString ? fetchedConnectionString : '';
         this.createDefaultConnectionStringForm();
-        this.openModal();
+        this.openModal('AbpTenantManagement::ConnectionStrings', this.connectionStringModalTemplate, 'saveConnStr');
       });
   }
 
-  saveConnStr() {
-    this.tenantService
-      .updateDefaultConnectionString({ id: this.selected.id, defaultConnectionString: this.connectionString })
-      .pipe(take(1))
-      .subscribe(() => this.modalService.dismissAll());
-  }
-
   onManageFeatures(id: string) {
-    this.selectedModalContent = {
-      title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
-      template: this.mTemplateFeatures,
-      onSave: () => {},
-    };
-    this.openModal();
+    this.openModal('AbpTenantManagement::Features', this.featuresModalTemplate, 'saveFeatures');
   }
 
-  onAdd() {
+  onAddTenant() {
     this.selected = {} as ABP.BasicItem;
     this.createTenantForm();
-    this.openModal();
-    this.selectedModalContent = {
-      title: 'AbpTenantManagement::NewTenant',
-      template: this.mTemplateTenant,
-      onSave: () => this.saveTenant,
-    };
+    this.openModal('AbpTenantManagement::NewTenant', this.tenantModalTemplate, 'saveTenant');
   }
 
-  onEdit(id: string) {
+  onEditTenant(id: string) {
     this.store
       .dispatch(new TenantManagementGetById(id))
       .pipe(pluck('TenantManagementState', 'selectedItem'))
       .subscribe(selected => {
         this.selected = selected;
-        this.selectedModalContent = {
-          title: 'AbpTenantManagement::Edit',
-          template: this.mTemplateTenant,
-          onSave: () => this.saveTenant,
-        };
         this.createTenantForm();
-        this.openModal();
+        this.openModal('AbpTenantManagement::Edit', this.tenantModalTemplate, 'saveTenant');
       });
   }
 
+  save() {
+    const { type } = this.selectedModalContent;
+    if (!type) return;
+    if (type === 'saveTenant') this.saveTenant();
+    else if (type === 'saveConnStr') this.saveConnectionString();
+  }
+
+  saveConnectionString() {
+    if (this.useSharedDatabase) {
+      this.tenantService
+        .deleteDefaultConnectionString(this.selected.id)
+        .pipe(take(1))
+        .subscribe(() => {
+          this.isModalVisible = false;
+        });
+    } else {
+      this.tenantService
+        .updateDefaultConnectionString({ id: this.selected.id, defaultConnectionString: this.connectionString })
+        .pipe(take(1))
+        .subscribe(() => {
+          this.isModalVisible = false;
+        });
+    }
+  }
+
   saveTenant() {
     if (!this.tenantForm.valid) return;
 
@@ -159,7 +162,9 @@ export class TenantsComponent {
           ? new TenantManagementUpdate({ ...this.tenantForm.value, id: this.selected.id })
           : new TenantManagementAdd(this.tenantForm.value),
       )
-      .subscribe(() => this.modalService.dismissAll());
+      .subscribe(() => {
+        this.isModalVisible = false;
+      });
   }
 
   delete(id: string, name: string) {