refactor: tenant-box.component

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

@@ -1,51 +1,63 @@
-<div class="card shadow-sm rounded mb-3">
-  <div class="card-body px-5">
-    <div class="row">
-      <div class="col">
-        <span style="font-size: 0.8em;" class="text-uppercase text-muted">{{
-          'AbpUiMultiTenancy::Tenant' | abpLocalization
-        }}</span
-        ><br />
-        <h6 class="m-0 d-inline-block">
-          <span>
-            {{ tenantName || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}
-          </span>
-        </h6>
-      </div>
-      <div class="col-auto">
-        <a
-          id="AbpTenantSwitchLink"
-          href="javascript:void(0);"
-          class="btn btn-sm mt-3 btn-outline-primary"
-          (click)="onSwitch()"
-          >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
-        >
+<ng-container *ngIf="(currentTenant$ | async) || {} as currentTenant">
+  <div class="card shadow-sm rounded mb-3">
+    <div class="card-body px-5">
+      <div class="row">
+        <div class="col">
+          <span style="font-size: 0.8em;" class="text-uppercase text-muted">{{
+            'AbpUiMultiTenancy::Tenant' | abpLocalization
+          }}</span
+          ><br />
+          <h6 class="m-0 d-inline-block">
+            <i>{{ currentTenant.name || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
+          </h6>
+        </div>
+        <div class="col-auto">
+          <a
+            id="AbpTenantSwitchLink"
+            href="javascript:void(0);"
+            class="btn btn-sm mt-3 btn-outline-primary"
+            (click)="onSwitch()"
+            >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
+          >
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<abp-modal size="md" [(visible)]="isModalVisible" [busy]="inProgress">
-  <ng-template #abpHeader>
-    <h5>Switch Tenant</h5>
-  </ng-template>
-  <ng-template #abpBody>
-    <form (ngSubmit)="save()">
-      <div class="mt-2">
-        <div class="form-group">
-          <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input [(ngModel)]="tenant.name" type="text" id="name" name="tenant" class="form-control" autofocus />
+  <abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h5>Switch Tenant</h5>
+    </ng-template>
+    <ng-template #abpBody>
+      <form (ngSubmit)="save()">
+        <div class="mt-2">
+          <div class="form-group">
+            <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
+            <input
+              [(ngModel)]="name"
+              type="text"
+              id="name"
+              name="tenant"
+              class="form-control"
+              autofocus
+            />
+          </div>
+          <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
         </div>
-        <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
-      </div>
-    </form>
-  </ng-template>
-  <ng-template #abpFooter>
-    <button #abpClose type="button" class="btn btn-secondary">
-      {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
-    </button>
-    <abp-button buttonType="button" buttonClass="btn btn-primary" (click)="save()">
-      <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
-    </abp-button>
-  </ng-template>
-</abp-modal>
+      </form>
+    </ng-template>
+    <ng-template #abpFooter>
+      <button #abpClose type="button" class="btn btn-secondary">
+        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+      </button>
+      <abp-button
+        type="abp-button"
+        iconClass="fa fa-check"
+        (click)="save()"
+        [disabled]="currentTenant?.name === name"
+      >
+        <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
+      </abp-button>
+    </ng-template>
+  </abp-modal>
+</ng-container>

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

@@ -1,26 +1,26 @@
-import { ABP, SetTenant, SessionState, GetAppConfiguration } from '@abp/ng.core';
+import { ABP, GetAppConfiguration, SessionState, SetTenant } from '@abp/ng.core';
 import { ToasterService } from '@abp/ng.theme.shared';
-import { Component, OnInit } from '@angular/core';
-import { Store } from '@ngxs/store';
-import { throwError } from 'rxjs';
-import { catchError, take, finalize, switchMap } from 'rxjs/operators';
-import snq from 'snq';
-import { AccountService } from '../../services/account.service';
+import { Component } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { finalize, take } from 'rxjs/operators';
 import { Account } from '../../models/account';
+import { AccountService } from '../../services/account.service';
 
 @Component({
   selector: 'abp-tenant-box',
   templateUrl: './tenant-box.component.html',
 })
 export class TenantBoxComponent
-  implements OnInit, Account.TenantBoxComponentInputs, Account.TenantBoxComponentOutputs {
-  tenant = {} as ABP.BasicItem;
+  implements Account.TenantBoxComponentInputs, Account.TenantBoxComponentOutputs {
+  @Select(SessionState.getTenant)
+  currentTenant$: Observable<ABP.BasicItem>;
 
-  tenantName: string;
+  name: string;
 
   isModalVisible: boolean;
 
-  inProgress: boolean;
+  modalBusy: boolean;
 
   constructor(
     private store: Store,
@@ -28,58 +28,41 @@ export class TenantBoxComponent
     private accountService: AccountService,
   ) {}
 
-  ngOnInit() {
-    this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
-    this.tenantName = this.tenant.name || '';
-  }
-
   onSwitch() {
+    const tenant = this.store.selectSnapshot(SessionState.getTenant);
+    this.name = (tenant || ({} as ABP.BasicItem)).name;
     this.isModalVisible = true;
   }
 
   save() {
-    if (this.tenant.name && !this.inProgress) {
-      this.inProgress = true;
-      this.accountService
-        .findTenant(this.tenant.name)
-        .pipe(
-          finalize(() => (this.inProgress = false)),
-          take(1),
-          catchError(err => {
-            this.toasterService.error(
-              snq(() => err.error.error_description, 'AbpUi::DefaultErrorMessage'),
-              'AbpUi::Error',
-            );
-            return throwError(err);
-          }),
-          switchMap(({ success, tenantId }) => {
-            if (success) {
-              this.tenant = {
-                id: tenantId,
-                name: this.tenant.name,
-              };
-              this.tenantName = this.tenant.name;
-              this.isModalVisible = false;
-            } else {
-              this.toasterService.error(
-                'AbpUiMultiTenancy::GivenTenantIsNotAvailable',
-                'AbpUi::Error',
-                {
-                  messageLocalizationParams: [this.tenant.name],
-                },
-              );
-              this.tenant = {} as ABP.BasicItem;
-              this.tenantName = '';
-            }
-            this.store.dispatch(new SetTenant(success ? this.tenant : null));
-            return this.store.dispatch(new GetAppConfiguration());
-          }),
-        )
-        .subscribe();
-    } else {
-      this.store.dispatch([new SetTenant(null), new GetAppConfiguration()]);
-      this.tenantName = null;
+    if (!this.name) {
+      this.setTenant(null);
       this.isModalVisible = false;
+      return;
     }
+
+    this.modalBusy = true;
+    this.accountService
+      .findTenant(this.name)
+      .pipe(finalize(() => (this.modalBusy = false)))
+      .subscribe(({ success, tenantId: id, name }) => {
+        if (!success) {
+          this.showError();
+          return;
+        }
+
+        this.setTenant({ id, name });
+        this.isModalVisible = false;
+      });
+  }
+
+  private setTenant(tenant: ABP.BasicItem) {
+    return this.store.dispatch([new SetTenant(tenant), new GetAppConfiguration()]);
+  }
+
+  private showError() {
+    this.toasterService.error('AbpUiMultiTenancy::GivenTenantIsNotAvailable', 'AbpUi::Error', {
+      messageLocalizationParams: [this.name],
+    });
   }
 }