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

import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
import {MatTableDataSource, MatTableModule} from "@angular/material/table";
import {PartnerJsonld} from "@app/core/api/v1";
import {OrderFilter} from "@app/_models/orderFilter";
import {ApiConverter} from "@app/_helpers/api.converter";
import {Router, RouterLink, RouterLinkActive} from "@angular/router";
import {NgIf} from "@angular/common";
import {Subscription} from "rxjs";

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

    protected productsSub: Subscription;
    protected products: Array<PartnerJsonld>; //TODO: ProductJsonld
    protected dataType!: string;

    protected dataSource;
    protected displayedColumns: string[];

    protected length: number;
    protected pageEvent: PageEvent;
    protected pageSize: number;
    protected pageIndex: number;

    constructor(
        private router: Router
    ) {
        this.sort = new MatSort();
        this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
        this.dataSource = new MatTableDataSource; //<ProductJsonld>(this.products)
        this.displayedColumns = ['pos', 'name', 'storage', 'number'];

        this.productsSub = new Subscription();
        this.products = [];

        this.length = 0;
        this.pageEvent = new PageEvent();
        this.pageSize = 10;
        this.pageIndex = 0;
    }

    ngOnInit() {
        this.getData();
    }

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

    getData() {
        // this.productsSub = this.productService.productsGetCollection(
        //     this.pageIndex + 1,
        //     this.pageSize,
        //     this.dataType,
        //     undefined,
        //     this.nameOrderAsc,
        //     this.storageOrderAsc,
        //     this.numberOrderAsc
        // ).subscribe(
        //     data => {
        //         this.products = data["hydra:member"];
        //         this.dataSource = new MatTableDataSource<ProductJsonld>(this.products);
        //         console.log(data);
        //         this.length = Number(data["hydra:totalItems"]);
        //         this.paginator.length = this.length;
        //     }
        // );
    }

    /** Announce the change in sort state for assistive technology. */
    onSortChange(sortState: Sort) {
        // Reset page index to first page
        this.pageIndex = 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();
    }

    handlePageEvent(e: PageEvent) {
        this.pageEvent = e;
        this.length = e.length;
        this.pageIndex = e.pageIndex.valueOf();
        this.pageSize = e.pageSize.valueOf();
        this.getData();
    }

    navigateToProductDetails(element: any) {
        const product: PartnerJsonld = element as PartnerJsonld; //Todo: ProductJsonld
        console.log(product.type);
        console.log(ApiConverter.extractId(product.id));
        // this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
        this.router.navigate(['/products', '1']);
    }
}