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

import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
import {Subscription} from "rxjs";
import {DocumentJsonldDocumentObjectRead, DocumentService, PartnerJsonld, ProductJsonld} from "@app/core/api/v1";
import {Router, RouterLink, RouterLinkActive} from "@angular/router";
import {MatTableDataSource, MatTableModule} from "@angular/material/table";
import {OrderFilter} from "@app/_models/orderFilter";
import {NgIf} from "@angular/common";
import {ModalComponent} from "@app/_components/modal/modal.component";
import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
import {NewDocumentComponent} from "@app/documents/new-document/new-document.component";
import {TranslateModule} from "@ngx-translate/core";
import {NewProductComponent} from "@app/products/new-product/new-product.component";
import {ModalStatus} from "@app/_helpers/modal.states";

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

    protected displayedColumns: string[];

    protected documentsSub: Subscription;
    protected documents: Array<DocumentJsonldDocumentObjectRead>;
    protected documentsDataSource;
    protected documentsLength: number;
    protected documentsPageEvent: PageEvent;
    protected documentsPageSize: number;
    protected documentsPageIndex: number;

    protected modalOptions: NgbModalOptions = {
        centered: true
    };

    constructor(
        private router: Router,
        private modalService: NgbModal,
        private documentService: DocumentService
    ) {
        this.sort = new MatSort();
        this.displayedColumns = ['pos', 'name', 'type', 'date'];

        this.documentsSub = new Subscription();
        this.documents = [];
        this.documentsPaginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
        this.documentsDataSource = new MatTableDataSource<DocumentJsonldDocumentObjectRead>(this.documents);
        this.documentsLength = 0;
        this.documentsPageEvent = new PageEvent();
        this.documentsPageSize = 10;
        this.documentsPageIndex = 0;
    }

    ngOnInit() {
        this.getDocumentsData();
    }

    ngAfterViewInit() {
        this.documentsDataSource.sort = this.sort;
        this.documentsDataSource.paginator = this.documentsPaginator;
    }

    getDocumentsData() {
        this.documentsSub = this.documentService.documentsGetCollection(
            this.documentsPageIndex + 1,
            this.documentsPageSize
        ).subscribe(
            data => {
                this.documents = data["hydra:member"];
                this.documentsDataSource = new MatTableDataSource<DocumentJsonldDocumentObjectRead>(this.documents);
                this.documentsLength = Number(data["hydra:totalItems"]);
                this.documentsPaginator.length = this.documentsLength;
            }
        );
    }

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

    handlePageEvent(e: PageEvent) {
        this.documentsPageEvent = e;
        this.documentsLength = e.length;
        this.documentsPageIndex = e.pageIndex.valueOf();
        this.documentsPageSize = e.pageSize.valueOf();
        this.getDocumentsData();
    }

    navigateToDocumentFile(element: any) {
        // const partner: PartnerJsonld = element as PartnerJsonld;
        // console.log(partner.type);
        // console.log(ApiConverter.extractId(partner.id));
        // this.router.navigate(['/documents', ApiConverter.extractId(partner.id)]);
    }

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