Add skip to first / last page in pagination

3 files changed, 21 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 5f2e5e1..e17609b 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
@@ -89,6 +89,10 @@ select {
     background-color: #3a3a3a;
     border-radius: 5px;
     cursor: pointer;
+    height: 130px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .clickable:hover {
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 8d01291..88317dd 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
@@ -40,8 +40,6 @@
                 </div>
             </div>
 
-            <br>
-
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
                 <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
@@ -65,7 +63,9 @@
 </div>
 
 <div id="page-selector">
-    <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button>
+    <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button>
+    <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button>
     <span>Page {{currentPage + 1}} of {{totalPages}}</span>
-    <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+    <button [disabled]="!(currentPage < totalPages - 1)" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button>
+    <button [disabled]="!(currentPage !== totalPages - 1)" (click)="lastPage()"><span class="icon">last_page</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 cd3d9bd..06a612e 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
@@ -74,12 +74,22 @@ export class NeedListComponent {
 
   decrementPage() {
     this.currentPage--;
-    this.updateVisibleNeeds();    
+    this.updateVisibleNeeds();
   }
 
   incrementPage() {
     this.currentPage++;
-    this.updateVisibleNeeds();    
+    this.updateVisibleNeeds();
+  }
+
+  lastPage() {
+      this.currentPage = this.totalPages - 1
+      this.updateVisibleNeeds()
+  }
+
+  firstPage() {
+      this.currentPage = 0
+      this.updateVisibleNeeds()
   }
 
   editNeedsPerPage(amount: number) {
@@ -135,7 +145,7 @@ export class NeedListComponent {
 
   ngOnInit(): void {
     this.refresh()
-   
+
   }
 
   changeSortMode(form : any) {
@@ -269,7 +279,4 @@ export class NeedListComponent {
       }
   }
 }
-function not(location: string) {
-  throw new Error('Function not implemented.');
-}