Skip to content

Commit 64e33dd

Browse files
gnllucenagnllucena
committed
Reactive forms binding.
1 parent d2b53ba commit 64e33dd

12 files changed

+101
-101
lines changed

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

+24-21
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,16 @@ export class HttpBackendInterceptor implements HttpInterceptor {
4848

4949
var data = new Date();
5050

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 }));
51+
users.push(new User({ Id: 1, Name: 'Pikachu', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', 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: 'Kanto', Profile: 'Regular', Active: false }));
53+
users.push(new User({ Id: 3, Name: 'Squirtle', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', 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: 'Kanto', 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: 'Kanto', Profile: 'Administrator', Active: false }));
56+
users.push(new User({ Id: 6, Name: 'Chansey', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', 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: 'Hoenn', Profile: 'Regular', 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: 'Johto', 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: 'Johto', Profile: 'Regular', Active: false }));
60+
users.push(new User({ Id: 10, Name: 'Torchic', Email: '[email protected]', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Hoenn', Profile: 'Regular', Active: true }));
6161

6262
let pagination: Pagination<User> = {
6363
Items: users,
@@ -70,27 +70,30 @@ export class HttpBackendInterceptor implements HttpInterceptor {
7070
}
7171

7272
if (req.url.includes('users/') && req.method === 'GET') {
73-
var user: User = {
74-
Id: 1,
75-
Name: 'Gabriel Lucena',
76-
Email: 'gnllucena@gmail.com',
77-
Document: '023.437.673-27',
73+
var user = new User({
74+
Id: 666,
75+
Name: 'Mewtwo',
76+
Email: 'mewtwo@gmail.com',
77+
Document: '02343767327',
7878
Birthdate: new Date('1991-04-28T12:00:00'),
79-
Country: 'Brasil',
79+
Country: 'Kanto',
8080
Profile: 'Administrator',
8181
Active: true
82-
}
82+
})
8383

8484
return of(new HttpResponse({ status: 200, body: user }));
8585
}
8686

8787
if (req.url.includes('countries') && req.method === 'GET') {
8888
let countries: Country[] = [];
8989

90-
countries.push(new Country({ Id: 1, Name: 'Brazil' }));
91-
countries.push(new Country({ Id: 1, Name: 'United States of America' }));
92-
countries.push(new Country({ Id: 1, Name: 'Thailand' }));
93-
countries.push(new Country({ Id: 1, Name: 'Greece' }));
90+
countries.push(new Country({ Id: 1, Name: 'Kanto' }));
91+
countries.push(new Country({ Id: 2, Name: 'Johto' }));
92+
countries.push(new Country({ Id: 3, Name: 'Hoenn' }));
93+
countries.push(new Country({ Id: 4, Name: 'Sinnoh' }));
94+
countries.push(new Country({ Id: 5, Name: 'Unova' }));
95+
countries.push(new Country({ Id: 6, Name: 'Kalos' }));
96+
countries.push(new Country({ Id: 7, Name: 'Alola' }));
9497

9598
return of(new HttpResponse({ status: 200, body: countries }));
9699
}

‎src/app/routes/dot/dot.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
33
import { UIModule } from '../../modules/ui/.ui.module';
4-
import { DotService } from './dot.service';
4+
import { HttpService } from 'src/app/services/http.service';
55

66
export const appRoutes: Routes = [
77
{
@@ -16,7 +16,7 @@ export const appRoutes: Routes = [
1616
RouterModule.forChild(appRoutes)
1717
],
1818
providers: [
19-
DotService
19+
HttpService
2020
]
2121
})
2222
export class DotModule { }

‎src/app/routes/dot/dot.service.ts

-16
This file was deleted.

‎src/app/routes/dot/myself/myself-page/dot-myself-page.component.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
22
import { AuthenticationService } from '../../../../services/authentication.service';
3-
import { DotService } from './../../dot.service';
43
import { Card } from './../../../../domain/card';
54
import { ListAnimation } from './../../../../modules/animations/list.animation';
65
import { Observable } from 'rxjs';
6+
import { HttpService } from 'src/app/services/http.service';
77

88
@Component({
99
selector: 'dot-myself-page',
@@ -17,9 +17,9 @@ export class DotMyselfPageComponent implements OnInit {
1717

1818
constructor(
1919
public authenticationService: AuthenticationService,
20-
public dotService: DotService) { }
20+
public dotService: HttpService<Card>) { }
2121

2222
ngOnInit(): void {
23-
this.cards = this.dotService.get();
23+
this.cards = this.dotService.list('cards');
2424
}
2525
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ <h2 class="mb-4">Create a new user</h2>
1616
<users-form
1717
[form]="form"
1818
[countries]="countries"
19+
[parent]="'Add'"
1920
></users-form>
2021
</div>

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

+40-36
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,47 @@ export class UsersAddComponent {
3232
private location: Location,
3333
private router: Router) {
3434

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-
});
35+
this.visible.subscribe((visible: Boolean) => {
36+
if (visible) {
37+
this.form = this.formBuilder.group({
38+
Name: this.formBuilder.control({
39+
value: '',
40+
disabled: false
41+
}, [ Validators.required ]),
42+
Email: this.formBuilder.control({
43+
value: '',
44+
disabled: false,
45+
}, [ Validators.required, Validators.email ]),
46+
Document: this.formBuilder.control({
47+
value: '',
48+
disabled: false
49+
}, [ Validators.required, Validators.minLength(6) ]),
50+
Birthdate: this.formBuilder.control({
51+
value: '',
52+
disabled: false
53+
}, [ Validators.required, Validators.pattern(DateValidation) ]),
54+
Country: this.formBuilder.control({
55+
value: '',
56+
disabled: false
57+
}, [ Validators.required ]),
58+
Profile: this.formBuilder.control({
59+
value: 'Regular',
60+
disabled: false
61+
}, [ Validators.required ]),
62+
Active: this.formBuilder.control({
63+
value: true,
64+
disabled: false
65+
}),
66+
});
6367

64-
this.renderer.addClass(document.body, 'overflow');
65-
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
66-
this.location.go(this.router.url.split('/')[1] + '/new');
67-
} else {
68-
this.renderer.removeClass(document.body, 'overflow');
69-
this.location.go(this.router.url.split('/')[1]);
70-
}
71-
});
68+
this.renderer.addClass(document.body, 'overflow');
69+
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
70+
this.location.go(this.router.url.split('/')[1] + '/new');
71+
} else {
72+
this.renderer.removeClass(document.body, 'overflow');
73+
this.location.go(this.router.url.split('/')[1]);
74+
}
75+
});
7276
}
7377

7478
close() {

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

+1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ <h2 class="mb-4">Edit a user</h2>
1616
<users-form
1717
[form]="form"
1818
[countries]="countries"
19+
[parent]="'Edit'"
1920
></users-form>
2021
</div>

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

+9-5
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,23 @@ export class UsersEditComponent {
4747
disabled: true
4848
}, [ Validators.required, Validators.minLength(6) ]),
4949
Birthdate: this.formBuilder.control({
50-
value: this.user.Birthdate
50+
value: this.user.Birthdate.toLocaleDateString(),
51+
disabled: false
5152
}, [ Validators.required, Validators.pattern(DateValidation) ]),
5253
Country: this.formBuilder.control({
53-
value: this.user.Country
54+
value: this.user.Country,
55+
disabled: false
5456
}, [ Validators.required ]),
5557
Profile: this.formBuilder.control({
56-
value: this.user.Profile
58+
value: this.user.Profile,
59+
disabled: false
5760
}, [ Validators.required ]),
5861
Active: this.formBuilder.control({
59-
value: this.user.Active
62+
value: this.user.Active,
63+
disabled: false
6064
}),
6165
});
62-
66+
6367
this.renderer.addClass(document.body, 'overflow');
6468
this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
6569
this.location.go(this.router.url.split('/')[1] + '/' + this.user.Id);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</div>
1414

1515
<div class="float-left">
16-
<button class="btn btn" (click)="filter()">Search</button>
16+
<button class="btn btn-primary" (click)="filter()">Search</button>
1717
</div>
1818

1919
<div class="float-right">

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

+9-12
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,9 @@
2424

2525
<div class="form-group col-md-6">
2626
<label for="Country">Country of birth</label>
27-
<select class="form-control" id="exampleFormControlSelect1">
28-
<option>1</option>
29-
<option>2</option>
30-
<option>3</option>
31-
<option>4</option>
32-
<option>5</option>
27+
<select formControlName="Country" class="form-control custom-select">
28+
<option value="">Select country of birth</option>
29+
<option *ngFor="let country of countries" [ngValue]="country.Name">{{ country.Name }}</option>
3330
</select>
3431
</div>
3532
</div>
@@ -39,12 +36,12 @@
3936
<label for="Name">User profile</label>
4037
<div>
4138
<div class="custom-control custom-radio custom-control-inline">
42-
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
43-
<label class="custom-control-label" for="customRadioInline1">Administrator</label>
39+
<input formControlName="Profile" type="radio" value="Administrator" id="AdministratorUser{{parent}}" class="custom-control-input">
40+
<label class="custom-control-label" for="AdministratorUser{{parent}}">Administrator</label>
4441
</div>
4542
<div class="custom-control custom-radio custom-control-inline">
46-
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
47-
<label class="custom-control-label" for="customRadioInline2">Regular user</label>
43+
<input formControlName="Profile" type="radio" value="Regular" id="RegularUser{{parent}}" class="custom-control-input">
44+
<label class="custom-control-label" for="RegularUser{{parent}}">Regular user</label>
4845
</div>
4946
</div>
5047
</div>
@@ -53,8 +50,8 @@
5350
<label for="Name">Active</label>
5451

5552
<div class="custom-control custom-checkbox my-1 mr-sm-2">
56-
<input type="checkbox" class="custom-control-input" id="customControlInline">
57-
<label class="custom-control-label" for="customControlInline">Check this if you want to activate user</label>
53+
<input formControlName="Active" type="checkbox" id="ActiveUser{{parent}}" class="custom-control-input">
54+
<label class="custom-control-label" for="ActiveUser{{parent}}">Check this if you want to activate user</label>
5855
</div>
5956
</div>
6057
</div>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, ViewEncapsulation, Output, EventEmitter, Input } from '@angular/core';
22
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
3-
import { User } from 'src/app/domain/user';
43
import { Country } from 'src/app/domain/country';
54

65
@Component({
@@ -11,9 +10,10 @@ import { Country } from 'src/app/domain/country';
1110

1211
export class UsersFormComponent {
1312
@Input() form: FormGroup;
14-
@Input() countries: Country[];
13+
@Input() countries: Country[] = [];
14+
@Input() parent: String;
1515
@Output() validatedEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
16-
16+
1717
constructor() { }
1818

1919
submit(): void {

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

+8-2
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,21 @@ export class UsersPageComponent implements OnInit {
3737

3838
if (this.router.url.includes('new')) {
3939
forkJoin([list, countries]).subscribe(results => {
40-
this.userAdd.countries = results[1];
4140
this.userAdd.user = new User();
41+
this.userAdd.countries = results[1];
4242
this.userAdd.visible.next(true);
43+
44+
this.countries = results[1];
4345
});
4446
} else if (this.router.url.includes('users/')) {
4547
let get = this.userService.get('users', 1);
4648

4749
forkJoin([list, countries, get]).subscribe(results => {
48-
this.userEdit.countries = results[1];
4950
this.userEdit.user = results[2];
51+
this.userEdit.countries = results[1];
5052
this.userEdit.visible.next(true);
53+
54+
this.countries = results[1];
5155
});
5256
} else {
5357
forkJoin([list, countries]).subscribe(results => {
@@ -62,11 +66,13 @@ export class UsersPageComponent implements OnInit {
6266

6367
add(): void {
6468
this.userAdd.user = new User();
69+
this.userAdd.countries = this.countries;
6570
this.userAdd.visible.next(true);
6671
}
6772

6873
edit(user: User): void {
6974
this.userEdit.user = user;
75+
this.userEdit.countries = this.countries;
7076
this.userEdit.visible.next(true);
7177
}
7278

0 commit comments

Comments
 (0)