Improve add to basket feedback

4 files changed, 18 insertions, 6 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index c055c31..71c258e 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -18,7 +18,7 @@
                     {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}}
                 </option>
             </select>
-            <button (click)="toggleSortMode(searchForm.value)">
+            <button (click)="toggleSortMode(searchForm.value)" [title]="sortMode">
                 <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span>
             </button>
             <label>Needs per page: </label>
@@ -30,8 +30,8 @@
     <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
     <ng-template let-need #NLActions>
-        <button *ngIf="isHelper()" (click)="addToBasket(need)">
-            <span class="icon">add</span>Add To Basket
+        <button *ngIf="isHelper()" (click)="addToBasket(need)" [disabled]="inBasket(usersService.getBasket() | async, need)">
+            <span class="icon">{{inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket
         </button>
         <button *ngIf="isManager()" (click)="select(need)">
             <span class="icon">edit</span>Edit Need
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index a4f8db2..bde8e27 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -8,6 +8,7 @@ import {AuthService} from '../../services/auth.service';
 import {ToastsService, ToastType} from '../../services/toasts.service';
 import {UsersService} from '../../services/users.service';
 import {SortingAlgoArrays} from './sorting';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-cupboard',
@@ -33,7 +34,8 @@ export class CupboardComponent implements OnInit {
         private cupboardService: CupboardService,
         private authService: AuthService,
         private toastService: ToastsService,
-        private usersService: UsersService
+        protected usersService: UsersService,
+        private router: Router
     ) {}
 
     ngOnInit(): void {
@@ -42,6 +44,8 @@ export class CupboardComponent implements OnInit {
             // this.refresh()
             this.search(null)
         });
+        this.authService.getCurrentUserSubject().subscribe(
+            () => this.usersService.refreshBasket())
     }
 
     refresh() {
@@ -121,6 +125,8 @@ export class CupboardComponent implements OnInit {
                         return of();
                     }))
                     .subscribe(() => {
+                        let action = {label: "View Basket", onAction: () => this.router.navigate(['/basket'])}
+                        this.toastService.sendToast(ToastType.INFO, `"${need.name}" Added to basket`, action)
                         this.usersService.refreshBasket();
                     });
             } else {
@@ -137,6 +143,12 @@ export class CupboardComponent implements OnInit {
         return this.authService.getCurrentUser()?.type === userType.HELPER
     }
 
+    inBasket(basket: Need[] | null, need: Need) {
+        console.log(basket)
+        console.log(need)
+        return basket?.map(r => r.id).includes(need.id);
+    }
+
     // --------------- FORM STUFF NOT IMPLEMENTED YET --------------- //
 
     // async updateSearchResults() {
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 3e884cd..edc9609 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -3,7 +3,7 @@
     <ng-template [ngIf]="(usersService.getBasket() | async)?.length">
         <ng-template let-need #NLActions>
             <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution">
-            <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
+            <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)">
                 <span class="icon">delete</span>Remove from Basket
             </button>
         </ng-template>
diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html
index dccf869..dc33ecd 100644
--- a/ufund-ui/src/app/components/toast/toast.component.html
+++ b/ufund-ui/src/app/components/toast/toast.component.html
@@ -1,6 +1,6 @@
 <div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv>
     <span>{{this.message}}</span>
-    <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a>
+    <a *ngIf="this.action" href="#" (click)="this.action.onAction(); $event.preventDefault(); hide()">{{this.action.label}}</a>
     <button (click)="hide()">
         <span class="icon">close</span>
     </button>