diff options
Diffstat (limited to 'ufund-ui/src/app')
3 files changed, 70 insertions, 3 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index 18a4d1b..fe4971a 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -5,7 +5,7 @@ padding: 10px 20px; } -#menu, #create-form, #delete-form { +#menu, #create-form, #delete-form, #update-form { background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index d9a247d..2749850 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -1,6 +1,7 @@ <h1> Cupboard </h1> <div id="menu"> <button (click)="opencreate()">Create new Need</button> + <button (click)="openupdate()">Update existing Need</button> </div> <div id="create-form"> <h1> Create a new need </h1> @@ -21,5 +22,28 @@ <button (click)="back()">Close</button> </div> +<div id="update-form"> + <h1> Update a need </h1> + <label>Needs:</label><br> + <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)"> + <div *ngFor="let need of needs"> + + <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)"> + <label name="template">{{need.name}}</label><br> + </div> + <label>Name:</label><br> + <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br> + <label>Max Goal:</label><br> + <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br> + <label>Type</label><br> + <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type"> + <label>Monetary</label><br> + <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type"> + <label>Physical</label><br> + <input type="submit" value="Submit"> + </form> + <button (click)="back()">Close</button> + +</div> <hr> <app-need-list></app-need-list>
\ No newline at end of file diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 2fccf18..e3f33ac 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { CupboardService } from '../../services/cupboard.service'; import { Need, GoalType } from '../../models/Need'; +import { Form } from '@angular/forms'; @Component({ selector: 'app-cupboard', @@ -10,13 +11,23 @@ import { Need, GoalType } from '../../models/Need'; }) export class CupboardComponent implements OnInit { +needs: any; constructor(private cupboardService: CupboardService) { } ngOnInit(): void { + this.cupboardService.getNeeds().subscribe(n => this.needs = n); this.close(); this.openmenu(); } - + + selectedNeed: any = { + name: '', + id: null, + maxGoal: null, + type: '' + }; + selectedNeedId: number | null = null; + private hideElement(element: any) { if (element){ element.style.visibility = 'hidden'; @@ -41,6 +52,11 @@ export class CupboardComponent implements OnInit { this.showElement(document.getElementById('create-form')); } + openupdate() { + this.close(); + this.showElement(document.getElementById('update-form')); + } + back() { this.close(); this.openmenu(); @@ -50,9 +66,36 @@ export class CupboardComponent implements OnInit { 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 }; + } + + update(form: any) { + console.log(form); + const need: Need = { + name: form.name, + id: form.id, + maxGoal: form.maxGoal, + type: GoalType[form.type as keyof typeof GoalType], + filterAttributes: [], + current: 0 + }; + console.log(need.id, need, "need updated"); + this.cupboardService.updateNeed(need.id, need).subscribe( + (result) => { + if (result) { + console.log("need updated successfully"); + location.reload(); + } else { + console.log("need update failed"); + } + } + + ); + } submit(form: any) { const need: Need = { |