From 1ca585f1ac63e37d71bc8d4a6406e5233067112b Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:03:24 +0300 Subject: [PATCH 01/11] feature(identity): change add/edit modal --- .../lib/components/roles/roles.component.html | 40 ++-- .../lib/components/roles/roles.component.ts | 16 +- .../lib/components/users/users.component.html | 205 +++++++++--------- .../lib/components/users/users.component.ts | 151 ++++++++----- .../identity/src/lib/identity.module.ts | 2 + 5 files changed, 229 insertions(+), 185 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html index ca93374446..0749ef51ab 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html @@ -58,17 +58,13 @@ - -
- - -
-
-
+ + +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}

+ + + +
* @@ -88,18 +84,18 @@ 'AbpIdentity::DisplayName:IsPublic' | abpLocalization }}
-
+
+ -
- - -
- - + + + + + ; - constructor( - private confirmationService: ConfirmationService, - private modalService: NgbModal, - private fb: FormBuilder, - private store: Store, - ) {} + constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {} createForm() { this.form = this.fb.group({ @@ -50,7 +46,7 @@ export class RolesComponent { openModal() { this.createForm(); - this.modalService.open(this.modalContent); + this.isModalVisible = true; } onAdd() { @@ -77,7 +73,9 @@ export class RolesComponent { ? new IdentityUpdateRole({ ...this.form.value, id: this.selected.id }) : new IdentityAddRole(this.form.value), ) - .subscribe(() => this.modalService.dismissAll()); + .subscribe(() => { + this.isModalVisible = false; + }); } delete(id: string, name: string) { diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index abce666c4d..d90287ec61 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -77,119 +77,118 @@ - -
- - -
-
-
- - - -
-
- * - -
+ + +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}

+ -
- - -
+ + + + + + +
+
+ * + +
-
- - -
+
+ + +
-
- * - -
+
+ + +
-
- * - -
+
+ * + +
-
- - -
+
+ * + +
-
- - -
+
+ + +
-
- - +
+ + +
+ +
+ + +
-
- - - - -
-
- - + + + + +
+
+ + +
-
- - - -
+ + + + + + + + + + + + -
- - -
- - ; - @ViewChild('modalContent', { static: false }) + @ViewChild("modalContent", { static: false }) modalContent: TemplateRef; form: FormGroup; @@ -46,24 +56,29 @@ export class UsersComponent implements OnInit { providerKey: string; pageQuery: ABP.PageQueryParams = { - sorting: 'userName', + sorting: "userName" }; + isModalVisible: boolean; + loading: boolean = false; search$ = new Subject(); - trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; + trackByFn: TrackByFunction = (index, item) => + Object.keys(item)[0] || index; get roleGroups(): FormGroup[] { - return snq(() => (this.form.get('roleNames') as FormArray).controls as FormGroup[], []); + return snq( + () => (this.form.get("roleNames") as FormArray).controls as FormGroup[], + [] + ); } constructor( private confirmationService: ConfirmationService, - private modalService: NgbModal, private fb: FormBuilder, - private store: Store, + private store: Store ) {} ngOnInit() { @@ -78,34 +93,51 @@ export class UsersComponent implements OnInit { this.form = this.fb.group({ password: [ - '', + "", [ Validators.required, Validators.maxLength(32), Validators.minLength(6), - validatePassword(['small', 'capital', 'number', 'special']), - ], + validatePassword(["small", "capital", "number", "special"]) + ] + ], + userName: [ + this.selected.userName || "", + [Validators.required, Validators.maxLength(256)] + ], + email: [ + this.selected.email || "", + [Validators.required, Validators.email, Validators.maxLength(256)] + ], + name: [this.selected.name || "", [Validators.maxLength(64)]], + surname: [this.selected.surname || "", [Validators.maxLength(64)]], + phoneNumber: [ + this.selected.phoneNumber || "", + [Validators.maxLength(16)] + ], + lockoutEnabled: [ + this.selected.twoFactorEnabled || (this.selected.id ? false : true) + ], + twoFactorEnabled: [ + this.selected.twoFactorEnabled || (this.selected.id ? false : true) ], - userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]], - email: [this.selected.email || '', [Validators.required, Validators.email, Validators.maxLength(256)]], - name: [this.selected.name || '', [Validators.maxLength(64)]], - surname: [this.selected.surname || '', [Validators.maxLength(64)]], - phoneNumber: [this.selected.phoneNumber || '', [Validators.maxLength(16)]], - lockoutEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)], - twoFactorEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)], roleNames: this.fb.array( this.roles.map(role => this.fb.group({ - [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))], - }), - ), - ), + [role.name]: [ + !!snq(() => + this.selectedUserRoles.find(userRole => userRole.id === role.id) + ) + ] + }) + ) + ) }); } openModal() { this.buildForm(); - this.modalService.open(this.modalContent); + this.isModalVisible = true; } onAdd() { @@ -115,12 +147,15 @@ export class UsersComponent implements OnInit { } onEdit(id: string) { - combineLatest([this.store.dispatch(new IdentityGetUserById(id)), this.store.dispatch(new IdentityGetUserRoles(id))]) + combineLatest([ + this.store.dispatch(new IdentityGetUserById(id)), + this.store.dispatch(new IdentityGetUserRoles(id)) + ]) .pipe( filter(([res1, res2]) => res1 && res2), map(([state, _]) => state), - pluck('IdentityState'), - take(1), + pluck("IdentityState"), + take(1) ) .subscribe((state: Identity.State) => { this.selected = state.selectedUser; @@ -134,8 +169,11 @@ export class UsersComponent implements OnInit { const { roleNames } = this.form.value; const mappedRoleNames = snq( - () => roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]), - [], + () => + roleNames + .filter(role => !!role[Object.keys(role)[0]]) + .map(role => Object.keys(role)[0]), + [] ); this.store @@ -144,18 +182,27 @@ export class UsersComponent implements OnInit { ? new IdentityUpdateUser({ ...this.form.value, id: this.selected.id, - roleNames: mappedRoleNames, + roleNames: mappedRoleNames + }) + : new IdentityAddUser({ + ...this.form.value, + roleNames: mappedRoleNames }) - : new IdentityAddUser({ ...this.form.value, roleNames: mappedRoleNames }), ) - .subscribe(() => this.modalService.dismissAll()); + .subscribe(() => { + this.isModalVisible = false; + }); } delete(id: string, userName: string) { this.confirmationService - .warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', { - messageLocalizationParams: [userName], - }) + .warn( + "AbpIdentity::UserDeletionConfirmationMessage", + "AbpIdentity::AreYouSure", + { + messageLocalizationParams: [userName] + } + ) .subscribe((status: Toaster.Status) => { if (status === Toaster.Status.confirm) { this.store.dispatch(new IdentityDeleteUser(id)); @@ -172,6 +219,8 @@ export class UsersComponent implements OnInit { get() { this.loading = true; - this.store.dispatch(new IdentityGetUsers(this.pageQuery)).subscribe(() => (this.loading = false)); + this.store + .dispatch(new IdentityGetUsers(this.pageQuery)) + .subscribe(() => (this.loading = false)); } } diff --git a/npm/ng-packs/packages/identity/src/lib/identity.module.ts b/npm/ng-packs/packages/identity/src/lib/identity.module.ts index 7ae218a5f3..baac608c6e 100644 --- a/npm/ng-packs/packages/identity/src/lib/identity.module.ts +++ b/npm/ng-packs/packages/identity/src/lib/identity.module.ts @@ -10,6 +10,7 @@ import { UsersComponent } from './components/users/users.component'; import { PermissionManagementModule } from '@abp/ng.permission-management'; import { TableModule } from 'primeng/table'; import { NgxValidateCoreModule } from '@ngx-validate/core'; +import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; @NgModule({ declarations: [RolesComponent, UsersComponent], @@ -23,6 +24,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; NgbDropdownModule, PermissionManagementModule, NgxValidateCoreModule, + PerfectScrollbarModule, ], }) export class IdentityModule {} From 3496627919a0d0aaa4e7ec129fa7478c8788e4b1 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:04:44 +0300 Subject: [PATCH 02/11] feature(permission-management): change modal --- .../permission-management.component.html | 29 ++++------ .../permission-management.component.ts | 56 ++++++++----------- 2 files changed, 35 insertions(+), 50 deletions(-) diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html index 589ed2cd2c..ec73bda006 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html @@ -1,15 +1,9 @@ - + -
- - -
-
+ +

{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}

+ +
  • {{ - group.displayName + group?.displayName }}
    • @@ -80,15 +74,14 @@
    -
    - -
    - -
    +     - + diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts index f82c552b93..7a004003eb 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts @@ -7,11 +7,8 @@ import { Output, Renderer2, SimpleChanges, - TemplateRef, TrackByFunction, - ViewChild, } from '@angular/core'; -import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { Select, Store } from '@ngxs/store'; import { from, Observable } from 'rxjs'; import { map, pluck, take } from 'rxjs/operators'; @@ -35,23 +32,33 @@ export class PermissionManagementComponent implements OnInit, OnChanges { @Input() providerKey: string; + protected _visible; + @Input() - visible: boolean; + get visible(): boolean { + return this._visible; + } + + set visible(value: boolean) { + if (!this.selectedGroup) return; + + this._visible = value; + this.visibleChange.emit(value); + + if (!value) { + this.selectedGroup = null; + } + } @Output() visibleChange = new EventEmitter(); - @ViewChild('modalContent', { static: false }) - modalContent: TemplateRef; - @Select(PermissionManagementState.getPermissionGroups) groups$: Observable; @Select(PermissionManagementState.getEntitiyDisplayName) entityName$: Observable; - modalRef: NgbModalRef; - selectedGroup: PermissionManagement.Group; permissions: PermissionManagement.Permission[] = []; @@ -80,7 +87,7 @@ export class PermissionManagementComponent implements OnInit, OnChanges { ); } - constructor(private modalService: NgbModal, private store: Store, private renderer: Renderer2) {} + constructor(private store: Store, private renderer: Renderer2) {} ngOnInit(): void {} @@ -186,9 +193,11 @@ export class PermissionManagementComponent implements OnInit, OnChanges { permissions: changedPermissions, }), ) - .subscribe(() => this.modalRef.close()); + .subscribe(() => { + this.visible = false; + }); } else { - this.modalRef.close(); + this.visible = false; } } @@ -206,39 +215,22 @@ export class PermissionManagementComponent implements OnInit, OnChanges { this.selectedGroup = permissionRes.groups[0]; this.permissions = getPermissions(permissionRes.groups); - this.modalRef = this.modalService.open(this.modalContent, { size: 'lg' }); - this.visibleChange.emit(true); + this.visible = true; setTimeout(() => { this.setTabCheckboxState(); this.setGrantCheckboxState(); }, 0); - - from(this.modalRef.result) - .pipe(take(1)) - .subscribe( - data => { - this.setVisible(false); - }, - reason => { - this.setVisible(false); - }, - ); }); } - setVisible(value: boolean) { - this.visible = value; - this.visibleChange.emit(value); - } - ngOnChanges({ visible }: SimpleChanges): void { if (!visible) return; if (visible.currentValue) { this.openModal(); - } else if (visible.currentValue === false && this.modalService.hasOpenModals()) { - this.modalRef.close(); + } else if (visible.currentValue === false && this.visible) { + this.visible = false; } } } From dec6e4a0e563bccabadb9fd68fda328a174c44f5 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:06:32 +0300 Subject: [PATCH 03/11] feature(tenant-management): change all modals --- .../components/tenants/tenants.component.html | 96 +++++++------- .../components/tenants/tenants.component.ts | 121 +++++++++--------- 2 files changed, 112 insertions(+), 105 deletions(-) diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 199c118b19..4488d0fc34 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -12,7 +12,7 @@ id="create-tenants" class="btn btn-primary" type="button" - (click)="onAdd()" + (click)="onAddTenant()" > {{ 'AbpTenantManagement::NewTenant' | abpLocalization }} @@ -53,14 +53,14 @@ @@ -88,60 +88,62 @@ - -
    - - -
    + + +

    {{ selectedModalContent.title | abpLocalization }}

    +     -
    -
    - -
    + + + -
    - - -
    -
    -     + + + + + - -
    -
    - - + +
    +
    +
    + + +
    -
    + - -
    -
    -
    - -
    + - + Manage Features diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts index 443ab95187..38dd2f9d8a 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts @@ -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; +}; + @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; - 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; - - @ViewChild('mTemplateConnStr', { static: false }) - mTemplateConnStr: TemplateRef; + @ViewChild('TenantModalTemplate', { static: false }) + tenantModalTemplate: TemplateRef; - @ViewChild('mTemplateFeatures', { static: false }) - mTemplateFeatures: TemplateRef; + @ViewChild('ConnectionStringModalTemplate', { static: false }) + connectionStringModalTemplate: TemplateRef; - @ViewChild('mTemplateTenant', { static: false }) - mTemplateTenant: TemplateRef; + @ViewChild('FeaturesModalTemplate', { static: false }) + featuresModalTemplate: TemplateRef; 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, 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) { From 9618aed727eba7f2c8cfabe28730fc9914c80b17 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:11:32 +0300 Subject: [PATCH 04/11] feat(tenant-management): add delete connection string method --- .../src/lib/services/tenant-management.service.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts b/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts index e01b635135..bacfa52fe2 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts +++ b/npm/ng-packs/packages/tenant-management/src/lib/services/tenant-management.service.ts @@ -80,4 +80,14 @@ export class TenantManagementService { }; return this.rest.request(request); } + + deleteDefaultConnectionString(id: string): Observable { + const url = `/api/multi-tenancy/tenant/${id}/defaultConnectionString`; + + const request: Rest.Request = { + method: 'DELETE', + url, + }; + return this.rest.request(request); + } } From ae93dc432ced052c5e88ec486bbe47363b84e5ee Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:14:19 +0300 Subject: [PATCH 05/11] feat(theme-shared): change modal style and logic --- .../theme-shared/src/lib/components/modal/modal.component.ts | 2 ++ npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts | 3 +++ 2 files changed, 5 insertions(+) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts index 9b832c4c71..1e53e7dce1 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts @@ -116,6 +116,8 @@ export class ModalComponent implements OnDestroy { this.close(); }); + if (!this.abpClose) return; + fromEvent(this.abpClose.nativeElement, 'click') .pipe( takeUntil(this.destroy$), diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts index a798bccd76..de983d5c8c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts @@ -24,6 +24,9 @@ export default ` top: 18px; } +.modal { + background-color: rgba(0, 0, 0, .6); +} /* Date: Tue, 30 Jul 2019 16:16:03 +0300 Subject: [PATCH 06/11] fix(core): check if localization key exists --- npm/ng-packs/packages/core/src/lib/states/config.state.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/npm/ng-packs/packages/core/src/lib/states/config.state.ts b/npm/ng-packs/packages/core/src/lib/states/config.state.ts index f5bf9ffbe6..758051cce6 100644 --- a/npm/ng-packs/packages/core/src/lib/states/config.state.ts +++ b/npm/ng-packs/packages/core/src/lib/states/config.state.ts @@ -107,6 +107,8 @@ export class ConfigState { } static getCopy(key: string, ...interpolateParams: string[]) { + if (!key) key = ''; + const keys = key.split('::') as string[]; const selector = createSelector( [ConfigState], From 902731f01d9d30dce0b79808dd85ec433a1ed95c Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:16:53 +0300 Subject: [PATCH 07/11] feat(theme-basic): change modal --- .../components/profile/profile.component.html | 40 +++++------- .../components/profile/profile.component.ts | 65 ++++++------------- 2 files changed, 39 insertions(+), 66 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html index be65b43280..0a7a1b6b32 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html @@ -1,12 +1,9 @@ - -
    - - -
    -
    -
    + + +

    {{ 'AbpIdentity::PersonalInfo' | abpLocalization }}

    +     + +
    * @@ -26,22 +23,21 @@
    - {{ 'AbpIdentity::DisplayName:Email' | abpLocalization }} *
    -
    - -
    - - -
    - - + + + + + + + diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts index 0111eb5221..bb264e35ef 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.ts @@ -1,20 +1,9 @@ -import { - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, - TemplateRef, - ViewChild, -} from '@angular/core'; +import { Profile, ProfileGet, ProfileState, ProfileUpdate } from '@abp/ng.core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; -import { Store, Select } from '@ngxs/store'; -import { from, Observable } from 'rxjs'; +import { Select, Store } from '@ngxs/store'; +import { Observable } from 'rxjs'; import { take, withLatestFrom } from 'rxjs/operators'; -import { ProfileGet, ProfileState, Profile, ProfileUpdate } from '@abp/ng.core'; const { maxLength, required, email } = Validators; @@ -23,23 +12,27 @@ const { maxLength, required, email } = Validators; templateUrl: './profile.component.html', }) export class ProfileComponent implements OnChanges { + protected _visible; + @Input() - visible: boolean; + get visible(): boolean { + return this._visible; + } + + set visible(value: boolean) { + this._visible = value; + this.visibleChange.emit(value); + } @Output() visibleChange = new EventEmitter(); - @ViewChild('modalContent', { static: false }) - modalContent: TemplateRef; - @Select(ProfileState.getProfile) profile$: Observable; form: FormGroup; - modalRef: NgbModalRef; - - constructor(private fb: FormBuilder, private modalService: NgbModal, private store: Store) {} + constructor(private fb: FormBuilder, private store: Store) {} buildForm() { this.store @@ -62,30 +55,14 @@ export class ProfileComponent implements OnChanges { onSubmit() { if (this.form.invalid) return; - this.store.dispatch(new ProfileUpdate(this.form.value)).subscribe(() => this.modalRef.close()); + this.store.dispatch(new ProfileUpdate(this.form.value)).subscribe(() => { + this.visible = false; + }); } openModal() { this.buildForm(); - - this.modalRef = this.modalService.open(this.modalContent); - this.visibleChange.emit(true); - - from(this.modalRef.result) - .pipe(take(1)) - .subscribe( - data => { - this.setVisible(false); - }, - reason => { - this.setVisible(false); - }, - ); - } - - setVisible(value: boolean) { - this.visible = value; - this.visibleChange.emit(value); + this.visible = true; } ngOnChanges({ visible }: SimpleChanges): void { @@ -93,8 +70,8 @@ export class ProfileComponent implements OnChanges { if (visible.currentValue) { this.openModal(); - } else if (visible.currentValue === false && this.modalService.hasOpenModals()) { - this.modalRef.close(); + } else if (visible.currentValue === false && this.visible) { + this.visible = false; } } } From 2e0dc813bdf3e884843d62bd3dfbbaf5334e1471 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:17:39 +0300 Subject: [PATCH 08/11] feat(theme-basic): change modal --- .../change-password.component.html | 38 +++++++--------- .../change-password.component.ts | 45 +++++++------------ 2 files changed, 34 insertions(+), 49 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html index ba138e281b..76b83162b5 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html @@ -1,12 +1,9 @@ - -
    - - -
    -
    -
    + + +

    {{ 'AbpIdentity::ChangePassword' | abpLocalization }}

    +     + +
    * @@ -23,15 +20,14 @@ {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}
    -
    - -
    - - -
    - -     + + + + + + + diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts index 8c127dae18..db819492e3 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.ts @@ -11,11 +11,8 @@ import { ViewChild, } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { comparePasswords, validatePassword } from '@ngx-validate/core'; import { Store } from '@ngxs/store'; -import { from } from 'rxjs'; -import { take } from 'rxjs/operators'; const { minLength, required } = Validators; @@ -24,8 +21,17 @@ const { minLength, required } = Validators; templateUrl: './change-password.component.html', }) export class ChangePasswordComponent implements OnInit, OnChanges { + protected _visible; + @Input() - visible: boolean; + get visible(): boolean { + return this._visible; + } + + set visible(value: boolean) { + this._visible = value; + this.visibleChange.emit(value); + } @Output() visibleChange = new EventEmitter(); @@ -35,9 +41,7 @@ export class ChangePasswordComponent implements OnInit, OnChanges { form: FormGroup; - modalRef: NgbModalRef; - - constructor(private fb: FormBuilder, private modalService: NgbModal, private store: Store) {} + constructor(private fb: FormBuilder, private store: Store) {} ngOnInit(): void { this.form = this.fb.group( @@ -62,28 +66,13 @@ export class ChangePasswordComponent implements OnInit, OnChanges { newPassword: this.form.get('newPassword').value, }), ) - .subscribe(() => this.modalRef.close()); + .subscribe(() => { + this.visible = false; + }); } openModal() { - this.modalRef = this.modalService.open(this.modalContent); - this.visibleChange.emit(true); - - from(this.modalRef.result) - .pipe(take(1)) - .subscribe( - data => { - this.setVisible(false); - }, - reason => { - this.setVisible(false); - }, - ); - } - - setVisible(value: boolean) { - this.visible = value; - this.visibleChange.emit(value); + this.visible = true; } ngOnChanges({ visible }: SimpleChanges): void { @@ -91,8 +80,8 @@ export class ChangePasswordComponent implements OnInit, OnChanges { if (visible.currentValue) { this.openModal(); - } else if (visible.currentValue === false && this.modalService.hasOpenModals()) { - this.modalRef.close(); + } else if (visible.currentValue === false && this.visible) { + this.visible = false; } } } From 35cd51a92cb6be8b06779ef32b660847639c9664 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:19:17 +0300 Subject: [PATCH 09/11] fix(theme-basic): fix navigation dropdowns --- .../layout-application.component.html | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html index 7016872e7c..6fc2ffe62c 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html @@ -9,14 +9,20 @@
  • - {{ route.name }} + {{ route.name | abpLocalization }}
    • -
  • +
  • - {{ route.name }} + {{ route.name | abpLocalization }}
    - {{ child.name }} + {{ child.name | abpLocalization }}
    @@ -48,10 +54,13 @@ [abpVisibility]="childrenContainer" class="dropdown-submenu" ngbDropdown + display="static" placement="right-top" [abpPermission]="child.requiredPolicy" > - {{ child.name }} + + {{ child.name | abpLocalization }} +
    Date: Tue, 30 Jul 2019 16:21:32 +0300 Subject: [PATCH 10/11] feature: add prettierrc --- npm/ng-packs/.prettierrc | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 npm/ng-packs/.prettierrc diff --git a/npm/ng-packs/.prettierrc b/npm/ng-packs/.prettierrc new file mode 100644 index 0000000000..4b9a2d97d0 --- /dev/null +++ b/npm/ng-packs/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 120, + "singleQuote": true, + "trailingComma": "all" +} From a1b7c6d730c794c8626f61e1df4647325f646486 Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Wed, 31 Jul 2019 15:37:52 +0300 Subject: [PATCH 11/11] fix: pr feedbacks --- .../lib/components/users/users.component.html | 2 +- .../lib/components/users/users.component.ts | 141 ++++++------------ .../permission-management.component.html | 2 +- .../components/tenants/tenants.component.html | 8 +- .../components/tenants/tenants.component.ts | 10 +- .../components/profile/profile.component.html | 2 +- 6 files changed, 58 insertions(+), 107 deletions(-) diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index d90287ec61..3801acc6d2 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -77,7 +77,7 @@
    - +

    {{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}

     diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts index ddce116535..908a87454a 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts @@ -1,37 +1,25 @@ -import { ABP } from "@abp/ng.core"; -import { ConfirmationService, Toaster } from "@abp/ng.theme.shared"; -import { - Component, - OnInit, - TemplateRef, - TrackByFunction, - ViewChild -} from "@angular/core"; -import { - AbstractControl, - FormArray, - FormBuilder, - FormGroup, - Validators -} from "@angular/forms"; -import { validatePassword } from "@ngx-validate/core"; -import { Select, Store } from "@ngxs/store"; -import { combineLatest, Observable, Subject } from "rxjs"; -import { debounceTime, filter, map, pluck, take } from "rxjs/operators"; -import snq from "snq"; +import { ABP } from '@abp/ng.core'; +import { ConfirmationService, Toaster } from '@abp/ng.theme.shared'; +import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core'; +import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { validatePassword } from '@ngx-validate/core'; +import { Select, Store } from '@ngxs/store'; +import { combineLatest, Observable, Subject } from 'rxjs'; +import { debounceTime, filter, map, pluck, take } from 'rxjs/operators'; +import snq from 'snq'; import { IdentityAddUser, IdentityDeleteUser, IdentityGetUserById, IdentityGetUserRoles, IdentityGetUsers, - IdentityUpdateUser -} from "../../actions/identity.actions"; -import { Identity } from "../../models/identity"; -import { IdentityState } from "../../states/identity.state"; + IdentityUpdateUser, +} from '../../actions/identity.actions'; +import { Identity } from '../../models/identity'; +import { IdentityState } from '../../states/identity.state'; @Component({ - selector: "abp-users", - templateUrl: "./users.component.html" + selector: 'abp-users', + templateUrl: './users.component.html', }) export class UsersComponent implements OnInit { @Select(IdentityState.getUsers) @@ -40,7 +28,7 @@ export class UsersComponent implements OnInit { @Select(IdentityState.getUsersTotalCount) totalCount$: Observable; - @ViewChild("modalContent", { static: false }) + @ViewChild('modalContent', { static: false }) modalContent: TemplateRef; form: FormGroup; @@ -56,7 +44,7 @@ export class UsersComponent implements OnInit { providerKey: string; pageQuery: ABP.PageQueryParams = { - sorting: "userName" + sorting: 'userName', }; isModalVisible: boolean; @@ -65,21 +53,13 @@ export class UsersComponent implements OnInit { search$ = new Subject(); - trackByFn: TrackByFunction = (index, item) => - Object.keys(item)[0] || index; + trackByFn: TrackByFunction = (index, item) => Object.keys(item)[0] || index; get roleGroups(): FormGroup[] { - return snq( - () => (this.form.get("roleNames") as FormArray).controls as FormGroup[], - [] - ); + return snq(() => (this.form.get('roleNames') as FormArray).controls as FormGroup[], []); } - constructor( - private confirmationService: ConfirmationService, - private fb: FormBuilder, - private store: Store - ) {} + constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {} ngOnInit() { this.search$.pipe(debounceTime(300)).subscribe(value => { @@ -93,45 +73,28 @@ export class UsersComponent implements OnInit { this.form = this.fb.group({ password: [ - "", + '', [ Validators.required, Validators.maxLength(32), Validators.minLength(6), - validatePassword(["small", "capital", "number", "special"]) - ] - ], - userName: [ - this.selected.userName || "", - [Validators.required, Validators.maxLength(256)] - ], - email: [ - this.selected.email || "", - [Validators.required, Validators.email, Validators.maxLength(256)] - ], - name: [this.selected.name || "", [Validators.maxLength(64)]], - surname: [this.selected.surname || "", [Validators.maxLength(64)]], - phoneNumber: [ - this.selected.phoneNumber || "", - [Validators.maxLength(16)] - ], - lockoutEnabled: [ - this.selected.twoFactorEnabled || (this.selected.id ? false : true) - ], - twoFactorEnabled: [ - this.selected.twoFactorEnabled || (this.selected.id ? false : true) + validatePassword(['small', 'capital', 'number', 'special']), + ], ], + userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]], + email: [this.selected.email || '', [Validators.required, Validators.email, Validators.maxLength(256)]], + name: [this.selected.name || '', [Validators.maxLength(64)]], + surname: [this.selected.surname || '', [Validators.maxLength(64)]], + phoneNumber: [this.selected.phoneNumber || '', [Validators.maxLength(16)]], + lockoutEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)], + twoFactorEnabled: [this.selected.twoFactorEnabled || (this.selected.id ? false : true)], roleNames: this.fb.array( this.roles.map(role => this.fb.group({ - [role.name]: [ - !!snq(() => - this.selectedUserRoles.find(userRole => userRole.id === role.id) - ) - ] - }) - ) - ) + [role.name]: [!!snq(() => this.selectedUserRoles.find(userRole => userRole.id === role.id))], + }), + ), + ), }); } @@ -147,15 +110,12 @@ export class UsersComponent implements OnInit { } onEdit(id: string) { - combineLatest([ - this.store.dispatch(new IdentityGetUserById(id)), - this.store.dispatch(new IdentityGetUserRoles(id)) - ]) + combineLatest([this.store.dispatch(new IdentityGetUserById(id)), this.store.dispatch(new IdentityGetUserRoles(id))]) .pipe( filter(([res1, res2]) => res1 && res2), map(([state, _]) => state), - pluck("IdentityState"), - take(1) + pluck('IdentityState'), + take(1), ) .subscribe((state: Identity.State) => { this.selected = state.selectedUser; @@ -169,11 +129,8 @@ export class UsersComponent implements OnInit { const { roleNames } = this.form.value; const mappedRoleNames = snq( - () => - roleNames - .filter(role => !!role[Object.keys(role)[0]]) - .map(role => Object.keys(role)[0]), - [] + () => roleNames.filter(role => !!role[Object.keys(role)[0]]).map(role => Object.keys(role)[0]), + [], ); this.store @@ -182,12 +139,12 @@ export class UsersComponent implements OnInit { ? new IdentityUpdateUser({ ...this.form.value, id: this.selected.id, - roleNames: mappedRoleNames + roleNames: mappedRoleNames, }) : new IdentityAddUser({ ...this.form.value, - roleNames: mappedRoleNames - }) + roleNames: mappedRoleNames, + }), ) .subscribe(() => { this.isModalVisible = false; @@ -196,13 +153,9 @@ export class UsersComponent implements OnInit { delete(id: string, userName: string) { this.confirmationService - .warn( - "AbpIdentity::UserDeletionConfirmationMessage", - "AbpIdentity::AreYouSure", - { - messageLocalizationParams: [userName] - } - ) + .warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', { + messageLocalizationParams: [userName], + }) .subscribe((status: Toaster.Status) => { if (status === Toaster.Status.confirm) { this.store.dispatch(new IdentityDeleteUser(id)); @@ -219,8 +172,6 @@ export class UsersComponent implements OnInit { get() { this.loading = true; - this.store - .dispatch(new IdentityGetUsers(this.pageQuery)) - .subscribe(() => (this.loading = false)); + this.store.dispatch(new IdentityGetUsers(this.pageQuery)).subscribe(() => (this.loading = false)); } } diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html index ec73bda006..94b45d982b 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html @@ -1,4 +1,4 @@ - +

    {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}

    diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 4488d0fc34..102b1fd506 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -88,7 +88,7 @@
    • - +

    {{ selectedModalContent.title | abpLocalization }}

     @@ -107,7 +107,7 @@     - +
    @@ -118,7 +118,7 @@ - +
    @@ -144,6 +144,6 @@ - + Manage Features diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts index 38dd2f9d8a..a18667570c 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts @@ -36,12 +36,12 @@ export class TenantsComponent { defaultConnectionString: string; - _useSharedDatabase: boolean; - isModalVisible: boolean; selectedModalContent = {} as SelectedModalContent; + _useSharedDatabase: boolean; + get useSharedDatabase(): boolean { return this.defaultConnectionStringForm.get('useSharedDatabase').value; } @@ -50,13 +50,13 @@ export class TenantsComponent { return this.defaultConnectionStringForm.get('defaultConnectionString').value; } - @ViewChild('TenantModalTemplate', { static: false }) + @ViewChild('tenantModalTemplate', { static: false }) tenantModalTemplate: TemplateRef; - @ViewChild('ConnectionStringModalTemplate', { static: false }) + @ViewChild('connectionStringModalTemplate', { static: false }) connectionStringModalTemplate: TemplateRef; - @ViewChild('FeaturesModalTemplate', { static: false }) + @ViewChild('featuresModalTemplate', { static: false }) featuresModalTemplate: TemplateRef; constructor( diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html index 0a7a1b6b32..9712ae1052 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html @@ -33,7 +33,7 @@ -