tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactor: tenant-box.component

pull/6617/head
mehmet-erim 6 years ago
parent
afc8cd6c89
commit
39d901f78a
2 changed files with 98 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html
  2. 97
      npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts

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

@ -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>

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

@ -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],
});
}
}

Write Preview
Loading…
Cancel
Save