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
Unified 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"> <ng-container *ngIf="(currentTenant$ | async) || {} as currentTenant">
<div class="card-body px-5"> <div class="card shadow-sm rounded mb-3">
<div class="row"> <div class="card-body px-5">
<div class="col"> <div class="row">
<span style="font-size: 0.8em;" class="text-uppercase text-muted">{{ <div class="col">
'AbpUiMultiTenancy::Tenant' | abpLocalization <span style="font-size: 0.8em;" class="text-uppercase text-muted">{{
}}</span 'AbpUiMultiTenancy::Tenant' | abpLocalization
><br /> }}</span
<h6 class="m-0 d-inline-block"> ><br />
<span> <h6 class="m-0 d-inline-block">
{{ tenantName || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }} <i>{{ currentTenant.name || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
</span> </h6>
</h6> </div>
</div> <div class="col-auto">
<div class="col-auto"> <a
<a id="AbpTenantSwitchLink"
id="AbpTenantSwitchLink" href="javascript:void(0);"
href="javascript:void(0);" class="btn btn-sm mt-3 btn-outline-primary"
class="btn btn-sm mt-3 btn-outline-primary" (click)="onSwitch()"
(click)="onSwitch()" >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
>{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a >
> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<abp-modal size="md" [(visible)]="isModalVisible" [busy]="inProgress"> <abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
<ng-template #abpHeader> <ng-template #abpHeader>
<h5>Switch Tenant</h5> <h5>Switch Tenant</h5>
</ng-template> </ng-template>
<ng-template #abpBody> <ng-template #abpBody>
<form (ngSubmit)="save()"> <form (ngSubmit)="save()">
<div class="mt-2"> <div class="mt-2">
<div class="form-group"> <div class="form-group">
<label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label> <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
<input [(ngModel)]="tenant.name" type="text" id="name" name="tenant" class="form-control" autofocus /> <input
[(ngModel)]="name"
type="text"
id="name"
name="tenant"
class="form-control"
autofocus
/>
</div>
<p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
</div> </div>
<p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p> </form>
</div> </ng-template>
</form> <ng-template #abpFooter>
</ng-template> <button #abpClose type="button" class="btn btn-secondary">
<ng-template #abpFooter> {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
<button #abpClose type="button" class="btn btn-secondary"> </button>
{{ 'AbpTenantManagement::Cancel' | abpLocalization }} <abp-button
</button> type="abp-button"
<abp-button buttonType="button" buttonClass="btn btn-primary" (click)="save()"> iconClass="fa fa-check"
<i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span> (click)="save()"
</abp-button> [disabled]="currentTenant?.name === name"
</ng-template> >
</abp-modal> <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 { ToasterService } from '@abp/ng.theme.shared';
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import { Store } from '@ngxs/store'; import { Select, Store } from '@ngxs/store';
import { throwError } from 'rxjs'; import { Observable } from 'rxjs';
import { catchError, take, finalize, switchMap } from 'rxjs/operators'; import { finalize, take } from 'rxjs/operators';
import snq from 'snq';
import { AccountService } from '../../services/account.service';
import { Account } from '../../models/account'; import { Account } from '../../models/account';
import { AccountService } from '../../services/account.service';
@Component({ @Component({
selector: 'abp-tenant-box', selector: 'abp-tenant-box',
templateUrl: './tenant-box.component.html', templateUrl: './tenant-box.component.html',
}) })
export class TenantBoxComponent export class TenantBoxComponent
implements OnInit, Account.TenantBoxComponentInputs, Account.TenantBoxComponentOutputs { implements Account.TenantBoxComponentInputs, Account.TenantBoxComponentOutputs {
tenant = {} as ABP.BasicItem; @Select(SessionState.getTenant)
currentTenant$: Observable<ABP.BasicItem>;
tenantName: string; name: string;
isModalVisible: boolean; isModalVisible: boolean;
inProgress: boolean; modalBusy: boolean;
constructor( constructor(
private store: Store, private store: Store,
@ -28,58 +28,41 @@ export class TenantBoxComponent
private accountService: AccountService, private accountService: AccountService,
) {} ) {}
ngOnInit() {
this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
this.tenantName = this.tenant.name || '';
}
onSwitch() { onSwitch() {
const tenant = this.store.selectSnapshot(SessionState.getTenant);
this.name = (tenant || ({} as ABP.BasicItem)).name;
this.isModalVisible = true; this.isModalVisible = true;
} }
save() { save() {
if (this.tenant.name && !this.inProgress) { if (!this.name) {
this.inProgress = true; this.setTenant(null);
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;
this.isModalVisible = false; 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