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; 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(); } }