[webptmad0418] Jhon Atienza

starter-code/package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^4.4.3",
     "@angular/platform-server": "^4.4.3",
     "@angular/router": "^4.4.3",
+    "bootstrap": "^4.1.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",

starter-code/src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'Angular IronNutrition';
 }

starter-code/src/app/app.module.ts

@@ -5,11 +5,13 @@ import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 import { FoodListComponent } from './food-list/food-list.component';
+import { FoodFinderPipe } from './pipes/food-finder.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodListComponent,
+    FoodFinderPipe,
   ],
   imports: [
     BrowserModule,

starter-code/src/app/food-list/food-list.component.css

@@ -0,0 +1 @@
+@import "./../../../node_modules/bootstrap/dist/css/bootstrap.min.css"

starter-code/src/app/food-list/food-list.component.html

@@ -1,3 +1,40 @@
-<p>
-  food-list works!
-</p>
+<div class="container">
+  <h1>Search food</h1>
+  <input type="text" class="form-control" placeholder="Search food..." name="searchFood" [(ngModel)]="searchFood" style="width:500px">
+  <br>
+  <h1>Food list</h1>
+  <div *ngFor="let food of foods | foodFinder: searchFood" class="card" style="width: 18rem;">
+    <img class="card-img-top" src="{{food.image}}" alt="food">
+    <div class="card-body">
+      <h5 class="card-title" name="name">{{food.name}}</h5>
+      <p class="card-text">{{food.calories}} Calories</p>
+    </div>
+  </div>
+  <br>
+  <button type="button" (click)="showForm()" class="btn btn-secondary">Add Food</button>
+</div>
+<br>
+<form class="container" *ngIf="showAddForm">
+  <div class="form-group">
+    <label for="foodName">Food Name</label>
+    <input type="text" class="form-control col-md-6" name="name" [(ngModel)]="newFood.name" placeholder="Food name"
+      required>
+  </div>
+  <div class="form-group">
+    <label for="calories">Calories</label>
+    <input type="number" class="form-control col-md-6" name="calories" [(ngModel)]="newFood.calories" placeholder="Calores"
+      required>
+  </div>
+  <div class="form-group">
+    <label for="image">Image</label>
+    <input type="text" class="form-control col-md-6" name="image" [(ngModel)]="newFood.image" placeholder="Image"
+      required>
+  </div>
+  <div class="form-group">
+    <label for="quantity">Quantity</label>
+    <input type="number" class="form-control col-md-6" name="quantity" [(ngModel)]="newFood.quantity" placeholder="Quantity"
+      required>
+  </div>
+
+  <button type="button" (click)="addFood()" class="btn btn-primary">Save</button>
+</form>

starter-code/src/app/food-list/food-list.component.ts

@@ -1,16 +1,27 @@
-import { Component, OnInit } from '@angular/core';
-import foods from '../foods';
+import { Component } from '@angular/core';
+import foods  from '../foods';
 
 @Component({
   selector: 'app-food-list',
   templateUrl: './food-list.component.html',
   styleUrls: ['./food-list.component.css']
 })
-export class FoodListComponent implements OnInit {
+export class FoodListComponent  {
+  foods: Array<Object> = foods;
+  searchFood: string;
+  newFood: Object = {};
+  showAddForm: boolean = false;
 
-  constructor() { }
-
-  ngOnInit() {
+  addFood(): void {
+    this.foods.push(this.newFood);
+    this.newFood = {};
+    this.showAddForm = false;
   }
 
+  showForm(): void {
+    this.showAddForm = !this.showAddForm;
+  }
 }
+
+
+

starter-code/src/app/pipes/food-finder.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FoodFinderPipe } from './food-finder.pipe';
+
+describe('FoodFinderPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FoodFinderPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

starter-code/src/app/pipes/food-finder.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Food } from './../shared/models/food.model'
+
+@Pipe({
+  name: 'foodFinder'
+})
+export class FoodFinderPipe implements PipeTransform {
+
+  transform(foods: Food[], searchFood: string): Food[] {
+
+    if (!foods || !searchFood){
+      return foods;
+    }
+
+    return foods.filter(food => 
+      food.name.toLowerCase().indexOf(searchFood.toLowerCase()) !== -1);
+    }
+}

starter-code/src/app/shared/models/food.model.ts

@@ -0,0 +1,6 @@
+export class Food {
+  name: string;
+  calories: number;
+  image: string;
+  quantity: number;
+}