@syncfusion/ej2-grids/src/grid/actions/blazor-action.js

Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.

import { Observer, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';
import * as events from '../base/constant';
import { Row } from '../models/row';
import { AriaService } from '../services/aria-service';
import { Cell } from '../models/cell';
import { CellType } from '../base/enum';
import { DataUtil } from '@syncfusion/ej2-data';
export var gridObserver = new Observer();
/**
 * BlazorAction is used for performing Blazor related Grid Actions.
 *
 * @hidden
 */
var BlazorAction = /** @class */ (function () {
    function BlazorAction(parent) {
        this.aria = new AriaService();
        this.actionArgs = {};
        this.virtualHeight = 0;
        this.parent = parent;
        this.addEventListener();
    }
    BlazorAction.prototype.addEventListener = function () {
        if (this.parent.isDestroyed) {
            return;
        }
        this.parent.on('detailclick', this.onDetailRowClick, this);
        this.parent.on('add-delete-success', this.addDeleteSuccess, this);
        this.parent.on('editsuccess', this.editSuccess, this);
        this.parent.on('setvisibility', this.setColumnVisibility, this);
        this.parent.on('offset', this.setServerOffSet, this);
        this.parent.on('updateaction', this.modelChanged, this);
        this.parent.on(events.modelChanged, this.modelChanged, this);
        this.parent.on('group-expand-collapse', this.onGroupClick, this);
        this.parent.on('setcolumnstyles', this.setColVTableWidthAndTranslate, this);
        this.parent.on('refresh-virtual-indices', this.invokeServerDataBind, this);
        this.parent.on('contentcolgroup', this.contentColGroup, this);
        this.parent.on(events.dataSourceModified, this.dataSourceModified, this);
    };
    BlazorAction.prototype.removeEventListener = function () {
        if (this.parent.isDestroyed) {
            return;
        }
        this.parent.off('detailclick', this.onDetailRowClick);
        this.parent.off('add-delete-success', this.addDeleteSuccess);
        this.parent.off('editsuccess', this.editSuccess);
        this.parent.off('setvisibility', this.setColumnVisibility);
        this.parent.off('offset', this.setServerOffSet);
        this.parent.off('updateaction', this.modelChanged);
        this.parent.off(events.modelChanged, this.modelChanged);
        this.parent.off('group-expand-collapse', this.onGroupClick);
        this.parent.off('setcolumnstyles', this.setColVTableWidthAndTranslate);
        this.parent.off('refresh-virtual-indices', this.invokeServerDataBind);
        this.parent.off('contentcolgroup', this.contentColGroup);
        this.parent.off(events.dataSourceModified, this.dataSourceModified);
    };
    BlazorAction.prototype.getModuleName = function () { return 'blazor'; };
    BlazorAction.prototype.modelChanged = function (args) {
        this.actionArgs = args;
        this.parent.currentAction = args;
    };
    BlazorAction.prototype.addDeleteSuccess = function (args) {
        var _this = this;
        var action = 'action';
        var data = 'data';
        var index = 'index';
        var editArgs = {
            requestType: args.requestType,
            data: args["" + data],
            action: args["" + action]
        };
        if (!isNullOrUndefined(args["" + index])) {
            editArgs["" + index] = args["" + index];
        }
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        args.promise.then(function (e) { return _this.editSuccess(editArgs); }).catch(function (e) {
            if (isBlazor() && _this.parent.isServerRendered) {
                var error = 'error';
                var message = 'message';
                if (!isNullOrUndefined(e["" + error]) && !isNullOrUndefined(e["" + error]["" + message])) {
                    e["" + error] = e["" + error]["" + message];
                }
            }
            _this.parent.trigger(events.actionFailure, ((isBlazor() && e instanceof Array) ? e[0] : e));
            _this.parent.hideSpinner();
            _this.parent.log('actionfailure', { error: e });
        });
    };
    BlazorAction.prototype.editSuccess = function (args) {
        this.parent.renderModule.resetTemplates();
        this.invokeServerDataBind(args);
    };
    BlazorAction.prototype.invokeServerDataBind = function (args) {
        this.actionArgs = args;
        this.parent.currentAction = args;
        this.parent.allowServerDataBinding = true;
        this.parent.serverDataBind();
        this.parent.allowServerDataBinding = false;
    };
    BlazorAction.prototype.onDetailRowClick = function (target) {
        var gObj = this.parent;
        var adaptor = 'interopAdaptor';
        var rIndex = 'rowIndex';
        var invokeMethodAsync = 'invokeMethodAsync';
        var tr = target.parentElement;
        var uid = tr.getAttribute('data-uid');
        var rowObj = gObj.getRowObjectFromUID(uid);
        var args = {
            uid: uid, classList: target.classList[0], index: (parseInt(tr.getAttribute('aria-rowindex'), 10) - 1).toString(),
            rowIndex: gObj.getRowsObject().indexOf(rowObj), colSpan: this.parent.getVisibleColumns().length
        };
        gObj["" + adaptor]["" + invokeMethodAsync]('OnDetailClick', args);
        if (target.classList.contains('e-detailrowcollapse')) {
            var rows = gObj.getRowsObject();
            var rowData = rowObj.data;
            var gridRowId = this.parent.getRowUid('grid-row');
            var len = gObj.groupSettings.columns.length;
            var gridRow = new Row({
                isDataRow: true,
                isExpand: true,
                uid: gridRowId,
                isDetailRow: true,
                cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]
            });
            for (var i = 0; i < len; i++) {
                gridRow.cells.unshift(new Cell({ cellType: CellType.Indent }));
            }
            rows.splice(args["" + rIndex] + 1, 0, gridRow);
            gObj.trigger(events.detailDataBound, { data: rowData });
            gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });
            rowObj.isExpand = true;
            this.aria.setExpand(target, true);
        }
        else {
            gObj.getRowsObject().splice(args["" + rIndex] + 1, 1);
            gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });
            rowObj.isExpand = false;
            this.aria.setExpand(target, false);
        }
    };
    BlazorAction.prototype.setColumnVisibility = function (columns) {
        var visible = {};
        var adaptor = 'interopAdaptor';
        var invokeMethodAsync = 'invokeMethodAsync';
        for (var i = 0; i < columns.length; i++) {
            visible[columns[parseInt(i.toString(), 10)].uid] = columns[parseInt(i.toString(), 10)].visible;
        }
        this.parent["" + adaptor]["" + invokeMethodAsync]('setColumnVisibility', { visible: visible });
    };
    BlazorAction.prototype.dataSuccess = function (args) {
        if (this.parent.enableVirtualization && Object.keys(this.actionArgs).length === 0) {
            this.actionArgs.requestType = 'virtualscroll';
        }
        var startIndex = 'startIndex';
        var endIndex = 'endIndex';
        this.actionArgs["" + startIndex] = args["" + startIndex];
        this.actionArgs["" + endIndex] = args["" + endIndex];
        if (this.parent.enableVirtualization) {
            this.virtualContentModule = this.parent.contentModule;
            if (this.virtualContentModule.activeKey === 'downArrow' || this.virtualContentModule.activeKey === 'upArrow') {
                var row = this.parent.getRowByIndex(this.virtualContentModule.blzRowIndex);
                if (row) {
                    this.parent.selectRow(parseInt(row.getAttribute('aria-rowindex'), 10) - 1);
                    // eslint-disable-next-line
                    row.cells[0].focus({ preventScroll: true });
                }
            }
            this.virtualContentModule.blazorDataLoad = false;
        }
        if (args.foreignColumnsData) {
            var columns = this.parent.getColumns();
            for (var i = 0; i < columns.length; i++) {
                if (args.foreignColumnsData[columns[parseInt(i.toString(), 10)].field]) {
                    columns[parseInt(i.toString(), 10)].columnData = args.foreignColumnsData[columns[parseInt(i.toString(), 10)].field];
                }
            }
        }
        if (this.parent.allowGrouping && this.parent.groupSettings.columns) {
            var agg = [];
            var aggRows = this.parent.aggregates;
            for (var i = 0; i < aggRows.length; i++) {
                var aggRow = aggRows[parseInt(i.toString(), 10)];
                for (var j = 0; j < aggRow.columns.length; j++) {
                    var aggr = {};
                    var type = aggRow.columns[parseInt(j.toString(), 10)].type.toString();
                    aggr = { type: type.toLowerCase(), field: aggRow.columns[parseInt(j.toString(), 10)].field };
                    agg.push(aggr);
                }
            }
            var data = void 0;
            var aggrds = void 0;
            var groupedCols = this.parent.groupSettings.columns;
            for (var k = 0; k < groupedCols.length; k++) {
                aggrds = data ? data : args.result;
                data = DataUtil.group(aggrds, groupedCols[parseInt(k.toString(), 10)], agg, null, null);
            }
            args.result = data ? data : args.result;
        }
        var rowUid = 'rowUid';
        var offsetTime = 'offsetTime';
        var off = 'offset';
        this.parent["" + rowUid] = args["" + rowUid];
        args["" + off] = Math.sign(args["" + off]) === 1 ? -Math.abs(args["" + off]) : Math.abs(args["" + off]);
        this.parent["" + offsetTime] = args["" + off];
        if (this.parent["" + offsetTime] !== new Date().getTimezoneOffset() / 60) {
            if (this.parent.editSettings.mode !== 'Batch') {
                var action = 'action';
                var rowIndex = 'rowIndex';
                var index = 'index';
                if (this.actionArgs["" + action] === 'edit') {
                    this.setClientOffSet(args, this.actionArgs["" + rowIndex]);
                }
                else if (this.actionArgs["" + action] === 'add') {
                    this.setClientOffSet(args, this.actionArgs["" + index]);
                }
            }
            else if (this.parent.editSettings.mode === 'Batch') {
                var changes = 'changes';
                var changedRecords = 'changedRecords';
                var addedRecords = 'addedRecords';
                var keyField = this.parent.getPrimaryKeyFieldNames()[0];
                var batchChanges = this.actionArgs["" + changes] || { changedRecords: [], addedRecords: [] };
                for (var i = 0; i < batchChanges["" + changedRecords].length; i++) {
                    for (var j = 0; j < args.result.length; j++) {
                        if (batchChanges["" + changedRecords][parseInt(i.toString(), 10)]["" + keyField] === args.result[parseInt(j.toString(), 10)]["" + keyField]) {
                            this.setClientOffSet(args, j);
                        }
                    }
                }
                for (var i = 0; i < batchChanges["" + addedRecords].length; i++) {
                    for (var j = 0; j < args.result.length; j++) {
                        if (batchChanges["" + addedRecords][parseInt(i.toString(), 10)]["" + keyField] === args.result[parseInt(j.toString(), 10)]["" + keyField]) {
                            this.setClientOffSet(args, j);
                        }
                    }
                }
            }
        }
        this.parent.renderModule.dataManagerSuccess(args, this.actionArgs);
        this.parent.getMediaColumns();
        if (this.parent.enableVirtualization) {
            this.virtualContentModule = this.parent.contentModule;
            this.setColVTableWidthAndTranslate();
            if (this.parent.groupSettings.columns.length) {
                this.virtualContentModule.setVirtualHeight(this.virtualHeight);
            }
        }
        this.actionArgs = this.parent.currentAction = {};
    };
    BlazorAction.prototype.removeDisplayNone = function () {
        var renderedContentRows = this.parent.getContentTable().querySelectorAll('tr');
        for (var i = 0; i < renderedContentRows.length; i++) {
            var renderedContentCells = renderedContentRows[parseInt(i.toString(), 10)].querySelectorAll('td');
            for (var j = 0; j < renderedContentCells.length; j++) {
                renderedContentCells[parseInt(j.toString(), 10)].style.display = '';
            }
        }
    };
    BlazorAction.prototype.setVirtualTrackHeight = function (args) {
        this.virtualHeight = args.VisibleGroupedRowsCount * this.parent.getRowHeight();
        this.virtualContentModule.setVirtualHeight(this.virtualHeight);
    };
    BlazorAction.prototype.setColVTableWidthAndTranslate = function (args) {
        if (this.parent.enableColumnVirtualization && this.virtualContentModule.prevInfo &&
            (JSON.stringify(this.virtualContentModule.currentInfo.columnIndexes) !==
                JSON.stringify(this.virtualContentModule.prevInfo.columnIndexes)) || ((args && args.refresh))) {
            var translateX = this.virtualContentModule.getColumnOffset(this.virtualContentModule.startColIndex - 1);
            var width = this.virtualContentModule.getColumnOffset(this.virtualContentModule.endColIndex - 1) - translateX + '';
            this.virtualContentModule.header.virtualEle.setWrapperWidth(width);
            this.virtualContentModule.virtualEle.setWrapperWidth(width);
            this.virtualContentModule.header.virtualEle.adjustTable(translateX, 0);
            this.parent.getContentTable().parentElement.style.width = width + 'px';
        }
        if (this.dataSourceChanged) {
            this.virtualContentModule.getPanel().firstElementChild.scrollTop = 0;
            this.virtualContentModule.getPanel().firstElementChild.scrollLeft = 0;
            if (this.virtualContentModule.header.virtualEle) {
                this.virtualContentModule.header.virtualEle.adjustTable(0, 0);
            }
            this.parent.getContentTable().parentElement.style.transform = 'translate(0px,0px)';
            this.virtualContentModule.refreshOffsets();
            this.virtualContentModule.refreshVirtualElement();
            this.dataSourceChanged = false;
        }
    };
    BlazorAction.prototype.dataSourceModified = function () {
        this.dataSourceChanged = true;
    };
    BlazorAction.prototype.setClientOffSet = function (args, index) {
        var timeZone = DataUtil.serverTimezoneOffset;
        DataUtil.serverTimezoneOffset = 0;
        args.result[parseInt(index.toString(), 10)] = DataUtil.parse.parseJson(JSON.stringify(args.result[parseInt(index.toString(), 10)]));
        DataUtil.serverTimezoneOffset = timeZone;
    };
    BlazorAction.prototype.setServerOffSet = function (args) {
        var serverTimeZone = DataUtil.serverTimezoneOffset;
        var offsetTime = 'offsetTime';
        var data = 'data';
        var timeZone = new Date().getTimezoneOffset() / 60 * 2 + this.parent["" + offsetTime];
        DataUtil.serverTimezoneOffset = timeZone;
        args["" + data] = DataUtil.parse.parseJson(JSON.stringify(args["" + data]));
        DataUtil.serverTimezoneOffset = serverTimeZone;
    };
    BlazorAction.prototype.onGroupClick = function (args) {
        var _this = this;
        var adaptor = 'interopAdaptor';
        var content = 'contentModule';
        var invokeMethodAsync = 'invokeMethodAsync';
        var exactTopIndex = 'exactTopIndex';
        args["" + exactTopIndex] = Math.round((this.parent.element.querySelector('.e-content').scrollTop) / this.parent.getRowHeight());
        var rowHeight = 'rowHeight';
        args["" + rowHeight] = this.parent.getRowHeight();
        this.parent["" + adaptor]["" + invokeMethodAsync]('OnGroupExpandClick', args).then(function () {
            _this.parent["" + content].rowElements = [].slice.call(_this.parent.getContentTable().querySelectorAll('tr.e-row[data-uid]'));
        });
    };
    BlazorAction.prototype.setPersistData = function (args) {
        var gObj = this.parent;
        gObj.mergePersistGridData(args);
        var bulkChanges = 'bulkChanges';
        if (gObj["" + bulkChanges].columns) {
            delete gObj["" + bulkChanges].columns;
        }
        gObj.headerModule.refreshUI();
        gObj.notify('persist-data-changed', {});
        gObj.notify(events.columnVisibilityChanged, gObj.getColumns());
    };
    BlazorAction.prototype.resetPersistData = function (args) {
        var gObj = this.parent;
        var bulkChanges = 'bulkChanges';
        var parseArgs = JSON.parse(args);
        var persistArgs = { filterSettings: parseArgs.filterSettings,
            groupSettings: parseArgs.groupSettings, pageSettings: parseArgs.pageSettings, sortSettings: parseArgs.sortSettings,
            searchSettings: parseArgs.searchSettings, columns: parseArgs.columns };
        if (!persistArgs.sortSettings.columns) {
            persistArgs.sortSettings.columns = [];
        }
        if (!persistArgs.groupSettings.columns) {
            persistArgs.groupSettings.columns = [];
        }
        if (!persistArgs.pageSettings.currentPage) {
            gObj.pageSettings.currentPage = 1;
        }
        for (var i = 0; i < gObj.columns.length; i++) {
            if (gObj.groupSettings.columns.indexOf(gObj.columns[parseInt(i.toString(), 10)].field) > -1) {
                gObj.columns[parseInt(i.toString(), 10)].visible = true;
            }
        }
        gObj.mergePersistGridData(persistArgs);
        gObj.notify('persist-data-changed', {});
        if (gObj["" + bulkChanges].columns) {
            delete gObj["" + bulkChanges].columns;
        }
        gObj.headerModule.refreshUI();
        for (var i = 0; i < gObj.columns.length; i++) {
            gObj.columns[parseInt(i.toString(), 10)].editType = gObj.columns[parseInt(i.toString(), 10)]
                .editType.toLowerCase();
        }
        gObj.setProperties({ filterSettings: { columns: [] } }, true);
    };
    BlazorAction.prototype.contentColGroup = function () {
        var gObj = this.parent;
        var contentTable = gObj.getContent().querySelector('.e-table');
        contentTable.insertBefore(contentTable.querySelector("#content-" + gObj.element.id + "colGroup"), contentTable.querySelector('tbody'));
        if (gObj.frozenRows) {
            var headerTable = gObj.getHeaderContent().querySelector('.e-table');
            headerTable.insertBefore(headerTable.querySelector("#" + gObj.element.id + "colGroup"), headerTable.querySelector('tbody'));
        }
    };
    BlazorAction.prototype.dataFailure = function (args) {
        this.parent.renderModule.dataManagerFailure(args, this.actionArgs);
        this.actionArgs = this.parent.currentAction = {};
    };
    BlazorAction.prototype.destroy = function () {
        this.removeEventListener();
    };
    return BlazorAction;
}());
export { BlazorAction };