fix(account): tenant-box selection

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html

@@ -4,7 +4,7 @@
 >
   <span style="color: #666;">{{ 'AbpUiMultiTenancy::Tenant' | abpLocalization }}: </span>
   <strong>
-    <i>{{ selected?.name ? selected.name : ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
+    <i>{{ tenantName ? tenantName : ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
   </strong>
   (<a id="abp-tenant-switch-link" style="color: #333; cursor: pointer" (click)="onSwitch()">{{
     'AbpUiMultiTenancy::Switch' | abpLocalization
@@ -17,11 +17,11 @@
     <h5>Switch Tenant</h5>
   </ng-template>
   <ng-template #abpBody>
-    <form>
+    <form (ngSubmit)="save()">
       <div class="mt-2">
         <div class="form-group">
           <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input [(ngModel)]="selected.name" type="text" id="name" name="tenant" class="form-control" autofocus />
+          <input [(ngModel)]="tenant.name" type="text" id="name" name="tenant" class="form-control" autofocus />
         </div>
         <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
       </div>

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts

@@ -1,6 +1,6 @@
-import { ABP, SessionSetTenantId } from '@abp/ng.core';
+import { ABP, SessionSetTenant, SessionState } from '@abp/ng.core';
 import { ToasterService } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { throwError } from 'rxjs';
 import { catchError, take } from 'rxjs/operators';
@@ -11,40 +11,53 @@ import { AccountService } from '../../services/account.service';
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
 })
-export class TenantBoxComponent {
+export class TenantBoxComponent implements OnInit {
   constructor(private store: Store, private toasterService: ToasterService, private accountService: AccountService) {}
 
-  selected = {} as ABP.BasicItem;
+  tenant = {} as ABP.BasicItem;
+
+  tenantName: string;
 
   isModalVisible: boolean;
 
-  @ViewChild('modalContent', { static: false })
-  modalContent: TemplateRef<any>;
+  ngOnInit() {
+    this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
+    this.tenantName = this.tenant.name || '';
+  }
 
   onSwitch() {
     this.isModalVisible = true;
   }
 
   save() {
-    this.selected.name = this.selected.name || '';
-
-    this.accountService
-      .findTenant(this.selected.name)
-      .pipe(
-        take(1),
-        catchError(err => {
-          this.toasterService.error(snq(() => err.error.error_description, 'An error occured.'), 'Error');
-          return throwError(err);
-        }),
-      )
-      .subscribe(({ success, tenantId }) => {
-        if (success) {
-          this.isModalVisible = false;
-        } else {
-          this.toasterService.error(`Given tenant is not available: ${this.selected.name}`, 'Error');
-          this.selected = {} as ABP.BasicItem;
-        }
-        this.store.dispatch(new SessionSetTenantId(success ? tenantId : null));
-      });
+    if (this.tenant.name) {
+      this.accountService
+        .findTenant(this.tenant.name)
+        .pipe(
+          take(1),
+          catchError(err => {
+            this.toasterService.error(snq(() => err.error.error_description, 'An error occured.'), 'Error');
+            return throwError(err);
+          }),
+        )
+        .subscribe(({ success, tenantId }) => {
+          if (success) {
+            this.tenant = {
+              id: tenantId,
+              name: this.tenant.name,
+            };
+            this.tenantName = this.tenant.name;
+            this.isModalVisible = false;
+          } else {
+            this.toasterService.error(`Given tenant is not available: ${this.tenant.name}`, 'Error');
+            this.tenant = {} as ABP.BasicItem;
+          }
+          this.store.dispatch(new SessionSetTenant(success ? this.tenant : null));
+        });
+    } else {
+      this.store.dispatch(new SessionSetTenant(null));
+      this.tenantName = null;
+      this.isModalVisible = false;
+    }
   }
 }