ekangularbase/src/ek-components/etable/etable.component.ts

Authentication service for usermanagement(oidc client)

import {
    Component, OnInit, Input, NgModule, forwardRef, Output, EventEmitter, ViewEncapsulation,
    ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, AfterViewInit, OnDestroy
} from '@angular/core';
import { CommonModule, DatePipe, formatDate } from '@angular/common';
import { FilterMetadata, SelectItem } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { TableModule, Table } from 'primeng/table';
import { OverlayPanelModule } from 'primeng/overlaypanel';
import { CheckboxModule } from 'primeng/checkbox';
import { SharedModule } from 'primeng/components/common/shared';
import { InputTextModule } from 'primeng/inputtext';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { EtableColumn } from 'ekangularbase/src/interface/EtableColumn';
import { CurrencyMaskModule } from 'ng2-currency-mask';
import * as xlsx from 'xlsx';

// Angular-Slickgrid start
import {
    AngularGridInstance,
    Aggregators,
    Column,
    DelimiterType,
    FieldType,
    FileType,
    Filters,
    Formatters,
    GridOption,
    Grouping,
    GroupTotalFormatters,
    SortDirectionNumber,
    Sorters,
    OnEventArgs,
    AngularSlickgridModule,
    Formatter,
    Editors,
    GridService,
    AngularUtilService,
    GridOdataService,
    OdataOption,
    GroupingGetterFunction,
} from 'angular-slickgrid';
import { AuditTrailListModule, AuditTrailListComponent } from 'ekangularbase/src/audit-trail-list/audit-trail-list.component';
import { DropdownModule } from 'primeng/dropdown';
import { MultiSelectModule } from 'primeng/multiselect';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { EntityStatus } from 'ekangularbase/src/interface/entity-status';
import { BlockUIModule } from 'primeng/blockui';
import { PanelModule } from 'primeng/panel';
import * as $ from 'jquery';
import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
import { ekThousandSeparatorFormatter, numberWithCommas } from 'ekangularbase/src/ek-components/etable/formatter/ekThousandSeparatorFormatter';
import { EtableFunction } from 'ekangularbase/src/interface/EtableFunction';
import { ListboxModule } from 'primeng/primeng';

// Angular-Slickgrid end


// export const Etable_VALUE_ACCESSOR: any = {
//   provide: NG_VALUE_ACCESSOR,
//   useExisting: forwardRef(() => EtableComponent),
//   multi: true
// };

