aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ufund-ui/public/delete.pngbin0 -> 6396 bytes
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.css20
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.html101
-rw-r--r--ufund-ui/src/app/components/cupboard/cupboard.component.ts2
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.css14
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.html30
-rw-r--r--ufund-ui/src/app/components/need-list/need-list.component.ts60
7 files changed, 124 insertions, 103 deletions
diff --git a/ufund-ui/public/delete.png b/ufund-ui/public/delete.png
new file mode 100644
index 0000000..6403705
--- /dev/null
+++ b/ufund-ui/public/delete.png
Binary files differ
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..4c6ac4b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,18 +1,30 @@
:host {
- display: block;
+ display: flex;
+ justify-content: left;
border: 2px solid #000;
border-radius: 5px;
padding: 10px 20px;
}
+#menu {
+ display: flex;
+ justify-content: space-between;
+ margin: 10px;
+ * {
+ border: 3px solid #000;
+
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ margin-right: 5px;
+ border-bottom: 0px;
+ }
+}
-#menu, #create-form, #delete-form, #update-form {
+#create-form, #delete-form, #update-form {
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
- width: 20%;
visibility: visible;
-
}
#create-button {
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..4577844 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,55 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
- <button (click)="opencreate()">Create new Need</button>
- <button (click)="openupdate()">Update existing Need</button>
+<div>
+ <h1> Cupboard </h1>
+ <app-need-list #needList></app-need-list>
</div>
-<div id="create-form">
- <h1> Create a new need </h1>
- <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
- <label>Name:</label><br>
- <input type="text" name="name" ngModel><br>
- <label>Max Goal:</label><br>
- <input type="number" name="maxGoal" ngModel><br>
- <label>Type</label><br>
- <input type="radio" name="type" value="MONETARY" ngModel>
- <label>Monetary</label><br>
- <input type="radio" name="type" value="PHYSICAL" ngModel>
- <label>Physical</label><br>
- <input type="submit" value="Submit">
- </form>
- <button (click)="back()">Close</button>
- <span *ngIf="statusText">‼️{{statusText | async}}</span>
-
+<div *ngIf="isManager()" >
+ <h2 > Admin View </h2>
+ <div id="menu">
+ <button (click)="opencreate()">Create new Need</button>
+ <button (click)="openupdate()">Update existing Need</button>
+ </div>
+ <div id="create-form">
+ <h1> Create a new need </h1>
+ <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
+ <label>Name:</label><br>
+ <input type="text" name="name" ngModel><br>
+ <label>Max Goal:</label><br>
+ <input type="number" name="maxGoal" ngModel><br>
+ <label>Type</label><br>
+ <input type="radio" name="type" value="MONETARY" ngModel>
+ <label>Monetary</label><br>
+ <input type="radio" name="type" value="PHYSICAL" ngModel>
+ <label>Physical</label><br>
+ <input type="submit" value="Submit">
+ </form>
+ <button (click)="back()">Close</button>
+ <span *ngIf="statusText">‼️{{statusText | async}}</span>
+
+ </div>
+ <div id="update-form">
+ <h1> Update a need </h1>
+ <label>Needs:</label><br>
+ <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+ <div *ngFor="let need of needs">
+
+ <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
+ <label name="template">{{need.name}}</label><br>
+ </div>
+ <label>Name:</label><br>
+ <input type="text" name="name" [(ngModel)]="selectedNeed.name"><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="submit" value="Submit">
+ </form>
+ <button (click)="back()">Close</button>
+ <span *ngIf="statusText">{{statusText | async}}</span>
+
+ </div>
+ <hr>
+
</div>
-<div id="update-form">
- <h1> Update a need </h1>
- <label>Needs:</label><br>
- <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
- <div *ngFor="let need of needs">
-
- <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
- <label name="template">{{need.name}}</label><br>
- </div>
- <label>Name:</label><br>
- <input type="text" name="name" [(ngModel)]="selectedNeed.name"><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="submit" value="Submit">
- </form>
- <button (click)="back()">Close</button>
- <span *ngIf="statusText">{{statusText | async}}</span>
-
-</div>
-<hr>
-<app-need-list #needList></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 24b3e2d..f8023c3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -55,7 +55,6 @@ export class CupboardComponent implements OnInit {
element.style.position = 'relative';
}
}
-
openmenu() {
const menuElement = document.getElementById('menu');
this.showElement(menuElement);
@@ -79,7 +78,6 @@ export class CupboardComponent implements OnInit {
close() {
this.hideElement(document.getElementById('create-form'));
this.hideElement(document.getElementById('destroy-form'));
- this.hideElement(document.getElementById('menu'));
this.hideElement(document.getElementById('update-form'));
}
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index bbc3f2c..f8948ee 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -2,9 +2,7 @@
list-style-type:circle;
border: 2px solid #000;
display: block;
- width: 30%;
border-radius: 5px;
-
}
li, div {
@@ -12,10 +10,20 @@ li, div {
border-radius: 5px;
padding: 5px;
margin: 5px;
+}
+
+li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.icon {
+ width: 15px;
+ margin: 3px -3px -1px -3px;
}
-#search-form {
+#search-container {
background-color: #d9d9d9;
padding: 10px 20px 20px 20px;
border: 2px solid #000;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 36c12d0..9f22633 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,28 +1,24 @@
<h1>Needs List</h1>
-<input id="search-button" type="button" value="Search" (click)="open()">
-<div id="search-form">
- <form #searchForm="ngForm">
+<div id="search-container">
+ <form id="search-form" #searchForm="ngForm">
<label>Search:</label><br>
<input type="text" name="search" (input)="search(searchForm.value)" ngModel>
- <input type="button" value="Clear" (click)="searchForm.reset()"> <br>
+ <input type="reset" value="Clear" (click)="search(null)"> <br>
</form>
- <button (click)="close()">Close</button>
- <div>
- <h2 id="search-status">Search Results:</h2>
- <div *ngFor="let need of searchResults">
- <a routerLink="/need/{{need.id}}">
- {{need.name}}
- </a>
- <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
- <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -->
- </div>
- </div>
+ <!--<button (click)="close()">Close</button>-->
</div>
-<li *ngFor="let need of needs">
+<!-- display for when results are present and filtered-->
+<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2>
+<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2>
+<h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
+
+<li *ngFor="let need of searchResults">
<a routerLink="/need/{{need.id}}">
{{need.name}}
</a>
- <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button>
+ <button (click)="delete(need.id)" *ngIf="isManager()">
+ <img class="icon" src="/delete.png" alt="Delete">
+ </button>
<button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
</li>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 25f05d6..f5d7855 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { NgForm } from '@angular/forms';
import {Need} from '../../models/Need';
import {CupboardService} from '../../services/cupboard.service';
import { UsersService } from '../../services/users.service';
@@ -19,12 +20,16 @@ export class NeedListComponent {
) {}
refresh() {
- this.cupboardService.getNeeds().subscribe(n => this.needs = n)
+ this.cupboardService.getNeeds().subscribe(n => {
+ this.needs = n;
+ this.searchResults = this.needs;
+ });
+
+ console.log(this.searchResults);
}
ngOnInit(): void {
this.refresh()
-
this.close();
}
@@ -42,20 +47,13 @@ export class NeedListComponent {
}
}
- private updateSearchStatus(text: string) {
- let element = document.getElementById('search-status');
- if (element) {
- element.innerHTML = text;
- }
- }
-
open() {
this.hideElement(document.getElementById('search-button'));
- this.showElement(document.getElementById('search-form'));
+ this.showElement(document.getElementById('search-container'));
}
close() {
- this.hideElement(document.getElementById('search-form'));
+ this.hideElement(document.getElementById('search-container'));
this.showElement(document.getElementById('search-button'));
this.hideElement(document.getElementById('search-status'));
}
@@ -69,24 +67,28 @@ export class NeedListComponent {
if (this.searchDelay) {
clearTimeout(this.searchDelay);
}
+ if (form) {
+ this.searchDelay = setTimeout(() => {
+
+ if (form) {
+ const currentSearchValue = form.search; //latest value of the search
+ this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
+ this.searchResults = n;
+ console.log(currentSearchValue, this.searchResults);
+ this.showElement(document.getElementById('search-results'));
+ this.showElement(document.getElementById('search-status'));
+ });
+ }
+ }, 250);
+ } else {
+ //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response
+ //clear timeout to stop pending search
+ clearTimeout(this.searchDelay);
+ this.searchResults = this.needs;
+ }
+
- this.searchDelay = setTimeout(() => {
- const currentSearchValue = form.search; //latest value of the search
- this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => {
- this.searchResults = n;
- console.log(currentSearchValue, this.searchResults);
- this.showElement(document.getElementById('search-results'));
- this.showElement(document.getElementById('search-status'));
- if (this.searchResults.length === this.needs.length) {
- this.updateSearchStatus("Please refine your search");
- this.searchResults = [];
- } else if (this.searchResults.length === 0) {
- this.updateSearchStatus("No results found");
- } else {
- this.updateSearchStatus("Search results:");
- }
- });
- }, 250);
+
}
delete(id : number) {
@@ -127,6 +129,6 @@ export class NeedListComponent {
}
back() {
- this.searchResults = [];
+ this.searchResults = this.needs;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 23:00:02 +0000