feat(preview): tree structure

Author: SteveVanOpstal

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

@@ -0,0 +1,13 @@
+import {it, inject, beforeEachProviders} from 'angular2/testing';
+
+import {ItemComponent} from './item.component';
+
+describe('ItemComponent', () => {
+  beforeEachProviders(() => [
+    ItemComponent
+  ]);
+
+  it('should be initialised', inject([ItemComponent], (component) => {
+    expect(component.item).not.toBeDefined();
+  }));
+});

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

@@ -6,8 +6,8 @@ import {DDragonDirective} from '../../../misc/ddragon.directive';
   selector: 'item',
   directives: [DDragonDirective],
   template: `
-    <img [ddragon]="'item/' + item.image.full">
-    <p class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
+    <img [ddragon]="'item/' + item?.image?.full">
+    <p class="gold">{{item?.gold?.total ? item?.gold?.total : ''}}</p>`
 })
 
 export class ItemComponent {

src/app/build/shop/preview/items-from.component.spec.ts

@@ -0,0 +1,30 @@
+import {it, inject, beforeEach, beforeEachProviders} from 'angular2/testing';
+
+import {ItemsFromComponent} from './items-from.component';
+
+describe('ItemsFromComponent', () => {
+  beforeEachProviders(() => [
+    ItemsFromComponent
+  ]);
+
+  it('should be initialised', inject([ItemsFromComponent], (component) => {
+    expect(component.items).not.toBeDefined();
+    expect(component.itemSelected).toBeDefined();
+    expect(component.itemPicked).toBeDefined();
+  }));
+
+  it('should emit itemSelected event', inject([ItemsFromComponent], (component) => {
+    spyOn(component.itemSelected, 'emit');
+    expect(component.itemSelected.emit).not.toHaveBeenCalled();
+    component.selectItem({});
+    expect(component.itemSelected.emit).toHaveBeenCalled();
+  }));
+
+  it('should emit itemPicked event', inject([ItemsFromComponent], (component) => {
+    spyOn(component.itemPicked, 'emit');
+    expect(component.itemPicked.emit).not.toHaveBeenCalled();
+    let result = component.pickItem({});
+    expect(result).toBeFalsy();
+    expect(component.itemPicked.emit).toHaveBeenCalled();
+  }));
+});

src/app/build/shop/preview/items-from.component.ts

@@ -1,25 +1,32 @@
 import {Component, Input, Output, EventEmitter} from 'angular2/core';
+import {NgFor, NgIf} from 'angular2/common';
 
 import {ItemComponent} from './item.component';
 import {ItemBundle} from './item-bundle';
 
 @Component({
   selector: 'items-from',
-  directives: [ItemComponent, ItemsFromComponent],
+  directives: [NgFor, NgIf, ItemComponent, ItemsFromComponent],
   template: `
-    <template ngFor #bundle [ngForOf]="items">
-      <div>
-        <item [item]="bundle.item" [attr.title]="bundle.item.name" (click)="leftClick(bundle.item)"></item>
-        <items-from [items]="bundle.children" (itemPicked)="leftClick($event)"></items-from>
-      </div>
-    </template>`
+    <div *ngFor="#bundle of items">
+      <hr class="up">
+      <item [item]="bundle.item" [attr.title]="bundle.item.name" (click)="selectItem(bundle.item)" (contextmenu)="pickItem(bundle.item)"></item>
+      <hr *ngIf="bundle.children" class="down">
+      <items-from [items]="bundle.children" (itemSelected)="itemSelected" (itemPicked)="itemPicked"></items-from>
+    </div>`
 })
 
 export class ItemsFromComponent {
   @Input() items: Array<ItemBundle>;
+  @Output() itemSelected: EventEmitter<any> = new EventEmitter<any>();
   @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
 
-  leftClick(item: Object) {
-    this.itemPicked.next(item);
+  private selectItem(item: Object) {
+    this.itemSelected.emit(item);
+  }
+
+  private pickItem(item: Object) {
+    this.itemPicked.emit(item);
+    return false; // stop context menu from appearing
   }
 }

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

@@ -0,0 +1,99 @@
+import {it, inject, beforeEach, beforeEachProviders} from 'angular2/testing';
+
+import {PreviewComponent} from './preview.component';
+
+describe('PreviewComponent', () => {
+  beforeEachProviders(() => [
+    PreviewComponent
+  ]);
+
+  let item1 = { id: 1, from: ['2', '3'] };
+  let item2 = { id: 2, from: ['4'], into: ['1'] };
+  let item3 = { id: 3, from: ['4', '5'], into: ['1'] };
+  let item4 = { id: 4, into: ['2', '3'] };
+  let item5 = { id: 5, into: ['3'] };
+
+  let items = [
+    item1, item2, item3, item4, item5
+  ];
+
+  beforeEach(inject([PreviewComponent], (component) => {
+    component.items = items;
+  }));
+
+  it('should be initialised', inject([PreviewComponent], (component) => {
+    expect(component.item).not.toBeDefined();
+    expect(component.items).toHaveEqualContent(items);
+    expect(component.itemPicked).toBeDefined();
+    expect(component.itemsFrom).toBeDefined();
+    expect(component.itemsInto).toBeDefined();
+  }));
+
+
+  it('should update on changes', inject([PreviewComponent], (component) => {
+    spyOn(component, 'getItemsFrom');
+    spyOn(component, 'getItemsInto');
+    expect(component.getItemsFrom).not.toHaveBeenCalled();
+    expect(component.getItemsInto).not.toHaveBeenCalled();
+    component.item = item2;
+    console.log(component.items);
+    component.ngOnChanges();
+    expect(component.getItemsFrom).toHaveBeenCalled();
+    expect(component.getItemsInto).toHaveBeenCalled();
+  }));
+
+  it('should update on select', inject([PreviewComponent], (component) => {
+    spyOn(component, 'ngOnChanges');
+    expect(component.ngOnChanges).not.toHaveBeenCalled();
+    component.selectItem(item4);
+    expect(component.item).toBe(item4);
+    expect(component.ngOnChanges).toHaveBeenCalled();
+  }));
+
+
+  it('should not update when there is no item', inject([PreviewComponent], (component) => {
+    component.itemsFrom = 'test';
+    component.itemsInto = 'test';
+    component.ngOnChanges();
+    expect(component.itemsFrom).toHaveEqualContent('test');
+    expect(component.itemsInto).toHaveEqualContent('test');
+  }));
+
+
+  it('should get from-items', inject([PreviewComponent], (component) => {
+    let result = component.getItemsFrom(item1);
+    expect(result).toHaveEqualContent([
+      {
+        item: item2, children: [
+          { item: item4, children: undefined }
+        ]
+      },
+      {
+        item: item3, children: [
+          { item: item4, children: undefined }, { item: item5, children: undefined }
+        ]
+      }
+    ]);
+  }));
+
+  it('should get into-items', inject([PreviewComponent], (component) => {
+    let result = component.getItemsInto(item4);
+    expect(result).toHaveEqualContent([item2, item3]);
+  }));
+
+
+  it('should emit itemPicked event when an item is picked', inject([PreviewComponent], (component) => {
+    spyOn(component.itemPicked, 'emit');
+    expect(component.itemPicked.emit).not.toHaveBeenCalled();
+    let result = component.pickItem(item4);
+    expect(result).toBeFalsy();
+    expect(component.itemPicked.emit).toHaveBeenCalled();
+  }));
+
+
+  it('should not get items when there are no items', inject([PreviewComponent], (component) => {
+    component.items = undefined;
+    let result = component.getItems([1]);
+    expect(result).not.toBeDefined();
+  }));
+});

src/assets/css/build.css

@@ -4,6 +4,7 @@
 }
 
 .title img {
+  width: 90px;
   height: 90px;
 }
 
@@ -180,8 +181,9 @@ mastery > div:not(.enabled) .rank {
 }
 
 mastery > div > img {
-  border: 2px solid #777;
+  width: 48px;
   height: 48px;
+  border: 2px solid #777;
 }
 
 mastery .description {
@@ -264,11 +266,11 @@ shop .right-container {
 }
 
 shop .middle {
-  width: 70%;
+  min-width: 70%;
 }
 
 shop .right {
-  width: 30%;
+  min-width: 30%;
 }
 
 
@@ -388,6 +390,7 @@ item .gold {
 }
 
 item .gold img {
+  width: 32px;
   height: 32px;
   display: inline-block;
   padding-right: 4px;
@@ -452,13 +455,39 @@ preview item {
 }
 
 preview item p.gold {
-  margin: -19px 0 0 0;
+  margin-top: -19px;
 }
 
-preview .item img {
-  display: block;
+preview .item > item,
+preview .item > item > img {
+  width: 64px;
+  height: 64px;
   border-radius: 8px;
+}
+
+preview .item > item {
   margin: 0 auto;
+  display: block;
+}
+
+preview hr {
+  border: 1px solid;
+  height: 0;
+  margin: 6px 30px -18px 30px;
+}
+
+preview hr.up {
+  border: 1px solid;
+  width: 0;
+  height: 10px;
+  margin: 2px auto 0 auto;
+}
+
+preview hr.down {
+  border: 1px solid;
+  width: 0;
+  height: 10px;
+  margin: 0 auto -18px auto;
 }
 
 /* items-from */
@@ -476,26 +505,50 @@ items-from item {
   display: block;
   margin: 0 auto;
   padding: 0 8px;
-  background-color: cadetblue;
+  background-color: transparent;
 }
 
 items-from item:hover {
-  background-color: cadetblue;
+  background-color: transparent;
+}
+
+items-from > div> item:before {
+  content: '';
+  border: 1px solid;
+  position: absolute;
+  width: 60px;
+}
+
+items-from > div:first-of-type > item:before {
+  margin: -12px 0px 6px 22px;
+}
+
+items-from > div:last-of-type > item:before {
+  margin: -12px 0px 6px -40px;
+}
+
+items-from > div:not(:first-of-type):not(:last-of-type) > item:before {
+  margin: -12px 0 0 -40px;
+  width: 120px;
+}
+
+items-from > div:first-of-type:last-of-type > item:before {
+  display: none;
 }
 
 /* media */
 
-@media (max-width: 1700px) {
-  item {
-    width: 32%;
+@media (max-width: 1650px) {
+  shop .items item {
+    width: 48%;
   }
 }
 
-@media (max-width: 1350px) {
-  item {
+/*@media (max-width: 1350px) {
+  shop .items item {
     width: 48%;
   }
-}
+}*/
 
 @media (max-width: 800px) {
   shop .left {
@@ -504,10 +557,10 @@ items-from item:hover {
 }
 
 @media (max-width: 600px) {
-  item {
+  shop .items item {
     width: 100%;
   }
-  item .gold {
+  shop .items item .gold {
     display: inline-block;
     text-align: right;
   }