account's tenant feature done

Author: iyilm4z

angular/src/account/tenant/tenant-change-dialog.component.html

@@ -1,28 +1,56 @@
-<form autocomplete="off"
-      #changeTenantForm="ngForm"
-      (ngSubmit)="save()">
-    <h1 mat-dialog-title >{{ "ChangeTenant" | localize }}</h1>
-    <mat-dialog-content>
-        <mat-form-field>
-            <input 
-                matInput
-                name="tenancyName"
-                [placeholder]="'TenancyName' | localize"
-                [(ngModel)]="tenancyName"
-                maxlength="64"/>
-        </mat-form-field>
-        <span class="help-block">{{ "LeaveEmptyToSwitchToHost" | localize }}</span>
-    </mat-dialog-content>
-    <div mat-dialog-actions 
-         align="end">
-        <button mat-button
-                type="button"
-                [disabled]="saving"
-                (click)="close()">{{ "Cancel" | localize }}</button>
-        <button mat-flat-button
-                type="submit"
-                flex="15"
-                color="primary"
-                [disabled]="!changeTenantForm.form.valid || saving">{{ "Save" | localize }}</button>
+<form
+  class="form-horizontal"
+  autocomplete="off"
+  #changeTenantForm="ngForm"
+  (ngSubmit)="save()"
+>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ "ChangeTenant" | localize }}</h4>
+    <button
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="bsModalRef.hide()"
+    >
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="form-group row">
+      <label class="col-md-3 col-form-label" for="tenancyName">
+        {{ "TenancyName" | localize }}
+      </label>
+      <div class="col-md-9">
+        <input
+          type="text"
+          class="form-control"
+          id="tenancyName"
+          name="tenancyName"
+          [(ngModel)]="tenancyName"
+          maxlength="64"
+        />
+      </div>
     </div>
+    <span>
+      <i class="fa fa-info-circle"></i>
+      {{ "LeaveEmptyToSwitchToHost" | localize }}
+    </span>
+  </div>
+  <div class="modal-footer justify-content-between">
+    <button
+      type="button"
+      class="btn btn-default"
+      [disabled]="saving"
+      (click)="bsModalRef.hide()"
+    >
+      {{ "Cancel" | localize }}
+    </button>
+    <button
+      type="submit"
+      class="btn btn-primary"
+      [disabled]="!changeTenantForm.form.valid || saving"
+    >
+      {{ "Save" | localize }}
+    </button>
+  </div>
 </form>

angular/src/account/tenant/tenant-change-dialog.component.ts

@@ -1,6 +1,6 @@
 import { Component, Injector } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
 import { finalize } from 'rxjs/operators';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 import { AppComponentBase } from '@shared/app-component-base';
 import { AccountServiceProxy } from '@shared/service-proxies/service-proxies';
 import { AppTenantAvailabilityState } from '@shared/AppEnums';
@@ -10,14 +10,7 @@ import {
 } from '@shared/service-proxies/service-proxies';
 
 @Component({
-  templateUrl: './tenant-change-dialog.component.html',
-  styles: [
-    `
-      mat-form-field {
-        width: 100%;
-      }
-    `
-  ]
+  templateUrl: './tenant-change-dialog.component.html'
 })
 export class TenantChangeDialogComponent extends AppComponentBase {
   saving = false;
@@ -26,15 +19,15 @@ export class TenantChangeDialogComponent extends AppComponentBase {
   constructor(
     injector: Injector,
     private _accountService: AccountServiceProxy,
-    private _dialogRef: MatDialogRef<TenantChangeDialogComponent>
+    public bsModalRef: BsModalRef
   ) {
     super(injector);
   }
 
   save(): void {
     if (!this.tenancyName) {
       abp.multiTenancy.setTenantIdCookie(undefined);
-      this.close(true);
+      this.bsModalRef.hide();
       location.reload();
       return;
     }
@@ -54,7 +47,6 @@ export class TenantChangeDialogComponent extends AppComponentBase {
         switch (result.state) {
           case AppTenantAvailabilityState.Available:
             abp.multiTenancy.setTenantIdCookie(result.tenantId);
-            this.close(true);
             location.reload();
             return;
           case AppTenantAvailabilityState.InActive:
@@ -68,8 +60,4 @@ export class TenantChangeDialogComponent extends AppComponentBase {
         }
       });
   }
-
-  close(result?: any): void {
-    this._dialogRef.close(result);
-  }
 }

angular/src/account/tenant/tenant-change.component.html

@@ -1,15 +1,12 @@
-<div
-  *ngIf="isMultiTenancyEnabled"
-  class="card tenant-change-component"
-  style="margin-bottom: 3px;">
-  <div class="body text-center">
-    <span>
-      {{ "CurrentTenant" | localize }}:
-      <span *ngIf="tenancyName" title="{{ name }}">
-          <strong>{{ tenancyName }}</strong>
-      </span>
-      <span *ngIf="!tenancyName">{{ "NotSelected" | localize }}</span> 
-      (<a href="javascript:;" (click)="showChangeModal()">{{ "Change" | localize }}</a>)
+<div *ngIf="isMultiTenancyEnabled" class="text-center tenant-change-component">
+  <span>
+    {{ "CurrentTenant" | localize }}:
+    <span *ngIf="tenancyName" title="{{ name }}">
+      <strong>{{ tenancyName }}</strong>
     </span>
-  </div>
+    <span *ngIf="!tenancyName">{{ "NotSelected" | localize }}</span>
+    (<a href="javascript:;" (click)="showChangeModal()">
+      {{ "Change" | localize }} </a
+    >)
+  </span>
 </div>

angular/src/account/tenant/tenant-change.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Injector } from '@angular/core';
-import { MatDialog } from '@angular/material';
 import { AppComponentBase } from '@shared/app-component-base';
 import { TenantChangeDialogComponent } from './tenant-change-dialog.component';
+import { BsModalService } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'tenant-change',
@@ -11,7 +11,7 @@ export class TenantChangeComponent extends AppComponentBase implements OnInit {
   tenancyName = '';
   name = '';
 
-  constructor(injector: Injector, private _dialog: MatDialog) {
+  constructor(injector: Injector, private _modalService: BsModalService) {
     super(injector);
   }
 
@@ -27,12 +27,9 @@ export class TenantChangeComponent extends AppComponentBase implements OnInit {
   }
 
   showChangeModal(): void {
-    this._dialog.open(TenantChangeDialogComponent, {
-      width: '500px',
-      height: '240px',
-      position: {
-        top: '50px'
-      }
-    });
+    const modal = this._modalService.show(TenantChangeDialogComponent);
+    if (this.appSession.tenant) {
+      modal.content.tenancyName = this.appSession.tenant.tenancyName;
+    }
   }
 }