diff options
Diffstat (limited to 'ufund-ui/src/app/components/need-list')
3 files changed, 30 insertions, 11 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 0d64c99..84f80dc 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,10 +40,9 @@ </div> </div> - <br> - <div class="prog"> <span id="hover-status-label-{{need.id}}"> </span> + <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> @@ -65,7 +64,9 @@ </div> <div id="page-selector"> - <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</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 ed14d6a..ae6bc99 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 @@ -1,5 +1,5 @@ import {Component, EventEmitter, Output} from '@angular/core'; -import {Need} from '../../models/Need'; +import {GoalType, Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; import {UsersService} from '../../services/users.service'; import {userType} from '../../models/User'; @@ -72,14 +72,28 @@ export class NeedListComponent { itemsPerPage: number = 5; totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); + getPrefix(need: Need) { + return (need.type === GoalType.MONETARY) ? "$" : ""; + } + 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() { @@ -140,7 +154,7 @@ export class NeedListComponent { ngOnInit(): void { this.refresh() - + } changeSortMode(form : any) { @@ -224,6 +238,7 @@ export class NeedListComponent { if (currentUser) { if (!currentUser.basket.includes(need.id)) { currentUser.basket.push(need.id); + this.toastService.sendToast(ToastType.INFO, "Need added to your basket!") this.usersService.updateUser(currentUser) .pipe(catchError((err, _) => { console.error(err); @@ -273,8 +288,7 @@ export class NeedListComponent { button.style.visibility = 'hidden'; } } -} -function not(location: string) { - throw new Error('Function not implemented.'); + + protected readonly GoalType = GoalType; } |