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
Split 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"
class="btn btn-primary"
type="button"
(click)="onAdd()"
(click)="onAddTenant()"
>
<i class="fa fa-plus mr-1"></i>
<span>{{ 'AbpTenantManagement::NewTenant' | abpLocalization }}</span>
@ -53,14 +53,14 @@
<button
[abpPermission]="'AbpTenantManagement.Tenants.Update'"
ngbDropdownItem
(click)="onEdit(data.id)"
(click)="onEditTenant(data.id)"
>
{{ 'AbpTenantManagement::Edit' | abpLocalization }}
</button>
<button
[abpPermission]="'AbpTenantManagement.Tenants.ManageConnectionStrings'"
ngbDropdownItem
(click)="onEditConnStr(data.id)"
(click)="onEditConnectionString(data.id)"
>
{{ 'AbpTenantManagement::ConnectionStrings' | abpLocalization }}
</button>
@ -88,60 +88,62 @@
</div>
</div>
<ng-template #modalWrapper let-modal>
<div class="modal-header">
<h5 class="modal-title" id="modal-basic-title">
{{ selectedModalContent.title | abpLocalization }}
</h5>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<abp-modal *ngIf="isModalVisible" size="md" [(visible)]="isModalVisible" [centered]="true">
<ng-template #abpHeader>
<h3>{{ selectedModalContent.title | abpLocalization }}</h3>
</ng-template>
<form [formGroup]="tenantForm" (ngSubmit)="selectedModalContent.onSave()">
<div class="modal-body">
<ng-container *ngTemplateOutlet="selectedModalContent.template; context: { $implicit: modal }"></ng-container>
</div>
<ng-template #abpBody>
<ng-container *ngTemplateOutlet="selectedModalContent?.template"></ng-container>
</ng-template>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="modal.close()">
{{ 'AbpTenantManagement::Cancel' | abpLocalization }}
</button>
<button type="submit" class="btn btn-primary">
<i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
</button>
</div>
</form>
</ng-template>
<ng-template #abpFooter>
<button #abpClose type="button" class="btn btn-secondary">
{{ 'AbpTenantManagement::Cancel' | abpLocalization }}
</button>
<button class="btn btn-primary" type="button" (click)="save()">
{{ 'AbpTenantManagement::Save' | abpLocalization }}
</button>
</ng-template>
</abp-modal>
<ng-template #mTemplateTenant let-modal>
<div class="mt-2">
<div class="form-group">
<label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" />
<ng-template #TenantModalTemplate>
<form [formGroup]="tenantForm">
<div class="mt-2">
<div class="form-group">
<label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
<input type="text" id="name" class="form-control" formControlName="name" />
</div>
</div>
</div>
</form>
</ng-template>
<ng-template #mTemplateConnStr let-modal>
<div class="mt-2">
<div class="form-group">
<div class="form-check">
<input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
<label for="useSharedDatabase" class="font-check-label">{{
'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
<ng-template #ConnectionStringModalTemplate>
<form [formGroup]="defaultConnectionStringForm">
<div class="mt-2">
<div class="form-group">
<div class="form-check">
<input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
<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>
<input
type="text"
id="defaultConnectionString"
class="form-control"
formControlName="defaultConnectionString"
/>
</div>
</div>
<div class="form-group" *ngIf="showInput">
<label for="defaultConnectionString">{{
'AbpTenantManagement::DisplayName:DefaultConnectionString' | abpLocalization
}}</label>
<input type="text" id="defaultConnectionString" class="form-control" formControlName="defaultConnectionString" />
</div>
</div>
</form>
</ng-template>
<ng-template #mTemplateFeatures let-modal>
<ng-template #FeaturesModalTemplate>
Manage Features
</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 { Component, TemplateRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { pluck, switchMap, take } from 'rxjs/operators';
@ -15,6 +14,12 @@ import {
import { TenantManagementService } from '../../services/tenant-management.service';
import { TenantManagementState } from '../../states/tenant-management.state';
type SelectedModalContent = {
type: string;
title: string;
template: TemplateRef<any>;
};
@Component({
selector: 'abp-tenants',
templateUrl: './tenants.component.html',
@ -31,46 +36,36 @@ export class TenantsComponent {
defaultConnectionString: string;
useSharedDatabase: boolean;
_useSharedDatabase: boolean;
isModalVisible: boolean;
selectedModalContent: {
title: string;
template: TemplateRef<any>;
onSave: () => void;
};
selectedModalContent = {} as SelectedModalContent;
get showInput(): boolean {
return !this.defaultConnectionStringForm.get('useSharedDatabase').value;
get useSharedDatabase(): boolean {
return this.defaultConnectionStringForm.get('useSharedDatabase').value;
}
get connectionString(): string {
return this.defaultConnectionStringForm.get('defaultConnectionString').value;
}
@ViewChild('modalWrapper', { static: false })
modalWrapper: TemplateRef<any>;
@ViewChild('mTemplateConnStr', { static: false })
mTemplateConnStr: TemplateRef<any>;
@ViewChild('TenantModalTemplate', { static: false })
tenantModalTemplate: TemplateRef<any>;
@ViewChild('mTemplateFeatures', { static: false })
mTemplateFeatures: TemplateRef<any>;
@ViewChild('ConnectionStringModalTemplate', { static: false })
connectionStringModalTemplate: TemplateRef<any>;
@ViewChild('mTemplateTenant', { static: false })
mTemplateTenant: TemplateRef<any>;
@ViewChild('FeaturesModalTemplate', { static: false })
featuresModalTemplate: TemplateRef<any>;
constructor(
private confirmationService: ConfirmationService,
private tenantService: TenantManagementService,
private modalService: NgbModal,
private fb: FormBuilder,
private store: Store,
) {}
openModal() {
this.modalService.open(this.modalWrapper);
}
private createTenantForm() {
this.tenantForm = this.fb.group({
name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
@ -79,17 +74,22 @@ export class TenantsComponent {
private createDefaultConnectionStringForm() {
this.defaultConnectionStringForm = this.fb.group({
useSharedDatabase: this.useSharedDatabase,
useSharedDatabase: this._useSharedDatabase,
defaultConnectionString: this.defaultConnectionString || '',
});
}
onEditConnStr(id: string) {
openModal(title: string, template: TemplateRef<any>, type: string) {
this.selectedModalContent = {
title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
template: this.mTemplateConnStr,
onSave: () => this.saveConnStr,
title,
template,
type,
};
this.isModalVisible = true;
}
onEditConnectionString(id: string) {
this.store
.dispatch(new TenantManagementGetById(id))
.pipe(
@ -100,56 +100,59 @@ export class TenantsComponent {
}),
)
.subscribe(fetchedConnectionString => {
this.useSharedDatabase = fetchedConnectionString ? false : true;
this._useSharedDatabase = fetchedConnectionString ? false : true;
this.defaultConnectionString = fetchedConnectionString ? fetchedConnectionString : '';
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) {
this.selectedModalContent = {
title: this.selected && this.selected.id ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant',
template: this.mTemplateFeatures,
onSave: () => {},
};
this.openModal();
this.openModal('AbpTenantManagement::Features', this.featuresModalTemplate, 'saveFeatures');
}
onAdd() {
onAddTenant() {
this.selected = {} as ABP.BasicItem;
this.createTenantForm();
this.openModal();
this.selectedModalContent = {
title: 'AbpTenantManagement::NewTenant',
template: this.mTemplateTenant,
onSave: () => this.saveTenant,
};
this.openModal('AbpTenantManagement::NewTenant', this.tenantModalTemplate, 'saveTenant');
}
onEdit(id: string) {
onEditTenant(id: string) {
this.store
.dispatch(new TenantManagementGetById(id))
.pipe(pluck('TenantManagementState', 'selectedItem'))
.subscribe(selected => {
this.selected = selected;
this.selectedModalContent = {
title: 'AbpTenantManagement::Edit',
template: this.mTemplateTenant,
onSave: () => this.saveTenant,
};
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() {
if (!this.tenantForm.valid) return;
@ -159,7 +162,9 @@ export class TenantsComponent {
? new TenantManagementUpdate({ ...this.tenantForm.value, id: this.selected.id })
: new TenantManagementAdd(this.tenantForm.value),
)
.subscribe(() => this.modalService.dismissAll());
.subscribe(() => {
this.isModalVisible = false;
});
}
delete(id: string, name: string) {

Write Preview
Loading…
Cancel
Save