feat(shop): add name pipe

src/app/build/shop/name.pipe.spec.ts

@@ -0,0 +1,60 @@
+import {provide} from 'angular2/core';
+
+import {it, inject, beforeEach, beforeEachProviders} from 'angular2/testing';
+
+import {NamePipe} from './name.pipe';
+
+describe('NamePipe', () => {
+  beforeEachProviders(() => [
+    NamePipe
+  ]);
+
+  let champions = [];
+
+  beforeEach(() => {
+    champions = [{ name: 'Ravenous Hydra' }, { name: 'Titanic Hydra' }, { name: 'Dagger' }];
+  });
+
+  it('should not filter on \'null\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, [null]);
+    expect(champions.length).toBe(3);
+  }));
+
+  it('should not filter on \'true\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, [true]);
+    expect(champions.length).toBe(3);
+  }));
+
+  it('should not filter on invalid champions', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(null, ['Dagger']);
+    expect(champions).toBe(null);
+  }));
+
+  it('should not filter on \'\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, ['']);
+    expect(champions.length).toBe(3);
+  }));
+
+  it('should filter out name \'e\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, ['e']);
+    expect(champions.length).toBe(2);
+  }));
+
+  it('should filter out name \'dagger\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, ['dagger']);
+    expect(champions.length).toBe(1);
+  }));
+
+  it('should filter out name \'Hydra\'', inject([NamePipe], (pipe) => {
+    champions = pipe.transform(champions, ['Hydra']);
+    expect(champions.length).toBe(2);
+  }));
+
+  it('should remove semicolon from names', inject([NamePipe], (pipe) => {
+    expect(pipe.clean('da\'gger')).toBe('dagger');
+  }));
+
+  it('should lowercase names', inject([NamePipe], (pipe) => {
+    expect(pipe.clean('DaGGer')).toBe('dagger');
+  }));
+});

src/app/build/shop/name.pipe.ts

@@ -0,0 +1,21 @@
+import {Pipe, PipeTransform} from 'angular2/core';
+
+@Pipe({
+  name: 'name'
+})
+
+export class NamePipe implements PipeTransform {
+  transform(champions: Array<Object>, [name]) {
+    if (!champions || !name || typeof name !== 'string') {
+      return champions;
+    }
+
+    return champions.filter((champion) => {
+      return this.clean(champion['name']).indexOf(this.clean(name)) >= 0;
+    });
+  }
+
+  private clean(value: string): string {
+    return value.toLowerCase().replace('\'', '');
+  }
+}

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

@@ -11,16 +11,17 @@ import {CapitalizePipe} from '../../misc/capitalize.pipe';
 import {MapPipe} from './map.pipe';
 import {ChampionPipe} from './champion.pipe';
 import {HidePipe} from './hide.pipe';
-import {SortPipe} from './sort.pipe';
 import {TagsPipe} from './tags.pipe';
+import {NamePipe} from './name.pipe';
+import {SortPipe} from './sort.pipe';
 
 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, SortPipe, TagsPipe],
+  pipes: [TranslatePipe, CapitalizePipe, ToIterablePipe, MapPipe, ChampionPipe, HidePipe, TagsPipe, NamePipe, SortPipe],
   template: `
     <div class="left">
       <button type="button" name="all-items">All Items</button>
@@ -35,7 +36,7 @@ import {LolApiService} from '../../misc/lolapi.service';
     </div> 
     <div class="right">
       <div class="search">
-        <input type="text" name="name" placeholder="Name">
+        <input type="text" name="name" placeholder="Name" (keyup)="name=$event.target.value">
         <button type="button" name="show-disabled" title="Display hidden items">
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon eye" width="24" height="24" viewBox="0 0 24 24">
             <path d="M0 0h24v24H0z" fill="none"/>
@@ -45,7 +46,7 @@ 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 | sort" [ngClass]="{disabled: item.disabled}" title="{{item.description}}">
+        <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>