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

feature(tenant-management): change all modals

pull/1556/head
TheDiaval 7 years ago
parent
3496627919
commit
dec6e4a0e5
2 changed files with 112 additions and 105 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. 96
      npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
  2. 121
      npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts

96
npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
View File

@ -12,7 +12,7 @@
id="create-tenants" id="create-tenants"
class="btn btn-primary" class="btn btn-primary"
type="button" type="button"
(click)="onAdd()" (click)="onAddTenant()"
> >
<i class="fa fa-plus mr-1"></i> <i class="fa fa-plus mr-1"></i>
<span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span> <span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
@ -53,14 +53,14 @@
<button <button
[abpPermission]="'AbpTenantManagement.Tenants.Update'" [abpPermission]="'AbpTenantManagement.Tenants.Update'"
ngbDropdownItem ngbDropdownItem
(click)="onEdit(data.id)" (click)="onEditTenant(data.id)"
> >
{{ 'AbpTenantManagement::Edit' | abpLocalization }} {{ 'AbpTenantManagement::Edit' | abpLocalization }}
</button> </button>
<button <button
[abpPermission]="'AbpTenantManagement.Tenants.ManageConnectionStrings'" [abpPermission]="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
ngbDropdownItem ngbDropdownItem
(click)="onEditConnStr(data.id)" (click)="onEditConnectionString(data.id)"
> >
{{ 'AbpTenantManagement::ConnectionStrings' | abpLocalization }} {{ 'AbpTenantManagement::ConnectionStrings' | abpLocalization }}
</button> </button>
@ -88,60 +88,62 @@
</div> </div>
</div> </div>
<ng-template #modalWrapper let-modal> <abp-modal *ngIf="isModalVisible" size="md" [(visible)]="isModalVisible" [centered]="true">
<div class="modal-header"> <ng-template #abpHeader>
<h5 class="modal-title" id="modal-basic-title"> <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
{{ selectedModalContent.title | abpLocalization }} </ng-template>
</h5>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form [formGroup]="tenantForm" (ngSubmit)="selectedModalContent.onSave()"> <ng-template #abpBody>
<div class="modal-body"> <ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
<ng-container *ngTemplateOutlet="selectedModalContent.template; context: { $implicit: modal }"></ng-container> </ng-template>
</div>
<div class="modal-footer"> <ng-template #abpFooter>
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()"> <button #abpClose type="button" class="btn btn-secondary">
{{ 'AbpTenantManagement::Cancel' | abpLocalization }} {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
</button> </button>
<button type="submit" class="btn btn-primary"> <button class="btn btn-primary" type="button" (click)="save()">
<i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span> {{ 'AbpTenantManagement::Save' | abpLocalization }}
</button> </button>
</div> </ng-template>
</form> </abp-modal>
</ng-template>
<ng-template #mTemplateTenant let-modal> <ng-template #TenantModalTemplate>
<div class="mt-2"> <form [formGroup]="tenantForm">
<div class="form-group"> <div class="mt-2">
<label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label> <div class="form-group">
<input type="text" id="name" class="form-control" formControlName="name" /> <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" />
</div>
</div> </div>
</div> </form>
</ng-template> </ng-template>
<ng-template #mTemplateConnStr let-modal> <ng-template #ConnectionStringModalTemplate>
<div class="mt-2"> <form [formGroup]="defaultConnectionStringForm">
<div class="form-group"> <div class="mt-2">
<div class="form-check"> <div class="form-group">
<input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" /> <div class="form-check">
<label for="useSharedDatabase" class="font-check-label">{{ <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization <label for="useSharedDatabase" class="font-check-label">{{
'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
}}</label>
</div>
</div>
<div class="form-group" *ngIf="!useSharedDatabase">
<label for="defaultConnectionString">{{
'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
}}</label> }}</label>
<input
type="text"
id="defaultConnectionString"
class="form-control"
formControlName="defaultConnectionString"
/>
</div> </div>
</div> </div>
<div class="form-group" *ngIf="showInput"> </form>
<label for="defaultConnectionString">{{
'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
}}</label>
<input type="text" id="defaultConnectionString" class="form-control" formControlName="defaultConnectionString" />
</div>
</div>
</ng-template> </ng-template>
<ng-template #mTemplateFeatures let-modal> <ng-template #FeaturesModalTemplate>
Manage Features Manage Features
</ng-template> </ng-template>

121
npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
View File

@ -2,7 +2,6 @@ import { ABP } from '@abp/ng.core';
import { ConfirmationService, Toaster } from '@abp/ng.theme.shared'; import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
import { Component, TemplateRef, ViewChild } from '@angular/core'; import { Component, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Select, Store } from '@ngxs/store'; import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { pluck, switchMap, take } from 'rxjs/operators'; import { pluck, switchMap, take } from 'rxjs/operators';
@ -15,6 +14,12 @@ import {
import { TenantManagementService } from '../../services/tenant-management.service'; import { TenantManagementService } from '../../services/tenant-management.service';
import { TenantManagementState } from '../../states/tenant-management.state'; import { TenantManagementState } from '../../states/tenant-management.state';
type SelectedModalContent = {
type: string;
title: string;
template: TemplateRef<any>;
};
@Component({ @Component({
selector: 'abp-tenants', selector: 'abp-tenants',
templateUrl: './tenants.component.html', templateUrl: './tenants.component.html',
@ -31,46 +36,36 @@ export class TenantsComponent {
defaultConnectionString: string; defaultConnectionString: string;
useSharedDatabase: boolean; _useSharedDatabase: boolean;
isModalVisible: boolean;
selectedModalContent: { selectedModalContent = {} as SelectedModalContent;
title: string;
template: TemplateRef<any>;
onSave: () => void;
};
get showInput(): boolean { get useSharedDatabase(): boolean {
return !this.defaultConnectionStringForm.get('useSharedDatabase').value; return this.defaultConnectionStringForm.get('useSharedDatabase').value;
} }
get connectionString(): string { get connectionString(): string {
return this.defaultConnectionStringForm.get('defaultConnectionString').value; return this.defaultConnectionStringForm.get('defaultConnectionString').value;
} }
@ViewChild('modalWrapper', { static: false }) @ViewChild('TenantModalTemplate', { static: false })
modalWrapper: TemplateRef<any>; tenantModalTemplate: TemplateRef<any>;
@ViewChild('mTemplateConnStr', { static: false })
mTemplateConnStr: TemplateRef<any>;
@ViewChild('mTemplateFeatures', { static: false }) @ViewChild('ConnectionStringModalTemplate', { static: false })
mTemplateFeatures: TemplateRef<any>; connectionStringModalTemplate: TemplateRef<any>;
@ViewChild('mTemplateTenant', { static: false }) @ViewChild('FeaturesModalTemplate', { static: false })
mTemplateTenant: TemplateRef<any>; featuresModalTemplate: TemplateRef<any>;
constructor( constructor(
private confirmationService: ConfirmationService, private confirmationService: ConfirmationService,
private tenantService: TenantManagementService, private tenantService: TenantManagementService,
private modalService: NgbModal,
private fb: FormBuilder, private fb: FormBuilder,
private store: Store, private store: Store,
) {} ) {}
openModal() {
this.modalService.open(this.modalWrapper);
}
private createTenantForm() { private createTenantForm() {
this.tenantForm = this.fb.group({ this.tenantForm = this.fb.group({
name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]], name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@ -79,17 +74,22 @@ export class TenantsComponent {
private createDefaultConnectionStringForm() { private createDefaultConnectionStringForm() {
this.defaultConnectionStringForm = this.fb.group({ this.defaultConnectionStringForm = this.fb.group({
useSharedDatabase: this.useSharedDatabase, useSharedDatabase: this._useSharedDatabase,
defaultConnectionString: this.defaultConnectionString || '', defaultConnectionString: this.defaultConnectionString || '',
}); });
} }
onEditConnStr(id: string) { openModal(title: string, template: TemplateRef<any>, type: string) {
this.selectedModalContent = { this.selectedModalContent = {
title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant', title,
template: this.mTemplateConnStr, template,
onSave: () => this.saveConnStr, type,
}; };
this.isModalVisible = true;
}
onEditConnectionString(id: string) {
this.store this.store
.dispatch(new TenantManagementGetById(id)) .dispatch(new TenantManagementGetById(id))
.pipe( .pipe(
@ -100,56 +100,59 @@ export class TenantsComponent {
}), }),
) )
.subscribe(fetchedConnectionString => { .subscribe(fetchedConnectionString => {
this.useSharedDatabase = fetchedConnectionString ? false : true; this._useSharedDatabase = fetchedConnectionString ? false : true;
this.defaultConnectionString = fetchedConnectionString ? fetchedConnectionString : ''; this.defaultConnectionString = fetchedConnectionString ? fetchedConnectionString : '';
this.createDefaultConnectionStringForm(); this.createDefaultConnectionStringForm();
this.openModal(); this.openModal('AbpTenantManagement::ConnectionStrings', this.connectionStringModalTemplate, 'saveConnStr');
}); });
} }
saveConnStr() {
this.tenantService
.updateDefaultConnectionString({ id: this.selected.id, defaultConnectionString: this.connectionString })
.pipe(take(1))
.subscribe(() => this.modalService.dismissAll());
}
onManageFeatures(id: string) { onManageFeatures(id: string) {
this.selectedModalContent = { this.openModal('AbpTenantManagement::Features', this.featuresModalTemplate, 'saveFeatures');
title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
template: this.mTemplateFeatures,
onSave: () => {},
};
this.openModal();
} }
onAdd() { onAddTenant() {
this.selected = {} as ABP.BasicItem; this.selected = {} as ABP.BasicItem;
this.createTenantForm(); this.createTenantForm();
this.openModal(); this.openModal('AbpTenantManagement::NewTenant', this.tenantModalTemplate, 'saveTenant');
this.selectedModalContent = {
title: 'AbpTenantManagement::NewTenant',
template: this.mTemplateTenant,
onSave: () => this.saveTenant,
};
} }
onEdit(id: string) { onEditTenant(id: string) {
this.store this.store
.dispatch(new TenantManagementGetById(id)) .dispatch(new TenantManagementGetById(id))
.pipe(pluck('TenantManagementState', 'selectedItem')) .pipe(pluck('TenantManagementState', 'selectedItem'))
.subscribe(selected => { .subscribe(selected => {
this.selected = selected; this.selected = selected;
this.selectedModalContent = {
title: 'AbpTenantManagement::Edit',
template: this.mTemplateTenant,
onSave: () => this.saveTenant,
};
this.createTenantForm(); this.createTenantForm();
this.openModal(); this.openModal('AbpTenantManagement::Edit', this.tenantModalTemplate, 'saveTenant');
}); });
} }
save() {
const { type } = this.selectedModalContent;
if (!type) return;
if (type === 'saveTenant') this.saveTenant();
else if (type === 'saveConnStr') this.saveConnectionString();
}
saveConnectionString() {
if (this.useSharedDatabase) {
this.tenantService
.deleteDefaultConnectionString(this.selected.id)
.pipe(take(1))
.subscribe(() => {
this.isModalVisible = false;
});
} else {
this.tenantService
.updateDefaultConnectionString({ id: this.selected.id, defaultConnectionString: this.connectionString })
.pipe(take(1))
.subscribe(() => {
this.isModalVisible = false;
});
}
}
saveTenant() { saveTenant() {
if (!this.tenantForm.valid) return; if (!this.tenantForm.valid) return;
@ -159,7 +162,9 @@ export class TenantsComponent {
? new TenantManagementUpdate({ ...this.tenantForm.value, id: this.selected.id }) ? new TenantManagementUpdate({ ...this.tenantForm.value, id: this.selected.id })
: new TenantManagementAdd(this.tenantForm.value), : new TenantManagementAdd(this.tenantForm.value),
) )
.subscribe(() => this.modalService.dismissAll()); .subscribe(() => {
this.isModalVisible = false;
});
} }
delete(id: string, name: string) { delete(id: string, name: string) {

Write Preview
Loading…
Cancel
Save