Skip to content

Commit 67b7fa6

Browse files
iyilm4ziyilm4z
authored
Merge pull request #20 from iyilm4z/master
Migrate users creation and edition to @angular/material components #1
2 parents 68040d6 + a94455c commit 67b7fa6

13 files changed

+712
-573
lines changed

‎angular/src/app/app.module.ts

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
44
import { JsonpModule } from '@angular/http';
5-
import { HttpClientModule, HttpResponse } from '@angular/common/http';
5+
import { HttpClientModule } from '@angular/common/http';
66

77
import { ModalModule } from 'ngx-bootstrap';
88
import { NgxPaginationModule } from 'ngx-pagination';
@@ -17,9 +17,6 @@ import { SharedModule } from '@shared/shared.module';
1717

1818
import { HomeComponent } from '@app/home/home.component';
1919
import { AboutComponent } from '@app/about/about.component';
20-
import { UsersComponent } from '@app/users/users.component';
21-
import { CreateUserComponent } from '@app/users/create-user/create-user.component';
22-
import { EditUserComponent } from './users/edit-user/edit-user.component';
2320
import { TenantsComponent } from '@app/tenants/tenants.component';
2421
import { TopBarComponent } from '@app/layout/topbar.component';
2522
import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
@@ -33,50 +30,56 @@ import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dia
3330
import { RolesComponent } from '@app/roles/roles.component';
3431
import { CreateRoleDialogComponent } from './roles/create-role/create-role-dialog.component';
3532
import { EditRoleDialogComponent } from './roles/edit-role/edit-role-dialog.component';
33+
// users
34+
import { UsersComponent } from '@app/users/users.component';
35+
import { CreateUserDialogComponent } from '@app/users/create-user/create-user-dialog.component';
36+
import { EditUserDialogComponent } from '@app/users/edit-user/edit-user-dialog.component';
3637

3738
@NgModule({
38-
declarations: [
39-
AppComponent,
40-
HomeComponent,
41-
AboutComponent,
42-
TenantsComponent,
43-
CreateTenantDialogComponent,
44-
EditTenantDialogComponent,
45-
UsersComponent,
46-
CreateUserComponent,
47-
EditUserComponent,
48-
TopBarComponent,
49-
TopBarLanguageSwitchComponent,
50-
SideBarUserAreaComponent,
51-
SideBarNavComponent,
52-
SideBarFooterComponent,
53-
RightSideBarComponent,
54-
// roles
55-
RolesComponent,
56-
CreateRoleDialogComponent,
57-
EditRoleDialogComponent
58-
],
59-
imports: [
60-
CommonModule,
61-
FormsModule,
62-
HttpClientModule,
63-
JsonpModule,
64-
ModalModule.forRoot(),
65-
AbpModule,
66-
AppRoutingModule,
67-
ServiceProxyModule,
68-
SharedModule,
69-
NgxPaginationModule
70-
],
71-
providers: [
72-
73-
],
74-
entryComponents: [
75-
CreateTenantDialogComponent,
76-
EditTenantDialogComponent,
77-
// roles
78-
CreateRoleDialogComponent,
79-
EditRoleDialogComponent
80-
]
39+
declarations: [
40+
AppComponent,
41+
HomeComponent,
42+
AboutComponent,
43+
TenantsComponent,
44+
CreateTenantDialogComponent,
45+
EditTenantDialogComponent,
46+
TopBarComponent,
47+
TopBarLanguageSwitchComponent,
48+
SideBarUserAreaComponent,
49+
SideBarNavComponent,
50+
SideBarFooterComponent,
51+
RightSideBarComponent,
52+
// roles
53+
RolesComponent,
54+
CreateRoleDialogComponent,
55+
EditRoleDialogComponent,
56+
// users
57+
UsersComponent,
58+
CreateUserDialogComponent,
59+
EditUserDialogComponent
60+
],
61+
imports: [
62+
CommonModule,
63+
FormsModule,
64+
HttpClientModule,
65+
JsonpModule,
66+
ModalModule.forRoot(),
67+
AbpModule,
68+
AppRoutingModule,
69+
ServiceProxyModule,
70+
SharedModule,
71+
NgxPaginationModule
72+
],
73+
providers: [],
74+
entryComponents: [
75+
CreateTenantDialogComponent,
76+
EditTenantDialogComponent,
77+
// roles
78+
CreateRoleDialogComponent,
79+
EditRoleDialogComponent,
80+
// users
81+
CreateUserDialogComponent,
82+
EditUserDialogComponent
83+
]
8184
})
82-
export class AppModule { }
85+
export class AppModule {}

