diff options
Diffstat (limited to 'ufund-ui/src/app/components/need-list')
3 files changed, 38 insertions, 19 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 1936b38..d4be5fa 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 @@ -5,11 +5,10 @@ } .needEntry { - background-color: #3a3a3a; + background-color: #2e2e2e; display: flex; flex-direction: column; border-radius: 5px; - padding: 10px; } #needList { @@ -59,6 +58,7 @@ select { flex-direction: row; justify-content: space-between; + .left { display: flex; flex-direction: column; @@ -83,3 +83,20 @@ select { display: flex; flex-direction: column; } + +.clickable { + padding: 10px; + background-color: #3a3a3a; + border-radius: 5px; + cursor: pointer; +} + +.clickable:hover { + background-color: #444444; +} + +.actionArea { + display: flex; + padding: 5px; + gap: 5px; +} 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 c325320..84f83d6 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 @@ -26,37 +26,38 @@ <div id="needList"> <div *ngFor="let need of searchResults" class="needEntry"> - <div [routerLink]="'/need/' + need.id"> + <div [routerLink]="'/need/' + need.id" class="clickable"> <div class="split"> <div class="left"> <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> </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> <progress [value]="need.current" [max]="need.maxGoal"></progress> </div> - <div class="description"> - {{need.description}} - </div> </div> - - <div> - <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button> + + <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> + <span class="icon">edit</span>Delete Need </button> <button *ngIf="isManager()" (click)="delete(need.id)" > - <span class="icon">delete</span> + <span class="icon">delete</span>Edit Need </button> </div> </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 47114c3..7a9d647 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,11 +1,11 @@ -import {Component , Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component, EventEmitter, Output} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +import {UsersService} from '../../services/users.service'; +import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; import {catchError, of} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; interface sortAlgo { (a: Need,b: Need): number; @@ -84,7 +84,8 @@ export class NeedListComponent { constructor( private cupboardService: CupboardService, private usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} refresh() { @@ -196,7 +197,7 @@ export class NeedListComponent { this.usersService.refreshBasket(); }); } else { - window.alert("This need is already in your basket!") + this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } |