Merge pull request #12 from UMM-CSci-3601/angular-pipes

Add demo of pipe for filtering users

Author: devshawn

client/package.json

@@ -11,6 +11,7 @@
     "@angular/platform-browser": "^2.4.6",
     "@angular/platform-browser-dynamic": "^2.4.6",
     "@angular/router": "^3.4.6",
+    "@angular/forms": "^2.4.7",
     "bootstrap": "^3.3.7",
     "css-loader": "^0.26.1",
     "es6-shim": "^0.35.3",

client/src/app.module.ts

@@ -8,22 +8,26 @@ import { HomeComponent} from './app/home/home.component';
 import { KittensComponent }   from './app/kittens/kittens.component';
 import { UserListComponent } from './app/users/user-list.component';
 import { routing } from './app/app.routes';
+import {FormsModule} from '@angular/forms';
+import {FilterBy} from './app/users/filter.pipe';
 
 @NgModule({
     imports: [
         BrowserModule,
         HttpModule,
         JsonpModule,
-        routing
+        routing,
+        FormsModule
     ],
     declarations: [
         AppComponent,
         KittensComponent,
         HomeComponent,
         NavbarComponent,
-        UserListComponent
+        UserListComponent,
+        FilterBy
     ],
     bootstrap: [ AppComponent ]
 })
 
-export class AppModule {}
+export class AppModule {}

client/src/app/users/filter.pipe.ts

@@ -0,0 +1,77 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+    name: 'filterBy'
+})
+export class FilterBy implements PipeTransform {
+    private filterByString(filter){
+        filter = filter.toLowerCase();
+        return value => {
+            return !filter || value.toLowerCase().indexOf(filter) !== -1;
+        }
+    }
+
+  private filterByObject(filter) {
+    return value => {
+      for (let key in filter) {
+        if (!value.hasOwnProperty(key)) {
+          return false;
+        }
+          if (filter[key] == null){
+              return true;
+          }
+
+        const type = typeof value[key];
+        let isMatching;
+
+        if (type === 'string') {
+          isMatching = this.filterByString(filter[key])(value[key]);
+        } else if (type === 'object') {
+          isMatching = this.filterByObject(filter[key])(value[key]);
+        } else {
+          isMatching = this.filterDefault(filter[key])(value[key]);
+        }
+
+        if (!isMatching) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  }
+
+  /**
+   * Defatul filterDefault function
+   *
+   * @param filter
+   * @returns {(value:any)=>boolean}
+   */
+  private filterDefault(filter) {
+    return value => {
+      return !filter || filter == value;
+    }
+  }
+
+    transform(array: any[], filter: string): any {
+        if(array==null){
+            return null;
+        }
+        const type = typeof filter;
+
+        if(type === 'string'){
+            console.log("IMA STRING! WUTTTTT!");
+            return array.filter(this.filterByString(filter));
+        }
+
+        if(type == 'object'){
+            return array.filter(this.filterByObject(filter));
+        } else {
+            console.log("Unknown filter type???");
+            console.log(type);
+            console.log(filter);
+            return array;
+        }
+
+    }
+}

client/src/app/users/user-list.component.html

@@ -1,6 +1,9 @@
 <ul class="list-group">
+    <li class="list-group-item list-group-item-info">
+        <input #input type="text" placeholder="Filter" [(ngModel)]="search">
+    </li>
     <li class="list-group-item list-group-item-info">User Name</li>
-    <li *ngFor="let user of users | async" class="list-group-item">
+    <li *ngFor="let user of users | async | filterBy: {name: search}" class="list-group-item">
         {{ user.name }}
     </li>
 </ul>

client/src/app/users/user-list.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { UserListService } from "./user-list.service";
+import { FormsModule } from '@angular/forms';
+import { FilterBy } from "./filter.pipe";
 
 @Component({
     selector: 'user-list-component',
     providers: [UserListService],
-    templateUrl: 'user-list.component.html'
+    templateUrl: 'user-list.component.html',
 })
 
 export class UserListComponent {
@@ -13,4 +15,6 @@ export class UserListComponent {
     constructor(private _userListService: UserListService) {
         this.users = _userListService.getUsers();
     }
-}
+}
+
+