Skip to content

Commit 37d6c24

Browse files
savitohsavitoh
committed
projeto final
1 parent 987f747 commit 37d6c24

17 files changed

+326
-110
lines changed

‎angular.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@
7272
"tsConfig": "src/tsconfig.spec.json",
7373
"karmaConfig": "src/karma.conf.js",
7474
"styles": [
75+
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
76+
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
7577
"styles.css"
7678
],
7779
"scripts": [],

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@
1313
"@angular/platform-browser": "~7.1.0",
1414
"@angular/platform-browser-dynamic": "~7.1.0",
1515
"@angular/router": "~7.1.0",
16+
"@ng-bootstrap/ng-bootstrap": "^5.1.1",
17+
"bootstrap": "4.1.1",
1618
"core-js": "^2.5.4",
19+
"ngx-bootstrap": "^5.2.0",
1720
"rxjs": "~6.3.3",
1821
"tslib": "^1.9.0",
1922
"zone.js": "~0.8.26"

‎src/app/app.component.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
.fill-remaining-space {
3+
/* This fills the remaining space, by using flexbox.
4+
Every toolbar row uses a flexbox row layout. */
5+
flex: 1 1 auto;
6+
}
7+
8+
.container {
9+
padding: 10px;
10+
}
11+
12+
.form {
13+
min-width: 150px;
14+
max-width: 500px;
15+
width: 100%;
16+
}
17+
18+
.form-element {
19+
padding: 5px 0px 25px 2px;
20+
width: 100%;
21+
}
22+
23+
.button {
24+
width: 100%;
25+
}

‎src/app/app.component.html‎

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,58 @@
1-
<form [formGroup]="form">
1+
<mat-toolbar color="primary">
2+
<span class="fill-remaining-space">Angular Material AutoComplete Example</span>
3+
</mat-toolbar>
24

3-
<mat-form-field class="full-width">
4-
<input type="text" placeholder="Project"
5-
aria-label="Number"
6-
matInput formControlName="project"
7-
[matAutocomplete]="projectAutoComplete"
8-
[(ngModel)]="state" >
9-
<mat-autocomplete #projectAutoComplete="matAutocomplete">
10-
<mat-option *ngFor="let project of filteredOptions | async" [value]="project">
11-
{{ project }}
12-
</mat-option>
13-
</mat-autocomplete>
5+
<div class="container">
6+
<form [formGroup]="form" class="form">
147

15-
<mat-error *ngIf="form.controls['project'].hasError('required')">
16-
Please enter a value
17-
</mat-error>
8+
<mat-form-field class="form-element">
9+
<input type="text" placeholder="Users"
10+
aria-label="Number"
11+
required
12+
matInput formControlName="formUserControl"
13+
[matAutocomplete]="projectAutoComplete"
14+
[(ngModel)]="user"
15+
(blur)="getAlbumsByUser(user?.id)">
16+
<mat-autocomplete #projectAutoComplete="matAutocomplete" [displayWith]="displayFn">
17+
<mat-option *ngFor="let user of filteredUsersOptions | async" [value]="user">
18+
{{ user.name }}
19+
</mat-option>
20+
</mat-autocomplete>
21+
<mat-error *ngIf="form.controls['formUserControl'].hasError('required')">
22+
Please enter a value
23+
</mat-error>
24+
<mat-error *ngIf="form.controls['formUserControl'].hasError('incorrect')">
25+
Please select a valid user
26+
</mat-error>
27+
</mat-form-field>
1828

19-
<mat-error *ngIf="form.controls['project'].hasError('incorrect')">
20-
Please select a valid project
21-
</mat-error>
22-
</mat-form-field>
29+
<mat-form-field class="form-element">
30+
<input type="text" placeholder="Albums"
31+
aria-label="Number"
32+
matInput formControlName="formAlbumsControl"
33+
[matAutocomplete]="AlbumsAutoComplete"
34+
required>
35+
<mat-autocomplete #AlbumsAutoComplete="matAutocomplete">
36+
<mat-option *ngFor="let album of (albums.length === 0 ? [] : (filteredAlbumsOptions | async))" [value]="album.title">
37+
{{ album.title }}
38+
</mat-option>
39+
</mat-autocomplete>
40+
<mat-error *ngIf="form.controls['formAlbumsControl'].hasError('required')">
41+
Please enter a value
42+
</mat-error>
43+
<mat-error *ngIf="form.controls['formAlbumsControl'].hasError('incorrect')">
44+
Please select a valid album
45+
</mat-error>
46+
</mat-form-field>
2347

