feat(build): items component initial implementation

src/app/build/items/item.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from 'angular2/core';
+import {NgIf} from 'angular2/common';
+
+import {DDragonDirective} from '../../misc/ddragon.directive';
+
+@Component({
+  selector: 'item',
+  directives: [NgIf, DDragonDirective],
+  template: `
+    <img [ddragon]="'item/' + item.image.full">
+    <div>
+      <p *ngIf="name" class="name">{{name}}</p>
+      <div class="gold">
+        <img [ddragon]="'ui/gold.png'">
+        <p>{{item.gold.total}}</p>
+      </div>
+    </div>`
+})
+
+export class ItemComponent {
+  @Input() item;
+  @Input() name;
+}

src/app/build/items/items.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, OnChanges} from 'angular2/core';
+import {NgFor, NgClass} from 'angular2/common';
+
+import {ItemComponent} from './item.component.ts';
+
+import {ToIterablePipe} from '../../misc/to-iterable.pipe';
+
+@Component({
+  selector: 'items',
+  directives: [NgFor, NgClass, ItemComponent],
+  pipes: [ToIterablePipe],
+  template: `
+    <template ngFor #item [ngForOf]="items?.data | toIterable">
+      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description"></item>
+    </template>`
+})
+
+export class ItemsComponent implements OnChanges {
+  @Input() items;
+
+  ngOnChanges() {
+    // TODO: implement
+  }
+}

src/app/build/shop/shop.component.spec.ts

@@ -50,7 +50,7 @@ describe('ShopComponent', () => {
     expect(component.items).not.toBeDefined();
     component.getData();
     return service.getItems().toPromise().then(() => {
-      expect(component.items).toBeDefined();
+      expect(component.data).toBeDefined();
     });
   }));
 

src/app/build/shop/shop.component.ts

@@ -1,6 +1,8 @@
-import {Component, Output, EventEmitter, Inject} from 'angular2/core';
+import {Component, Input, Output, EventEmitter} from 'angular2/core';
 import {NgFor, NgIf, NgClass} from 'angular2/common';
 
+import {ItemComponent} from '../items/item.component.ts';
+
 import {DDragonDirective} from '../../misc/ddragon.directive';
 import {LoadingComponent} from '../../misc/loading.component';
 import {ErrorComponent} from '../../misc/error.component';
@@ -20,12 +22,12 @@ import {LolApiService} from '../../misc/lolapi.service';
 @Component({
   selector: 'shop',
   providers: [LolApiService],
-  directives: [NgFor, NgIf, NgClass, DDragonDirective, LoadingComponent, ErrorComponent],
-  pipes: [TranslatePipe, CapitalizePipe, ToIterablePipe, MapPipe, ChampionPipe, HidePipe, TagsPipe, NamePipe, SortPipe],
+  directives: [NgFor, NgIf, NgClass, ItemComponent, DDragonDirective, LoadingComponent, ErrorComponent],
+  pipes: [ToIterablePipe, TranslatePipe, CapitalizePipe, MapPipe, ChampionPipe, HidePipe, TagsPipe, NamePipe, SortPipe],
   template: `
     <div class="left">
       <button type="button" name="all-items">All Items</button>
-      <div class="category" *ngFor="#category of items?.tree | toIterable">
+      <div class="category" *ngFor="#category of data?.tree | toIterable">
         <p class="noselect">{{category.header | translate | capitalize}}</p>
         <hr>
         <label *ngFor="#tag of category.tags">
@@ -46,26 +48,20 @@ import {LolApiService} from '../../misc/lolapi.service';
         </button>
       </div>
       <div class="items">
-        <div class="item" *ngFor="#item of items?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort" [ngClass]="{disabled: item.disabled}" title="{{item.description}}">
-          <img [ddragon]="'item/' + item.image.full">
-          <div>
-            <p class="name">{{item.name}}</p>
-            <div class="gold">
-              <img [ddragon]="'ui/gold.png'">
-              <p>{{item.gold.total}}</p>
-            </div>
-          </div>
-        </div>
+        <template ngFor #item [ngForOf]="data?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
+          <item [item]="item" [name]="item.name" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="itemPicked($event)"></item>
+        </template>
         <loading [loading]="loading"></loading>
         <error [error]="error" (retry)="getData()"></error>
       </div>
     </div>`
 })
 
 export class ShopComponent {
-  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+  @Input() items: Object;
+  @Output() itemsChanged: EventEmitter<any> = new EventEmitter<any>();
 
-  private items: Object;
+  private data: Object;
   private loading: boolean = true;
   private error: boolean = false;
 
@@ -81,7 +77,7 @@ export class ShopComponent {
 
     this.lolApi.getItems()
       .subscribe(
-      res => { this.items = res; },
+      res => { this.data = res; },
       error => { this.error = true; this.loading = false; },
       () => this.loading = false
       );
@@ -101,4 +97,12 @@ export class ShopComponent {
       }
     }
   }
