matsen-tool-fe/matsen-tool/src/app/_components/list/list.component.ts

import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
import {MatSort, Sort} from "@angular/material/sort";
import {PagingComponent} from "@app/_components/paging/paging.component";
import {MatTableDataSource} from "@angular/material/table";
import {ListColDefinition} from "@app/_components/list/list-col-definition";
import {AppHelperService} from "@app/_helpers/app-helper.service";
import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-function-type";

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrl: './list.component.scss'
})

export class ListComponent implements OnInit, AfterViewInit {
    @Input() public getDataFunction!: ListGetDataFunctionType;
    @Input() public onSortFunction!: Function;
    @Input() public onNavigateToDetailsFunction!: Function;
    @Input() public onRemoveItemFunction!: Function;
    @Input() public onEditFunction!: Function;
    @Input() public onDownloadFunction!: Function;
    @Input() public onRowSelectedFunction!: Function;
    @Input() public searchable: boolean;
    @Input() public showDetailButton: boolean;
    @Input() public showPosition: boolean;
    @Input() public listColDefinitions!: ListColDefinition[];
    @Input() public hidePageSize: boolean;
    @ViewChild(MatSort) sort;
    @ViewChild("pagingComponent", { static: false }) protected pagingComponent!: PagingComponent;

    public static COLUMN_TYPE_ADDRESS: string = 'address';
    public static COLUMN_TYPE_BTN_DOWNLOAD: string = 'btn_download';
    public static COLUMN_TYPE_BTN_EDIT: string = 'btn_edit';
    public static COLUMN_TYPE_BTN_REMOVE: string = 'btn_remove';
    public static COLUMN_TYPE_CURRENCY: string = 'euro';
    public static COLUMN_TYPE_DATE: string = 'date';
    public static COLUMN_TYPE_DETAIL: string = 'detail';
    public static COLUMN_TYPE_EMAIL: string = 'email';
    public static COLUMN_TYPE_IMAGE: string = 'image';
    public static COLUMN_TYPE_POSITION: string = 'position';
    public static COLUMN_TYPE_TEXT: string = 'text';
    public static COLUMN_TYPE_TEXT_LINKED: string = 'text_linked';
    public static COLUMN_TYPE_WEBSITE: string = 'website';

    get COLUMN_TYPE_ADDRESS(): string { return ListComponent.COLUMN_TYPE_ADDRESS; }
    get COLUMN_TYPE_BTN_DOWNLOAD(): string { return ListComponent.COLUMN_TYPE_BTN_DOWNLOAD; }
    get COLUMN_TYPE_BTN_EDIT(): string { return ListComponent.COLUMN_TYPE_BTN_EDIT; }
    get COLUMN_TYPE_BTN_REMOVE(): string { return ListComponent.COLUMN_TYPE_BTN_REMOVE; }
    get COLUMN_TYPE_CURRENCY(): string { return ListComponent.COLUMN_TYPE_CURRENCY; }
    get COLUMN_TYPE_DATE(): string { return ListComponent.COLUMN_TYPE_DATE; }
    get COLUMN_TYPE_DETAIL(): string { return ListComponent.COLUMN_TYPE_DETAIL; }
    get COLUMN_TYPE_EMAIL(): string { return ListComponent.COLUMN_TYPE_EMAIL; }
    get COLUMN_TYPE_POSITION(): string { return ListComponent.COLUMN_TYPE_POSITION; }
    get COLUMN_TYPE_IMAGE(): string { return ListComponent.COLUMN_TYPE_IMAGE; }
    get COLUMN_TYPE_TEXT(): string { return ListComponent.COLUMN_TYPE_TEXT; }
    get COLUMN_TYPE_TEXT_LINKED(): string { return ListComponent.COLUMN_TYPE_TEXT_LINKED; }
    get COLUMN_TYPE_WEBSITE(): string { return ListComponent.COLUMN_TYPE_WEBSITE; }

    protected displayedColumns!: string[];
    protected selectedRowIndex: number | null = null;
    protected dataSource;

    constructor(
        protected appHelperService: AppHelperService,
    ) {
        this.searchable = true;
        this.showDetailButton = true;
        this.showPosition = true;
        this.sort = new MatSort();
        this.hidePageSize = false;
        this.dataSource = new MatTableDataSource<any>();
    }

    ngOnInit(): void {
        if (this.showPosition) {
            this.listColDefinitions.unshift(ListComponent.getDefaultColPosition());
        }
        if (this.showDetailButton) {
            this.listColDefinitions.unshift(ListComponent.getDefaultColDetailBtn());
        }
        this.displayedColumns = [];
        this.listColDefinitions.forEach((value, index) => {
            this.displayedColumns.push(value.name);
        });
    }

    ngAfterViewInit(): void {
    }

    getData = (): void => {
        this.getDataFunction(
            this.pagingComponent.getPageIndex(),
            this.pagingComponent.getPageSize(),
            this.pagingComponent.getSearchValue()
        ).subscribe(
            data => {
                this.dataSource = new MatTableDataSource<any>(data['hydra:member']);
                this.pagingComponent.setDataLength(data["hydra:totalItems"]);
            }
        )
    }

    onSortChange = (sortState: Sort) => {
        this.pagingComponent.resetPageIndex();
        this.onSortFunction(sortState);
        this.getData();
    }

    onRowSelected(row: any, index: number) {
        this.selectedRowIndex = index;
        if (this.onRowSelectedFunction !== undefined) {
            this.onRowSelectedFunction(row, index);
        }
    }

    getElementValue(element: any, column: ListColDefinition): string | null {
        element = column.subResource !== undefined ? element[column.subResource]: element;
        if (element === undefined) {
            return null;
        }
        if (column.field !== undefined) {
            if (column.displayedLength !== undefined) {
                return element[column.field]?.slice(0, column.displayedLength) + '...';
            }
            return element[column.field];
        }
        if (column.address !== undefined) {
            const field = column.address;
            return `${element[field.street]} ${element[field.streetNo]}<br/> ${element[field.zip]} ${element[field.city]} <br/> ${element[field.country]}`;
        }
        return null;
    }

    getElementImage(element: any, column: ListColDefinition): any {
        let elementValue = this.getElementValue(element, column);
        if (elementValue !== undefined && elementValue !== null) {
            return elementValue;
        }
        return "/assets/images/icons/dummy-product.png"
    }

    getColCssClass(column: ListColDefinition): string {
        switch (column.type) {
            case ListComponent.COLUMN_TYPE_DETAIL:
                return "spt-button-td";
            case ListComponent.COLUMN_TYPE_BTN_REMOVE:
                return "spt-button-td text-end";
            default:
                return "";
        }
    }

    public getPageIndex() {
        return this.pagingComponent.getPageIndex();
    }

    public getPageSize() {
        return this.pagingComponent.getPageSize();
    }

    public static getDefaultColDetailBtn(): ListColDefinition {
        return {
            name: 'detail',
            text: 'overview.details',
            type: ListComponent.COLUMN_TYPE_DETAIL
        } as ListColDefinition;
    }

    public static getDefaultColPosition(): ListColDefinition {
        return {
            name: 'pos',
            text: 'overview.number',
            type: ListComponent.COLUMN_TYPE_POSITION
        } as ListColDefinition;
    }
}