From 1ca585f1ac63e37d71bc8d4a6406e5233067112b Mon Sep 17 00:00:00 2001 From: TheDiaval Date: Tue, 30 Jul 2019 16:03:24 +0300 Subject: [PATCH] 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 {}