diff options
Diffstat (limited to 'ufund-ui/src')
5 files changed, 58 insertions, 79 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index e45d929..9c37582 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -52,3 +52,36 @@ margin-top: 3px; } } + +#header2 { + display: flex; + flex-direction: column; + gap: 10px +} + +#searchArea { + display: flex; + + form { + display: flex; + width: 100%; + gap: 10px; + } + + input[type=text] { + display: flex; + width: 100%; + } +} + +#sortArea { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; +} + +select { + font-size: 14pt; + padding: 5px; +} diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 95845e7..5139738 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -2,7 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import { CupboardService } from '../../services/cupboard.service'; import { Need, GoalType } from '../../models/Need'; import { userType } from '../../models/User'; -import {BehaviorSubject, catchError, of} from 'rxjs'; +import { catchError, of } from 'rxjs'; import { NeedListComponent } from '../need-list/need-list.component'; import {AuthService} from '../../services/auth.service'; import {ToastsService, ToastType} from '../../services/toasts.service'; @@ -24,21 +24,10 @@ export class CupboardComponent implements OnInit { private searchDelay: any; selectedNeed: Need | null = null; needs: Need[] = []; - searchResults = new BehaviorSubject<Need[]>([]); + searchResults: Need[] = []; sortMode: 'Ascending' | 'Descending' = 'Ascending' - // selectedNeed: any = { - // name: '', - // location:'', - // id: null, - // maxGoal: null, - // type: '', - // urgent: false - // }; - selectedNeedId: number | null = null; - // searchResults: any[] = []; currentSortAlgo = SortingAlgoArrays.sortByPriority; - // sortSelection: string = 'sortByPriority'; constructor( private cupboardService: CupboardService, @@ -48,12 +37,10 @@ export class CupboardComponent implements OnInit { ) {} ngOnInit(): void { - this.cupboardService.getNeeds().subscribe(n => this.needs = n); - if (this.isManager()) { - console.log("Admin view of Cupboard"); - } else { - console.log("Limited helper view of Cupboard"); - } + this.cupboardService.getNeeds().subscribe(n => { + this.needs = n; + this.refresh() + }); } refresh() { @@ -63,7 +50,7 @@ export class CupboardComponent implements OnInit { } else { this.needs = n.sort(this.currentSortAlgo.func).reverse(); } - this.searchResults.next(this.needs); + this.searchResults = this.needs; // this.updateVisibleNeeds(); }); @@ -112,9 +99,9 @@ export class CupboardComponent implements OnInit { const currentSearchValue = form.search; //latest value of the search this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { if (this.sortMode == 'Ascending') { - this.searchResults.next(n.sort(this.currentSortAlgo.func)); + this.searchResults = n.sort(this.currentSortAlgo.func); } else { - this.searchResults.next(n.sort(this.currentSortAlgo.func).reverse()); + this.searchResults = n.sort(this.currentSortAlgo.func).reverse(); } // this.updateVisibleNeeds(); }); @@ -124,7 +111,7 @@ export class CupboardComponent implements OnInit { //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.next(this.needs); + this.searchResults = this.needs; } } @@ -137,13 +124,6 @@ export class CupboardComponent implements OnInit { this.search(form) } - - - isHelper() { - const type = this.authService.getCurrentUser()?.type; - return type === ("HELPER" as unknown as userType); - } - changeText(id : number, text : string) { const span = document.getElementById('hover-status-label-' + id); if (span) { @@ -170,6 +150,11 @@ export class CupboardComponent implements OnInit { return type === ("MANAGER" as unknown as userType); } + isHelper() { + const type = this.authService.getCurrentUser()?.type; + return type === ("HELPER" as unknown as userType); + } + // -------------- DISPLAY FUNCTIONS -------------- // select(need : Need) { diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index a53b47c..2b05d01 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -1,7 +1,7 @@ <div id="box"> <h1>Funding Basket</h1> - <ng-template [ngIf]="usersService.getBasket().getValue().length"> - <app-need-list [needs]="of(usersService.getBasket().getValue())"/> + <ng-template [ngIf]="(usersService.getBasket() | async)?.length"> + <app-need-list [needs]="(usersService.getBasket() | async)!"/> <br> <div id="footer"> <button class="button2" title="checkout" (click)="checkout()">Checkout</button> 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 e17609b..582b832 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,9 +1,3 @@ -#header { - display: flex; - flex-direction: column; - gap: 10px -} - .needEntry { background-color: #2e2e2e; display: flex; @@ -17,33 +11,6 @@ gap: 15px } -select { - font-size: 14pt; - padding: 5px; -} - -#searchArea { - display: flex; - - form { - display: flex; - width: 100%; - gap: 10px; - } - - input[type=text] { - display: flex; - width: 100%; - } -} - -#sortArea { - display: flex; - flex-direction: row; - gap: 10px; - align-items: center; -} - .needName { font-weight: bold; } 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 d637005..d027690 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,6 +1,6 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnChanges, OnInit} from '@angular/core'; import {Need} from '../../models/Need'; -import {BehaviorSubject, Observable} from 'rxjs'; +import {Observable} from 'rxjs'; @Component({ selector: 'app-need-list', @@ -8,9 +8,9 @@ import {BehaviorSubject, Observable} from 'rxjs'; templateUrl: './need-list.component.html', styleUrl: './need-list.component.css' }) -export class NeedListComponent implements OnInit { +export class NeedListComponent implements OnChanges { - @Input({required: true}) needs!: Observable<Need[]> + @Input({required: true}) needs!: Need[] visibleNeeds: Need[] = []; currentPage: number = 0; @@ -21,14 +21,8 @@ export class NeedListComponent implements OnInit { ) {} - ngOnInit() { - this.needs.subscribe(needs => { - this.totalPages = Math.ceil(needs.length / this.itemsPerPage); - this.totalPages = Math.ceil(needs.length / this.itemsPerPage); - this.visibleNeeds = needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); - console.log(needs.length) - }) - + ngOnChanges() { + this.updateVisibleNeeds() } decrementPage() { @@ -57,8 +51,8 @@ export class NeedListComponent implements OnInit { } updateVisibleNeeds() { - // this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); - // this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); + this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); + this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); } resetVisibleNeeds() { |