chore(style guide): added hero form component

Author: Ismaestro

app/heroes/hero-form/hero-form.component.css

@@ -0,0 +1,7 @@
+.ng-valid[required], .ng-valid.required {
+    border-left: 5px solid #42A948;
+}
+
+.ng-invalid:not(form) {
+    border-left: 5px solid #a94442;
+}

app/heroes/hero-form/hero-form.component.html

@@ -0,0 +1,49 @@
+<div class="container">
+    <div [hidden]="submitted">
+        <h1>New hero</h1>
+        <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
+            <div class="form-group">
+                <label for="name">Name</label>
+                <input type="text" class="form-control" id="name"
+                       required
+                       [(ngModel)]="hero.name" name="name"
+                       #heroName="ngModel">
+                <div [hidden]="heroName.valid || heroName.pristine"
+                     class="alert alert-danger">
+                    Name is required
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="alterEgo">Alter Ego</label>
+                <input type="text" class="form-control" id="alterEgo"
+                       [(ngModel)]="hero.alterEgo" name="alterEgo">
+            </div>
+            <div class="form-group">
+                <label for="power">Hero Power</label>
+                <select class="form-control" id="power"
+                        required
+                        [(ngModel)]="hero.power" name="power">
+                    <option *ngFor="let power of powers" [value]="power">{{power}}</option>
+                </select>
+            </div>
+            <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Create new hero!</button>
+        </form>
+    </div>
+    <div [hidden]="!submitted">
+        <h2>You submitted the following:</h2>
+        <div class="row">
+            <div class="col-xs-3">Name</div>
+            <div class="col-xs-9  pull-left">{{ hero.name }}</div>
+        </div>
+        <div class="row">
+            <div class="col-xs-3">Alter Ego</div>
+            <div class="col-xs-9 pull-left">{{ hero.alterEgo }}</div>
+        </div>
+        <div class="row">
+            <div class="col-xs-3">Power</div>
+            <div class="col-xs-9 pull-left">{{ hero.power }}</div>
+        </div>
+        <br>
+        <button class="btn btn-default" (click)="submitted=false">Edit</button>
+    </div>
+</div>

app/heroes/hero-form/hero-form.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './../shared/hero.model';
+
+import { HeroService } from './../shared/hero.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'toh-hero-form',
+    templateUrl: 'hero-form.component.html',
+    styleUrls: [ 'hero-form.component.css' ]
+})
+
+export class HeroFormComponent {
+    @Input() heroes: Hero[];
+    @Input() selectedHero: Hero;
+    
+    hero: Hero;
+    submitted: boolean;
+    powers: string[];
+    
+    constructor(private heroService: HeroService) {
+        this.hero = new Hero(-1, '', '');
+        this.submitted = false;
+        
+        // TODO
+        this.powers = [ 'Really Smart', 'Super Flexible',
+            'Super Hot', 'Weather Changer' ];
+    }
+    
+    onSubmit() {
+        this.heroService.create(this.hero)
+            .then(hero => {
+                this.heroes.push(hero);
+                this.selectedHero = null;
+                this.submitted = true;
+            });
+    }
+}

app/heroes/hero-list/hero-list.component.css

@@ -7,7 +7,7 @@
     margin: 0 0 2em 0;
     list-style-type: none;
     padding: 0;
-    width: 15em;
+    width: 23em;
 }
 
 .heroes li {

app/heroes/hero-list/hero-list.component.html

@@ -1,15 +1,14 @@
 <h2>My Heroes</h2>
-<div>
-    <label>Hero name:</label> <input #heroName/>
-    <button (click)="add(heroName.value); heroName.value=''">
-        Add
-    </button>
-</div>
+<br>
+<toh-hero-form [heroes]="heroes"
+               [selectedHero]="selectedHero">
+</toh-hero-form>
+<br>
 <ul class="heroes">
     <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
         [class.selected]="hero === selectedHero">
         <span class="badge">{{hero.id}}</span>
-        <span>{{hero.name}}</span>
+        <span>{{hero.name}} | {{hero.alterEgo}} | {{hero.power}}</span>
         <button class="remove"
                 (click)="remove(hero); $event.stopPropagation()">x
         </button>

app/heroes/hero-list/hero-list.component.ts

@@ -37,18 +37,6 @@ export class HeroListComponent implements OnInit {
         this.router.navigate([ `/${this.appConfig.routes.heroes}/`, this.selectedHero.id ]);
     }
 
-    add(name: string): void {
-        name = name.trim();
-        if (!name) {
-            return;
-        }
-        this.heroService.create(name)
-            .then(hero => {
-                this.heroes.push(hero);
-                this.selectedHero = null;
-            });
-    }
-    
     remove(hero: Hero): void {
         this.heroService
             .remove(hero.id)

app/heroes/heroes.module.ts

@@ -7,6 +7,7 @@ import { HeroRoutingModule } from './heroes-routing.module';
 import { HeroListComponent }   from './hero-list/hero-list.component';
 import { HeroSearchComponent } from './hero-search/hero-search.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
+import { HeroFormComponent }   from './hero-form/hero-form.component';
 
 import { HeroService } from './shared/hero.service';
 
@@ -19,7 +20,8 @@ import { HeroService } from './shared/hero.service';
     declarations: [
         HeroListComponent,
         HeroSearchComponent,
-        HeroDetailComponent
+        HeroDetailComponent,
+        HeroFormComponent
     ],
     providers: [
         HeroService

app/heroes/shared/hero.model.ts

@@ -1,4 +1,8 @@
 export class Hero {
-    id: number;
-    name: string;
+    constructor(
+        public id: number,
+        public name: string,
+        public power: string,
+        public alterEgo?: string
+    ) {  }
 }

app/heroes/shared/hero.service.ts

@@ -33,9 +33,13 @@ export class HeroService {
             .catch(this.handleError);
     }
 
-    create(name: string): Promise<Hero> {
+    create(hero: Hero): Promise<Hero> {
         return this.http
-            .post(this.heroesUrl, JSON.stringify({ name: name }), { headers: this.headers })
+            .post(this.heroesUrl, JSON.stringify({
+                name: hero.name,
+                alterEgo: hero.alterEgo,
+                power: hero.power
+            }), { headers: this.headers })
             .toPromise()
             .then(res => res.json().data)
             .catch(this.handleError);