As of Module 6

Author: DeborahK

APM-CLI-Final/src/app/app.module.ts

@@ -4,11 +4,13 @@ import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { ProductListComponent } from './products/product-list.component';
+import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ProductListComponent
+    ProductListComponent,
+    ConvertToSpacesPipe
   ],
   imports: [
     BrowserModule,

APM-CLI-Final/src/app/products/product-list.component.css

@@ -0,0 +1,3 @@
+thead {
+    color: #337AB7
+}

APM-CLI-Final/src/app/products/product-list.component.html

@@ -33,7 +33,7 @@ <h3>Filtered by: {{listFilter}} </h3>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor='let product of products'>
+                    <tr *ngFor='let product of filteredProducts'>
                         <td>
                             <img *ngIf='showImage'
                                 [src]='product.imageUrl'
@@ -42,7 +42,7 @@ <h3>Filtered by: {{listFilter}} </h3>
                                 [style.margin.px]='imageMargin'>
                         </td>
                         <td>{{ product.productName }}</td>
-                        <td>{{ product.productCode | lowercase }}</td>
+                        <td>{{ product.productCode | lowercase | convertToSpaces: '-' }}</td>
                         <td>{{ product.releaseDate }}</td>
                         <td>{{ product.price | currency:'USD':true:'1.2-2'}}</td>
                         <td>{{ product.starRating }}</td>

APM-CLI-Final/src/app/products/product-list.component.ts

@@ -1,16 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { IProduct } from './product';
 
 @Component({
     selector: 'pm-products',
-    templateUrl: './product-list.component.html'
+    templateUrl: './product-list.component.html',
+    styleUrls: ['./product-list.component.css']
 })
-export class ProductListComponent {
+export class ProductListComponent implements OnInit {
     pageTitle: string = 'Product List';
     imageWidth: number = 50;
     imageMargin: number = 2;
     showImage: boolean = false;
-    listFilter: string = 'cart';
-    products: any[] = [
+
+    _listFilter: string;
+    get listFilter(): string {
+        return this._listFilter;
+    }
+    set listFilter(value: string) {
+        this._listFilter = value;
+        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
+    }
+
+    filteredProducts: IProduct[];
+    products: IProduct[] = [
         {
             "productId": 2,
             "productName": "Garden Cart",
@@ -33,7 +45,22 @@ export class ProductListComponent {
         }
     ];
 
+    constructor() {
+        this.filteredProducts = this.products;
+        this.listFilter = 'cart';
+    }
+
+    performFilter(filterBy: string): IProduct[] {
+        filterBy = filterBy.toLocaleLowerCase();
+        return this.products.filter((product: IProduct) =>
+              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
+    }
+
     toggleImage(): void {
         this.showImage = !this.showImage;
     }
+
+    ngOnInit(): void {
+        console.log('In OnInit');
+    }
 }

APM-CLI-Final/src/app/products/product.ts

@@ -0,0 +1,10 @@
+export interface IProduct {
+    productId: number;
+    productName: string;
+    productCode: string;
+    releaseDate: string;
+    price: number;
+    description: string;
+    starRating: number;
+    imageUrl: string;
+}

APM-CLI-Final/src/app/shared/convert-to-spaces.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'convertToSpaces'
+})
+export class ConvertToSpacesPipe implements PipeTransform {
+
+    transform(value: string, character: string): string {
+        return value.replace(character, ' ');
+    }
+}