‎angular/src/app/users/create-user/create-user-dialog.component.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<form autocomplete="off" #createUserModal="ngForm" (ngSubmit)="save()">
2+
<h1 mat-dialog-title>{{ "CreateNewUser" | localize }}</h1>
3+
<mat-dialog-content style="width:800px;height:300px;">
4+
<mat-tab-group>
5+
<mat-tab [label]="'UserDetails' | localize">
6+
<br />
7+
<div class="row-fluid">
8+
<div class="col-md-6">
9+
<mat-form-field>
10+
<input
11+
matInput
12+
name="UserName"
13+
[placeholder]="'UserName' | localize"
14+
[(ngModel)]="user.userName"
15+
required
16+
minlength="2"
17+
maxlength="32"
18+
/>
19+
</mat-form-field>
20+
<mat-form-field>
21+
<input
22+
matInput
23+
name="Name"
24+
[placeholder]="'Name' | localize"
25+
[(ngModel)]="user.name"
26+
required
27+
maxlength="32"
28+
/>
29+
</mat-form-field>
30+
<mat-form-field>
31+
<input
32+
matInput
33+
#password="ngModel"
34+
[placeholder]="'Password' | localize"
35+
[(ngModel)]="user.password"
36+
type="password"
37+
name="password"
38+
id="password"
39+
validateEqual="confirmPassword"
40+
reverse="true"
41+
required
42+
maxlength="32"
43+
/>
44+
</mat-form-field>
45+
<div class="checkbox-wrapper">
46+
<mat-checkbox name="IsActive" [(ngModel)]="user.isActive">
47+
{{ "IsActive" | localize }}
48+
</mat-checkbox>
49+
</div>
50+
</div>
51+
<div class="col-md-6">
52+
<mat-form-field>
53+
<input
54+
matInput
55+
name="EmailAddress"
56+
[placeholder]="'EmailAddress' | localize"
57+
[(ngModel)]="user.emailAddress"
58+
type="email"
59+
required
60+
maxlength="256"
61+
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$"
62+
/>
63+
</mat-form-field>
64+
<mat-form-field>
65+
<input
66+
matInput
67+
name="Surname"
68+
[placeholder]="'Surname' | localize"
69+
[(ngModel)]="user.surname"
70+
required
71+
maxlength="32"
72+
/>
73+
</mat-form-field>
74+
<mat-form-field>
75+
<input
76+
matInput
77+
[placeholder]="'ConfirmPassword' | localize"
78+
[(ngModel)]="user.confirmPassword"
79+
type="password"
80+
name="confirmPassword"
81+
id="confirmPassword"
82+
validateEqual="password"
83+
reverse="false"
84+
required
85+
maxlength="32"
86+
/>
87+
</mat-form-field>
88+
</div>
89+
</div>
90+
</mat-tab>
91+
<mat-tab [label]="'UserRoles' | localize">
92+
<br />
93+
<div class="row-fluid">
94+
<ng-template ngFor let-role [ngForOf]="roles">
95+
<div class="col-sm-6">
96+
<div class="checkbox-wrapper">
97+
<mat-checkbox
98+
[checked]="isRoleChecked(role.normalizedName)"
99+
(change)="onRoleChange(role, $event)"
100+
>
101+
{{ role.name }}
102+
</mat-checkbox>
103+
</div>
104+
</div>
105+
</ng-template>
106+
</div>
107+
</mat-tab>
108+
</mat-tab-group>
109+
</mat-dialog-content>
110+
<div mat-dialog-actions align="end">
111+
<button mat-button type="button" [disabled]="saving" (click)="close()">
112+
{{ "Cancel" | localize }}
113+
</button>
114+
<button
115+
mat-flat-button
116+
type="submit"
117+
flex="15"
118+
color="primary"
119+
[disabled]="!createUserModal.form.valid || saving"
120+
>
121+
{{ "Save" | localize }}
122+
</button>
123+
</div>
124+
</form>

