diff options
Diffstat (limited to 'ufund-ui/src/app/components')
3 files changed, 41 insertions, 44 deletions
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..88bdfbe 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 @@ -15,7 +15,7 @@ li, div { } -#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..504deb9 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,25 +1,20 @@ <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> </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> 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; } } |