matsen-tool-fe/matsen-tool/src/app/partners/partners.component.ts

import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, Sort, MatSortModule} from "@angular/material/sort";
import {LiveAnnouncer} from "@angular/cdk/a11y";
import {MatTableDataSource, MatTableModule} from "@angular/material/table";
import {ActivatedRoute, RouterLink, RouterLinkActive} from "@angular/router";
import {Subscription} from "rxjs";
import {PartnerJsonld, PartnerService} from "@app/core/api/v1";
import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
import {NumberInput} from "@angular/cdk/coercion";

@Component({
    selector: 'app-partners',
    templateUrl: './partners.component.html',
    styleUrl: './partners.component.scss',
    standalone: true,
    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive],
})
export class PartnersComponent implements OnInit, AfterViewInit {
    @ViewChild(MatSort) sort;
    @ViewChild(MatPaginator) paginator: MatPaginator;

    protected partnersSub: Subscription;
    protected partners: Array<PartnerJsonld>;
    protected length: number;
    protected pageEvent: PageEvent;
    protected pageSize: NumberInput;
    protected pageIndex: NumberInput;
    protected currentPageIndex: number;
    protected pageSizeOptions = [10];

    protected dataType!: string;
    protected displayedColumns: string[];
    protected dataSource;

    constructor(
        private _liveAnnouncer: LiveAnnouncer,
        private route: ActivatedRoute,
        private partnerService: PartnerService
    ) {
        this.sort = new MatSort();
        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);

        this.partnersSub = new Subscription();
        this.partners = [];
        this.displayedColumns = ['pos', 'name', 'address', 'website'];

        this.dataSource = new MatTableDataSource(this.partners);
        this.pageEvent = new PageEvent();
        this.length = 0;
        this.pageSize = 10;
        this.pageIndex = 0;
        this.currentPageIndex = 1;
    }

    ngOnInit() {
        this.dataType = this.route.snapshot.data['dataType'];
        console.log('Data Type:', this.dataType);

        this.getData();
        console.log(this.dataSource.data);
    }

    ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
    }

    /** Announce the change in sort state for assistive technology. */
    announceSortChange(sortState: Sort) {
        // This example uses English messages. If your application supports
        // multiple language, you would internationalize these strings.
        // Furthermore, you can customize the message to add additional
        // details about the values being sorted.
        console.log(sortState);
        if (sortState.direction) {
            this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
        } else {
            this._liveAnnouncer.announce('Sorting cleared');
        }
    }

    getData()
    {
        this.partnersSub = this.partnerService.partnersGetCollection(this.currentPageIndex, "asc", this.dataType).subscribe(
            data => {
                this.partners = data["hydra:member"];
                this.length = Number(data["hydra:totalItems"]);
                console.log('GET DATA:');
                console.log('length:' + this.length);
                console.log('page index:' + this.pageIndex);
                console.log('page size:' + this.pageSize);
                this.dataSource.data = this.partners;
                console.log(this.partners);
            }
        );
        console.log(this.dataSource.data);
    }


    handlePageEvent(e: PageEvent) {
        console.log(e);
        this.pageEvent = e;
        this.length = e.length;
        this.pageSize = e.pageSize;
        this.pageIndex = e.pageIndex;
        console.log('PAGE EVENT:');
        console.log('length:' + this.length);
        console.log('page index:' + this.pageIndex);
        console.log('page size:' + this.pageSize);

        this.currentPageIndex = this.pageIndex.valueOf() + 1;
        this.getData();
    }

}