@Component({
    selector: 'e-table',
    templateUrl: './etable.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./etable.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class EtableComponent implements OnInit, AfterViewInit, OnDestroy {

    selectAll = false;
    boolHeaderOption: SelectItem[];
    lazyLoadingChangesSubscription: Subscription;
    lazyLoadingChanges: BehaviorSubject<string>;
    selectedCols: any[];

    constructor(private cd: ChangeDetectorRef,
        private angularUtilService: AngularUtilService,
        public datepipe: DatePipe) {
        this.loadSlickGrid = false;
        this.loading = false;
        this.lazyLoadingChanges = new BehaviorSubject('');

        this.boolHeaderOption = [
            { value: null, label: 'All' },
            { value: true, label: 'Yes' },
            { value: false, label: 'No' },
        ];

    }

    // Angular-Slickgrid start
    gridRowCountFilter = 0;

    private _commandQueue = [];
    angularGrid: AngularGridInstance;
    columnDefinitions: Column[];
    columnDefinitionsVisible: Column[];
    // dataset: any[];
    dataviewObj: any;
    draggableGroupingPlugin: any;
    durationOrderByCount = false;
    gridObj: any;
    gridOptions: GridOption;
    processing = false;
    selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
    gridService: GridService;

    // Angular-Slickgrid end

    @ViewChild('dt', { static: false }) dt: Table;

    @Input() strTableName = '';
    @Input() tableType = '';

    @Input() columns: EtableColumn[];
    @Input() func: EtableFunction[];
    @Input() value: any[];
    @Input() colHeader: any[];
    @Input() footerColumns: any[];
    @Input() footerObjectlist: any[];

    @Input() paginator: boolean;

    @Input() scrollHeight = '400px';

    @Input() rows: number;

    // @Input() first: number = 0;

    @Input() pageLinks = 5;

    @Input() rowsPerPageOptions: number[];

    @Input() sortMode = 'single';

    // @Input() resetPageOnSort: boolean = true;

    @Input() selectionMode: string;

    @Input() scrollable: boolean;

    @Input() responsive: boolean;

    // @Input() contextMenu: any;

    @Input() resizableColumns: boolean;

    @Input() columnResizeMode = 'fit';

    // @Input() reorderableColumns: boolean;

    @Input() loading = false;

    @Input() allowGrouping = false;

    @Input() allowExportToExcel = false;
    @Input() showTotalRecord = true;
    @Input() slickMinHeight = 480;
    @Input() slickMaxHeight = 1024;
    @Input() slickBottomPadding = 30;
    @Input() logColumnList: string[] = [];
    @Input() gridId = 'grid19';
    @Input() selection: any;
    @Input() hideDeletedButton = true;
    @Input() isDataFinishLoaded = false;
    @Input() allowLazyLoading = false;
    @Input() inActiveStatusList: string[] = [EntityStatus.InActive, EntityStatus.Deleted, EntityStatus.Retired];

    @Input() updateCssIdList: string[];
    @Input() updateCssClass: string;

    @Input() defaultHideFilter = true;

    timerInterval: any;
    loadSlickGrid = false;
    filteredValueCount = 0;
    headerCount = 0;

    @Output() listEvent = new EventEmitter();

    @Output() onRowClickEvent = new EventEmitter();

    @Input() funcConditionEvent: (value: any) => boolean;

    @Input() checkBoxConditionEvent: (value: any) => boolean;

    @Input() classChangeEvent: (value: any) => string;

    @Input() iconChangeEvent: (value: any) => string;

    @Output() lazyLoadingApiCallEvent = new EventEmitter();

    @Output() onMenuClickEvent = new EventEmitter();

    @Output() onCellClickedEvent = new EventEmitter();

    @Output() onCellChangedEvent = new EventEmitter();

    @Output() onCellFocusEvent = new EventEmitter();

    @Output() onCellKeyPressEvent = new EventEmitter();

    @Input() textBoxConditionEvent: (value: any) => boolean;

    ngOnInit() {
        if (this.tableType === 'SlickGrid') {
            this.loading = false;
            this.timerInterval = setInterval(() => {
                if (this.isDataFinishLoaded && this.isDataFinishLoaded === true) {
                    clearInterval(this.timerInterval);

                    this.defineGrid();
                    this.defineGridOption();
                    this.loadSlickGrid = true;
                    this.detectChanges();
                }
            }, 100);
        }
    }

    ngAfterViewInit() {
        if (this.tableType === 'SlickGrid' && this.allowLazyLoading === false) {
            this.loading = true;
        }
    }

    detectChanges(event = null) {
        console.log('detectChanges', event);
        try {
            if (this.tableType === 'SlickGrid') {
                if (event !== null) {
                    if (event['name'] && event['name'] === 'onDelete') {
                        this.selectRow(event);
                    }
                    if (event['selectAllCheckBox'] !== undefined) {
                        this.updateSelectAllCheckBox(event);
                    }
                    if (event['lazyLoadingChanges']) {
                        this.lazyLoadingChanges.next(event['lazyLoadingChanges']);
                    }
                }
                this.cd.detectChanges();
                // this.checkNoData();
                // this.resetSlickGrid();
                this.render();
            } else if (this.tableType === '') {
                if (event !== null) {
                    if (event['selectAllCheckBox'] !== undefined) {
                        this.bindingSelectedCols();
                    }
                }
                setTimeout(() => {
                    console.log('gridId', this.gridId);
                    console.log('this.value.length', this.value);
                    this.filteredValueCount = this.value ? this.value.length : 0;

                    const totalFuncs = this.func.filter(s => s.visible === true);
                    const totalCols = this.columns.filter(s => s.visible === true);
                    this.headerCount = totalFuncs.length + totalCols.length;

                    this.cd.detectChanges();
                }, 200);
            }
        } catch (error) {
            console.log(error);
        }
    }

    bindingSelectedCols() {
        console.log('bindingSelectedCols', this.columns);
        this.selectedCols = [];
        if (this.arrayOfObjectIsNull(this.columns)) { return; }
        this.columns.forEach(c => {
            if (c.visible === true) { this.selectedCols.push(c); }
        });
        this.cd.detectChanges();
    }

    updateSelectAllCheckBox(event) {
        try {
            console.log('updateSelectAllCheckBox', event);
            console.log('this.func', this.func);
            const cb = this.func.find(s => s.funcType === 'checkbox');
            if (!cb || cb === null) { return; }

            if (this.angularGrid) {
                const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
                console.log('allColumns', allColumns);
                allColumns[0].header.buttons[0]['cssClass'] = 'fa fa-square header-checkbox';

                // this.columnDefinitions = this.columnDefinitions.slice();
            }
            // this.resetSlickGrid();
        } catch (error) {
            console.log(error);
        }
    }

    selectRow(event) {
        this.dt._selection = event.data;
        this.dt.tableService.onSelectionChange();
        if (this.dt.isStateful()) {
            this.dt.saveState();
        }
    }

    seachTextChange(event: any) {
        setTimeout(() => {
            this.cd.detectChanges();
        }, 1000);
    }

    exportCSV() {
        this.dt.exportCSV();
    }

    emitList(args) {
        this.columns.forEach(c => c.searchText = null);
        if (this.tableType === '') {
            this.dt.reset();
        } else if (this.tableType === 'SlickGrid') {
            // try {
            //     const cb = this.func.find(s => s.funcType === 'checkbox');
            //     if (cb && cb !== null) {
            //         args.allColumns[0].header.buttons[0].cssClass = 'fa fa-square header-checkbox';
            //     }
            // } catch (error) {
            //     console.log(error);
            // }
        }
        this.listEvent.emit();
        this.cd.detectChanges();
    }

    resetTable() {
        if (this.tableType === 'SlickGrid') {
            this.resetSlickGrid();
        } else { this.resetPtable(); }
    }

    resetPtable() {
        this.dt.reset();
        this.cd.detectChanges();
    }

    resetSlickGrid() {
        if (this.angularGrid) {
            this.defineGrid();
            // this.defineGridOption();
            this.angularGrid.slickGrid.setColumns(this.columnDefinitions);
        }
    }

    toDecimal(input: number | string, minDecimal?: number, maxDecimal?: number, isRounding = true): string {
        if (input === undefined || input === null || input === '') { input = 0; }
        if (isNaN(+input)) {
            return 'NaN';
        }
        const valStr = String(input);
        const parts = valStr.split('.');

        let parts1 = parts[0];
        let parts2 = '';
        if (parts.length === 2) {
            parts2 = parts[1];
        }

        if (minDecimal && minDecimal > parts2.length) {
            while (minDecimal > parts2.length) { parts2 += '0'; }
        }

        if (maxDecimal && maxDecimal > 0 && maxDecimal < parts2.length) {
            const lastDigit = parseInt(parts2[maxDecimal], 10);
            let last2ndDigit = parseInt(parts2[maxDecimal - 1], 10);

            if (isRounding && lastDigit >= 5) { last2ndDigit += 1; }

            parts2 = parts2.substr(0, maxDecimal - 1) + last2ndDigit.toString();
        }

        if (maxDecimal === 0 && parts2.length > 0) {
            const lastDigit = parseInt(parts2[0], 10);
            let last2ndDigit = parseInt(parts1[parts1.length - 1], 10);

            if (isRounding && lastDigit >= 5) { last2ndDigit += 1; }

            parts1 = parts1.substr(0, parts1.length - 1) + last2ndDigit.toString();
            parts2 = '';
        }

        let result = parts2 === '' ? '' : '.' + parts2;
        result = parts1 + result;

        return result;
    }

    exportObjList(): any[][] {
        const result: any[][] = [];
        const cols = this.columns.filter(s => s.visible);

        const headerRow: any[] = [];
        for (let i = 0; i < cols.length; i++) {
            const column = cols[i];
            headerRow.push(column.header);
        }
        result.push(headerRow);

        for (const record of this.value) {
            const row: any[] = [];
            for (let i = 0; i < cols.length; i++) {
                const column = cols[i];
                if (column.exportable !== false && column.field) {
                    if (column.isSubObject) {
                        const fields: string[] = [];
                        fields.push(column.field);
                        fields.push(column.subField);
                        const detailField = column.subField;
                        let detailCellData = record[fields[0]] == null ? null :
                            record[fields[0]][detailField];
                        if (detailCellData != null && detailCellData !== '') {
                            if (column.dataType === 'DateTime' && detailCellData.length >= 10) {
                                detailCellData = String(detailCellData).substring(0, 10);
                            } else if (column.dataType === 'DateTime_ToLocal_General' && detailCellData.length > 10) {
                                const x = new Date(detailCellData.toString() + 'Z').toLocaleString();
                                detailCellData = formatDate(new Date(x), 'yyyy-MM-dd HH:mm:ss', 'en_US');
                            } else if (column.dataType === 'Date_ToLocal_General' && detailCellData.length > 10) {
                                const x = new Date(detailCellData.toString() + 'Z').toLocaleString();
                                detailCellData = formatDate(new Date(x), 'yyyy-MM-dd', 'en_US');
                            } else if (column.dataType === 'amount_General') {
                                detailCellData = this.toDecimal(detailCellData, 2, 2);
                            } else {
                                detailCellData = String(detailCellData).replace(/"/g, '""');
                            }
                        } else {
                            if (column.dataType === 'amount_General') {
                                detailCellData = this.toDecimal(detailCellData, 2, 2);
                            } else {
                                detailCellData = '';
                            }
                        }
                        row.push(detailCellData);
                    } else {
                        let cellData = record[column.field];
                        if (cellData != null && cellData !== '') {
                            if (column.dataType === 'DateTime' && cellData.length >= 10) {
                                cellData = String(cellData).substring(0, 10);
                            } else if (column.dataType === 'DateTime_ToLocal_General' && cellData.length > 10) {
                                const x = new Date(cellData.toString() + 'Z').toLocaleString();
                                cellData = formatDate(new Date(x), 'yyyy-MM-dd HH:mm:ss', 'en_US');
                            } else if (column.dataType === 'Date_ToLocal_General' && cellData.length > 10) {
                                const x = new Date(cellData.toString() + 'Z').toLocaleString();
                                cellData = formatDate(new Date(x), 'yyyy-MM-dd', 'en_US');
                            } else if (column.dataType === 'amount_General') {
                                cellData = this.toDecimal(cellData, 2, 2);
                            } else {
                                cellData = String(cellData).replace(/"/g, '""');
                            }
                        } else {
                            if (column.dataType === 'amount_General') {
                                cellData = this.toDecimal(cellData, 2, 2);
                            } else {
                                cellData = '';
                            }
                        }
                        row.push(cellData);
                    }
                }
            }
            result.push(row);
        }

        if (this.footerObjectlist && this.footerObjectlist.length > 0) {
            this.footerObjectlist.forEach(o => {
                const row: any[] = [];
                let x = -1;
                for (let index = 0; index < o.config.length; index++) {
                    const colspan = o.config[index].colspan;
                    x += 1;
                    for (let i = 1; i < colspan; i++) {
                        row.push('');
                        x += 1;
                    }

                    const field = o.config[index].field;
                    const data = o.data[field];

                    if (data) {
                        if (o.config[index].dataType === 'amount_General') {
                            row.push(this.toDecimal(data, 2, 2));
                        } else { row.push(data); }
                    } else { row.push(''); }
                }
                result.push(row);
            });
        }

        console.log('exportObjList', result);
        return result;
    }

    exportToExcelPtable() {
        const ws: xlsx.WorkSheet =
            xlsx.utils.aoa_to_sheet(this.exportObjList());
        const wb: xlsx.WorkBook = xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
        xlsx.writeFile(wb, 'ExportData.xlsx');
    }

    onHideFilter() {
        this.defaultHideFilter = !this.defaultHideFilter;
    }
    emitonSelectAllClickClick(func, field: string) {
        func.args = this.selectAll;
        this.emitOnRowClick(func, field);
    }
    emitOnRowClick(row, field: string) {
        this.onRowClickEvent.emit({ row, field });
    }
    emitFuncCondition(row, func): boolean {
        try {
            return this.funcConditionEvent({ row, func });
        } catch (error) {
            return true;
        }
    }
    emitCheckBoxCondition(row, func): boolean {
        try {
            return this.checkBoxConditionEvent({ row, func });
        } catch (error) {
            return true;
        }
    }
    emitClassChange(row, func) {
        try {
            return this.classChangeEvent({ row, func });
        } catch (error) {
            return '';
        }
    }
    emitIconChange(row, func) {
        try {
            return this.iconChangeEvent({ row, func });
        } catch (error) {
            return true;
        }
    }
    emitOnMenuClick() {
        this.onMenuClickEvent.emit();
        this.cd.detectChanges();
    }

    selectedColsChange() {
        console.log('selectedCols', this.selectedCols);
        if (!this.arrayOfObjectIsNull(this.columns)) {
            this.columns.forEach(c => {
                c.visible = false;
                if (!this.arrayOfObjectIsNull(this.selectedCols)) {
                    const se = this.selectedCols.find(s => s.field === c.field);
                    if (se) { c.visible = true; }
                }
            });
        }
        this.emitOnMenuClick();
    }

    emitOnCellClicked(event, args) {
        this.onCellClickedEvent.emit({ event, args });
    }
    emitOnCellChanged(event, args, field) {
        this.onCellChangedEvent.emit({ event, args, field });
    }
    emitOnCellFocus(event, args, field) {
        this.onCellFocusEvent.emit({ event, args, field });
    }
    emitOnCellKeyPress(event, args, field) {
        this.onCellKeyPressEvent.emit({ event, args, field });
    }
    emitTextBoxCondition(row, column, value): boolean {
        try {
            return this.textBoxConditionEvent({ row, column, value });
        } catch (error) {
            return true;
        }
    }

    onFilter(event) {
        console.log('onFilter', event);
        this.filteredValueCount = event.filteredValue.length;
        this.cd.detectChanges();
    }

    // Angular-Slickgrid start

    angularGridReady(angularGrid: AngularGridInstance) {
        this.angularGrid = angularGrid;
        this.gridObj = angularGrid.slickGrid; // grid object
        this.dataviewObj = angularGrid.dataView;
        this.gridService = angularGrid.gridService;

        this.checkNoData();

        // this.dataviewObj.getItemMetadata = this.updateItemMetadataForDurationOver50(this.dataviewObj.getItemMetadata);
        this.dataviewObj.getItemMetadata = this.metadata(this.dataviewObj.getItemMetadata,
            this.inActiveStatusList);
        this.gridObj.invalidate();
        this.gridObj.render();
        this.updateRowCssWithId();

        if (this.allowGrouping === true) {
            console.log('setPreHeaderPanelVisibility');
            this.gridObj.setPreHeaderPanelVisibility(!this.gridObj.getOptions().showPreHeaderPanel);
        }

        if (this.defaultHideFilter === true) {
            console.log('setHeaderRowVisibility');
            this.gridObj.setHeaderRowVisibility(!this.defaultHideFilter);
        }

        this.gridRowCountFilter = this.gridObj.getDataLength();
        this.getGridRowCountFilter().subscribe((r) => {
            console.log('getGridRowCountFilter subscribe', r);
            this.gridRowCountFilter = r;
            this.checkNoData();
            this.cd.detectChanges();
        });
    }

    checkNoData() {
        try {
            if (!this.value || this.value === null || !Array.isArray(this.value) ||
                this.value.length === 0) {
                // const gridBody: HTMLCollectionOf<Element> =
                // <HTMLCollectionOf<Element>> document.getElementsByClassName('grid-canvas');
                const elementById: HTMLLinkElement =
                    <HTMLLinkElement>document.getElementById('slick-container-' + this.gridId);
                const gridBody: HTMLCollectionOf<Element> =
                    <HTMLCollectionOf<Element>>elementById.getElementsByClassName('grid-canvas');
                if (gridBody && gridBody !== null && gridBody.length > 0) {
                    console.log('gridBody', gridBody);
                    gridBody.item(0).innerHTML =
                        '<div class="slick-no-data-main"><div class="eslic-no-data">"No Data Found"</div><div class="eslic-no-data">"No Data Found"</div></div>';
                }
            } else {
                const el = document.querySelector('.slick-no-data-main');
                if (el) {
                    el.className += ' slickgrid-hide-nodata';
                }
            }
        } catch (error) {
            console.error(error);
        }
    }

    getGridRowCountFilter(): Observable<number> {
        let totalQuestions: number;
        const subject = new Subject<number>();
        this.dataviewObj.onRowCountChanged
            .subscribe(function (e, args) {
                console.log('getGridRowCountFilter', args);
                totalQuestions = args.current;
                subject.next(totalQuestions);
            }
            );
        return subject.asObservable();
    }

    getFormatters(field, func, dataContext): any {
        switch (field) {
            case 'onRowSelect':
            case 'onEdit': {
                return `<i class="pi pi-external-link pointer edit-icon" aria-hidden="true"></i>`;
            }
            case 'onDelete': {
                return `<i class="fa fa-trash pointer delete-icon" aria-hidden="true"></i>`;
            }
            case 'onAdopterSelect': {
                if (dataContext && dataContext['polisyCreated'] === true) {
                    return `<i class="pi pi-tag pointer delete-icon" aria-hidden="true"></i>`;
                } else {
                    return `<i class="fa fa-plus pointer delete-icon" aria-hidden="true"></i>`;
                }
            }
            case 'onActivate': {
                if (dataContext && dataContext['entityStatus'] === 'Active') {
                    return `<i class="pi pi-check-circle pointer" aria-hidden="true"></i>`;
                } else {
                    return `<i class="pi pi-times-circle pointer" aria-hidden="true"></i>`;
                }
            }
            default: {
                // console.log('Invalid Formatters: ' + field);
                return `<i class="${func.icon} pointer edit-icon" aria-hidden="true"></i>`;
            }
        }
    }

    getFieldType(cd, columns): any {
        switch (columns.dataType) {
            case 'number_General': {
                cd.filter = { model: Filters.compoundInput };
                cd.type = FieldType.number;
                cd.formatter = ekThousandSeparatorFormatter;
                cd.params = { minDecimalPlaces: 1, maxDecimalPlaces: 5 };
                cd.cssClass = 'etable-number-general ' + columns.class;
                break;
            }
            case 'amount_General': {
                cd.filter = { model: Filters.compoundInput };
                cd.type = FieldType.number;
                cd.formatter = ekThousandSeparatorFormatter;
                cd.params = { minDecimalPlaces: 2, maxDecimalPlaces: 2 };
                cd.cssClass = 'etable-amount-general ' + columns.class;
                break;
            }
            case 'int_General': {
                cd.filter = { model: Filters.compoundInput };
                cd.type = FieldType.number;
                cd.formatter = ekThousandSeparatorFormatter;
                cd.params = { minDecimalPlaces: 0, maxDecimalPlaces: 0 };
                cd.cssClass = 'etable-number-general ' + columns.class;
                break;
            }
            case 'Date_General': {
                cd.filter = { model: Filters.compoundDate };
                cd.type = FieldType.date;
                cd.formatter = Formatters.dateIso;
                cd.cssClass = columns.class;
                break;
            }
            case 'DateTime': {
                cd.filter = { model: Filters.compoundDate };
                cd.type = FieldType.date;
                cd.formatter = Formatters.dateTimeIso;
                cd.cssClass = columns.class;
                break;
            }
            case 'time': {
                cd.filter = { model: Filters.compoundInputText };
                // cd.type = FieldType.dateTimeIso;
                cd.formatter = this.myTimeFormatter;
                cd.cssClass = columns.class;
                break;
            }
            case 'Date_ToLocal_General': {
                cd.filter = { model: Filters.compoundInputText };
                // cd.type = FieldType.dateTimeIso;
                cd.formatter = this.myDateToLocalFormatter;
                cd.cssClass = columns.class;
                break;
            }
            case 'DateTime_ToLocal_General': {
                cd.filter = { model: Filters.compoundInputText };
                // cd.type = FieldType.dateTimeIso;
                cd.formatter = this.myDateTimeToLocalFormatter;
                cd.cssClass = columns.class;
                break;
            }
            case 'DateTime_MonthName': {
                cd.filter = { model: Filters.compoundInputText };
                cd.formatter = this.myDateToMonthNameFormatter;
                cd.cssClass = columns.class;
                break;
            }
            case 'number': {
                cd.filter = { model: Filters.compoundInput };
                cd.type = FieldType.number;
                cd.cssClass = columns.class;
                break;
            }
            case 'currency': {
                cd.filter = { model: Filters.compoundInput };
                cd.type = FieldType.number;
                cd.cssClass = columns.class;
                break;
            }
            case 'uppercase': {
                cd.filter = { model: Filters.compoundInputText };
                cd.formatter = Formatters.uppercase;
                cd.cssClass = columns.class;
                break;
            }
            case 'lowercase': {
                cd.filter = { model: Filters.compoundInputText };
                cd.formatter = Formatters.lowercase;
                cd.cssClass = columns.class;
                break;
            }
            case 'boolean': {
                cd.filterable = true;
                cd.type = FieldType.boolean;
                cd.filter = {
                    model: Filters.singleSelect,
                    collection: [{ value: '', label: 'All' }, { value: true, label: 'Yes' },
                    { value: false, label: 'No' }],
                };
                cd.formatter = this.checkmarkFormatter;
                cd.cssClass = columns.class;
                break;
            }
            case 'hyperlink': {
                cd.filter = { model: Filters.compoundInputText };
                cd.formatter = Formatters.hyperlink;
                cd.params = { hyperlinkText: 'Company Website', hyperlinkUrl: 'http://www.somewhere.com' };
                cd.cssClass = columns.class;
                break;
            }
            case 'textBox': {
                cd.filter = { model: Filters.compoundInputText };
                cd.formatter = this.myCustomTextBoxFormatter;
                // cd.cssClasses = 'form-control';
                cd.cssClass = columns.class;
                cd.type = FieldType.string;
                cd.editor = {
                    model: Editors.text,
                    // required: true,
                    // minValue: 0,
                    // elementOptions: {
                    //     onClick: (event, args) => {
                    //         // here i want to write some code which can trigger to grid to start update
                    //         console.log(event);
                    //         console.log(args);
                    //       }
                    // }
                };
                break;
            }
            default: {
                // console.log("Invalid FieldType");
                cd.filter = { model: Filters.compoundInputText };
                cd.type = FieldType.string;
                cd.cssClass = columns.class;
                break;
            }
        }
        return cd;
    }

    onCellClicked(event, args) {
        console.log(event);
        console.log(args);
        // const fadingDelay = 2000; // in milliseconds

        // // you can pass an optional fading delay (1500ms by default)
        // this.gridService.highlightRow(args.row, fadingDelay);
        this.emitOnCellClicked(event, args);
    }

    onCellChanged(event, args) {
        console.log(event);
        console.log(args);
        this.emitOnCellChanged(event, args, '');
    }

    onCellFocus(event, args) {
        this.emitOnCellFocus(event, args, '');
    }

    onCellKeyPress(event, args) {
        this.emitOnCellKeyPress(event, args, '');
    }

    toggleCompletedProperty(item) {
        // toggle property
        if (typeof item === 'object') {
            //   item.completed = !item.completed;

            // simulate a backend http call and refresh the grid row after delay
            setTimeout(() => {
                this.angularGrid.gridService.updateItemById(item.id, item, { highlightRow: false });
            }, 250);
        }
    }

    customEnableButtonFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column,
        dataContext: any, grid: any) => {
        try {
            const c = this.func.find((v, i, o) => v.function === columnDef.field);
            // console.log(c);
            if (!this.emitCheckBoxCondition(dataContext, c)) { return ''; }

            let field = 'isSelected';
            if (c.field) { field = c.field; }

            return `<span>
                <i class="fa ${dataContext[field] === true ? 'fa-check-square' : 'fa-square'} fa-lg pointer" style="color:
                ${dataContext[field] === true ? 'black' : 'lavender'}"></i>
            </span>`;
        } catch (error) {
            console.log('customEnableButtonFormatter', error);
            return '';
        }
    }

    customImgFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column,
        dataContext: any, grid: any) => {
        const c = this.func.find((v, i, o) => v.function === columnDef.field);
        if (!(dataContext[c.function] && dataContext[c.function] !== '')) {
            return `<span class="${c.class}">
                <img src="assets/images/emp.png" />
            </span>`;
        }

        const d = dataContext[c.function];
        const empImgSrc = c.url + d;

        return `<span class="${c.class}">
            <img src="${empImgSrc}" />
        </span>`;
    }

    customAuditLogListFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column,
        dataContext: any, grid: any) => {
        const h = dataContext['hasChanges'];
        const v = dataContext['hasChanges'] === true;
        if (v) {
            return `<span>
                <a href="javascript:void(0)" (click)="showAuditTrailEvent($event,auditPanel)"  title="show audit trail">
                    <span><b> <i class="pi pi-circle-on audit-trail-popup-icon"></i></b></span>
                </a>
                </span>`;
        } else {
            return '';
        }
    }

    myCustomFuncFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
        const c = this.func.find((v, i, o) => v.function === columnDef.field);
        // console.log(c);
        if (!this.emitFuncCondition(dataContext, c)) { return ''; }

        if (this.hideDeletedButton && c.function === 'onDelete'
            && dataContext['entityStatus'] === EntityStatus.Deleted) {
            return '';
        }

        // return Formatters.editIcon;

        // return { text: editIconFormatter};

        // return { text: editIconFormatter, addClasses: 'lightblue', toolTip: 'Freezing' };

        // return `<i class="fa fa-pencil pointer edit-icon" aria-hidden="true"></i>`;

        // return { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };

        return this.getFormatters(columnDef.field, c, dataContext);
    }

    render() {
        console.log('render()');
        if (this.gridObj) {
            console.log('this.gridObj.getOptions().gridMenu.hideTogglePreHeaderCommand', this.gridObj.getOptions().gridMenu.hideTogglePreHeaderCommand);
            console.log('this.gridObj.getOptions().showPreHeaderPanel', this.gridObj.getOptions().showPreHeaderPanel);
            this.gridObj.invalidate();
            this.gridObj.render();
        }
    }

    insertSlickGrid(item) {
        this.dataviewObj.addItem(item);
        // this.angularGrid.gridService.addItem(item);
    }

    myCustomTextBoxFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        // return '<input type="text" value="' + dataContext[columnDef.field] +
        // '" style="width: 100%;" id="' + columnDef.field + '_' + row +
        // '" class="' + columnDef.cssClass + '">';
        // return '<input type="text" [(ngModel)]="value[' + row + ']' + '[' + columnDef.field + ']" style="width: 100%;">';
        value = '<span class=\'dataType-textBox form-control\'>' + value + '</span>';
        return value;
    }

    myTimeFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        if (!value) { return ''; }
        try {
            const x = value.toString().substring(0, 5);
            return x;
        } catch (error) {
            return value;
        }
    }

    myDateTimeToLocalFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        if (!value) { return ''; }
        try {
            const x = new Date(value.toString() + 'Z');
            const y = this.datepipe.transform(x, 'yyyy-MM-dd HH:mm:ss');
            return y;
        } catch (error) {
            return value;
        }
    }

    myDateToMonthNameFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        if (!value) { return ''; }
        try {
            const x = new Date(value.toString() + 'Z');
            const y = this.datepipe.transform(x, 'MMM y');
            return y.toUpperCase();
        } catch (error) {
            return value;
        }
    }

    myDateToLocalFormatter: Formatter = (row, cell, value, columnDef: Column, dataContext) => {
        if (!value) { return ''; }
        try {
            const x = new Date(value.toString() + 'Z');
            const y = this.datepipe.transform(x, 'yyyy-MM-dd');
            return y;
        } catch (error) {
            return value;
        }
    }

    checkmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
        return this.parseBoolean(value) ? `<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>` :
            '';
    }

    parseBoolean(input: any): boolean {
        return /(true|1)/i.test(input + '');
    }

    metadata(old_metadata, inActiveStatusList: string[]) {
        return function (row) {
            const item = this.getItem(row);
            const meta = old_metadata(row) || {};

            if (item) {
                // Make sure the "cssClasses" property exists
                meta.cssClasses = meta.cssClasses || '';

                const inActive = inActiveStatusList.includes(item.entityStatus);
                if (inActive === true) {
                    meta.cssClasses += ' slickgrid-inactive-tr';
                }

                // if (item.qty < 1) {                   // If the quantity (qty) for this item less than 1
                //     meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
                // }

                /* Here is just a random example that will add an HTML class to the row element
                   that is the value of your row's "rowClass" property. Be careful with this as
                   you may run into issues if the "rowClass" property isn't a string or isn't a
                   valid class name. */
                // if (item.rowClass) {
                //     const myClass = ' ' + item.rowClass;
                //     meta.cssClasses += myClass;
                // }
            }

            return meta;
        };
    }

    updateRowCssWithId() {
        console.log('updateCssIdList', this.updateCssIdList);
        if (this.arrayOfObjectIsNull(this.updateCssIdList)) { return; }
        this.dataviewObj.getItemMetadata = this.exeUpdateRowCssWithId(this.dataviewObj.getItemMetadata,
            this.updateCssClass, this.updateCssIdList);
        this.gridObj.invalidate();
        this.gridObj.render();
    }

    exeUpdateRowCssWithId(previousItemMetadata: any, newCssClass: string, ids: string[]) {
        return (rowNumber: number) => {
            const item = this.dataviewObj.getItem(rowNumber);
            let meta = {
                cssClasses: ''
            };
            if (typeof previousItemMetadata === 'object') {
                meta = previousItemMetadata(rowNumber);
            }

            if (meta && item) {
                const found = ids.find(id => id === item.id);
                if (found && found !== null) {
                    meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
                }
            }

            return meta;
        };
    }

    UpdateAllTotals(args) {
        // this.gridOptions.createFooterRow = true;
        // this.gridOptions.showFooterRow = true;
        // this.gridOptions.footerRowHeight = 21;

        // this.render();

        let columnIdx = this.gridObj.getColumns().length;
        while (columnIdx--) {
            if (args.allColumns[columnIdx].type && args.allColumns[columnIdx].type === 5) {
                this.UpdateTotal(columnIdx, args.allColumns[columnIdx].field);
            }
        }
    }

    UpdateTotal(cell, field) {
        try {
            const col = this.columns.find(c => c.field === field);
            if (this.objectIsNull(col)) { return; }

            const columnId = this.gridObj.getColumns()[cell].id;
            const columnFeild = this.gridObj.getColumns()[cell].field;

            let total = 0;
            let i = this.value.length;
            while (i--) {
                total += (+this.value[i][columnFeild] || 0);
            }

            let strTotal = '';

            switch (col.dataType) {
                case 'number_General': {
                    strTotal = numberWithCommas(total, 1, 5);
                    break;
                }
                case 'amount_General': {
                    strTotal = numberWithCommas(total, 2, 2);
                    break;
                }
                case 'int_General': {
                    strTotal = numberWithCommas(total, 0, 0);
                    break;
                }
                default: {
                    strTotal = total.toString();
                    break;
                }
            }

            const columnElement = this.gridObj.getFooterRowColumn(columnId);
            columnElement.innerHTML = '<span>' + strTotal + '</span>';
        } catch (error) {
            console.log(error);
        }
    }

    bindFooter() {
        if (!this.footerObjectlist || this.footerObjectlist[0].config.length === 0) { return; }

        let cell = 0;
        const i = this.gridObj.getColumns().length;
        while (cell < i) {
            try {
                const columnId = this.gridObj.getColumns()[cell].id;
                // const columnFeild = this.gridObj.getColumns()[cell].field;

                const col = this.columns.find(s => s.id === columnId);

                const fotterConfig = this.footerObjectlist[0].config.find(s => s.name === col.colFooter[0]);
                const fotterData = this.footerObjectlist[0].data[fotterConfig.field];

                const columnElement = this.gridObj.getFooterRowColumn(columnId);
                columnElement.innerHTML = '<span>' + fotterData + '</span>';
            } catch (error) {
                console.log(error);
            }
            cell++;
        }
    }

    getHeader(colHeader: string[]): string {
        if (this.allowGrouping) { return null; }

        if (!this.colHeader || this.colHeader.length === 0) {
            return null;
        }

        const h = this.colHeader[0].find(s => s.name === colHeader[0]);

        return h.display;
    }

    /* Define grid Options and Columns */
    defineGrid() {
        let i = 0;
        this.columnDefinitions = [];
        this.columnDefinitionsVisible = [];
        if (this.func !== undefined) {
            this.func.forEach(s => {
                if (s.visible) {
                    if (s.funcType === 'checkbox') {
                        s.id = 'func_' + i.toString();
                        let field = 'isSelected';
                        if (s.field) { field = s.field; }
                        const cd = {
                            id: s.id,
                            field: s.function,
                            name: s.header || '',
                            columnGroup: '',
                            excludeFromHeaderMenu: true,
                            formatter: this.customEnableButtonFormatter,
                            minWidth: s.minWidth ? s.minWidth : 30,
                            maxWidth: s.maxWidth ? s.maxWidth : 30,
                            headerCssClass: (s.headerCssClass && s.headerCssClass !== '') ?
                                s.headerCssClass : 'vertical-text-header-checkbox',
                            header: s.showSelectAll !== false ? {
                                buttons: [
                                    {
                                        cssClass: 'fa fa-square header-checkbox',
                                        command: 'toggle-checkbox',
                                        tooltip: 'Select All',
                                        //   showOnHover: true,
                                    }
                                ]
                            } : null,
                            // use onCellClick OR grid.onClick.subscribe which you can see down below
                            onCellClick: (e: Event, args: OnEventArgs) => {
                                try {
                                    if (args.dataContext[field]) {
                                        args.dataContext[field] = false;
                                    } else {
                                        args.dataContext[field] = true;
                                    }
                                    this.toggleCompletedProperty(args && args.dataContext);
                                    console.log(args);
                                    if (this.emitCheckBoxCondition(args.dataContext, s)) {
                                        this.emitOnRowClick(args.dataContext, s.function);
                                    }
                                } catch (error) {
                                    console.log(error);
                                }
                            }
                        };
                        this.columnDefinitions.push(cd);
                        this.columnDefinitionsVisible.push(cd);
                        i++;
                    } else if (s.funcType === 'img') {
                        s.id = 'func_' + i.toString();
                        const cd = {
                            id: s.id,
                            field: s.function,
                            name: s.header || '',
                            columnGroup: '',
                            excludeFromHeaderMenu: true,
                            formatter: this.customImgFormatter,
                            minWidth: s.maxWidth,
                            maxWidth: s.maxWidth,
                            headerCssClass: s.class,
                        };
                        this.columnDefinitions.push(cd);
                        this.columnDefinitionsVisible.push(cd);
                        i++;
                    } else if (s.funcType === 'hasChanges') {
                        s.id = 'func_' + i.toString();
                        const cd = {
                            id: s.id,
                            field: s.function,
                            name: s.header || '',
                            columnGroup: '',
                            excludeFromHeaderMenu: true,
                            // formatter: this.customAuditLogListFormatter,
                            minWidth: 30,
                            maxWidth: 30,
                            headerCssClass: 'vertical-text-header-span',

                            // filter: {},
                            //   queryFieldFilter: 'assignee.id',
                            //   queryFieldSorter: 'assignee.name',
                            formatter: () => '',
                            asyncPostRender: this.renderAngularComponent.bind(this),
                            params: {
                                component: AuditTrailListComponent,
                                angularUtilService: this.angularUtilService,
                                complexFieldLabel: 'hasChanges', // for the exportCustomFormatter
                            },
                            exportCustomFormatter: Formatters.complexObject,
                        };
                        this.columnDefinitions.push(cd);
                        this.columnDefinitionsVisible.push(cd);
                        i++;
                    } else {
                        s.id = 'func_' + i.toString();
                        if (s.function === 'onRowSelect' || s.functi