diff options
Diffstat (limited to 'ufund-ui/src/app/components/need-list')
3 files changed, 53 insertions, 10 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 d4be5fa..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 { @@ -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 84f83d6..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 @@ -15,6 +15,8 @@ <button (click)="changeSortMode(searchForm.value)"> <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span> </button> + <label>Needs per page: </label> + <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}"> </div> <!--<button (click)="close()">Close</button>--> </div> @@ -23,9 +25,8 @@ <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> - <div id="needList"> - <div *ngFor="let need of searchResults" class="needEntry"> + <div *ngFor="let need of visibleNeeds" class="needEntry"> <div [routerLink]="'/need/' + need.id" class="clickable"> <div class="split"> <div class="left"> @@ -54,11 +55,17 @@ <span class="icon">add</span>Add To Basket </button> <button *ngIf="isManager()" (click)="select(need)"> - <span class="icon">edit</span>Delete Need + <span class="icon">edit</span>Edit Need </button> <button *ngIf="isManager()" (click)="delete(need.id)" > - <span class="icon">delete</span>Edit Need + <span class="icon">delete</span>Delete Need </button> </div> </div> </div> + +<div id="page-selector"> + <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button> + <span>Page {{currentPage + 1}} of {{totalPages}}</span> + <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button> +</div> 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..cd3d9bd 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); @@ -160,6 +190,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 +230,7 @@ export class NeedListComponent { } else { this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } - - } - } back() { |