aboutsummaryrefslogtreecommitdiff
path: root/ufund-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ufund-ui/src')
-rw-r--r--ufund-ui/src/app/app.component.css17
-rw-r--r--ufund-ui/src/app/app.component.html35
-rw-r--r--ufund-ui/src/app/app.component.ts2
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.html8
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.ts13
-rw-r--r--ufund-ui/src/app/components/home-page/home-page.component.css2
-rw-r--r--ufund-ui/src/app/components/need-edit/need-edit.component.css42
-rw-r--r--ufund-ui/src/app/components/need-edit/need-edit.component.html62
-rw-r--r--ufund-ui/src/app/components/need-edit/need-edit.component.ts9
-rw-r--r--ufund-ui/src/app/components/need-page/need-page.component.css4
-rw-r--r--ufund-ui/src/app/components/need-page/need-page.component.html9
-rw-r--r--ufund-ui/src/app/components/need-page/need-page.component.ts4
-rw-r--r--ufund-ui/src/app/services/modal.service.ts25
-rw-r--r--ufund-ui/src/styles.css4
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;
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-03 23:55:23 +0000