From 8ec987f46b4ef3ff1ce23d9942662a74e162689d Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 20 Mar 2025 09:58:32 -0400 Subject: need-list search embedded in normal display with better feedback --- .../components/need-list/need-list.component.ts | 60 +++++++++++----------- 1 file changed, 31 insertions(+), 29 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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; } } -- cgit v1.2.3 From d8b9c0da32383630f0831fdf6a7f13c96174ee4c Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 22 Mar 2025 12:17:50 -0400 Subject: removing unneccicary functions for element visiblity in need list --- .../components/need-list/need-list.component.ts | 29 ---------------------- 1 file changed, 29 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 f5d7855..3f77df4 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 @@ -24,38 +24,11 @@ export class NeedListComponent { this.needs = n; this.searchResults = this.needs; }); - console.log(this.searchResults); } ngOnInit(): void { this.refresh() - this.close(); - } - - private showElement(element: any) { - if (element){ - element.style.visibility = 'visible'; - element.style.position = 'relative'; - } - } - - private hideElement(element: any) { - if (element){ - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; - } - } - - open() { - this.hideElement(document.getElementById('search-button')); - this.showElement(document.getElementById('search-container')); - } - - close() { - this.hideElement(document.getElementById('search-container')); - this.showElement(document.getElementById('search-button')); - this.hideElement(document.getElementById('search-status')); } private searchDelay: any; @@ -75,8 +48,6 @@ export class NeedListComponent { 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); -- cgit v1.2.3 From a05f6f0ab8dead76f937a2d7196fa005af0367fe Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 24 Mar 2025 10:27:31 -0400 Subject: hover feedback for need list's button --- ufund-ui/src/app/components/need-list/need-list.component.ts | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 3f77df4..8ae7370 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 @@ -78,6 +78,13 @@ export class NeedListComponent { return type === ("HELPER" as unknown as userType); } + changeText(id : number, text : string) { + const label = document.getElementById('need-label-' + id); + if (label) { + label.innerHTML = text; + } + } + add(need: Need) { const currentUser = this.usersService.getCurrentUser(); //console.log("get current user in angular:", currentUser) -- cgit v1.2.3 From 1c1d3922e7eea35764ebab39b18172ed2c8c82d9 Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 24 Mar 2025 10:38:40 -0400 Subject: better feedback using a --- ufund-ui/src/app/components/need-list/need-list.component.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 8ae7370..0f86921 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 @@ -79,10 +79,10 @@ export class NeedListComponent { } changeText(id : number, text : string) { - const label = document.getElementById('need-label-' + id); - if (label) { - label.innerHTML = text; - } + const span = document.getElementById('hover-status-label-' + id); + if (span) { + span.innerHTML = ' ' + text; + } } add(need: Need) { -- cgit v1.2.3 From 20458b2ae22466d0b75a2ae60f318e514c0d905f Mon Sep 17 00:00:00 2001 From: benal01 Date: Tue, 25 Mar 2025 08:46:45 -0400 Subject: need list reformatting- button does not span whole list element --- ufund-ui/src/app/components/need-list/need-list.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 0f86921..e47929b 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 @@ -11,6 +11,7 @@ import { userType } from '../../models/User'; styleUrl: './need-list.component.css' }) export class NeedListComponent { + selectedNeed: Need | undefined; needs: Need[] = []; searchResults: Need[] = []; @@ -109,4 +110,8 @@ export class NeedListComponent { back() { this.searchResults = this.needs; } -} + + select(need : Need) { + this.selectedNeed = need; + } +} \ No newline at end of file -- cgit v1.2.3 From d9eb78521f29ead3a9f70b09e18a6d9560cc849c Mon Sep 17 00:00:00 2001 From: benal01 Date: Tue, 25 Mar 2025 10:43:52 -0400 Subject: fancy selection animation for need list --- .../components/need-list/need-list.component.ts | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 e47929b..9ef191a 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 @@ -112,6 +112,32 @@ export class NeedListComponent { } select(need : Need) { - this.selectedNeed = need; + if (this.selectedNeed) { + //revert already selected need to previous style + console.log(need.id); + let button = document.getElementById('need-button-' + this.selectedNeed.id); + if (button) { + console.log(button) + button.style.background = 'lightgray'; + button.style.marginLeft = '0%'; + button.style.width = '98%'; + } + button = document.getElementById('need-edit-button-' + this.selectedNeed.id); + if (button) { + button.style.visibility = 'visible'; + } + } + //change selected need to selected style + this.selectedNeed = need; + let button = document.getElementById('need-button-' + need.id); + if (button) { + button.style.background = 'white'; + button.style.marginLeft = '4%'; + button.style.width = '100%'; + } + button = document.getElementById('need-edit-button-' + need.id); + if (button) { + button.style.visibility = 'hidden'; + } } } \ No newline at end of file -- cgit v1.2.3 From 0829feb20e60bc6d323dcc0d9376f4feb45115eb Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 26 Mar 2025 18:23:17 -0400 Subject: Push starter code for Input() --- .../app/components/need-list/need-list.component.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 9ef191a..bf78d99 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,4 @@ -import { Component } from '@angular/core'; +import {Component, Input} from '@angular/core'; import { NgForm } from '@angular/forms'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; @@ -15,6 +15,8 @@ export class NeedListComponent { needs: Need[] = []; searchResults: Need[] = []; + @Input() editF?: Function + constructor( private cupboardService: CupboardService, private usersService: UsersService @@ -43,7 +45,7 @@ export class NeedListComponent { } if (form) { this.searchDelay = setTimeout(() => { - + if (form) { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { @@ -58,9 +60,9 @@ export class NeedListComponent { clearTimeout(this.searchDelay); this.searchResults = this.needs; } - - + + } delete(id : number) { @@ -80,10 +82,10 @@ export class NeedListComponent { } changeText(id : number, text : string) { - const span = document.getElementById('hover-status-label-' + id); + const span = document.getElementById('hover-status-label-' + id); if (span) { span.innerHTML = ' ' + text; - } + } } add(need: Need) { @@ -101,7 +103,7 @@ export class NeedListComponent { } else { window.alert("This need is already in your basket!") } - + } @@ -140,4 +142,4 @@ export class NeedListComponent { button.style.visibility = 'hidden'; } } -} \ No newline at end of file +} -- cgit v1.2.3 From 0549991d0b32de4de544d16478ce5b2782c1809d Mon Sep 17 00:00:00 2001 From: benal01 Date: Wed, 26 Mar 2025 18:59:55 -0400 Subject: use (output) for need edit selection --- ufund-ui/src/app/components/need-list/need-list.component.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list/need-list.component.ts') 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 bf78d99..2eed87d 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,4 @@ -import {Component, Input} from '@angular/core'; +import {Component, Output, EventEmitter} from '@angular/core'; import { NgForm } from '@angular/forms'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; @@ -11,11 +11,11 @@ import { userType } from '../../models/User'; styleUrl: './need-list.component.css' }) export class NeedListComponent { - selectedNeed: Need | undefined; + selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; - @Input() editF?: Function + @Output() currentNeed = new EventEmitter(); constructor( private cupboardService: CupboardService, @@ -114,6 +114,8 @@ export class NeedListComponent { } select(need : Need) { + //emit value + this.currentNeed.emit(need); if (this.selectedNeed) { //revert already selected need to previous style console.log(need.id); -- cgit v1.2.3