‎angular/src/app/users/create-user/create-user-dialog.component.ts

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Component, Injector, OnInit } from '@angular/core';
2+
import { MatDialogRef, MatCheckboxChange } from '@angular/material';
3+
import { finalize } from 'rxjs/operators';
4+
import * as _ from 'lodash';
5+
import { AppComponentBase } from '@shared/app-component-base';
6+
import {
7+
UserServiceProxy,
8+
CreateUserDto,
9+
RoleDto
10+
} from '@shared/service-proxies/service-proxies';
11+
12+
@Component({
13+
templateUrl: './create-user-dialog.component.html',
14+
styles: [
15+
`
16+
mat-form-field {
17+
width: 100%;
18+
}
19+
mat-checkbox {
20+
padding-bottom: 5px;
21+
}
22+
`
23+
]
24+
})
25+
export class CreateUserDialogComponent extends AppComponentBase
26+
implements OnInit {
27+
saving = false;
28+
user: CreateUserDto = new CreateUserDto();
29+
roles: RoleDto[] = [];
30+
checkedRolesMap: { [key: string]: boolean } = {};
31+
defaultRoleCheckedStatus = false;
32+
33+
constructor(
34+
injector: Injector,
35+
private _userService: UserServiceProxy,
36+
private _dialogRef: MatDialogRef<CreateUserDialogComponent>
37+
) {
38+
super(injector);
39+
}
40+
41+
ngOnInit(): void {
42+
this.user.init({ isActive: true });
43+
44+
this._userService.getRoles().subscribe(result => {
45+
this.roles = result.items;
46+
this.setInitialRolesStatus();
47+
});
48+
}
49+
50+
setInitialRolesStatus(): void {
51+
_.map(this.roles, item => {
52+
this.checkedRolesMap[item.normalizedName] = this.isRoleChecked(
53+
item.normalizedName
54+
);
55+
});
56+
}
57+
58+
isRoleChecked(normalizedName: string): boolean {
59+
// just return default role checked status
60+
// it's better to use a setting
61+
return this.defaultRoleCheckedStatus;
62+
}
63+
64+
onRoleChange(role: RoleDto, $event: MatCheckboxChange) {
65+
this.checkedRolesMap[role.normalizedName] = $event.checked;
66+
}
67+
68+
getCheckedRoles(): string[] {
69+
const roles: string[] = [];
70+
_.forEach(this.checkedRolesMap, function(value, key) {
71+
if (value) {
72+
roles.push(key);
73+
}
74+
});
75+
return roles;
76+
}
77+
78+
save(): void {
79+
this.saving = true;
80+
81+
this.user.roleNames = this.getCheckedRoles();
82+
83+
this._userService
84+
.create(this.user)
85+
.pipe(
86+
finalize(() => {
87+
this.saving = false;
88+
})
89+
)
90+
.subscribe(() => {
91+
this.notify.info(this.l('SavedSuccessfully'));
92+
this.close(true);
93+
});
94+
}
95+
96+
close(result: any): void {
97+
this._dialogRef.close(result);
98+
}
99+
}

0 commit comments

Comments
 (0)