Merge branch 'css' of https://github.com/RIT-SWEN-261-02/team-project-2245-swen-261-02-2b into css

3 files changed, 53 insertions, 10 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index d4be5fa..5f2e5e1 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -14,7 +14,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 10px
+    gap: 15px
 }
 
 select {
@@ -100,3 +100,11 @@ select {
     padding: 5px;
     gap: 5px;
 }
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}
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 84f83d6..c0501ba 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
@@ -15,6 +15,8 @@
         <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)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}">
     </div>
     <!--<button (click)="close()">Close</button>-->
 </div>
@@ -23,9 +25,8 @@
 <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 searchResults" class="needEntry">
+    <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
             <div class="split">
                 <div class="left">
@@ -54,11 +55,17 @@
                 <span class="icon">add</span>Add To Basket
             </button>
             <button *ngIf="isManager()" (click)="select(need)">
-                <span class="icon">edit</span>Delete Need
+                <span class="icon">edit</span>Edit Need
             </button>
             <button *ngIf="isManager()" (click)="delete(need.id)" >
-                <span class="icon">delete</span>Edit Need
+                <span class="icon">delete</span>Delete Need
             </button>
         </div>
     </div>
 </div>
+
+<div id="page-selector">
+    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button>
+    <span>Page {{currentPage + 1}} of {{totalPages}}</span>
+    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+</div>
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 7a9d647..cd3d9bd 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
@@ -66,7 +66,36 @@ export class NeedListComponent {
   selectedNeed: Need | null = null;
   needs: Need[] = [];
   searchResults: Need[] = [];
+  visibleNeeds: Need[] = [];
   sortMode: 'Ascending' | 'Descending' = 'Ascending'
+  currentPage: number = 0;
+  itemsPerPage: number = 5;
+  totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage);
+
+  decrementPage() {
+    this.currentPage--;
+    this.updateVisibleNeeds();    
+  }
+
+  incrementPage() {
+    this.currentPage++;
+    this.updateVisibleNeeds();    
+  }
+
+  editNeedsPerPage(amount: number) {
+    this.itemsPerPage = amount;
+    this.updateVisibleNeeds();
+  }
+
+  updateVisibleNeeds() {
+    this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage);
+    this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
+  }
+
+  resetVisibleNeeds() {
+    this.currentPage = 0;
+    this.updateVisibleNeeds();
+  }
 
   currentSortAlgo: sortAlgo = sortByPriority;
   sortSelection: string = 'sortByPriority';
@@ -96,6 +125,7 @@ export class NeedListComponent {
             this.needs = n.sort(this.currentSortAlgo).reverse();
           }
           this.searchResults = this.needs;
+          this.updateVisibleNeeds();
         });
 
         const form = document.getElementById('search-form') as HTMLFormElement;
@@ -105,6 +135,7 @@ export class NeedListComponent {
 
   ngOnInit(): void {
     this.refresh()
+   
   }
 
   changeSortMode(form : any) {
@@ -145,8 +176,7 @@ export class NeedListComponent {
             } else {
               this.searchResults = n.sort(this.currentSortAlgo).reverse();
             }
-
-            console.log(currentSearchValue, this.searchResults);
+            this.updateVisibleNeeds();
             });
           }
         }, 250);
@@ -160,6 +190,7 @@ export class NeedListComponent {
 
   delete(id : number) {
     this.cupboardService.deleteNeed(id).subscribe(() => {
+        this.toastService.sendToast(ToastType.INFO, "Need deleted.")
       this.needs = this.needs.filter(n => n.id !== id)
     })
     this.refresh();
@@ -199,10 +230,7 @@ export class NeedListComponent {
       } else {
         this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!")
       }
-
-
     }
-
   }
 
   back() {