+
+  private itemPicked(event: Event) {
+    if (!event || !event.target) {
+      return;
+    }
+    // TODO: implement
+    this.itemsChanged.next(null);
+  }
 }

src/app/routes/build.component.ts

@@ -3,6 +3,7 @@ import {NgIf} from 'angular2/common';
 import {RouteParams} from 'angular2/router';
 
 import {GraphComponent} from '../build/graph.component';
+import {ItemsComponent} from '../build/items/items.component';
 import {MasteriesComponent} from '../build/masteries/masteries.component';
 import {ShopComponent} from '../build/shop/shop.component';
 
@@ -15,7 +16,7 @@ import {LolApiService} from '../misc/lolapi.service';
 import {Config} from '../build/config';
 
 @Component({
-  directives: [GraphComponent, MasteriesComponent, ShopComponent, DDragonDirective, LoadingComponent, ErrorComponent],
+  directives: [GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective, LoadingComponent, ErrorComponent],
   providers: [LolApiService],
   styleUrls: [
     './assets/css/build.css'
@@ -31,7 +32,8 @@ import {Config} from '../build/config';
     </div>
     <graph [champion]="champion" [config]="config"></graph>
     <masteries></masteries>
-    <shop></shop>
+    <items [items]="items"></items>
+    <shop [(items)]= "items"></shop>
     <loading [loading]="loading"></loading>
     <error [error]="error" (retry)="getData()"></error>`
 })
@@ -43,6 +45,7 @@ export class BuildRoute {
   private error: boolean = false;
 
   private config: Config = new Config();
+  private items: Object;
 
   constructor(params: RouteParams, private lolApi: LolApiService) {
     this.championKey = params.get('champion');

src/assets/css/build.css

@@ -304,7 +304,10 @@ shop .items {
   min-height: 1000px;
 }
 
-shop .item {
+
+/* item */
+
+item {
   -webkit-user-select: none;/* Chrome/Safari */
   -moz-user-select: none;/* Firefox */
   -ms-user-select: none;/* IE10+ */
@@ -319,61 +322,61 @@ shop .item {
   cursor: pointer;
 }
 
-shop .item > img {
+item > img {
   height: 39px;
   border-radius: 5px;
   display: inline-block;
   border: 3px solid #026561;
 }
 
-shop .item > div {
+item > div {
   margin: 4px 10px;
   display: inline-block;
   width: 100%;
 }
 
-shop .item > div > p {
+item > div > p {
   margin: 0px;
   font-size: 1em;
   display: inline;
   font-family: sans-serif;
 }
 
-shop .item .name {
+item .name {
   width: 100%;
 }
 
-shop .item .gold {
+item .gold {
   min-width: 70px;
   display: flex;
   font-size: 0.8em;
 }
 
-shop .item .gold img {
+item .gold img {
   height: 32px;
   display: inline-block;
   padding-right: 4px;
 }
 
-shop .item .gold p {
+item .gold p {
   margin: 2px -8px;
 }
 
-shop .item:hover {
+item:hover {
   background-color: #CCC;
 }
 
 
 /* media */
 
 @media (max-width: 1700px) {
-  shop .item {
+  item {
     width: 32%;
   }
 }
 
 @media (max-width: 1350px) {
-  shop .item {
+  item {
     width: 48%;
   }
 }
@@ -385,10 +388,10 @@ shop .item:hover {
 }
 
 @media (max-width: 600px) {
-  shop .item {
+  item {
     width: 100%;
   }
-  shop .item .gold {
+  item .gold {
     display: inline-block;
     text-align: right;
   }