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.css | 2 +- .../components/need-list/need-list.component.html | 23 ++++----- .../components/need-list/need-list.component.ts | 60 +++++++++++----------- 3 files changed, 41 insertions(+), 44 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 @@

Needs List

-
-
+
+
-
+
-
-

Search Results:

-
- - {{need.name}} - - - -
-
-
  • + +

    Search Results({{needs.length - searchResults.length}} needs filtered):

    +

    All Needs

    +

    No Results Found

    + +
  • {{need.name}} 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 bab829a60dc243b5987873ea0f0114b032643995 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 20 Mar 2025 10:18:55 -0400 Subject: need list size fix --- ufund-ui/src/app/components/need-list/need-list.component.css | 1 - 1 file changed, 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 88bdfbe..64988d1 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,7 +2,6 @@ list-style-type:circle; border: 2px solid #000; display: block; - width: 30%; border-radius: 5px; } -- cgit v1.2.3 From d386b35bf24444240b0d670674c3e75ea5d8b3ce Mon Sep 17 00:00:00 2001 From: benal01 Date: Fri, 21 Mar 2025 10:07:45 -0400 Subject: delete icon in need list --- ufund-ui/src/app/components/need-list/need-list.component.css | 11 ++++++++++- .../src/app/components/need-list/need-list.component.html | 7 ++++--- 2 files changed, 14 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 64988d1..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 @@ -3,7 +3,6 @@ border: 2px solid #000; display: block; border-radius: 5px; - } li, div { @@ -11,7 +10,17 @@ 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-container { 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 504deb9..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,12 +1,11 @@

    Needs List

    -


    - +
    @@ -18,6 +17,8 @@ {{need.name}} - +
    • -- cgit v1.2.3 From 2b67bd14828c8c0bffe461a66542a2dba6c19f93 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 22 Mar 2025 11:21:30 -0400 Subject: API creation bug fix- the max goal would not be casted properly --- ufund-ui/src/app/components/need-list/need-list.component.css | 1 - 1 file changed, 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 f8948ee..bf7b982 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 @@ -4,7 +4,6 @@ display: block; border-radius: 5px; } - li, div { border: 2px solid #000; border-radius: 5px; -- 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.css | 3 +-- .../components/need-list/need-list.component.ts | 29 ---------------------- 2 files changed, 1 insertion(+), 31 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 bf7b982..29a9626 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 @@ -26,6 +26,5 @@ li { background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; - visibility: visible; + border-radius: 5px; } \ No newline at end of file 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 2ae7c1036b7ce398e2b18928215f74d57bb3cec6 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 22 Mar 2025 12:28:36 -0400 Subject: search reformatting --- ufund-ui/src/app/components/need-list/need-list.component.css | 1 - ufund-ui/src/app/components/need-list/need-list.component.html | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 29a9626..2e4a31b 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 @@ -24,7 +24,6 @@ li { #search-container { background-color: #d9d9d9; - padding: 10px 20px 20px 20px; border: 2px solid #000; border-radius: 5px; } \ No newline at end of file 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 9f22633..0345519 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,8 +1,7 @@

    Needs List

    -
    - +
    -- cgit v1.2.3 From b725948521e81965a18991e7dd59a2bc84dbd460 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 22 Mar 2025 12:56:28 -0400 Subject: need list uses button instead of link --- .../app/components/need-list/need-list.component.css | 15 ++++++++++++--- .../components/need-list/need-list.component.html | 20 +++++++++++--------- 2 files changed, 23 insertions(+), 12 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 2e4a31b..8f017cd 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 @@ -1,17 +1,26 @@ :host { - list-style-type:circle; + list-style-type: none; border: 2px solid #000; display: block; border-radius: 5px; } -li, div { + +div, li > button { border: 2px solid #000; border-radius: 5px; padding: 5px; margin: 5px; } -li { +ul { + list-style-type: none; + padding-inline-start: 0px; +} + +li > button { + width: 98%; + padding: 1%; + margin: 1%; display: flex; justify-content: space-between; align-items: center; 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 0345519..fef22d7 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 @@ -12,12 +12,14 @@

    All Needs

    No Results Found

    -
  • - - {{need.name}} - - - -
    • +
      +
    • + + + +
      • +
    \ No newline at end of file -- cgit v1.2.3 From 381e57d62f01056d823af74d186f6de87df9fcee Mon Sep 17 00:00:00 2001 From: sowgro Date: Sat, 22 Mar 2025 16:35:10 -0400 Subject: Dark mode! --- ufund-ui/src/app/components/need-list/need-list.component.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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..fa3ed4f 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 @@ -4,7 +4,7 @@ display: block; width: 30%; border-radius: 5px; - + } li, div { @@ -16,9 +16,9 @@ li, div { } #search-form { - background-color: #d9d9d9; + background-color: light-dark(#d9d9d9, #1b1b1b); padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; visibility: visible; - } \ No newline at end of file + } -- 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.css | 6 ++++++ ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++-- ufund-ui/src/app/components/need-list/need-list.component.ts | 7 +++++++ 3 files changed, 15 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 8f017cd..c2b8b90 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 @@ -24,8 +24,14 @@ li > button { display: flex; justify-content: space-between; align-items: center; + transition: all 0.3s ease; } +li > button:hover p { + font-weight: bold; +} + + .icon { width: 15px; margin: 3px -3px -1px -3px; 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 fef22d7..fc2daa5 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 @@ -13,9 +13,9 @@

    No Results Found

      -
    • +
    • 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.css | 8 +++++++- ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++-- ufund-ui/src/app/components/need-list/need-list.component.ts | 8 ++++---- 3 files changed, 13 insertions(+), 7 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 c2b8b90..c42dfda 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 @@ -25,10 +25,16 @@ li > button { justify-content: space-between; align-items: center; transition: all 0.3s ease; + font-weight: bold; +} + +li > button span { + font-style: italic; + font-weight: normal; } li > button:hover p { - font-weight: bold; + text-decoration: underline; } 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 fc2daa5..741b899 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 @@ -13,9 +13,9 @@

      No Results Found

        -
      • +
      • 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 --- .../app/components/need-list/need-list.component.css | 19 ++++++++++++++----- .../app/components/need-list/need-list.component.html | 14 ++++++++++---- .../app/components/need-list/need-list.component.ts | 7 ++++++- 3 files changed, 30 insertions(+), 10 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 c42dfda..74dbc34 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 @@ -5,7 +5,7 @@ border-radius: 5px; } -div, li > button { +div { border: 2px solid #000; border-radius: 5px; padding: 5px; @@ -17,17 +17,26 @@ ul { padding-inline-start: 0px; } -li > button { - width: 98%; - padding: 1%; - margin: 1%; +li { display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; font-weight: bold; + border: 2px solid #000; + border-radius: 5px; + margin: 5px; + + > button { + width: 90%; + float: left; + transition: all 0.3s ease; + font-weight: bold; + display: flex; + } } + li > button span { font-style: italic; font-weight: normal; 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 741b899..b31ccf0 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 @@ -13,13 +13,19 @@

        No Results Found

          -
        • - + + +
          + - - +
        \ No newline at end of file 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 f7cd2d90191c1d81526ed549514d82864c1aebb2 Mon Sep 17 00:00:00 2001 From: benal01 Date: Tue, 25 Mar 2025 09:08:26 -0400 Subject: restyling of need list results --- .../app/components/need-list/need-list.component.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 74dbc34..c763105 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 @@ -1,4 +1,5 @@ :host { + --list-background-color: lightgray; list-style-type: none; border: 2px solid #000; display: block; @@ -18,6 +19,7 @@ ul { } li { + background-color: var(--list-background-color); display: flex; justify-content: space-between; align-items: center; @@ -25,17 +27,26 @@ li { font-weight: bold; border: 2px solid #000; border-radius: 5px; - margin: 5px; - + margin: 5px; > button { - width: 90%; + background-color: var(--list-background-color); + width: 88%; float: left; transition: all 0.3s ease; font-weight: bold; display: flex; + border: none; + border-radius: 5px; + } + + > section { + width: 12%; } } +section button{ + margin: 4%; +} li > button span { font-style: italic; @@ -48,7 +59,7 @@ li > button:hover p { .icon { - width: 15px; + width: 18px; margin: 3px -3px -1px -3px; } -- cgit v1.2.3 From 304b867c6fa5c1192e8cdec7fd22affb50e244b3 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Tue, 25 Mar 2025 09:37:49 -0400 Subject: implement sorting algorithms with selection buttons. -ak --- .../components/need-list/need-list.component.html | 7 ++++ .../components/need-list/need-list.component.ts | 46 ++++++++++++++++++++-- 2 files changed, 50 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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..c5faf74 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,4 +1,11 @@

        Needs List

        +
        +

        Sort by:

        + +

        +

        +
        +
        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..be444fb 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,8 +1,28 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; import { UsersService } from '../../services/users.service'; import { userType } from '../../models/User'; + +interface sortAlgo { + (a: Need,b: Need): number; +} + +// sort functions +const sortByName: sortAlgo = (a: Need, b: Need): number => { + if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) { + return -1; + } + return 1; +} + +const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { + if(a.maxGoal >= b.maxGoal) { + return -1; + } + return 1; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -12,6 +32,12 @@ import { userType } from '../../models/User'; export class NeedListComponent { needs: Need[] = []; searchResults: Need[] = []; + currentSortAlgo: sortAlgo = sortByMaxGoal; + + SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ + {func:sortByMaxGoal,name:"sortByMaxGoal"}, + {func:sortByName,name:"sortByName"}, + ]; constructor( private cupboardService: CupboardService, @@ -19,7 +45,7 @@ export class NeedListComponent { ) {} refresh() { - this.cupboardService.getNeeds().subscribe(n => this.needs = n) + this.cupboardService.getNeeds().subscribe(n => this.needs = n.sort(this.currentSortAlgo)) } ngOnInit(): void { @@ -60,6 +86,19 @@ export class NeedListComponent { this.hideElement(document.getElementById('search-status')); } + changeSortAlgo(algoName: string, form: any) { + console.log(algoName); + this.SortingAlgoArrays.forEach(algo => { + if(algo.name === algoName) { + this.currentSortAlgo = algo.func; + console.log("changed sorting algorithm to: ", algo.name) + return + } + }); + this.refresh() + this.search(form); + } + private searchDelay: any; async search(form: any) { @@ -72,8 +111,9 @@ export class NeedListComponent { this.searchDelay = setTimeout(() => { const currentSearchValue = form.search; //latest value of the search + console.log("current search value: ", currentSearchValue) this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n; + this.searchResults = n.sort(this.currentSortAlgo); console.log(currentSearchValue, this.searchResults); this.showElement(document.getElementById('search-results')); this.showElement(document.getElementById('search-status')); -- cgit v1.2.3 From 07d191cb1fc8890f66e9af7d19e8276089d18d8b Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Tue, 25 Mar 2025 09:45:38 -0400 Subject: added more sort options; fix HTML error --- .../src/app/components/need-list/need-list.component.html | 2 ++ .../src/app/components/need-list/need-list.component.ts | 15 ++++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 c5faf74..283cc99 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 @@ -3,7 +3,9 @@

        Sort by:

        +

        +

        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 be444fb..06bb17e 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 @@ -16,13 +16,24 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => { return 1; } +const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => { + return sortByName(a,b)*-1; +} + const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { - if(a.maxGoal >= b.maxGoal) { + if(a.maxGoal == b.maxGoal) { + return sortByName(a,b); + } + else if(a.maxGoal > b.maxGoal) { return -1; } return 1; } +const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => { + return sortByMaxGoal(a,b)*-1; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -37,6 +48,8 @@ export class NeedListComponent { SortingAlgoArrays: {func:sortAlgo,name:string}[] = [ {func:sortByMaxGoal,name:"sortByMaxGoal"}, {func:sortByName,name:"sortByName"}, + {func:sortByNameReverse,name:"sortByNameReverse"}, + {func:sortByMinGoal,name:"sortByMinGoal"}, ]; constructor( -- 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.css | 2 +- .../components/need-list/need-list.component.html | 4 ++-- .../components/need-list/need-list.component.ts | 28 +++++++++++++++++++++- 3 files changed, 30 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 c763105..2eb6a8d 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 @@ -29,7 +29,7 @@ li { border-radius: 5px; margin: 5px; > button { - background-color: var(--list-background-color); + background-color: transparent; width: 88%; float: left; transition: all 0.3s ease; 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 b31ccf0..eaa8a6f 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 @@ -13,14 +13,14 @@

        No Results Found

          -
        • +
        • -
          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 2fdd993..97be0cb 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 @@ -17,11 +17,7 @@ const sortByName: sortAlgo = (a: Need, b: Need): number => { return 1; } -const sortByNameReverse: sortAlgo = (a: Need, b: Need): number => { - return sortByName(a,b)*-1; -} - -const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { +const sortByGoal: sortAlgo = (a: Need, b: Need): number => { if(a.maxGoal == b.maxGoal) { return sortByName(a,b); } @@ -31,10 +27,6 @@ const sortByMaxGoal: sortAlgo = (a: Need, b: Need): number => { return 1; } -const sortByMinGoal: sortAlgo = (a: Need, b: Need): number => { - return sortByMaxGoal(a,b)*-1; -} - @Component({ selector: 'app-need-list', standalone: false, @@ -45,14 +37,13 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + sortMode = 'Ascending' sortSelection: string = ''; - currentSortAlgo: sortAlgo = sortByMaxGoal; + currentSortAlgo: sortAlgo = sortByGoal; - SortingAlgoArrays: {func:sortAlgo,name:string,display:string}[] = [ - {func:sortByMaxGoal,name:"sortByMaxGoal", display:"Max Goal"}, - {func:sortByName,name:"sortByName", display:"Name"}, - {func:sortByNameReverse,name:"sortByNameReverse", display:"Name (reverse)"}, - {func:sortByMinGoal,name:"sortByMinGoal", display:"Min Goal"}, + SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ + {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; @Output() currentNeed = new EventEmitter(); @@ -64,22 +55,34 @@ export class NeedListComponent { refresh() { this.cupboardService.getNeeds().subscribe(n => { - this.needs = n.sort(this.currentSortAlgo); + if (this.sortMode == 'Ascending') { + this.needs = n.sort(this.currentSortAlgo); + } else { + this.needs = n.sort(this.currentSortAlgo).reverse(); + } this.searchResults = this.needs; }); - console.log(this.searchResults); } ngOnInit(): void { this.refresh() } + changeSortMode(form : any) { + if (this.sortMode == 'Ascending'){ + this.sortMode = 'Descending' + } else { + this.sortMode = 'Ascending' + } + this.search(form) + } + changeSortAlgo(algoName: string, form: any) { console.log(algoName); this.SortingAlgoArrays.forEach(algo => { if(algo.name === algoName) { this.currentSortAlgo = algo.func; - console.log("changed sorting algorithm to: ", algo.name) + console.log("changed sorting algorithm to: ", algo.name + this.sortMode) return } }); @@ -102,7 +105,12 @@ export class NeedListComponent { if (form) { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n.sort(this.currentSortAlgo); + if (this.sortMode == 'Ascending') { + this.searchResults = n.sort(this.currentSortAlgo); + } else { + this.searchResults = n.sort(this.currentSortAlgo).reverse(); + } + console.log(currentSearchValue, this.searchResults); }); } -- cgit v1.2.3 From ee4154df85a971f3a0f8e43fd6afdfa6a620ea99 Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 10:09:19 -0400 Subject: refactor change sort algo func with [(ngModel)] binding --- .../components/need-list/need-list.component.html | 2 +- .../components/need-list/need-list.component.ts | 25 ++++++++++------------ 2 files changed, 12 insertions(+), 15 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 5be915c..4f259a0 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,7 +1,7 @@

          Needs List

          - 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 97be0cb..177d9f7 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 @@ -38,8 +38,9 @@ export class NeedListComponent { needs: Need[] = []; searchResults: Need[] = []; sortMode = 'Ascending' - sortSelection: string = ''; + currentSortAlgo: sortAlgo = sortByGoal; + sortSelection: string = this.currentSortAlgo.name; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, @@ -77,19 +78,6 @@ export class NeedListComponent { this.search(form) } - changeSortAlgo(algoName: string, form: any) { - console.log(algoName); - this.SortingAlgoArrays.forEach(algo => { - if(algo.name === algoName) { - this.currentSortAlgo = algo.func; - console.log("changed sorting algorithm to: ", algo.name + this.sortMode) - return - } - }); - this.refresh() - this.search(form); - } - private searchDelay: any; async search(form: any) { @@ -103,6 +91,15 @@ export class NeedListComponent { this.searchDelay = setTimeout(() => { if (form) { + //sorting based on algo selected + this.SortingAlgoArrays.forEach(algo => { + if(algo.name === this.sortSelection) { + this.currentSortAlgo = algo.func; + console.log("changed sorting algorithm to: ", algo.name + this.sortMode) + return + } + }); + const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { if (this.sortMode == 'Ascending') { -- cgit v1.2.3 From 0b4c76c5dc7313ae42c62be3c682c1f88cec13fd Mon Sep 17 00:00:00 2001 From: benal01 Date: Thu, 27 Mar 2025 10:36:32 -0400 Subject: defaut value for sorting --- ufund-ui/src/app/components/need-list/need-list.component.html | 2 +- ufund-ui/src/app/components/need-list/need-list.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 4f259a0..693307f 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,7 +1,7 @@

          Needs List

          - 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 177d9f7..f935e03 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 @@ -40,10 +40,10 @@ export class NeedListComponent { sortMode = 'Ascending' currentSortAlgo: sortAlgo = sortByGoal; - sortSelection: string = this.currentSortAlgo.name; + sortSelection: string = 'sortByGoal'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByMaxGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]}, {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; -- cgit v1.2.3 From 9e011d85fd307768f7cec7214ca873208574ecfb Mon Sep 17 00:00:00 2001 From: benal01 Date: Fri, 28 Mar 2025 21:56:47 -0400 Subject: changed styling of search display to be wider and expand filter descriptions --- .../components/need-list/need-list.component.css | 3 +++ .../components/need-list/need-list.component.html | 30 ++++++++++++---------- .../components/need-list/need-list.component.ts | 2 +- 3 files changed, 21 insertions(+), 14 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 2eb6a8d..19c126f 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 @@ -67,4 +67,7 @@ li > button:hover p { background-color: #d9d9d9; border: 2px solid #000; border-radius: 5px; + .wide-input { + width: 60%; + } } \ No newline at end of file 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 693307f..5e9a540 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,18 +1,22 @@

          Needs List

          - - - - - -
          - +
          + + + +
          +
          +
          + +
          +
          +
          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 f935e03..4359cfa 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 @@ -43,7 +43,7 @@ export class NeedListComponent { sortSelection: string = 'sortByGoal'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByGoal", display:["Max Goal", "Min Goal"]}, + {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]}, {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, ]; -- cgit v1.2.3 From 61b5b762b150c82e7d48190bcfe3416bfea96059 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 29 Mar 2025 14:37:57 -0400 Subject: frontend implementation of a needs' urgency and location --- ufund-ui/src/app/components/need-list/need-list.component.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 4359cfa..37a3775 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,5 +1,4 @@ -import {Component, input, Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component , Output, EventEmitter} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; import { UsersService } from '../../services/users.service'; @@ -39,12 +38,13 @@ export class NeedListComponent { searchResults: Need[] = []; sortMode = 'Ascending' - currentSortAlgo: sortAlgo = sortByGoal; - sortSelection: string = 'sortByGoal'; + currentSortAlgo: sortAlgo = sortByName; + sortSelection: string = 'sortByName'; SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ - {func:sortByGoal,name:"sortByGoal", display:["Maximum Goal", "Minimum Goal"]}, - {func:sortByName,name:"sortByName", display:["Name", "Name (Descending)"]}, + {func:sortByName,name:"sortByName", display:["Name (Alphabetical)", "Name (Reverse)"]}, + {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, + {func:sortByName,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, ]; @Output() currentNeed = new EventEmitter(); -- cgit v1.2.3 From e0a3f2c2c0fec40aa50c8889e343a1dbc7f9d7fb Mon Sep 17 00:00:00 2001 From: benal01 Date: Sat, 29 Mar 2025 15:01:12 -0400 Subject: API functionality for urgency and location --- ufund-ui/src/app/components/need-list/need-list.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 5e9a540..ed151a3 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 @@ -28,7 +28,7 @@
          • -- cgit v1.2.3 From 88650361adfc9be8344b0d383100b0c6ab513973 Mon Sep 17 00:00:00 2001 From: benal01 Date: Sun, 30 Mar 2025 00:33:41 -0400 Subject: basic css and info display for needs --- .../src/app/components/need-list/need-list.component.css | 13 +++++++++++-- .../src/app/components/need-list/need-list.component.html | 9 ++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 19c126f..345326f 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 @@ -31,12 +31,21 @@ li { > button { background-color: transparent; width: 88%; - float: left; transition: all 0.3s ease; font-weight: bold; - display: flex; border: none; border-radius: 5px; + padding-left: 1.5%; + > section { + width: 100%; + flex: none; + display: inline-block; + background-color: magenta; + > progress { + width: 25%; + float: none; + } + } } > section { 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 ed151a3..88b9752 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 @@ -28,7 +28,14 @@
            • -- cgit v1.2.3 From daae556a1be7a30bc6f4606bd1b1567b713d054a Mon Sep 17 00:00:00 2001 From: benal01 Date: Sun, 30 Mar 2025 00:39:23 -0400 Subject: better display for urgency --- ufund-ui/src/app/components/need-list/need-list.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 88b9752..866e5e4 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 @@ -28,7 +28,7 @@
              • -
          • -
        \ No newline at end of file +
      -- cgit v1.2.3 From cfe40fa1e416fbf4586ef36b63a145453a4d6224 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 00:38:37 -0400 Subject: Continue working on css (1) --- .../components/need-list/need-list.component.css | 126 ++++++++++----------- .../components/need-list/need-list.component.html | 73 ++++++------ .../components/need-list/need-list.component.ts | 4 +- 3 files changed, 103 insertions(+), 100 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 05354fc..1936b38 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 @@ -1,91 +1,85 @@ -:host { - --list-background-color: lightgray; - list-style-type: none; - border: 2px solid #000; - display: block; - border-radius: 5px; - +#header { + display: flex; + flex-direction: column; + gap: 10px } -div { - border: 2px solid #000; +.needEntry { + background-color: #3a3a3a; + display: flex; + flex-direction: column; border-radius: 5px; - padding: 5px; - margin: 5px; + padding: 10px; +} + +#needList { + display: flex; + flex-direction: column; + gap: 10px } -ul { - list-style-type: none; - padding-inline-start: 0px; +select { + font-size: 14pt; + padding: 5px; } -li { - background-color: var(--list-background-color); +#searchArea { display: flex; - justify-content: space-between; - align-items: center; - transition: all 0.3s ease; - font-weight: bold; - border: 2px solid #000; - border-radius: 5px; - margin: 5px; - > button { - background-color: transparent; - width: 88%; - transition: all 0.3s ease; - font-weight: bold; - border: none; - border-radius: 5px; - padding-left: 1.5%; - > section { - width: 100%; - flex: none; - display: inline-block; - background-color: magenta; - > progress { - width: 25%; - float: none; - } - } + + form { + display: flex; + width: 100%; + gap: 10px; } - > section { - width: 12%; + input[type=text] { + display: flex; + width: 100%; } } -section button{ - margin: 4%; +#sortArea { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; } -li > button span { - font-style: italic; - font-weight: normal; +.needName { + font-weight: bold; } -li > button:hover p { - text-decoration: underline; +.needType { + text-transform: uppercase; + font-size: 10pt; } +.split { + display: flex; + flex-direction: row; + justify-content: space-between; -.icon { - width: 18px; - margin: 3px -3px -1px -3px; -} + .left { + display: flex; + flex-direction: column; + } -#search-container { - background-color: #d9d9d9; + .right { + display: flex; + flex-direction: column; + align-items: end; + } } -#search-form { - background-color: light-dark(#d9d9d9, #1b1b1b); - padding: 10px 20px 20px 20px; - border: 2px solid #000; - border-radius: 5px; +.urgent { + font-size: 11pt; + background-color: rgba(255, 165, 0, 0.27); + color: rgba(255, 165, 0, 1); + padding: 2px; border-radius: 5px; - visibility: visible; +} - .wide-input { - width: 60%; - } - } +.prog { + display: flex; + flex-direction: column; +} 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 72bc9c5..3a4ca9c 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,21 +1,21 @@ -
      -
      +
      -
      -
      - -
      -
      -
      +
    @@ -24,27 +24,36 @@

    All Needs

    No Results Found

    -
      -
    • - +
      +
      +
      +
      +
      + {{need.name}} + {{need.type}} +
      - -
      -
      + +
      + + {{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%) + +
      +
      + +
      + + - - -
      • -
    +
    + + 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 af8cab4..47114c3 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 @@ -66,7 +66,7 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; - sortMode = 'Ascending' + sortMode: 'Ascending' | 'Descending' = 'Ascending' currentSortAlgo: sortAlgo = sortByPriority; sortSelection: string = 'sortByPriority'; @@ -98,7 +98,7 @@ export class NeedListComponent { }); const form = document.getElementById('search-form') as HTMLFormElement; - form.reset(); + form.reset(); this.search(null); } -- cgit v1.2.3 From ec88317c75ec907c319412502a1b189c97db9173 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 31 Mar 2025 14:36:39 -0400 Subject: Modified need list to display percent as a whole number --- ufund-ui/src/app/components/need-list/need-list.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/need-list') 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 3a4ca9c..e24ee09 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 @@ -41,7 +41,7 @@
    - {{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%) + {{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)
    -- cgit v1.2.3 From 643afd1d6ffcca3597556d287944eaf487da709c Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 31 Mar 2025 17:42:40 -0400 Subject: frontend description editing and display --- ufund-ui/src/app/components/need-list/need-list.component.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 3a4ca9c..d35f2ed 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 @@ -32,20 +32,24 @@ {{need.name}} {{need.type}} - +
    URGENT location_on{{need.location}}
    - +
    {{need.current}}/{{need.maxGoal}} ({{(need.current / need.maxGoal) * 100}}%)
    - +
    + {{need.description}} +
    + +
    + +
    +
    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 47114c3..7a9d647 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,11 +1,11 @@ -import {Component , Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component, EventEmitter, Output} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +import {UsersService} from '../../services/users.service'; +import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; import {catchError, of} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; interface sortAlgo { (a: Need,b: Need): number; @@ -84,7 +84,8 @@ export class NeedListComponent { constructor( private cupboardService: CupboardService, private usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} refresh() { @@ -196,7 +197,7 @@ export class NeedListComponent { this.usersService.refreshBasket(); }); } else { - window.alert("This need is already in your basket!") + this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } -- cgit v1.2.3 From 896e1219526a19400c7143b274193f8b818d6156 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 23:37:00 -0400 Subject: Commit half working changes to move to my laptop --- ufund-ui/src/app/components/need-list/need-list.component.html | 4 ++-- ufund-ui/src/app/components/need-list/need-list.component.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 84f83d6..e00ba47 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 @@ -54,10 +54,10 @@ addAdd To Basket 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 7a9d647..d641acf 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 @@ -160,6 +160,7 @@ export class NeedListComponent { delete(id : number) { this.cupboardService.deleteNeed(id).subscribe(() => { + this.toastService.sendToast(ToastType.INFO, "Need deleted.") this.needs = this.needs.filter(n => n.id !== id) }) this.refresh(); @@ -199,10 +200,7 @@ export class NeedListComponent { } else { this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } - - } - } back() { -- cgit v1.2.3 From bb2e7b50e1ca96120fc42eed1f090cf0e1c98258 Mon Sep 17 00:00:00 2001 From: benal01 Date: Mon, 31 Mar 2025 23:47:36 -0400 Subject: needs per page --- .../components/need-list/need-list.component.html | 9 +++++- .../components/need-list/need-list.component.ts | 34 ++++++++++++++++++++-- 2 files changed, 40 insertions(+), 3 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 84f83d6..d43e07b 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 @@ -24,8 +24,15 @@

    All Needs

    No Results Found

    +
    + Page {{currentPage + 1}} of {{totalPages}}
    + + + + +
    -
    +
    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 7a9d647..bc3de42 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 @@ -66,7 +66,36 @@ export class NeedListComponent { selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + visibleNeeds: Need[] = []; sortMode: 'Ascending' | 'Descending' = 'Ascending' + currentPage: number = 0; + itemsPerPage: number = 5; + totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); + + decrementPage() { + this.currentPage--; + this.updateVisibleNeeds(); + } + + incrementPage() { + this.currentPage++; + this.updateVisibleNeeds(); + } + + editNeedsPerPage(amount: number) { + this.itemsPerPage = amount; + this.updateVisibleNeeds(); + } + + updateVisibleNeeds() { + this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage); + this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); + } + + resetVisibleNeeds() { + this.currentPage = 0; + this.updateVisibleNeeds(); + } currentSortAlgo: sortAlgo = sortByPriority; sortSelection: string = 'sortByPriority'; @@ -96,6 +125,7 @@ export class NeedListComponent { this.needs = n.sort(this.currentSortAlgo).reverse(); } this.searchResults = this.needs; + this.updateVisibleNeeds(); }); const form = document.getElementById('search-form') as HTMLFormElement; @@ -105,6 +135,7 @@ export class NeedListComponent { ngOnInit(): void { this.refresh() + } changeSortMode(form : any) { @@ -145,8 +176,7 @@ export class NeedListComponent { } else { this.searchResults = n.sort(this.currentSortAlgo).reverse(); } - - console.log(currentSearchValue, this.searchResults); + this.updateVisibleNeeds(); }); } }, 250); -- cgit v1.2.3 From 61daadccf89b2b84820386558ac454c0123d4299 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 1 Apr 2025 01:16:49 -0400 Subject: More css cleanup --- .../src/app/components/need-list/need-list.component.css | 8 ++++++++ .../src/app/components/need-list/need-list.component.html | 15 ++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 d4be5fa..041b4ce 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 @@ -100,3 +100,11 @@ select { padding: 5px; gap: 5px; } + +#page-selector { + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + gap: 10px +} 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 8ea7b88..8ea88b1 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 @@ -15,6 +15,8 @@ + +
    @@ -24,13 +26,6 @@

    All Needs

    No Results Found

    -
    - Page {{currentPage + 1}} of {{totalPages}}
    - - - - -
    @@ -69,3 +64,9 @@
    + +
    + + Page {{currentPage + 1}} of {{totalPages}} + +
    -- cgit v1.2.3 From 0e9c0803e35a23ef2e873dc7ebf224a49a92f207 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 1 Apr 2025 02:16:04 -0400 Subject: Get everything working enough to go in main --- ufund-ui/src/app/components/need-list/need-list.component.css | 2 +- ufund-ui/src/app/components/need-list/need-list.component.html | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/need-list') 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 041b4ce..5f2e5e1 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 @@ -14,7 +14,7 @@ #needList { display: flex; flex-direction: column; - gap: 10px + gap: 15px } select { 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 8ea88b1..c0501ba 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 @@ -25,7 +25,6 @@

    Search Results({{needs.length - searchResults.length}} needs filtered):

    All Needs

    No Results Found

    -
    -- cgit v1.2.3