Skip to content

Commit d2b53ba

Browse files
gnllucenagnllucena
committed
Form builder.
1 parent 3182e8b commit d2b53ba

14 files changed

+159
-67
lines changed

‎src/app/modules/core/error.handling.ts renamed to ‎src/app/modules/core/error-handling.ts

File renamed without changes.

‎src/app/modules/core/http-backend.interceptor.ts

+10-12
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,16 @@ export class HttpBackendInterceptor implements HttpInterceptor {
4848

4949
var data = new Date();
5050

51-
for (let i = 0; i < 10; i++) {
52-
users.push(new User({
53-
Id: 1,
54-
Name: 'Gabriel Lucena',
55-
Email: '[email protected]',
56-
Document: '023.437.673-27',
57-
Birthdate: new Date('1991-04-28T12:00:00'),
58-
Country: 'Brasil',
59-
Profile: 'Administrator',
60-
Active: true
61-
}));
62-
}
51+
users.push(new User({Id: 1, Name: 'Pikachu', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
52+
users.push(new User({Id: 2, Name: 'Charmander', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
53+
users.push(new User({Id: 3, Name: 'Squirtle', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
54+
users.push(new User({Id: 4, Name: 'Bulbasaur', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
55+
users.push(new User({Id: 5, Name: 'Mew', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
56+
users.push(new User({Id: 6, Name: 'Chansey', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
57+
users.push(new User({Id: 7, Name: 'Blaziken', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
58+
users.push(new User({Id: 8, Name: 'Feraligart', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
59+
users.push(new User({Id: 9, Name: 'Chikorita', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
60+
users.push(new User({Id: 10, Name: 'Torchic', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
6361

6462
let pagination: Pagination<User> = {
6563
Items: users,

‎src/app/modules/core/validators.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const DateValidation = () => {
2+
return RegExp('(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)');
3+
}

‎src/app/modules/validations/cpf.validation.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const CpfValidation = validator();
2+
3+
function validator(): RegExp {
4+
return RegExp('(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)');
5+
}

‎src/app/modules/validations/date.validation.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const DateValidation = validator();
2+
3+
function validator(): RegExp {
4+
return RegExp('(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)');
5+
}

‎src/app/routes/users/users-add/users-add.component.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div [@overlay-transition]="(user | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
1+
<div [@overlay-transition]="(visible | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
22

3-
<div #panel [@panel-transition]="(user | async) ? 'visible' : 'hidden'" class="panel">
3+
<div #panel [@panel-transition]="(visible | async) ? 'visible' : 'hidden'" class="panel">
44
<div class="float-left">
55
<h2 class="mb-4">Create a new user</h2>
66
</div>
@@ -13,5 +13,8 @@ <h2 class="mb-4">Create a new user</h2>
1313

1414
<div class="clearfix"></div>
1515

16-
<users-form></users-form>
16+
<users-form
17+
[form]="form"
18+
[countries]="countries"
19+
></users-form>
1720
</div>

‎src/app/routes/users/users-add/users-add.component.ts

+43-8
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
77
import { faTimes } from '@fortawesome/free-solid-svg-icons';
88
import { Router } from '@angular/router';
99
import { OverlayAnimation } from 'src/app/modules/animations/overlay.animation';
10+
import { Country } from 'src/app/domain/country';
11+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
12+
import { DateValidation } from 'src/app/modules/validations/date.validation';
1013

1114
@Component({
1215
selector: 'users-add',
@@ -16,16 +19,48 @@ import { OverlayAnimation } from 'src/app/modules/animations/overlay.animation';
1619
})
1720
export class UsersAddComponent {
1821
@ViewChild('panel') panel: ElementRef;
19-
20-
public user = new BehaviorSubject<User>(null);
22+
23+
public visible = new BehaviorSubject<Boolean>(false);
24+
public form: FormGroup;
25+
public user: User = new User;
26+
public countries: Country[] = [];
2127
public faTimes: IconDefinition = faTimes;
2228

23-
constructor(private renderer: Renderer2,
24-
private location: Location,
25-
private router: Router) {
29+
constructor(
30+
private formBuilder: FormBuilder,
31+
private renderer: Renderer2,
32+
private location: Location,
33+
private router: Router) {
34+
35+
this.visible.subscribe((visible: Boolean) => {
36+
if (visible) {
37+
this.form = this.formBuilder.group({
38+
Name: this.formBuilder.control({
39+
value: this.user.Name,
40+
disabled: false
41+
}, [ Validators.required ]),
42+
Email: this.formBuilder.control({
43+
value: this.user.Email,
44+
disabled: false,
45+
}, [ Validators.required, Validators.email ]),
46+
Document: this.formBuilder.control({
47+
value: this.user.Document,
48+
disabled: false
49+
}, [ Validators.required, Validators.minLength(6) ]),
50+
Birthdate: this.formBuilder.control({
51+
value: this.user.Birthdate
52+
}, [ Validators.required, Validators.pattern(DateValidation) ]),
53+
Country: this.formBuilder.control({
54+
value: this.user.Country
55+
}, [ Validators.required ]),
56+
Profile: this.formBuilder.control({
57+
value: this.user.Profile
58+
}, [ Validators.required ]),
59+
Active: this.formBuilder.control({
60+
value: this.user.Active
61+
}),
62+
});
2663

27-
this.user.subscribe((user: User) => {
28-
if (user) {
2964
this.renderer.addClass(document.body, 'overflow');
3065
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
3166
this.location.go(this.router.url.split('/')[1] + '/new');
@@ -37,6 +72,6 @@ export class UsersAddComponent {
3772
}
3873

3974
close() {
40-
this.user.next(null);
75+
this.visible.next(false);
4176
}
4277
}

‎src/app/routes/users/users-edit/users-edit.component.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div [@overlay-transition]="(user | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
1+
<div [@overlay-transition]="(visible | async) ? 'visible' : 'hidden'" class="overlay" (click)="close()"></div>
22

3-
<div #panel [@panel-transition]="(user | async) ? 'visible' : 'hidden'" class="panel">
3+
<div #panel [@panel-transition]="(visible | async) ? 'visible' : 'hidden'" class="panel">
44
<div class="float-left">
55
<h2 class="mb-4">Edit a user</h2>
66
</div>
@@ -13,5 +13,8 @@ <h2 class="mb-4">Edit a user</h2>
1313

1414
<div class="clearfix"></div>
1515

16-
<users-form></users-form>
16+
<users-form
17+
[form]="form"
18+
[countries]="countries"
19+
></users-form>
1720
</div>

‎src/app/routes/users/users-edit/users-edit.component.ts

+50-15
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { BehaviorSubject } from 'rxjs';
66
import { Location } from '@angular/common';
77
import { Router } from '@angular/router';
88
import { User } from 'src/app/domain/user';
9+
import { Country } from 'src/app/domain/country';
10+
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
11+
import { DateValidation } from 'src/app/modules/validations/date.validation';
912

1013
@Component({
1114
selector: 'users-edit',
@@ -16,26 +19,58 @@ import { User } from 'src/app/domain/user';
1619
export class UsersEditComponent {
1720
@ViewChild('panel') panel: ElementRef;
1821

19-
public user = new BehaviorSubject<User>(null);
22+
public visible = new BehaviorSubject<Boolean>(false);
23+
public form: FormGroup;
24+
public user: User = new User;
25+
public countries: Country[] = [];
2026
public faTimes: IconDefinition = faTimes;
2127

22-
constructor(private renderer: Renderer2,
23-
private location: Location,
24-
private router: Router) {
28+
constructor(
29+
private formBuilder: FormBuilder,
30+
private renderer: Renderer2,
31+
private location: Location,
32+
private router: Router) {
2533

26-
this.user.subscribe((user: User) => {
27-
if (user) {
28-
this.renderer.addClass(document.body, 'overflow');
29-
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
30-
this.location.go(this.router.url.split('/')[1] + '/' + user.Id);
31-
} else {
32-
this.renderer.removeClass(document.body, 'overflow');
33-
this.location.go(this.router.url.split('/')[1]);
34-
}
35-
});
34+
this.visible.subscribe((visible: Boolean) => {
35+
if (visible) {
36+
this.form = this.formBuilder.group({
37+
Name: this.formBuilder.control({
38+
value: this.user.Name,
39+
disabled: false
40+
}, [ Validators.required ]),
41+
Email: this.formBuilder.control({
42+
value: this.user.Email,
43+
disabled: false,
44+
}, [ Validators.required, Validators.email ]),
45+
Document: this.formBuilder.control({
46+
value: this.user.Document,
47+
disabled: true
48+
}, [ Validators.required, Validators.minLength(6) ]),
49+
Birthdate: this.formBuilder.control({
50+
value: this.user.Birthdate
51+
}, [ Validators.required, Validators.pattern(DateValidation) ]),
52+
Country: this.formBuilder.control({
53+
value: this.user.Country
54+
}, [ Validators.required ]),
55+
Profile: this.formBuilder.control({
56+
value: this.user.Profile
57+
}, [ Validators.required ]),
58+
Active: this.formBuilder.control({
59+
value: this.user.Active
60+
}),
61+
});
62+
63+
this.renderer.addClass(document.body, 'overflow');
64+
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
65+
this.location.go(this.router.url.split('/')[1] + '/' + this.user.Id);
66+
} else {
67+
this.renderer.removeClass(document.body, 'overflow');
68+
this.location.go(this.router.url.split('/')[1]);
69+
}
70+
});
3671
}
3772

3873
close() {
39-
this.user.next(null);
74+
this.visible.next(false);
4075
}
4176
}

‎src/app/routes/users/users-filter/users-filter.component.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
</div>
1818

1919
<div class="float-right">
20-
<button class="btn btn-primary" (click)="add()">New</button>
20+
<button class="btn btn-primary mr-2" (click)="add()">Export</button>
21+
<button class="btn btn-primary" (click)="add()">New</button>
2122
</div>
2223

2324
<div class="clearfix"></div>

‎src/app/routes/users/users-form/users-form.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="row mb-5">
22
<div class="col-lg-12">
3-
<form [formGroup]="filters" novalidate>
3+
<form *ngIf="form" [formGroup]="form" novalidate>
44
<div class="form-row">
55
<div class="form-group col-md-6">
66
<label for="Name">Name</label>
@@ -35,7 +35,7 @@
3535
</div>
3636

3737
<div class="form-row">
38-
<div class="form-group col-md-3">
38+
<div class="form-group col-md-6">
3939
<label for="Name">User profile</label>
4040
<div>
4141
<div class="custom-control custom-radio custom-control-inline">
@@ -49,7 +49,7 @@
4949
</div>
5050
</div>
5151

52-
<div class="form-group col-md-4">
52+
<div class="form-group col-md-6">
5353
<label for="Name">Active</label>
5454

5555
<div class="custom-control custom-checkbox my-1 mr-sm-2">

‎src/app/routes/users/users-form/users-form.component.ts

+6-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ViewEncapsulation, Output, EventEmitter, Input } from '@angular/core';
2-
import { FormGroup, FormControl } from '@angular/forms';
2+
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
33
import { User } from 'src/app/domain/user';
4+
import { Country } from 'src/app/domain/country';
45

56
@Component({
67
selector: 'users-form',
@@ -9,24 +10,13 @@ import { User } from 'src/app/domain/user';
910
})
1011

1112
export class UsersFormComponent {
12-
@Input() user: User;
13-
@Output() validatedEvent: EventEmitter<User> = new EventEmitter<User>();
13+
@Input() form: FormGroup;
14+
@Input() countries: Country[];
15+
@Output() validatedEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
1416

15-
countries = ['USA', 'Germany', 'Italy', 'France'];
16-
17-
public filters = new FormGroup({
18-
Name: new FormControl(),
19-
Email: new FormControl(),
20-
Document: new FormControl(),
21-
Birthdate: new FormControl(),
22-
Country: new FormControl(),
23-
Profile: new FormControl(),
24-
Active: new FormControl()
25-
});
26-
2717
constructor() { }
2818

2919
submit(): void {
30-
this.validatedEvent.emit(this.user);
20+
this.validatedEvent.emit(this.form);
3121
}
3222
}

‎src/app/routes/users/users-page/users-page.component.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ <h2 class="mb-4">Users</h2>
1313
(deleteEvent)="delete($event)">
1414
</users-list>
1515

16-
<users-add #userAdd>
16+
<users-add
17+
#userAdd>
1718
</users-add>
1819

19-
<users-edit #userEdit>
20+
<users-edit
21+
#userEdit>
2022
</users-edit>
2123

2224
<!-- <confirmation-modal

‎src/app/routes/users/users-page/users-page.component.ts

+16-4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export class UsersPageComponent implements OnInit {
2424
@ViewChild('userEdit') userEdit: UsersEditComponent;
2525
// @ViewChild('userDelete') userDelete: ConfirmationModalComponent;
2626

27+
public countries: Country[] = [];
28+
2729
constructor(
2830
private router: Router,
2931
private userService: HttpService<User>,
@@ -35,13 +37,21 @@ export class UsersPageComponent implements OnInit {
3537

3638
if (this.router.url.includes('new')) {
3739
forkJoin([list, countries]).subscribe(results => {
38-
this.userAdd.user.next(new User());
40+
this.userAdd.countries = results[1];
41+
this.userAdd.user = new User();
42+
this.userAdd.visible.next(true);
3943
});
4044
} else if (this.router.url.includes('users/')) {
4145
let get = this.userService.get('users', 1);
4246

4347
forkJoin([list, countries, get]).subscribe(results => {
44-
this.userEdit.user.next(results[2]);
48+
this.userEdit.countries = results[1];
49+
this.userEdit.user = results[2];
50+
this.userEdit.visible.next(true);
51+
});
52+
} else {
53+
forkJoin([list, countries]).subscribe(results => {
54+
this.countries = results[1];
4555
});
4656
}
4757
}
@@ -51,11 +61,13 @@ export class UsersPageComponent implements OnInit {
5161
}
5262

5363
add(): void {
54-
this.userAdd.user.next(new User());
64+
this.userAdd.user = new User();
65+
this.userAdd.visible.next(true);
5566
}
5667

5768
edit(user: User): void {
58-
this.userEdit.user.next(user);
69+
this.userEdit.user = user;
70+
this.userEdit.visible.next(true);
5971
}
6072

6173
delete(user: User): void {

0 commit comments

Comments
 (0)