ufund-ui/src/app/components/need-list/need-list.component.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {Need} from '../../models/Need';
import {Observable} from 'rxjs';

@Component({
    selector: 'app-need-list',
    standalone: false,
    templateUrl: './need-list.component.html',
    styleUrl: './need-list.component.css'
})
export class NeedListComponent implements OnChanges {

    @Input({required: true}) needs!: Need[]

    visibleNeeds: Need[] = [];
    currentPage: number = 0;
    itemsPerPage: number = 5;
    totalPages: number = 0;

    constructor(

    ) {}

    ngOnChanges() {
        this.updateVisibleNeeds()
    }

    decrementPage() {
        this.currentPage--;
        this.updateVisibleNeeds();
    }

    incrementPage() {
        this.currentPage++;
        this.updateVisibleNeeds();
    }

    lastPage() {
        this.currentPage = this.totalPages - 1
        this.updateVisibleNeeds()
    }

    firstPage() {
        this.currentPage = 0
        this.updateVisibleNeeds()
    }

    editNeedsPerPage(amount: number) {
        this.itemsPerPage = amount;
        this.updateVisibleNeeds();
    }

    updateVisibleNeeds() {
        this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage);
        this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage);
    }

    resetVisibleNeeds() {
        this.currentPage = 0;
        this.updateVisibleNeeds();
    }
}