Edit modal

3 files changed, 83 insertions, 30 deletions

diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css
index 17605c2..b06e061 100644
--- a/ufund-ui/src/app/components/need-edit/need-edit.component.css
+++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css
@@ -1,4 +1,4 @@
-:host {
+#box {
     /*position: absolute;*/
     /*background-color: rgba(0, 0, 0, 0.5);*/
     /*display: flex;*/
@@ -8,14 +8,44 @@
     /*right: 0;*/
     /*z-index: 5;*/
     /*justify-content: center;*/
+    padding: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #6c6c6c;
+    background-color: #2e2e2e;
+    border-radius: 5px;
+    position: relative;
+    width: 500px;
 }
 
 #create-form, #delete-form, #update-form {
-    margin-top: 50px;
-    background-color: #3a3a3a;
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;
+    /*margin-top: 50px;*/
+
+    /*padding: 10px 20px 20px 20px;*/
+    /*border: 2px solid #000;*/
+    /*border-radius: 5px;*/
     /*visibility: visible;*/
     /*position: absolute;*/
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+#closeButton {
+    position: absolute;
+    width: 35px;
+    right: 10px;
+}
+
+textarea {
+    height: 200px;
+}
+
+label {
+    padding: 3px;
 }
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 e776415..60637ed 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,23 +1,45 @@
-<div id="update-form">
-    <h1> Update Need </h1>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Image:</label><br>
-        <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br>
-        <label>Location:</label><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>
-        <label>Description</label> <br>
-        <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br>
+<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)">
+        <div>
+            <span>Name:</span>
+            <input type="text" name="name" [(ngModel)]="selectedNeed.name">
+        </div>
+        <div>
+            <span>Image:</span>
+            <input type="text" name="image" [(ngModel)]="selectedNeed.image">
+        </div>
+        <div>
+            <span>Location:</span>
+            <input type="text" name="location" [(ngModel)]="selectedNeed.location">
+        </div>
+        <div>
+            <span>Max Goal:</span>
+            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal">
+        </div>
+        <div>
+            <span>Type:</span>
+            <label>
+                <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+                Monetary
+            </label>
+            <label>
+                <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+                Physical
+            </label>
+        </div>
+        <div>
+            <span>Urgency:</span>
+            <label>
+                <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent">
+                Urgent
+            </label>
+        </div>
+        <div>
+            <span>Description:</span>
+            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea>
+        </div>
         <input type="submit" value="Submit">
 
     </form>
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 2462534..d312183 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,8 +1,9 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Need, GoalType } from '../../models/Need'; 
+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 {ModalService} from '../../services/modal.service';
 
 @Component({
   selector: 'app-need-edit',
@@ -13,8 +14,8 @@ import { ToastsService, ToastType } from '../../services/toasts.service';
 export class NeedEditComponent {
   constructor(
     private cupboardService: CupboardService,
-    private toastService: ToastsService
-
+    private toastService: ToastsService,
+    protected modalService: ModalService
   ) {}
 
   @Input() selectedNeed!: Need;
@@ -58,4 +59,4 @@ export class NeedEditComponent {
 
         );
   }
-}
\ No newline at end of file
+}