Get everything working enough to go in main

3 files changed, 28 insertions, 16 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index 4116a77..e45d929 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -30,13 +30,25 @@
 }
 
 #create-form, #delete-form, #update-form {
-   background-color: #d9d9d9;
+   background-color: #3a3a3a;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;
    visibility: visible;
+    /*position: absolute;*/
 }
 
-#create-button {
-   padding: 10px 20px;
+#header {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    h1 {
+        display: inline;
+        width: min-content;
+    }
+
+    button {
+        margin-top: 3px;
+    }
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 2cfbe2d..37954bb 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,14 +1,14 @@
 <div id="box">
-    <h1> Cupboard </h1>
+    <div id="header">
+        <h1> Cupboard </h1>
+        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button>
+    </div>
     <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>
 </div>
-<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>
-    <app-need-edit [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+<ng-template [ngIf]="isManager()" >
+<div>
+    <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit>
+    <div>
     <div id="create-form" *ngIf="selectedForm === 'create'">
         <h1> Create Need </h1>
         <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -27,12 +27,12 @@
             <label>Physical</label><br>
             <input type="checkbox" name="urgent" value="false" ngModel>
             <label>Urgent</label><br>
-            <label>Description</label>
-            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+            <label>Description</label><br>
+            <textarea name="description"></textarea><br>
             <input type="submit" value="Submit">
 
         </form>
     </div>
-    <hr>
-
+    </div>
 </div>
+</ng-template>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index e70d98f..2230cd3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -16,7 +16,7 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
 
 export class CupboardComponent implements OnInit {
 
-    selectedForm = "create";
+    selectedForm?: string = undefined;
     needs: any;
     @ViewChild("needList") needList?: NeedListComponent