Pipe search food

lab-starter-code/angular.json

@@ -23,9 +23,13 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/jquery/dist/jquery.min.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
           },
           "configurations": {
             "production": {

lab-starter-code/package.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
+    "jquery": "^3.3.1",
     "rxjs": "^6.0.0",
     "zone.js": "~0.8.26"
   },

lab-starter-code/src/app/app.component.html

@@ -1,20 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<app-food-list></app-food-list>

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

@@ -3,14 +3,17 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { FoodListComponent } from './components/food-list/food-list.component';
-
+import { FormsModule } from '@angular/forms';
+import { SearchFoodPipe } from './pipes/search-food.pipe';
 @NgModule({
   declarations: [
     AppComponent,
-    FoodListComponent
+    FoodListComponent,
+    SearchFoodPipe
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,25 @@
+
+.container{
+    display: flex;
+    justify-content: space-around;
+}
+h2,h3,h4{
+    display: flex;
+    justify-content: center;
+}
+.container-food{
+    height: 200px;
+    width: 700px;
+    display: flex;
+    margin: 30px;   
+}
+img{
+    height: 200px;
+    padding-right: 20px;
+    border-radius: 10%;
+}
+
+.search-container{
+    display: flex;
+    justify-content: space-around;
+}

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

@@ -1,3 +1,36 @@
-<p>
-  food-list works!
-</p>
+<div class="container">
+  <div>
+    <div class="container-food" *ngFor="let food of listFood | searchFood : filterWord">
+      <img src="{{food.image}}">
+      <div>
+        <div>
+          <h3>{{food.name}}</h3>
+          <h4>{{food.calories}} Calories</h4>
+        </div>
+        <div>
+          <div class="input-group mb-3">
+            <input type="text" [(ngModel)]="food.quantity" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"aria-describedby="button-addon2">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" type="button" id="button-addon2">Add to List</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="search-container">
+      <div >
+        <h2>Search</h2>
+        <input type="text" [(ngModel)]="filterWord" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
+          aria-describedby="button-addon2">
+      </div>
+      <button type="button" class="btn btn-secondary">Add new Food</button>  
+    </div>
+    <div>
+
+    </div>
+
+
+  </div>
+</div>

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

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-
+import  { foods } from '../../foods'
+import { FoodModel } from '../../models/food.model'
 @Component({
   selector: 'app-food-list',
   templateUrl: './food-list.component.html',
   styleUrls: ['./food-list.component.css']
 })
 export class FoodListComponent implements OnInit {
-
+  listFood:Array<FoodModel>
+  filterWord:string
   constructor() { }
 
   ngOnInit() {
+    this.listFood = foods;
+    this.filterWord = '';
   }
 
+
+
 }

lab-starter-code/src/app/foods.ts

@@ -1,4 +1,5 @@
-const foods: Object[] = [
+import {FoodModel} from './models/food.model'
+export const foods: Array<FoodModel> = [
     {
       name: "Pizza",
       calories: 400,
@@ -95,6 +96,4 @@ const foods: Object[] = [
       image: "https://i.imgur.com/URhdrAm.png",
       quantity: 0
     }
-  ]
-
-  export default foods;
+  ];

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

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

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

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

lab-starter-code/src/app/pipes/search-food.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { FoodModel } from '../models/food.model'
+
+@Pipe({
+  name: 'searchFood'
+})
+export class SearchFoodPipe implements PipeTransform {
+
+  transform(foodList: Array<FoodModel>, filterWord:string ,args?: any): Array<FoodModel> {
+    let newList = foodList.filter((food) =>{
+      return food.name.toLowerCase().includes(filterWord.toLowerCase())
+    });
+    return newList;
+  }
+
+}