Pushing recipe search pipe into code

mtlynch · Nov 19, 2017 · 3add002 · 3add002
1 parent 43ded81
commit 3add002
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -53,7 +53,7 @@ import { FooterComponent } from './_components/footer/footer.component';
 
     PaginationModule.forRoot(),
   ],
-  providers: [ArraySortPipe],
+  providers: [ArraySortPipe, SearchPipe],
   bootstrap: [AppComponent],
 })
 export class AppModule { }
diff --git a/src/app/recipe-list/recipe-list.component.html b/src/app/recipe-list/recipe-list.component.html
@@ -12,12 +12,12 @@
     <label for="keywords">Search:</label>
     <input type="text" id="keywords" class="form-control" [(ngModel)]="keywordsRaw" (ngModelChange)="splitKeywords($event)">
   </div>
-  <div class="container" *ngIf="keywords && keywords.length > 0">
-    <p>Found {{ (recipes | search:keywords).length }} matching recipes</p>
+  <div class="container" *ngIf="keywordsRaw && keywordsRaw.length > 0">
+    <p>Found {{ recipes.length }} matching recipes</p>
   </div>
   <div *ngIf="loaded">
     <pagination [boundaryLinks]="true"
-                [totalItems]="(recipes | search:keywords).length"
+                [totalItems]="recipes.length"
                 [(ngModel)]="currentPage"
                 class="pagination-sm"
                 [maxSize]="maxPageButtons"
@@ -29,7 +29,7 @@
     <div class="recipes">
       <div
         class="card recipe"
-        *ngFor="let recipe of recipes | search:keywords | range:currentPage:pageSize">
+        *ngFor="let recipe of recipes | range:currentPage:pageSize">
         <div class="card-block">
           <div class="row">
             <div class="col-xs-6 col-md-4">
@@ -59,7 +59,7 @@ <h2>
       </div>
     </div>
     <pagination [boundaryLinks]="true"
-                [totalItems]="(recipes | search:keywords).length"
+                [totalItems]="recipes.length"
                 [(ngModel)]="currentPage"
                 class="pagination-sm"
                 [maxSize]="maxPageButtons"

diff --git a/src/app/recipe-list/recipe-list.component.ts b/src/app/recipe-list/recipe-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { AngularFireDatabase } from 'angularfire2/database';
 import { ArraySortPipe } from './../_pipes/array-sort/array-sort.pipe';
+import { SearchPipe } from './../_pipes/search/search.pipe';
 import { recipesPerPage, maxPageButtons, recipeCategories } from '../constants';
 
 @Component({
@@ -23,11 +24,11 @@ export class RecipeListComponent implements OnInit {
   currentCategory: string;
 
   keywordsRaw: string;
-  keywords: string[];
+  private keywords: string[];
 
   loaded = false;
 
-  constructor(private db: AngularFireDatabase, private arraySortPipe: ArraySortPipe) {
+  constructor(private db: AngularFireDatabase, private arraySortPipe: ArraySortPipe, private searchPipe: SearchPipe) {
     this.db.list('recipes').snapshotChanges().subscribe((entries) => {
       this.loaded = true;
       entries.forEach((entry) => {
@@ -66,6 +67,7 @@ export class RecipeListComponent implements OnInit {
     words = words.filter(x => !!x);
 
     this.keywords = words;
+    this.filterRecipes();
   }
 
   selectCategory(newCategory) {
@@ -89,6 +91,7 @@ export class RecipeListComponent implements OnInit {
     } else {
       recipes = this.recipesRaw;
     }
+    recipes = this.searchPipe.transform(recipes, this.keywords);
     recipes = this.arraySortPipe.transform(recipes, 'publishedTime');
     this.recipes = recipes;
   }