import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core'; import {MatSort, Sort, MatSortModule} from "@angular/material/sort"; import {MatTableDataSource, MatTableModule} from "@angular/material/table"; import {ActivatedRoute, Router, 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 {OrderFilter} from "@app/_models/orderFilter"; import {ApiConverter} from "@app/_helpers/api.converter"; @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 currentPageSize: number; protected currentPageIndex: number; protected nameOrderAsc: OrderFilter; protected cityOrderAsc: OrderFilter; protected websiteOrderAsc: OrderFilter; protected dataType!: string; protected displayedColumns: string[]; protected dataSource; constructor( private route: ActivatedRoute, private partnerService: PartnerService, private router: Router ) { 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.nameOrderAsc = OrderFilter.Asc; this.cityOrderAsc = OrderFilter.Asc; this.websiteOrderAsc = OrderFilter.Asc; this.dataSource = new MatTableDataSource(this.partners); this.pageEvent = new PageEvent(); this.length = 0; this.currentPageSize = 10; this.currentPageIndex = 0; } ngOnInit() { this.dataType = this.route.snapshot.data['dataType']; this.getData(); } ngAfterViewInit() { this.dataSource.sort = this.sort; this.dataSource.paginator = this.paginator; } /** Announce the change in sort state for assistive technology. */ onSortChange(sortState: Sort) { // Reset page index to first page this.currentPageIndex = 0; let order: OrderFilter; if (sortState.direction === "") { order = OrderFilter.Undefined; } else { order = sortState.direction; } this.nameOrderAsc = OrderFilter.Undefined; this.cityOrderAsc = OrderFilter.Undefined; this.websiteOrderAsc = OrderFilter.Undefined; switch (sortState.active) { case "name": this.nameOrderAsc = order; break; case "address": this.cityOrderAsc = order; break; case "website": this.websiteOrderAsc = order; break; } this.getData(); } getData() { // switch over this.dataType (customers, etc.) this.partnersSub = this.partnerService.partnersGetCollection( this.currentPageIndex + 1, this.dataType, undefined, this.nameOrderAsc, this.cityOrderAsc, this.websiteOrderAsc ).subscribe( data => { this.partners = data["hydra:member"]; this.dataSource = new MatTableDataSource(this.partners); console.log(data); this.length = Number(data["hydra:totalItems"]); this.paginator.length = this.length; } ); } handlePageEvent(e: PageEvent) { this.pageEvent = e; this.length = e.length; this.currentPageIndex = e.pageIndex.valueOf(); this.currentPageSize = e.pageSize.valueOf(); this.getData(); } navigateToDetails(element: any) { const partner: PartnerJsonld = element as PartnerJsonld; // this.partnerService.setPartnerData(partner); //console.log(partner['@id']); console.log(ApiConverter.extractId(partner.id)); this.router.navigate(['/customers', ApiConverter.extractId(partner.id)]); } protected readonly PartnerJsonld = PartnerJsonld; }