Merge pull request #27 from RIT-SWEN-261-02/need-list-abstraction

Need list abstraction

1 files changed, 2 insertions, 38 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 84f80dc..406bfa0 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,30 +1,4 @@
-<div id="header">
-    <div id="searchArea">
-        <form id="search-form" #searchForm="ngForm">
-            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
-            <input type="reset" value="Clear" (click)="search(null)"> <br>
-        </form>
-    </div>
-    <div id="sortArea">
-        <label for="sort">Sort by: </label>
-        <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection">
-            <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
-                {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}}
-            </option>
-        </select>
-        <button (click)="changeSortMode(searchForm.value)">
-            <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
-        </button>
-        <label>Needs per page: </label>
-        <input type ="number" [(ngModel)]="itemsPerPage" (change)="editNeedsPerPage()" min="1" max="{{searchResults.length}}">
-    </div>
-    <!--<button (click)="close()">Close</button>-->
-</div>
-
 <!-- display for when results are present and filtered-->
-<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
-<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
-<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
@@ -46,19 +20,9 @@
                 <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
-
         </div>
-
-        <div class="actionArea">
-            <button *ngIf="isHelper()" (click)="add(need)">
-                <span class="icon">add</span>Add To Basket
-            </button>
-            <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>Edit Need
-            </button>
-            <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>Delete Need
-            </button>
+        <div *ngIf="actionArea" class="actionArea">
+            <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
         </div>
     </div>
 </div>