Edit modal

14 files changed, 176 insertions, 60 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index f4ed668..ee6e2f7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -4,6 +4,23 @@
     height: 100%;
 }
 
+#scroll {
+    overflow: auto;
+    min-height: 100%;
+}
+
+.modal {
+    position: absolute;
+    background-color: #000000a8;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #header {
     display: flex;
     flex-direction: row;
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index f697695..30a5347 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,17 +1,22 @@
-<div id="header">
-    <div>
-        <a routerLink="/">
-            <h1>Jelly Solutions</h1>
-        </a>
+<div id="scroll">
+    <div id="header">
+        <div>
+            <a routerLink="/">
+                <h1>Jelly Solutions</h1>
+            </a>
+        </div>
+        <div>
+            <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
+            <a routerLink="/cupboard">Cupboard</a>
+            <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
+    <!--        <span>{{currentUser$ | async}}</span>-->
+            <button *ngIf="currentUser | async" (click)="logout()">Log Out</button>
+            <button *ngIf="!(currentUser | async)" (click)="login()">Log In</button>
+        </div>
     </div>
-    <div>
-        <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
-        <a routerLink="/cupboard">Cupboard</a>
-        <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
-<!--        <span>{{currentUser$ | async}}</span>-->
-        <button *ngIf="currentUser | async" (click)="logout()"> Log Out</button>
-        <button *ngIf="!(currentUser | async)" (click)="login()"> Log In</button>
-    </div>
-</div>
 
-<router-outlet />
+    <router-outlet />
+</div>
+<div *ngIf="modalService.getModalBehaviorSubject() | async" class="modal">
+    <ng-container [ngTemplateOutlet]="modalService.getModalBehaviorSubject() | async" />
+</div>
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index bc0e71a..615397f 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -5,6 +5,7 @@ import {AuthService} from './services/auth.service';
 import {ToastsService} from './services/toasts.service';
 import {User, userType} from './models/User';
 import {ActivatedRoute, Router} from '@angular/router';
+import {ModalService} from './services/modal.service';
 
 @Component({
   selector: 'app-root',
@@ -22,6 +23,7 @@ export class AppComponent implements OnInit {
         private route: ActivatedRoute,
         protected toastService: ToastsService,
         private viewContainerRef: ViewContainerRef,
+        protected modalService: ModalService,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 71c258e..5e88582 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -33,7 +33,10 @@
         <button *ngIf="isHelper()" (click)="addToBasket(need)" [disabled]="inBasket(usersService.getBasket() | async, need)">
             <span class="icon">{{inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket
         </button>
-        <button *ngIf="isManager()" (click)="select(need)">
+        <ng-template #edit>
+            <app-need-edit *ngIf="need" [selectedNeed]="need" (refreshNeedList)="refresh()"></app-need-edit>
+        </ng-template>
+        <button *ngIf="isManager()" (click)="modalService.showModal(edit)">
             <span class="icon">edit</span>Edit Need
         </button>
         <button *ngIf="isManager()" (click)="deleteNeed(need.id)" >
@@ -43,9 +46,7 @@
     <app-need-list [actionArea]="NLActions" *ngIf="searchResults.length > 0" [needs]="searchResults" [itemsPerPage]="itemsPerPage" #needList/>
 </div>
 
-<!--<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>-->
@@ -73,4 +74,3 @@
 <!--        </div>-->
 <!--    </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 bde8e27..f5e4c00 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -9,6 +9,7 @@ import {ToastsService, ToastType} from '../../services/toasts.service';
 import {UsersService} from '../../services/users.service';
 import {SortingAlgoArrays} from './sorting';
 import {Router} from '@angular/router';
+import {ModalService} from '../../services/modal.service';
 
 @Component({
     selector: 'app-cupboard',
@@ -29,13 +30,15 @@ export class CupboardComponent implements OnInit {
     sortMode: 'Ascending' | 'Descending' = 'Ascending'
     itemsPerPage = 5;
     currentSortAlgo = 'sortByPriority';
+    // activeEdit?: Need;
 
     constructor(
         private cupboardService: CupboardService,
         private authService: AuthService,
         private toastService: ToastsService,
         protected usersService: UsersService,
-        private router: Router
+        private router: Router,
+        protected modalService: ModalService
     ) {}
 
     ngOnInit(): void {
@@ -149,6 +152,10 @@ export class CupboardComponent implements OnInit {
         return basket?.map(r => r.id).includes(need.id);
     }
 
+    // editNeed(need : Need) {
+    //     this.activeEdit = need
+    // }
+
     // --------------- FORM STUFF NOT IMPLEMENTED YET --------------- //
 
     // async updateSearchResults() {
@@ -182,7 +189,7 @@ export class CupboardComponent implements OnInit {
     //     this.selectedNeed = { ...need };
     // }
     //
-    select(need : Need) {
+    // select(need : Need) {
         // //emit value
         // // this.currentNeed.emit(need);
         // if (this.selectedNeed) {
@@ -212,7 +219,7 @@ export class CupboardComponent implements OnInit {
         // if (button) {
         //     button.style.visibility = 'hidden';
         // }
-    }
+    // }
 
     // submit(form: any) {
     //     const need: Need = {
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index a10377f..b64be18 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -1,5 +1,5 @@
 :host {
-    height: 100%;
+    flex-grow: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
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
+}
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index 844410f..5a92ee9 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -56,8 +56,8 @@
 
 .actionArea {
     display: flex;
-    padding: 5px;
-    gap: 5px;
+    padding: 5px 0;
+    gap: 10px;
     margin-top: 10px;
 }
 
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 522b710..d494ccf 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -35,9 +35,12 @@
         <button *ngIf="isHelper()" (click)="add(need!)">
             <span class="icon">add</span>Add To Basket
         </button>
-<!--        <button *ngIf="isManager()" (click)="edit(need!)">-->
-<!--            <span class="icon">edit</span>Edit Need-->
-<!--        </button>-->
+        <ng-template #edit>
+            <app-need-edit *ngIf="need" [selectedNeed]="need"></app-need-edit>
+        </ng-template>
+        <button *ngIf="isManager()" (click)="modalService.showModal(edit)">
+            <span class="icon">edit</span>Edit Need
+        </button>
         <button *ngIf="isManager()" (click)="delete(need!.id)" >
             <span class="icon">delete</span>Delete Need
         </button>
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts
index ad4cacf..e9be093 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.ts
+++ b/ufund-ui/src/app/components/need-page/need-page.component.ts
@@ -7,6 +7,7 @@ import {AuthService} from '../../services/auth.service';
 import {catchError, of} from 'rxjs';
 import {ToastsService, ToastType} from '../../services/toasts.service';
 import {UsersService} from '../../services/users.service';
+import {ModalService} from '../../services/modal.service';
 
 @Component({
     selector: 'app-need-page',
@@ -21,7 +22,8 @@ export class NeedPageComponent {
         private authService: AuthService,
         private usersService: UsersService,
         private toastService: ToastsService,
-        private router: Router
+        private router: Router,
+        protected modalService: ModalService
     ) {}
 
     public GoalType = GoalType;
diff --git a/ufund-ui/src/app/services/modal.service.ts b/ufund-ui/src/app/services/modal.service.ts
new file mode 100644
index 0000000..04f2f3a
--- /dev/null
+++ b/ufund-ui/src/app/services/modal.service.ts
@@ -0,0 +1,25 @@
+import {Injectable, TemplateRef} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ModalService {
+
+    private modal = new BehaviorSubject<TemplateRef<any> | null>(null)
+
+    constructor() {}
+
+    showModal(template: TemplateRef<any>) {
+        console.log("got here", template)
+        this.modal.next(template)
+    }
+
+    hideModal() {
+        this.modal.next(null)
+    }
+
+    getModalBehaviorSubject() {
+        return this.modal;
+    }
+}
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 75d6b36..d623726 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -19,7 +19,9 @@ body {
     font-optical-sizing: auto;
 }
 
-input {
+input, textarea {
+    resize: none;
+    font-family: Inter, sans-serif;
     font-size: 14pt;
     padding: 5px;
     border-radius: 5px;