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

Lines changed: 10 additions & 12 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 6 additions & 3 deletions
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

Lines changed: 43 additions & 8 deletions
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

Lines changed: 6 additions & 3 deletions
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

Lines changed: 50 additions & 15 deletions
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

Lines changed: 2 additions & 1 deletion
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>

0 commit comments

Comments
 (0)