24-
</form>
48+
<div class="form-element">
49+
<button mat-raised-button color="primary"
50+
class="button"
51+
(click)="getUser()"
52+
[disabled]="!form.valid">
53+
Send...
54+
</button>
55+
</div>
56+
57+
</form>
58+
</div>

‎src/app/app.component.ts‎

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,118 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { FormGroup, FormControl, Validators, ValidatorFn, AbstractControl } from '@angular/forms';
3-
import { Project } from './project';
2+
import { FormGroup, FormControl, Validators } from '@angular/forms';
43
import { Observable } from 'rxjs';
5-
import {map, startWith} from 'rxjs/operators';
4+
import {map, startWith, filter} from 'rxjs/operators';
5+
import { FormCustomValidators } from './validators/FormCustomValidators';
6+
import { UserService } from './service/user.service';
7+
import { UserDTO } from './model/UserDTO';
8+
import { AlbumDTO } from './model/AlbumDTO';
9+
import { AlbumService } from './service/album.service';
10+
611

712
@Component({
813
selector: 'app-root',
914
templateUrl: './app.component.html',
1015
styleUrls: ['./app.component.css']
1116
})
1217
export class AppComponent implements OnInit {
18+
1319
form: FormGroup;
14-
projects: Project[];
15-
filteredOptions: Observable<string[]>;
16-
state: string;
17-
states = [
18-
'Alabama',
19-
'Alaska',
20-
'Arizona',
21-
'Arkansas',
22-
'California',
23-
'Colorado',
24-
'Connecticut',
25-
'Delaware',
26-
'Florida',
27-
'Georgia',
28-
'Hawaii',
29-
'Idaho',
30-
'Illinois',
31-
'Indiana',
32-
'Iowa',
33-
'Kansas',
34-
'Kentucky',
35-
'Louisiana',
36-
'Maine',
37-
'Maryland',
38-
'Massachusetts',
39-
'Michigan',
40-
'Minnesota',
41-
'Mississippi',
42-
'Missouri',
43-
'Montana',
44-
'Nebraska',
45-
'Nevada',
46-
'New Hampshire',
47-
'New Jersey',
48-
'New Mexico',
49-
'New York',
50-
'North Carolina',
51-
'North Dakota',
52-
'Ohio',
53-
'Oklahoma',
54-
'Oregon',
55-
'Pennsylvania',
56-
'Rhode Island',
57-
'South Carolina',
58-
'South Dakota',
59-
'Tennessee',
60-
'Texas',
61-
'Utah',
62-
'Vermont',
63-
'Virginia',
64-
'Washington',
65-
'West Virginia',
66-
'Wisconsin',
67-
'Wyoming',
68-
];
69-
70-
constructor() {
20+
21+
user: UserDTO;
22+
users: Array<UserDTO>;
23+
filteredUsersOptions: Observable<UserDTO[]>;
24+
25+
album: AlbumDTO;
26+
albums: Array<AlbumDTO>;
27+
filteredAlbumsOptions: Observable<AlbumDTO[]>;
28+
29+
constructor(private userService: UserService,
30+
private albumService: AlbumService) {
31+
32+
this.users = new Array<UserDTO>();
33+
this.albums = new Array<AlbumDTO>();
34+
35+
this.user = new UserDTO(1, 'Savio', 'savitoh', 'example@email.com', '666', 'fail.com');
7136
}
7237

7338
ngOnInit() {
39+
this.getUsers();
40+
this.initForm();
41+
}
42+
43+
private initForm(): void {
7444
this.form = new FormGroup({
75-
project: new FormControl('', [Validators.required, FormCustomValidators.valueSelected(this.states)]),
45+
formUserControl: new FormControl('', [Validators.required]),
46+
formAlbumsControl: new FormControl({value: '', disabled: true}, [Validators.required])
7647
});
77-
this.filteredOptions = this.form.get('project').valueChanges.pipe(
48+
49+
this.filteredUsersOptions = this.form.get('formUserControl').valueChanges.pipe(
50+
startWith(''),
51+
filter(value => typeof value === 'string'),
52+
map(value => this._filterUsers(value))
53+
);
54+
this.filteredAlbumsOptions = this.form.get('formAlbumsControl').valueChanges.pipe(
7855
startWith(''),
79-
map(value => this._filter(value))
56+
filter(value => typeof value === 'string'),
57+
map(value => this._filterAlbums(value))
8058
);
8159
}
8260

83-
private _filter(value: string): string[] {
61+
private _filterUsers(value: string): UserDTO[] {
8462
const filterValue = value.toLowerCase();
85-
return this.states.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
63+
return this.users.filter(user => user.name.toLowerCase().indexOf(filterValue) === 0);
8664
}
8765

88-
}
66+
private _filterAlbums(value: string): AlbumDTO[] {
67+
const filterValue = value.toLowerCase();
68+
return this.albums.filter(album => album.title.toLowerCase().indexOf(filterValue) === 0);
69+
}
8970

90-
export class FormCustomValidators {
91-
static valueSelected(myArray: any[]): ValidatorFn {
71+
private addValidUserSelected() {
72+
this.form.get('formUserControl').setValidators(FormCustomValidators.valueSelected(this.users));
73+
}
9274

93-
return (c: AbstractControl): { [key: string]: boolean } | null => {
94-
let selectboxValue = c.value;
95-
let pickedOrNot = myArray.filter(alias => alias === selectboxValue);
75+
private addValidAlbumsSelected() {
76+
const albumsTitle = this.albums.map(album => album.title);
77+
this.form.get('formAlbumsControl').setValidators(FormCustomValidators.valueSelected(albumsTitle));
78+
}
9679

97-
if (pickedOrNot.length > 0) {
98-
// everything's fine. return no error. therefore it's null.
99-
return null;
80+
private getUsers(): void {
81+
this.userService.getUsers().subscribe( res => {
82+
this.users = res;
83+
this.addValidUserSelected();
84+
console.log('Usuários: ', this.users);
85+
}, error =>
86+
console.log(error)
87+
);
88+
}
10089

101-
} else {
102-
//there's no matching selectboxvalue selected. so return match error.
103-
return { 'incorrect': true };
104-
}
105-
}
90+
private verificaSeDeveHabilitarFormAlbumsControl(): void {
91+
const formAlbumsControl = this.form.get('formAlbumsControl');
92+
this.albums.length > 0 ? formAlbumsControl.enable() : formAlbumsControl.disable();
93+
}
94+
95+
getAlbumsByUser(userId: number) {
96+
console.log('User Id: ', userId);
97+
this.albumService.getAlbumsFromUser(userId).subscribe( resp => {
98+
this.albums = resp;
99+
this.addValidAlbumsSelected();
100+
this.verificaSeDeveHabilitarFormAlbumsControl();
101+
console.log('Albums By Users: ', this.albums);
102+
}, error => {
103+
console.log(error);
104+
});
106105
}
106+
107+
getUser(): void {
108+
console.log("Usuario Selecionado: ", this.user);
109+
}
110+
111+
displayFn(user: UserDTO) {
112+
if (user) { return user.name; }
113+
}
114+
107115
}
108116

109117

118+

‎src/app/app.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { AppComponent } from './app.component';
55
import { CustomMaterialModule } from './custom-material/custom-material.module';
66
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
77
import { CommonModule } from '@angular/common';
8+
import { HttpClientModule } from '@angular/common/http';
9+
810

911
@NgModule({
1012
declarations: [
@@ -16,7 +18,8 @@ import { CommonModule } from '@angular/common';
1618
ReactiveFormsModule,
1719
BrowserModule,
1820
BrowserAnimationsModule,
19-
CustomMaterialModule
21+
CustomMaterialModule,
22+
HttpClientModule
2023
],
2124
providers: [],
2225
bootstrap: [AppComponent]

0 commit comments

Comments
 (0)