diff options
Diffstat (limited to 'ufund-ui/src/app/components')
9 files changed, 109 insertions, 44 deletions
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; |