opening and closing functionality to expand the form for data entry

2 files changed, 35 insertions, 7 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index b87540e..b767439 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,4 +1,8 @@
 <h1> Cupboard </h1>
+<div id="create-button">
+    <button (click)="open()">Create new Need</button>
+</div>
+
 <div id="create-form">
     <h1> Create a new need </h1>
     <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
@@ -14,8 +18,8 @@
         <input type="radio" name="type" value="PHYSICAL" ngModel>
         <label>Physical</label><br>
         <input type="submit" value="Submit"> 
+        <button (click)="close()">Close</button>
     </form>
 </div>
-
-
+<hr>
 <app-need-list></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 409cf6c..cc09393 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { CupboardService } from '../../services/cupboard.service';
 import { NeedListComponent } from '../need-list/need-list.component';
-import { HttpClient } from '@angular/common/http';
-import { FormsModule } from '@angular/forms';
 import { Need, GoalType } from '../../models/Need';
 
 @Component({
@@ -22,10 +20,36 @@ export class CupboardComponent implements
     current: 0
   };
 
- 
-    constructor(private cupboardService: CupboardService, private http: HttpClient) { }
+  
+    constructor(private cupboardService: CupboardService) { }
     ngOnInit(): void {
-      console.log('CupboardComponent.ngOnInit');
+      this.close();
+    }
+    
+    open() {
+      const formElement = document.getElementById('create-form');
+      if (formElement) {
+        formElement.style.visibility = 'visible';
+        formElement.style.position = 'relative';
+      }
+      const buttonElement = document.getElementById('create-button');
+      if (buttonElement) {
+        buttonElement.style.visibility = 'hidden';
+        buttonElement.style.position = 'absolute';
+      }
+    }
+
+    close() {
+      const formElement = document.getElementById('create-form');
+      if (formElement) {
+        formElement.style.visibility = 'hidden';
+        formElement.style.position = 'absolute';
+      }
+      const buttonElement = document.getElementById('create-button');
+      if (buttonElement) {
+        buttonElement.style.visibility = 'visible';
+        buttonElement.style.position = 'relative';
+      }
     }
 
     submit(form: any) {