Reactive forms binding.

gnllucena · gnllucena · commit 64e33dd1533d · 2018-11-27T01:57:42.000-02:00
diff --git a/src/app/modules/core/http-backend.interceptor.ts b/src/app/modules/core/http-backend.interceptor.ts
@@ -48,16 +48,16 @@ export class HttpBackendInterceptor implements HttpInterceptor {
         
         var data = new Date();
         
-        users.push(new User({Id: 1, Name: 'Pikachu', Email: 'pikachu@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 2, Name: 'Charmander', Email: 'charmander@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 3, Name: 'Squirtle', Email: 'squirtle@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 4, Name: 'Bulbasaur', Email: 'bulbasaur@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 5, Name: 'Mew', Email: 'mew@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 6, Name: 'Chansey', Email: 'chansey@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 7, Name: 'Blaziken', Email: 'blaziken@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 8, Name: 'Feraligart', Email: 'feraligart@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 9, Name: 'Chikorita', Email: 'chikorita@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
-        users.push(new User({Id: 10, Name: 'Torchic', Email: 'torchic@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Brasil', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 1, Name: 'Pikachu', Email: 'pikachu@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 2, Name: 'Charmander', Email: 'charmander@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Regular', Active: false }));
+        users.push(new User({ Id: 3, Name: 'Squirtle', Email: 'squirtle@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 4, Name: 'Bulbasaur', Email: 'bulbasaur@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 5, Name: 'Mew', Email: 'mew@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Administrator', Active: false }));
+        users.push(new User({ Id: 6, Name: 'Chansey', Email: 'chansey@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Kanto', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 7, Name: 'Blaziken', Email: 'blaziken@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Hoenn', Profile: 'Regular', Active: true }));
+        users.push(new User({ Id: 8, Name: 'Feraligart', Email: 'feraligart@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Johto', Profile: 'Administrator', Active: true }));
+        users.push(new User({ Id: 9, Name: 'Chikorita', Email: 'chikorita@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Johto', Profile: 'Regular', Active: false }));
+        users.push(new User({ Id: 10, Name: 'Torchic', Email: 'torchic@gmail.com', Document: '02343767327', Birthdate: new Date('1991-04-28T12:00:00'), Country: 'Hoenn', Profile: 'Regular', Active: true }));
 
         let pagination: Pagination<User> = {
           Items: users,
@@ -70,27 +70,30 @@ export class HttpBackendInterceptor implements HttpInterceptor {
       }
 
       if (req.url.includes('users/') && req.method === 'GET') {
-        var user: User = {
-          Id: 1,
-          Name: 'Gabriel Lucena',
-          Email: 'gnllucena@gmail.com',
-          Document: '023.437.673-27',
+        var user = new User({
+          Id: 666,
+          Name: 'Mewtwo',
+          Email: 'mewtwo@gmail.com',
+          Document: '02343767327',
           Birthdate:  new Date('1991-04-28T12:00:00'),
-          Country: 'Brasil',
+          Country: 'Kanto',
           Profile: 'Administrator',
           Active: true
-        }
+        })
 
         return of(new HttpResponse({ status: 200, body: user }));
       }
 
       if (req.url.includes('countries') && req.method === 'GET') {
         let countries: Country[] = [];
 
-        countries.push(new Country({ Id: 1, Name: 'Brazil' }));
-        countries.push(new Country({ Id: 1, Name: 'United States of America' }));
-        countries.push(new Country({ Id: 1, Name: 'Thailand' }));
-        countries.push(new Country({ Id: 1, Name: 'Greece' }));
+        countries.push(new Country({ Id: 1, Name: 'Kanto' }));
+        countries.push(new Country({ Id: 2, Name: 'Johto' }));
+        countries.push(new Country({ Id: 3, Name: 'Hoenn' }));
+        countries.push(new Country({ Id: 4, Name: 'Sinnoh' }));
+        countries.push(new Country({ Id: 5, Name: 'Unova' }));
+        countries.push(new Country({ Id: 6, Name: 'Kalos' }));
+        countries.push(new Country({ Id: 7, Name: 'Alola' }));
 
         return of(new HttpResponse({ status: 200, body: countries }));
       }
diff --git a/src/app/routes/dot/dot.module.ts b/src/app/routes/dot/dot.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { UIModule } from '../../modules/ui/.ui.module';
-import { DotService } from './dot.service';
+import { HttpService } from 'src/app/services/http.service';
 
 export const appRoutes: Routes = [
   {
@@ -16,7 +16,7 @@ export const appRoutes: Routes = [
     RouterModule.forChild(appRoutes)
   ],
   providers: [
-    DotService
+    HttpService
   ]
 })
 export class DotModule { }
diff --git a/src/app/routes/dot/dot.service.ts b/src/app/routes/dot/dot.service.ts
diff --git a/src/app/routes/dot/myself/myself-page/dot-myself-page.component.ts b/src/app/routes/dot/myself/myself-page/dot-myself-page.component.ts
@@ -1,9 +1,9 @@
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { AuthenticationService } from '../../../../services/authentication.service';
-import { DotService } from './../../dot.service';
 import { Card } from './../../../../domain/card';
 import { ListAnimation } from './../../../../modules/animations/list.animation';
 import { Observable } from 'rxjs';
+import { HttpService } from 'src/app/services/http.service';
 
 @Component({
   selector: 'dot-myself-page',
@@ -17,9 +17,9 @@ export class DotMyselfPageComponent implements OnInit {
   
   constructor(
     public authenticationService: AuthenticationService,
-    public dotService: DotService) { }
+    public dotService: HttpService<Card>) { }
 
   ngOnInit(): void {
-    this.cards = this.dotService.get();
+    this.cards = this.dotService.list('cards');
   }
 }
diff --git a/src/app/routes/users/users-add/users-add.component.html b/src/app/routes/users/users-add/users-add.component.html
@@ -16,5 +16,6 @@ <h2 class="mb-4">Create a new user</h2>
   <users-form
     [form]="form"
     [countries]="countries"
+    [parent]="'Add'"
   ></users-form>
 </div>
diff --git a/src/app/routes/users/users-add/users-add.component.ts b/src/app/routes/users/users-add/users-add.component.ts
@@ -32,43 +32,47 @@ export class UsersAddComponent {
     private location: Location,
     private router: Router) {
 
-      this.visible.subscribe((visible: Boolean) => {
-        if (visible) {
-          this.form = this.formBuilder.group({
-            Name: this.formBuilder.control({
-              value: this.user.Name,
-              disabled: false
-            }, [ Validators.required ]),
-            Email: this.formBuilder.control({
-              value: this.user.Email,
-              disabled: false,
-            }, [ Validators.required, Validators.email ]),
-            Document: this.formBuilder.control({
-              value: this.user.Document,
-              disabled: false
-            }, [ Validators.required, Validators.minLength(6) ]),
-            Birthdate: this.formBuilder.control({
-              value: this.user.Birthdate
-            }, [ Validators.required, Validators.pattern(DateValidation) ]),
-            Country: this.formBuilder.control({
-              value: this.user.Country
-            }, [ Validators.required ]),
-            Profile: this.formBuilder.control({
-              value: this.user.Profile
-            }, [ Validators.required ]),
-            Active: this.formBuilder.control({
-              value: this.user.Active
-            }),
-          });
+    this.visible.subscribe((visible: Boolean) => {
+      if (visible) {
+        this.form = this.formBuilder.group({
+          Name: this.formBuilder.control({
+            value: '',
+            disabled: false
+          }, [ Validators.required ]),
+          Email: this.formBuilder.control({
+            value: '',
+            disabled: false,
+          }, [ Validators.required, Validators.email ]),
+          Document: this.formBuilder.control({
+            value: '',
+            disabled: false
+          }, [ Validators.required, Validators.minLength(6) ]),
+          Birthdate: this.formBuilder.control({
+            value: '',
+            disabled: false
+          }, [ Validators.required, Validators.pattern(DateValidation) ]),
+          Country: this.formBuilder.control({
+            value: '',
+            disabled: false
+          }, [ Validators.required ]),
+          Profile: this.formBuilder.control({
+            value: 'Regular',
+            disabled: false
+          }, [ Validators.required ]),
+          Active: this.formBuilder.control({
+            value: true,
+            disabled: false
+          }),
+        });
 
-          this.renderer.addClass(document.body, 'overflow');
-          this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
-          this.location.go(this.router.url.split('/')[1] + '/new');
-        } else {
-          this.renderer.removeClass(document.body, 'overflow'); 
-          this.location.go(this.router.url.split('/')[1]);
-        }
-      });
+        this.renderer.addClass(document.body, 'overflow');
+        this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
+        this.location.go(this.router.url.split('/')[1] + '/new');
+      } else {
+        this.renderer.removeClass(document.body, 'overflow'); 
+        this.location.go(this.router.url.split('/')[1]);
+      }
+    });
   }
 
   close() {
diff --git a/src/app/routes/users/users-edit/users-edit.component.html b/src/app/routes/users/users-edit/users-edit.component.html
@@ -16,5 +16,6 @@ <h2 class="mb-4">Edit a user</h2>
   <users-form
     [form]="form"
     [countries]="countries"
+    [parent]="'Edit'"
   ></users-form>
 </div>
diff --git a/src/app/routes/users/users-edit/users-edit.component.ts b/src/app/routes/users/users-edit/users-edit.component.ts
@@ -47,19 +47,23 @@ export class UsersEditComponent {
             disabled: true
           }, [ Validators.required, Validators.minLength(6) ]),
           Birthdate: this.formBuilder.control({
-            value: this.user.Birthdate
+            value: this.user.Birthdate.toLocaleDateString(),
+            disabled: false
           }, [ Validators.required, Validators.pattern(DateValidation) ]),
           Country: this.formBuilder.control({
-            value: this.user.Country
+            value: this.user.Country,
+            disabled: false
           }, [ Validators.required ]),
           Profile: this.formBuilder.control({
-            value: this.user.Profile
+            value: this.user.Profile,
+            disabled: false
           }, [ Validators.required ]),
           Active: this.formBuilder.control({
-            value: this.user.Active
+            value: this.user.Active,
+            disabled: false
           }),
         });
-
+        
         this.renderer.addClass(document.body, 'overflow');
         this.renderer.setProperty(this.panel.nativeElement, 'scrollTop', '0');
         this.location.go(this.router.url.split('/')[1] + '/' + this.user.Id);
diff --git a/src/app/routes/users/users-filter/users-filter.component.html b/src/app/routes/users/users-filter/users-filter.component.html
@@ -13,7 +13,7 @@
       </div>
       
       <div class="float-left">
-        <button class="btn btn" (click)="filter()">Search</button>
+        <button class="btn btn-primary" (click)="filter()">Search</button>
       </div>
 
       <div class="float-right">
diff --git a/src/app/routes/users/users-form/users-form.component.html b/src/app/routes/users/users-form/users-form.component.html
@@ -24,12 +24,9 @@
 
         <div class="form-group col-md-6">
           <label for="Country">Country of birth</label>
-          <select class="form-control" id="exampleFormControlSelect1">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
+          <select formControlName="Country" class="form-control custom-select">
+            <option value="">Select country of birth</option>
+            <option *ngFor="let country of countries" [ngValue]="country.Name">{{ country.Name }}</option>
           </select>
         </div>
       </div>
@@ -39,12 +36,12 @@
           <label for="Name">User profile</label>
           <div>
             <div class="custom-control custom-radio custom-control-inline">
-              <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
-              <label class="custom-control-label" for="customRadioInline1">Administrator</label>
+              <input formControlName="Profile" type="radio" value="Administrator" id="AdministratorUser{{parent}}" class="custom-control-input">
+              <label class="custom-control-label" for="AdministratorUser{{parent}}">Administrator</label>
             </div>
             <div class="custom-control custom-radio custom-control-inline">
-              <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
-              <label class="custom-control-label" for="customRadioInline2">Regular user</label>
+              <input formControlName="Profile" type="radio" value="Regular" id="RegularUser{{parent}}" class="custom-control-input">
+              <label class="custom-control-label" for="RegularUser{{parent}}">Regular user</label>
             </div>
           </div>
         </div>
@@ -53,8 +50,8 @@
           <label for="Name">Active</label>
           
           <div class="custom-control custom-checkbox my-1 mr-sm-2">
-            <input type="checkbox" class="custom-control-input" id="customControlInline">
-            <label class="custom-control-label" for="customControlInline">Check this if you want to activate user</label>
+            <input formControlName="Active" type="checkbox" id="ActiveUser{{parent}}" class="custom-control-input">
+            <label class="custom-control-label" for="ActiveUser{{parent}}">Check this if you want to activate user</label>
           </div>
         </div>
       </div>
diff --git a/src/app/routes/users/users-form/users-form.component.ts b/src/app/routes/users/users-form/users-form.component.ts
@@ -1,6 +1,5 @@
 import { Component, ViewEncapsulation, Output, EventEmitter, Input } from '@angular/core';
 import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
-import { User } from 'src/app/domain/user';
 import { Country } from 'src/app/domain/country';
 
 @Component({
@@ -11,9 +10,10 @@ import { Country } from 'src/app/domain/country';
 
 export class UsersFormComponent {
   @Input() form: FormGroup;
-  @Input() countries: Country[];
+  @Input() countries: Country[] = [];
+  @Input() parent: String;
   @Output() validatedEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
-  
+ 
   constructor() { }
 
   submit(): void {
diff --git a/src/app/routes/users/users-page/users-page.component.ts b/src/app/routes/users/users-page/users-page.component.ts
@@ -37,17 +37,21 @@ export class UsersPageComponent implements OnInit {
 
     if (this.router.url.includes('new')) {  
       forkJoin([list, countries]).subscribe(results => {
-        this.userAdd.countries = results[1];
         this.userAdd.user = new User();
+        this.userAdd.countries = results[1];
         this.userAdd.visible.next(true);
+
+        this.countries = results[1];
       });
     } else if (this.router.url.includes('users/')) {
       let get = this.userService.get('users', 1);
       
       forkJoin([list, countries, get]).subscribe(results => {
-        this.userEdit.countries = results[1];
         this.userEdit.user = results[2];
+        this.userEdit.countries = results[1];
         this.userEdit.visible.next(true);
+
+        this.countries = results[1];
       });
     } else {
       forkJoin([list, countries]).subscribe(results => {
@@ -62,11 +66,13 @@ export class UsersPageComponent implements OnInit {
 
   add(): void {
     this.userAdd.user = new User();
+    this.userAdd.countries = this.countries;
     this.userAdd.visible.next(true);
   }
 
   edit(user: User): void {
     this.userEdit.user = user;
+    this.userEdit.countries = this.countries;
     this.userEdit.visible.next(true);
   }
 
