1 files changed, 7 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 e9f70f6..0e5b762 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,39 +1,17 @@
-<div id="header">
-    <div id="searchArea">
-        <form id="search-form" #searchForm="ngForm">
-            <input type="text" name="search" class="wide-input sort-scheme" 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 [(ngModel)] = "sortSelection" class="wide-input sort-scheme" (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 class="sort-scheme" 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">
+
             <div class="split">
                 <div class="left">
+                    <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
+                </div>
+
+                <div class="middle">
                     <span class="needName">{{need.name}}</span>
                     <span class="needType">{{need.type}}</span>
                 </div>
-
                 <div class="right">
                     <span *ngIf="need.urgent" class="urgent">URGENT</span>
                     <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
@@ -46,19 +24,10 @@
                 <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>