Merge branch 'list-and-cupboard-component-refactor' into css

# Conflicts:
#	ufund-api/data/cupboard.json
#	ufund-ui/src/app/components/cupboard/cupboard.component.css
#	ufund-ui/src/app/components/need-list/need-list.component.css
#	ufund-ui/src/app/components/need-page/need-page.component.html

3 files changed, 111 insertions, 94 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index c8add60..f4b6828 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,21 +1,43 @@
 :host {
-    display: block;
-    /*border: 2px solid #000;*/
+    display: flex;
+    justify-content: space-evenly;
+    border: 2px solid #000;
     border-radius: 5px;
     padding: 10px 20px;
+    > div {
+      width: 40%;
+    }
 }
 
-#menu, #create-form, #delete-form, #update-form {
+
+#menu {
+      display: flex;
+
+      margin: 10px;
+
+}
+
+.tab, .selected-tab {
+   background-color: lightgray;
+   border: 3px solid #000;
+   border-top-left-radius: 5px;
+   border-top-right-radius: 5px;
+   margin-right: 5px;
+   border-bottom: 0px;
+}
+
+.selected-tab {
+   background-color: white;
+}
+
+#create-form, #delete-form, #update-form {
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;
-   width: 20%;
    visibility: visible;
-
 }
 
 #create-button {
    padding: 10px 20px;
-
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..bc5ac1c 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,56 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
-    <button (click)="opencreate()">Create new Need</button>
-    <button (click)="openupdate()">Update existing Need</button>
+<div>
+    <h1> Cupboard </h1>
+    <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
-<div id="create-form">
-    <h1> Create a new need </h1>
-    <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" 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="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">‼️{{statusText | async}}</span>
+<div *ngIf="isManager()" >
+    <h2 > Admin View </h2>
+    <div id="menu">
+        <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button>
+        <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button>
+    </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>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>
+            <input type="submit" value="Submit">
+            
+        </form>
+        <span *ngIf="statusText">{{statusText | async}}</span>
 
-</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">
+    </div>
+    <div id="update-form" *ngIf="selectedForm === 'update'">
+        <h1> Update Need </h1>
+        <label>Needs:</label><br>
+        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <input type="text" name="location" [(ngModel)]="selectedNeed.location"><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="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+            <label>Urgent</label> <br>
+            <input type="submit" value="Submit">
+           
+        </form>
+        <span *ngIf="statusText">{{statusText | async}}</span>
 
-            <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>
-    <span *ngIf="statusText">{{statusText | async}}</span>
+    </div>
+    <hr>
 
 </div>
-<hr>
-<app-need-list #needList></app-need-list>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index a812baf..85ffd17 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { Need, GoalType } from '../../models/Need';
 import { userType } from '../../models/User';
@@ -16,7 +16,7 @@ import {AuthService} from '../../services/auth.service';
 export class CupboardComponent implements OnInit {
 
     protected statusText = new BehaviorSubject("")
-
+    selectedForm = "create";
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent
 
@@ -27,9 +27,6 @@ export class CupboardComponent implements OnInit {
 
     ngOnInit(): void {
         this.cupboardService.getNeeds().subscribe(n => this.needs = n);
-        this.close();
-        this.openmenu();
-
         if (this.isManager()) {
             console.log("Admin view of Cupboard");
         } else {
@@ -39,54 +36,43 @@ export class CupboardComponent implements OnInit {
 
     selectedNeed: any = {
         name: '',
+        location:'',
         id: null,
         maxGoal: null,
-        type: ''
+        type: '',
+        urgent: false
     };
     selectedNeedId: number | null = null;
+    searchResults: any[] = [];
 
-    private hideElement(element: any) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.position = 'absolute';
+    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)
+                });
+            }
 
-    private showElement(element: any) {
-        if (element) {
-            element.style.visibility = 'visible';
-            element.style.position = 'relative';
         }
     }
 
-    openmenu() {
-        const menuElement = document.getElementById('menu');
-        this.showElement(menuElement);
-    }
-
-    opencreate() {
-        this.close();
-        this.showElement(document.getElementById('create-form'));
-    }
-
-    openupdate() {
-        this.close();
-        this.showElement(document.getElementById('update-form'));
-    }
-
-    back() {
-        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'));
+    async updateSearchResults() {
+        if (this.needList) {
+            while (this.selectedForm == 'update') {
+                this.searchResults = this.needList.searchResults
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
     }
 
     populateForm(need: any): void {
+        this.selectForm('update');
         this.selectedNeed = { ...need };
     }
 
@@ -99,14 +85,15 @@ export class CupboardComponent implements OnInit {
         console.log(form);
         const need: Need = {
             name: form.name,
-            id: form.id, //system will control this
+            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
         };
-        console.log("need:", need);
-        console.log(need.id, need, "need updated");
+
         this.cupboardService.updateNeed(need.id, need)
             .pipe(catchError((ex, _) => {
                 if (ex.status == 500) {
@@ -134,9 +121,11 @@ export class CupboardComponent implements OnInit {
     submit(form: any) {
         const need: Need = {
             name: form.name,
+            location: form.location,
             id: 0,
             maxGoal: form.maxGoal,
             type: form.type,
+            urgent: form.urgent ? true : false,
             filterAttributes: [],
             current: 0
         };