diff options
Diffstat (limited to 'ufund-ui/src/app')
10 files changed, 237 insertions, 195 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 9574de3..24b3e2d 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -4,13 +4,13 @@ import { UsersService } from '../../services/users.service'; import { Need, GoalType } from '../../models/Need'; import { userType } from '../../models/User'; import { BehaviorSubject, catchError, of } from 'rxjs'; -import {NeedListComponent} from '../need-list/need-list.component'; +import { NeedListComponent } from '../need-list/need-list.component'; @Component({ - selector: 'app-cupboard', - standalone: false, - templateUrl: './cupboard.component.html', - styleUrl: './cupboard.component.css' + selector: 'app-cupboard', + standalone: false, + templateUrl: './cupboard.component.html', + styleUrl: './cupboard.component.css' }) export class CupboardComponent implements OnInit { @@ -23,140 +23,152 @@ export class CupboardComponent implements OnInit { constructor(private cupboardService: CupboardService, private usersService: UsersService) { } ngOnInit(): void { - this.cupboardService.getNeeds().subscribe(n => this.needs = n); - this.close(); - this.openmenu(); - - if (this.isManager()) { - console.log("Admin view of Cupboard"); - } else { - console.log("Limited helper view of Cupboard"); - } + this.cupboardService.getNeeds().subscribe(n => this.needs = n); + this.close(); + this.openmenu(); + + if (this.isManager()) { + console.log("Admin view of Cupboard"); + } else { + console.log("Limited helper view of Cupboard"); + } } selectedNeed: any = { - name: '', - id: null, - maxGoal: null, - type: '' + name: '', + id: null, + maxGoal: null, + type: '' }; selectedNeedId: number | null = null; private hideElement(element: any) { - if (element){ - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; - } + if (element) { + element.style.visibility = 'hidden'; + element.style.position = 'absolute'; + } } private showElement(element: any) { - if (element){ - element.style.visibility = 'visible'; - element.style.position = 'relative'; - } + if (element) { + element.style.visibility = 'visible'; + element.style.position = 'relative'; + } } openmenu() { - const menuElement = document.getElementById('menu'); - this.showElement(menuElement); + const menuElement = document.getElementById('menu'); + this.showElement(menuElement); } opencreate() { - this.close(); - this.showElement(document.getElementById('create-form')); + this.close(); + this.showElement(document.getElementById('create-form')); } openupdate() { - this.close(); - this.showElement(document.getElementById('update-form')); + this.close(); + this.showElement(document.getElementById('update-form')); } back() { - this.close(); - this.openmenu(); + this.close(); + this.openmenu(); } close() { - this.hideElement(document.getElementById('create-form')); - this.hideElement(document.getElementById('destroy-form')); - this.hideElement(document.getElementById('menu')); - this.hideElement(document.getElementById('update-form')); + this.hideElement(document.getElementById('create-form')); + this.hideElement(document.getElementById('destroy-form')); + this.hideElement(document.getElementById('menu')); + this.hideElement(document.getElementById('update-form')); } populateForm(need: any): void { - this.selectedNeed = { ...need }; + this.selectedNeed = { ...need }; } isManager() { - const type = this.usersService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); + const type = this.usersService.getCurrentUser()?.type; + return type === ("MANAGER" as unknown as userType); } update(form: any) { - console.log(form); - const need: Need = { - name: form.name, - id: form.id, //system will control this - maxGoal: form.maxGoal, - type: GoalType[form.type as keyof typeof GoalType], - filterAttributes: [], - current: 0 - }; - console.log("need:", need); - console.log(need.id, need, "need updated"); - this.cupboardService.updateNeed(need.id, need) - .pipe(catchError((ex, r) => { - this.statusText.next("Max goal must be greater than 0 " + friendlyHttpStatus[ex.status]) - return of() - })) - .subscribe( - (result) => { - if (result) { - console.log("need updated successfully"); - this.needList?.refresh() - } else { - console.log("need update failed"); - } - } - - ); + console.log(form); + const need: Need = { + name: form.name, + id: form.id, //system will control this + maxGoal: form.maxGoal, + type: GoalType[form.type as keyof typeof GoalType], + filterAttributes: [], + current: 0 + }; + console.log("need:", need); + console.log(need.id, need, "need updated"); + this.cupboardService.updateNeed(need.id, need) + .pipe(catchError((ex, r) => { + if (ex.status == 500) { + this.statusText.next("Fields cannot be blank"); + } else if (ex.status == 400) { + this.statusText.next("Goal must be greater than 0"); + } else { + this.statusText.next("Error on creating need"); + } + return of() + })) + .subscribe( + (result) => { + if (result) { + console.log("need updated successfully"); + this.needList?.refresh() + } else { + console.log("need update failed"); + } + } + + ); } submit(form: any) { - const need: Need = { - name: form.name, - id: 0, - maxGoal: form.maxGoal, - type: form.type, - filterAttributes: [], - current: 0 - }; - console.log("need:", need); - console.log("form submitted. creating need: ", need); - this.cupboardService.createNeed(need) - .pipe(catchError((ex, r) => { - this.statusText.next("Max goal must be greater than 0 " + friendlyHttpStatus[ex.status]) - return of() - })) - .subscribe( - (result) => { - if (result) { - console.log("need created successfully"); - this.needList?.refresh() - } else { - console.log("need creation failed"); - } - } - - ); + const need: Need = { + name: form.name, + id: 0, + maxGoal: form.maxGoal, + type: form.type, + filterAttributes: [], + current: 0 + }; + console.log("need:", need); + console.log("form submitted. creating need: ", need); + this.cupboardService.createNeed(need) + .pipe(catchError((ex, r) => { + if (ex.status == 500) { + this.statusText.next("Fields cannot be blank"); + } else if (ex.status == 400) { + this.statusText.next("Goal must be greater than 0"); + } else { + this.statusText.next("Error on creating need"); + } + return of() + })) + .subscribe( + (result) => { + if (result) { + console.log("need created successfully"); + this.needList?.refresh() + } else { + console.log("need creation failed"); + } + } + + ); } destroy() { } - } +} -let friendlyHttpStatus: {[key: number]: string} = { +let friendlyHttpStatus: { [key: number]: string } = { 200: 'OK', 201: 'Created', 202: 'Accepted', @@ -191,6 +203,7 @@ let friendlyHttpStatus: {[key: number]: string} = { 416: 'Requested Range Not Satisfiable', 417: 'Expectation Failed', 418: 'I\'m a teapot', + 422: 'Unprocessable Entity', 429: 'Too Many Requests', 500: 'Internal Server Error', 501: 'Not Implemented', diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index fc8baf0..a1151b7 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -1,5 +1,4 @@ <h1>Dashboard</h1> -<input type="button" value="Back to Login" (click)="back()"> <app-cupboard></app-cupboard> -<app-funding-basket></app-funding-basket>
\ No newline at end of file +<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index 48c5894..b9faefa 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +import { UsersService } from '../../services/users.service'; +import { userType } from '../../models/User'; @Component({ selector: 'app-dashboard', @@ -7,9 +9,13 @@ import { Component } from '@angular/core'; styleUrl: './dashboard.component.css' }) export class DashboardComponent { - constructor() {} + constructor( + protected usersService: UsersService, + ) {} + + isManager() { + const type = this.usersService.getCurrentUser()?.type; + return type === ("MANAGER" as unknown as userType); + } - back() { - window.history.back(); - } } diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index e69de29..3dec496 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -0,0 +1,7 @@ +td, p { + border: 2px solid #000; + border-radius: 5px; + padding: 5px; + margin: 5px; + +}
\ No newline at end of file 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 0a880af..504e694 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 @@ -2,33 +2,30 @@ <div id="needCount"> <label for="needCount">Needs in Basket:</label> - <span>{{ needCount }}</span> + <span>{{ this.usersService.getBasket().getValue().length }}</span> </div> -<div *ngIf="isBasketEmpty"> +<div *ngIf="this.usersService.getBasket().getValue().length == 0"> <h2>There are no needs in the basket</h2> </div> -<table class="needs" *ngIf="!isBasketEmpty"> +<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0"> <thead> <tr> <th class="need"></th> </tr> </thead> <tbody> - <tr *ngFor="let need of basket"> + <tr *ngFor="let need of usersService.getBasket().getValue()"> <td> - <a routerLink="/need/{{need.id}}"> - {{need.name}} - </a> - <div> - <button type="button" class="addNeed" title="add need" - (click)="addNeed(need)">Add Need</button> - </div> + <a routerLink="/need/{{need.id}}">{{need.name}}</a> + <p>Goal: {{need.maxGoal}}</p> + <p>Current: {{(need.current).toFixed(2)}}</p> + <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p> <br> <div> - <button type="button" class="removeNeed" title="delete need" - (click)="removeNeed(need)">Remove Need</button> + <button type="button" class="removeNeed" title="delete need" + (click)="this.usersService.removeNeed(need.id)">Remove Need</button> </div> </td> </tr> @@ -36,6 +33,7 @@ </table> <br> <div> - <button type="submit" class="checkout" title="checkout" - (click)="checkout()">Checkout</button> + <p *ngIf="!isValid">Invalid input in funding basket!</p> + <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button> + <span *ngIf="statusText">{{statusText | async}}</span> </div>
\ No newline at end of file diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts index dd68c0c..e654711 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts @@ -1,10 +1,11 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, Input, OnInit, ViewChild} from '@angular/core'; import {User} from '../../models/User'; import { UsersService } from '../../services/users.service'; import { Need } from '../../models/Need'; import { NeedListComponent } from '../need-list/need-list.component'; import { Router } from '@angular/router'; import { CupboardService } from '../../services/cupboard.service'; +import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; @Component({ selector: 'app-funding-basket', @@ -12,80 +13,68 @@ import { CupboardService } from '../../services/cupboard.service'; templateUrl: './funding-basket.component.html', styleUrl: './funding-basket.component.css' }) -export class FundingBasketComponent implements - OnInit { - user!: User; - needs: Need[] = []; - basket: Need[] = []; - needCount = 0; - need_quantity: {[key: number]: number} = {}; +export class FundingBasketComponent implements OnInit { + statusText: any; constructor( private router: Router, - private cupboardService: CupboardService, private usersService: UsersService + protected cupboardService: CupboardService, + protected usersService: UsersService ) {} + @ViewChild("contribution") contribution?: Input; + @Input() isValid: boolean = true; + + // this is for login rerouting ngOnInit(): void { if (!this.usersService.getCurrentUser()) { this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); return; } - this.cupboardService.getNeeds().subscribe(n => this.needs = n) - const currentUser = this.usersService.getCurrentUser(); - if (currentUser) { - this.user = currentUser; - } - this.getBasketNeeds(); - } - getBasketNeeds(): void { - if (this.user && this.user.basket) { - this.user.basket.forEach(need => { - // if (this.isInBasket(need)) { - // this.basket.push(need); - // } - }); - } - } - - isInBasket(need: Need): boolean { - return this.basket.includes(need) - } + this.usersService.refreshBasket(); + // this.usersService.removeNeed(); <- call this to remove + } - addNeed(need: Need, quantity: number = 1): void { - if (this.user && !this.isInBasket(need)) { - this.basket.push(need); - this.need_quantity[need.id] = quantity; - } - if (this.isInBasket(need)) { - this.need_quantity[need.id] += quantity; - } - this.needCount++; + async checkout() { + this.isValid = true; + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + contribution.setAttribute("style",""); + if ( contribution.value == '' || contribution.valueAsNumber <= 0) { + this.isValid = false; + contribution.setAttribute("style","color: #ff0000"); + } } - - removeNeed(need: Need, quantity: number = 1): void { - if (this.user && this.isInBasket(need)) { - this.need_quantity[need.id] -= quantity; - if (this.need_quantity[need.id] === 0) { - this.basket = this.basket.filter(n => need.id !== n.id); - } - this.needCount--; - } + if (this.isValid) { + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); + need.current +=+ contribution.value; + this.usersService.removeNeed(+need.id); + this.cupboardService.updateNeed(need.id, need) + .pipe(catchError((ex, r) => { + if (ex.status == 500) { + this.statusText.next('Fields cannot be blank'); + } else if (ex.status == 400) { + this.statusText.next('Goal must be greater than 0'); + } else { + this.statusText.next('Error on creating need'); + } + return new Observable<string>(); + })) + .subscribe((result) => { + if (result) { + console.log('need updated successfully'); + //this.needList?.refresh() + } else { + console.log('need update failed'); + } + }); + } } + } - removeAllNeeds(): void { - this.basket.forEach(need => { - this.need_quantity = []; - }); - this.basket = []; - this.needCount = 0; - } - isBasketEmpty(): boolean { - return this.needCount === 0; - } - checkout(): void { - this.removeAllNeeds(); - } } 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 4a67dfa..36c12d0 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 @@ -24,5 +24,5 @@ {{need.name}} </a> <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button> - <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> --> + <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> </li> 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 e1c0de1..25f05d6 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 @@ -105,19 +105,22 @@ export class NeedListComponent { return type === ("HELPER" as unknown as userType); } - add(need: number) { + add(need: Need) { const currentUser = this.usersService.getCurrentUser(); + //console.log("get current user in angular:", currentUser) if (currentUser) { - this.usersService.updateUser(currentUser.username, currentUser).subscribe(() => { - const currentUser = this.usersService.getCurrentUser(); - if (currentUser && currentUser.basket) { - currentUser.basket.push(need); - console.log("added to basket"); - } - error: (err: any) => { - console.error(err); - } - }); + if (!currentUser.basket.includes(need.id)) { + currentUser.basket.push(need.id); + this.usersService.updateUser(currentUser).subscribe(() => { + this.usersService.refreshBasket(); + error: (err: any) => { + console.error(err); + } + }); + } else { + window.alert("This need is already in your basket!") + } + } diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html index 8234ac7..90fd459 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.html +++ b/ufund-ui/src/app/components/need-page/need-page.component.html @@ -1,3 +1,4 @@ +<button routerLink="/dashboard">Back to dashboard</button> <h1>Viewing Need: {{need?.name}}</h1> <a>internal id: {{need?.id}}</a> <div style="display: flex; column-gap: 6px;"> @@ -18,4 +19,4 @@ <p>Goal: {{need?.maxGoal}}</p> <p>Current: {{need?.current}}</p> -<p>This goal is <strong>{{((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)}}%</strong> complete!</p>
\ No newline at end of file +<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts index bc31870..dba8185 100644 --- a/ufund-ui/src/app/services/users.service.ts +++ b/ufund-ui/src/app/services/users.service.ts @@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs'; import {User} from '../models/User'; +import { Need } from '../models/Need'; +import { CupboardService } from './cupboard.service'; @Injectable({ providedIn: 'root' @@ -10,6 +12,7 @@ export class UsersService { private currentUser : BehaviorSubject<User | null> = new BehaviorSubject<User | null>(null); private apiKey: string = ""; + private basket = new BehaviorSubject<Need[]>([]); private url = "http://localhost:8080/users" private authUrl = "http://localhost:8080/auth" @@ -29,7 +32,8 @@ export class UsersService { }; constructor( - private http: HttpClient + private http: HttpClient, + private cupboardService: CupboardService, ) {} async createUser(username:string, password:string) { @@ -40,10 +44,8 @@ export class UsersService { return this.http.get<User>(`${this.url}/${id}`, this.httpOptions) } - updateUser(id: string, user: User): Observable<User> { - console.log(id, user) - console.log(this.apiKey) - return this.http.put<User>(`${this.url}/${id}`,user, this.httpOptions) + updateUser(user: User): Observable<User> { + return this.http.put<User>(`${this.url}/${user.username}`,user, this.httpOptions2) } deleteUser(id: number): Observable<boolean> { @@ -72,4 +74,28 @@ export class UsersService { this.currentUser.next(currentU); // this.currentUser.subscribe(r => console.log("currentUser: "+r.username)) } + + refreshBasket() { + let promiseArr = this.getCurrentUser()!.basket.map(async needID => { + return await firstValueFrom(this.cupboardService.getNeed(needID)); + }) + Promise.all(promiseArr).then(r => this.basket.next(r)); + } + + removeNeed(id: number) { + let newArr = this.basket.getValue().filter(v => v.id != id); + this.basket.next(newArr); + this.getCurrentUser()!.basket = newArr.map(need => need.id); + this.updateUser(this.getCurrentUser()!).subscribe(() => { + this.refreshBasket(); + error: (err: any) => { + console.error(err); + } + }); + } + + getBasket() { + return this.basket; + } + } |