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 {ProductJsonld, ProductService} 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";
import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
import {NewProductComponent} from "@app/products/new-product/new-product.component";
import {ModalStatus} from "@app/_helpers/modal.states";
import {TranslateModule} from "@ngx-translate/core";

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

    protected displayedColumns: string[];

    protected productsSub: Subscription;
    protected products: Array<ProductJsonld>;
    protected productsDataSource;
    protected productsLength: number;
    protected productsPageEvent: PageEvent;
    protected productsPageSize: number;
    protected productsPageIndex: number;

    protected modalOptions: NgbModalOptions = {
        centered: true
    };

    constructor(
        private router: Router,
        private modalService: NgbModal,
        private productService: ProductService,
        protected apiConverter: ApiConverter,
    ) {
        this.sort = new MatSort();
        this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];

        this.productsSub = new Subscription();
        this.products = [];
        this.productsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
        this.productsDataSource = new MatTableDataSource<ProductJsonld>(this.products);
        this.productsLength = 0;
        this.productsPageEvent = new PageEvent();
        this.productsPageSize = 10;
        this.productsPageIndex = 0;
    }

    ngOnInit() {
        this.getProductsData();
    }

    ngAfterViewInit() {
        this.productsDataSource.sort = this.sort;
        this.productsDataSource.paginator = this.productsPaginator;
    }

    getProductsData() {
        this.productsSub = this.productService.productsGetCollection(
            this.productsPageIndex + 1,
            this.productsPageSize
        ).subscribe(
            data => {
                this.products = data["hydra:member"];
                this.productsDataSource = new MatTableDataSource<ProductJsonld>(this.products);
                this.productsLength = Number(data["hydra:totalItems"]);
                this.productsPaginator.length = this.productsLength;
            }
        );
    }

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

    handlePageEvent(e: PageEvent) {
        this.productsPageEvent = e;
        this.productsLength = e.length;
        this.productsPageIndex = e.pageIndex.valueOf();
        this.productsPageSize = e.pageSize.valueOf();
        this.getProductsData();
    }

    navigateToProductDetails(element: any) {
        const product: ProductJsonld = element as ProductJsonld;
        this.router.navigate(['/products', this.apiConverter.extractId(product.id)]);
    }

    openModalNewProduct() {
        const modalRefProduct = this.modalService.open(NewProductComponent, this.modalOptions);
        // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
        let product: ProductJsonld = {} as ProductJsonld;
        product.name = "";
        modalRefProduct.componentInstance.product = product;
        modalRefProduct.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
            if (modalStatus === ModalStatus.Submitted) {
                modalRefProduct.dismiss();
                this.getProductsData();
            }
        });
    }
}