fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Added search bar to formula manager

Browse Source
This commit is contained in:
Zakary Timson 2018-07-12 17:25:24 -04:00
parent 12fa5ade5c
commit f1fa2714db
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/formulaManager/formulaManager.component.html
View File

@ -1,10 +1,14 @@
<div class="container-fluid"> <div class="container">
<div class="row"> <div class="row">
<div class="col-2 h-100"> <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> <mat-list>
<ng-container *ngFor="let f of formulas | async; let i = index"> <ng-container *ngFor="let f of formulas | async; let i = index">
<mat-divider *ngIf="i > 0"></mat-divider> <mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item (click)="displayFormula(f)">{{f.name}}</mat-list-item> <mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)">{{f.name}}</mat-list-item>
</ng-container> </ng-container>
</mat-list> </mat-list>
</div> </div>
@ -27,7 +31,7 @@
<table class="w-100 table"> <table class="w-100 table">
<thead> <thead>
<tr> <tr>
<td style="width: 10%">Name</td> <td style="width: 80%">Name</td>
<td style="width: 10%">Quantity</td> <td style="width: 10%">Quantity</td>
<td style="width: 10%">Cost</td> <td style="width: 10%">Cost</td>
</tr> </tr>