imaq/angular/src/app/_components/search-select/search-select.component.ts

import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {FormGroup} from "@angular/forms";
import {ListComponent} from "@app/_components/list/list.component";
import {ListColDefinition} from "@app/_components/list/list-col-definition";
import {Observable} from "rxjs";
import {Sort} from "@angular/material/sort";
import {FilterBarComponent} from "@app/_components/filter-bar/filter-bar.component";

@Component({
    selector: 'app-search-select',
    templateUrl: './search-select.component.html',
    styleUrl: './search-select.component.scss'
})
export class SearchSelectComponent implements OnInit, AfterViewInit {
    @Input() public formId!: string;
    @Input() public resultField!: string;
    @Input() public formLabelLangKey!: string;
    @Input() public documentForm!: FormGroup;
    @Input() public documentFormField!: string;
    @Input() public getDataFunction!: (index: number, pageSize: number, term?: string) => Observable<any>;
    @Input() public onRowSelectedFunction!: Function;
    @Input() public dataSet!: any;
    @Input() public displayedDataField!: string;
    @Input() public displayedDataSubResource!: string;
    @Input() public listColDefinitions!: ListColDefinition[];
    @Input() public displayAsButton: boolean;
    @Input() public showHeader: boolean;
    @Output() rowSelected = new EventEmitter<any>();
    @ViewChild('paragraphRef', {static: false}) paragraphRef!: ElementRef;
    @ViewChild("listComponent", {static: false}) listComponent!: ListComponent;
    protected readonly SearchSelectComponent = SearchSelectComponent;

    protected selectedRowIndex: number | null = null;
    protected searchBoxOpen: boolean;
    protected searchBoxInitialized: boolean;
    protected searchBoxFilled: boolean;

    constructor() {
        this.searchBoxOpen = false;
        this.searchBoxInitialized = false;
        this.searchBoxFilled = false;
        this.displayAsButton = false;
        this.showHeader = false;
    }

    ngOnInit(): void {
        if (this.dataSet !== undefined) {
            this.searchBoxFilled = true;
        }
    }

    ngAfterViewInit(): void {
        if (this.dataSet !== undefined) {
            this.paragraphRef.nativeElement.textContent = this.dataSet[this.displayedDataField];
        }
    }

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

            const value = this.resultField !== undefined ? row[this.resultField] : row.id;
            this.documentForm.get(this.formId)?.setValue(value);
            if (this.displayedDataSubResource !== undefined) {
                this.paragraphRef.nativeElement.textContent = row[this.displayedDataSubResource][this.displayedDataField];
            } else {
                this.paragraphRef.nativeElement.textContent = row[this.displayedDataField];
            }
            this.searchBoxFilled = true;
            this.searchBoxOpen = false;
        }
    }

    openSearchBox() {
        this.searchBoxOpen = !this.searchBoxOpen;
        if (this.searchBoxOpen && !this.searchBoxInitialized) {
            this.listComponent.getData();
            this.searchBoxInitialized = true;
        }
    }

    clearSearch() {
        this.paragraphRef.nativeElement.textContent = '';
        this.searchBoxFilled = false;
        this.documentForm.get(this.formId)?.setValue(null);
    }

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

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

    onSortChange = (sortState: Sort) => {
    }

    public static getDefaultColDefZones(subResource?: string): ListColDefinition[] {
        return  [
            {
                name: 'name',
                text: 'common.name',
                type: ListComponent.COLUMN_TYPE_TEXT,
                field: 'name',
                sortable: true,
                filterType: FilterBarComponent.FILTER_TYPE_TEXT,
            } as ListColDefinition,
            {
                name: 'createdAt',
                text: 'common.created_at',
                type: ListComponent.COLUMN_TYPE_DATE,
                field: 'createdAt',
                sortable: true,
                filterType: FilterBarComponent.FILTER_TYPE_DATE,
            } as ListColDefinition,
        ];
    }

    public static getDefaultColDefShippingCompanies(subResource?: string): ListColDefinition[] {
        return  [
            {
                name: 'name',
                text: 'common.name',
                type: ListComponent.COLUMN_TYPE_TEXT,
                field: 'name',
                sortable: true,
                filterType: FilterBarComponent.FILTER_TYPE_TEXT,
            } as ListColDefinition,
            {
                name: 'code',
                text: 'common.code',
                type: ListComponent.COLUMN_TYPE_TEXT,
                field: 'code',
                sortable: true,
                filterType: FilterBarComponent.FILTER_TYPE_TEXT,
            } as ListColDefinition,
            {
                name: 'createdAt',
                text: 'common.created_at',
                type: ListComponent.COLUMN_TYPE_DATE,
                field: 'createdAt',
                sortable: true,
                filterType: FilterBarComponent.FILTER_TYPE_DATE,
            } as ListColDefinition,
        ];
    }
}