diff options
Diffstat (limited to '')
8 files changed, 126 insertions, 219 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 5e88582..3873719 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -1,7 +1,10 @@ <div id="box"> <div id="header"> <h1> Cupboard </h1> - <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button> + <ng-template #create> + <app-need-edit [mode]="'Create'" (refreshNeedList)="refresh()"></app-need-edit> + </ng-template> + <button *ngIf="isManager()" class="button2" (click)="modalService.showModal(create)"><span class="icon">add</span>Create Need</button> </div> <div id="header2"> @@ -34,7 +37,7 @@ <span class="icon">{{inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket </button> <ng-template #edit> - <app-need-edit *ngIf="need" [selectedNeed]="need" (refreshNeedList)="refresh()"></app-need-edit> + <app-need-edit *ngIf="need" [mode]="'Edit'" [need]="need" (refreshNeedList)="refresh()"></app-need-edit> </ng-template> <button *ngIf="isManager()" (click)="modalService.showModal(edit)"> <span class="icon">edit</span>Edit Need @@ -45,32 +48,3 @@ </ng-template> <app-need-list [actionArea]="NLActions" *ngIf="searchResults.length > 0" [needs]="searchResults" [itemsPerPage]="itemsPerPage" #needList/> </div> - -<!--<div>--> -<!-- <div>--> -<!-- <div id="create-form" *ngIf="selectedForm === 'create'">--> -<!-- <h1> Create Need </h1>--> -<!-- <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">--> -<!-- <label>Name:</label><br>--> -<!-- <input type="text" name="name" ngModel><br>--> -<!-- <label>Image:</label><br>--> -<!-- <input type="text" name="image" ngModel><br>--> -<!-- <label>Location:</label><br>--> -<!-- <input type="text" name="location" ngModel><br>--> -<!-- <label>Max Goal:</label><br>--> -<!-- <input type="number" name="maxGoal" ngModel><br>--> -<!-- <label>Type</label><br>--> -<!-- <input type="radio" name="type" value="MONETARY" ngModel>--> -<!-- <label>Monetary</label><br>--> -<!-- <input type="radio" name="type" value="PHYSICAL" ngModel>--> -<!-- <label>Physical</label><br>--> -<!-- <input type="checkbox" name="urgent" value="false" ngModel>--> -<!-- <label>Urgent</label><br>--> -<!-- <label>Description</label><br>--> -<!-- <textarea name="description"></textarea><br>--> -<!-- <input type="submit" value="Submit">--> - -<!-- </form>--> -<!-- </div>--> -<!-- </div>--> -<!--</div>--> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index f5e4c00..56fdd70 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -152,114 +152,6 @@ export class CupboardComponent implements OnInit { return basket?.map(r => r.id).includes(need.id); } - // editNeed(need : Need) { - // this.activeEdit = need - // } - - // --------------- FORM STUFF NOT IMPLEMENTED YET --------------- // - - // async updateSearchResults() { - // if (this.needList) { - // while (this.selectedForm == 'update') { - // // this.searchResults = this.needList.searchResults - // await new Promise(resolve => setTimeout(resolve, 100)); - // } - // } - // } - - selectForm(name: string) { - // //get search results from the need list - // if (this.needList) { - // // this.searchResults = this.needList.searchResults; - // } - // console.log(this.searchResults) - // this.selectedForm = name; - // if (name == 'update') { - // if (this.searchResults) { - // this.searchResults.forEach((element: any) => { - // console.log(element) - // }); - // } - // - // } - } - - // populateForm(need: any): void { - // this.selectForm('update'); - // this.selectedNeed = { ...need }; - // } - // - // select(need : Need) { - // //emit value - // // this.currentNeed.emit(need); - // if (this.selectedNeed) { - // //revert already selected need to previous style - // console.log(need.id); - // let button = document.getElementById('need-button-' + this.selectedNeed.id); - // if (button) { - // console.log(button) - // button.style.background = 'lightgray'; - // button.style.marginLeft = '0%'; - // button.style.width = '98%'; - // } - // button = document.getElementById('need-edit-button-' + this.selectedNeed.id); - // if (button) { - // button.style.visibility = 'visible'; - // } - // } - // //change selected need to selected style - // this.selectedNeed = need; - // let button = document.getElementById('need-button-' + need.id); - // if (button) { - // button.style.background = 'white'; - // button.style.marginLeft = '4%'; - // button.style.width = '100%'; - // } - // button = document.getElementById('need-edit-button-' + need.id); - // if (button) { - // button.style.visibility = 'hidden'; - // } - // } - - // submit(form: any) { - // const need: Need = { - // name: form.name, - // image: form.image, - // location: form.location, - // id: 0, - // maxGoal: form.maxGoal, - // type: form.type, - // urgent: !!form.urgent, - // filterAttributes: [], - // current: 0, - // description: form.description - // }; - // console.log("need:", need); - // console.log("form submitted. creating need: ", need); - // this.cupboardService.createNeed(need) - // .pipe(catchError((ex, _) => { - // if (ex.status == 500) { - // this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank"); - // } else if (ex.status == 400) { - // this.toastService.sendToast(ToastType.ERROR, ex.error); - // } else { - // this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); - // } - // return of() - // })) - // .subscribe( - // (result) => { - // if (result) { - // console.log("need created successfully"); - // // this.needList?.refresh() - // } else { - // console.log("need creation failed"); - // } - // } - // - // ); - // } - protected readonly SortingAlgorithms = SortingAlgoArrays; protected readonly Object = Object; } diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html index 60637ed..ed4bfb3 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.html +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html @@ -1,44 +1,44 @@ <div id="box"> <button id="closeButton" (click)="modalService.hideModal()"><span class="icon">close</span></button> - <h2>Update Need</h2> - <form #updateForm="ngForm" id="update-form" (ngSubmit)="update(updateForm.value)"> + <h2>{{this.mode}} Need</h2> + <form #updateForm="ngForm" id="update-form" (ngSubmit)="submit(updateForm.value)"> <div> <span>Name:</span> - <input type="text" name="name" [(ngModel)]="selectedNeed.name"> + <input type="text" name="name" [(ngModel)]="needCopy.name"> </div> <div> <span>Image:</span> - <input type="text" name="image" [(ngModel)]="selectedNeed.image"> + <input type="text" name="image" [(ngModel)]="needCopy.image"> </div> <div> <span>Location:</span> - <input type="text" name="location" [(ngModel)]="selectedNeed.location"> + <input type="text" name="location" [(ngModel)]="needCopy.location"> </div> <div> <span>Max Goal:</span> - <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"> + <input type="number" name="maxGoal" [(ngModel)]="needCopy.maxGoal"> </div> <div> <span>Type:</span> <label> - <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type"> + <input type="radio" name="type" value="MONETARY" [(ngModel)]="needCopy.type"> Monetary </label> <label> - <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type"> + <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="needCopy.type"> Physical </label> </div> <div> <span>Urgency:</span> <label> - <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent"> + <input type="checkbox" name="urgent" [(ngModel)]="needCopy.urgent"> Urgent </label> </div> <div> <span>Description:</span> - <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea> + <textarea name="description" [(ngModel)]="needCopy.description"></textarea> </div> <input type="submit" value="Submit"> diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts index d312183..abfa543 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.ts +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts @@ -1,62 +1,109 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { Need, GoalType } from '../../models/Need'; -import { CupboardService } from '../../services/cupboard.service'; -import { catchError, of } from 'rxjs'; -import { ToastsService, ToastType } from '../../services/toasts.service'; +import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core'; +import {GoalType, Need} from '../../models/Need'; +import {CupboardService} from '../../services/cupboard.service'; +import {catchError, of} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; import {ModalService} from '../../services/modal.service'; +import {Router} from '@angular/router'; @Component({ - selector: 'app-need-edit', - standalone: false, - templateUrl: './need-edit.component.html', - styleUrl: './need-edit.component.css' + selector: 'app-need-edit', + standalone: false, + templateUrl: './need-edit.component.html', + styleUrl: './need-edit.component.css' }) -export class NeedEditComponent { - constructor( - private cupboardService: CupboardService, - private toastService: ToastsService, - protected modalService: ModalService - ) {} - - @Input() selectedNeed!: Need; - @Output() refreshNeedList = new EventEmitter<void>(); - - update(form: any) { - console.log(form); - const need: Need = { - name: form.name, - image: form.image, - location: form.location, - id: this.selectedNeed.id, //system will control this - maxGoal: form.maxGoal, - type: GoalType[form.type as keyof typeof GoalType], - urgent: form.urgent, - filterAttributes: [], - current: 0, - description: form.description - }; - - this.cupboardService.updateNeed(need.id, need) - .pipe(catchError((ex, _) => { - if (ex.status == 500) { - this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank'); - } else if (ex.status == 400) { - this.toastService.sendToast(ToastType.ERROR, ex.error); - } else { - this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); - } - return of() - })) - .subscribe( - (result) => { - if (result) { - console.log("need updated successfully"); - this.refreshNeedList.emit(); +export class NeedEditComponent implements OnChanges { + + @Input() mode!: "Create" | "Edit" + @Input() need?: Need; + @Output() refreshNeedList = new EventEmitter<void>(); + + needCopy: any = {} + + constructor( + private cupboardService: CupboardService, + private toastService: ToastsService, + protected modalService: ModalService, + private router: Router + ) {} + + ngOnChanges() { + this.needCopy = {...this.need} + } + + submit(form: any) { + const need: Need = { + name: form.name, + image: form.image, + location: form.location, + id: this.needCopy.id, //system will control this + maxGoal: form.maxGoal, + type: GoalType[form.type as keyof typeof GoalType], + urgent: form.urgent, + filterAttributes: [], + current: 0, + description: form.description + }; + + if (this.mode == "Edit") { + this.updateNeed(need) + } else if (this.mode === 'Create') { + this.createNeed(need) + } + } + + updateNeed(need: Need) { + this.cupboardService.updateNeed(need.id, need) + .pipe(catchError((ex, _) => { + if (ex.status == 500) { + this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank'); + } else if (ex.status == 400) { + this.toastService.sendToast(ToastType.ERROR, ex.error); + } else { + this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); + } + return of() + })) + .subscribe( + (result) => { + if (result) { + let action = {label: 'View Need', onAction: () => this.router.navigate([`/need/${need.id}`])} + this.toastService.sendToast(ToastType.INFO, "Need updated successfully", action) + this.modalService.hideModal() + console.log("need updated successfully"); + this.refreshNeedList.emit(); + } else { + console.log("need update failed"); + } + } + ); + } + + createNeed(need: Need) { + this.cupboardService.createNeed(need) + .pipe(catchError((ex, _) => { + if (ex.status == 500) { + this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank"); + } else if (ex.status == 400) { + this.toastService.sendToast(ToastType.ERROR, ex.error); } else { - console.log("need update failed"); + this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); + } + return of() + })) + .subscribe( + (result) => { + if (result) { + let action = {label: 'View Need', onAction: () => this.router.navigate([`/need/${result.id}`])} + this.toastService.sendToast(ToastType.INFO, "Need created successfully", action) + this.modalService.hideModal() + console.log("need created successfully"); + this.refreshNeedList.emit(); + } else { + console.log("need creation failed"); + } } - } - ); - } + ); + } } 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 d494ccf..aed3e95 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 @@ -36,7 +36,7 @@ <span class="icon">add</span>Add To Basket </button> <ng-template #edit> - <app-need-edit *ngIf="need" [selectedNeed]="need"></app-need-edit> + <app-need-edit [mode]="'Edit'" *ngIf="need" [need]="need" (refreshNeedList)="ngOnInit()"></app-need-edit> </ng-template> <button *ngIf="isManager()" (click)="modalService.showModal(edit)"> <span class="icon">edit</span>Edit Need diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index e9be093..1c6d8e4 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -1,5 +1,5 @@ -import {Component, Input} from '@angular/core'; -import {GoalType, Need} from '../../models/Need'; +import {Component, Input, OnInit} from '@angular/core'; +import {Need} from '../../models/Need'; import {ActivatedRoute, Router} from "@angular/router"; import {CupboardService} from "../../services/cupboard.service"; import {userType} from '../../models/User'; @@ -15,7 +15,7 @@ import {ModalService} from '../../services/modal.service'; templateUrl: './need-page.component.html', styleUrl: './need-page.component.css' }) -export class NeedPageComponent { +export class NeedPageComponent implements OnInit { constructor( private route: ActivatedRoute, private cupboardService: CupboardService, @@ -26,8 +26,6 @@ export class NeedPageComponent { protected modalService: ModalService ) {} - public GoalType = GoalType; - @Input() need!: Need; ngOnInit(): void { @@ -71,19 +69,15 @@ export class NeedPageComponent { delete(id : number) { this.cupboardService.deleteNeed(id) - .pipe(catchError((ex, r) => { + .pipe(catchError((ex, _) => { this.toastService.sendToast(ToastType.ERROR, ex.error) return of() })) .subscribe(() => { // this.needs = this.needs.filter(n => n.id !== id) this.toastService.sendToast(ToastType.INFO, "Need deleted") - this.router.navigate(['/']) + this.router.navigate(['/cupboard']) }) // this.refresh(); } - - edit(need: Need) { - - } } diff --git a/ufund-ui/src/app/models/Need.ts b/ufund-ui/src/app/models/Need.ts index 6cf7e76..588e745 100644 --- a/ufund-ui/src/app/models/Need.ts +++ b/ufund-ui/src/app/models/Need.ts @@ -12,6 +12,6 @@ export interface Need { } export enum GoalType { - MONETARY, - PHYSICAL + MONETARY = 'MONETARY', + PHYSICAL = 'PHYSICAL' } diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts index 9232c0c..694bb94 100644 --- a/ufund-ui/src/app/services/cupboard.service.ts +++ b/ufund-ui/src/app/services/cupboard.service.ts @@ -23,8 +23,8 @@ export class CupboardService { private authService: AuthService ) {} - createNeed(need: Need): Observable<boolean> { - return this.http.post<boolean>(this.url, need, this.httpOptions()) + createNeed(need: Need): Observable<Need> { + return this.http.post<Need>(this.url, need, this.httpOptions()) } getNeeds(): Observable<Need[]> { |