From 057efa1b557d5d874300c6cda8c7d74519c946d6 Mon Sep 17 00:00:00 2001
From: benal01 <bja4245@rit.edu>
Date: Thu, 27 Mar 2025 08:50:12 -0400
Subject: use <selection> instead of table with *ngFor for sort algorithms

---
 .../src/app/components/need-list/need-list.component.html | 15 ++++++---------
 .../src/app/components/need-list/need-list.component.ts   |  1 +
 2 files changed, 7 insertions(+), 9 deletions(-)

(limited to 'ufund-ui/src')

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 de4be58..9799493 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,14 +1,11 @@
 <h1>Needs List</h1>
 <div id="search-container">
-  <div style="display: flex;">
-    <h3>Sort by:</h3>
-    <table style="margin-left: 10px; display: flex; column-gap: 24px;">
-        <tr><h3><button (click)="changeSortAlgo('sortByName',searchForm.value)">Name(A-Z)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByNameReverse',searchForm.value)">Name(Z-A)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByMaxGoal',searchForm.value)">Max Goal(Descending)</button></h3></tr>
-        <tr><h3><button (click)="changeSortAlgo('sortByMinGoal',searchForm.value)">Max Goal(Ascending)</button></h3></tr>
-    </table>
-  </div>
+    <label for="sort">Sort by:</label>
+    <select [(ngModel)]="sortSelection" id="sort" (change)="changeSortAlgo(sortSelection, searchForm.value)">
+        <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}">
+            {{algorithm.name}}
+        </option>
+    </select>
     <form id="search-form" #searchForm="ngForm">
         <input type="text" name="search" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
         <input type="reset" value="Clear" (click)="search(null)"> <br>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 208045f..c1063ce 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -45,6 +45,7 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  sortSelection: string = '';
   currentSortAlgo: sortAlgo = sortByMaxGoal;
 
   SortingAlgoArrays: {func:sortAlgo,name:string}[] = [
-- 
cgit v1.2.3