From f1fa2714db65c40bd152d8bcfdc21ccca8c29429 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Thu, 12 Jul 2018 17:25:24 -0400
Subject: [PATCH] Added search bar to formula manager

---
 src/app/formulaManager/formulaManager.component.html | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/formulaManager/formulaManager.component.html b/src/app/formulaManager/formulaManager.component.html
index 29af190..c31364f 100644
--- a/src/app/formulaManager/formulaManager.component.html
+++ b/src/app/formulaManager/formulaManager.component.html
@@ -1,10 +1,14 @@
-<div class="container-fluid">
+<div class="container">
     <div class="row">
         <div class="col-2 h-100">
+            <mat-form-field class="w-100">
+                <input #search matInput placeholder="Search">
+                <mat-icon matSuffix>search</mat-icon>
+            </mat-form-field>
             <mat-list>
                 <ng-container *ngFor="let f of formulas | async; let i = index">
-                    <mat-divider *ngIf="i > 0"></mat-divider>
-                    <mat-list-item (click)="displayFormula(f)">{{f.name}}</mat-list-item>
+                    <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
+                    <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)">{{f.name}}</mat-list-item>
                 </ng-container>
             </mat-list>
         </div>
@@ -27,7 +31,7 @@
                 <table class="w-100 table">
                     <thead>
                         <tr>
-                            <td style="width: 10%">Name</td>
+                            <td style="width: 80%">Name</td>
                             <td style="width: 10%">Quantity</td>
                             <td style="width: 10%">Cost</td>
                         </tr>