@easyquery/ui 7.2.3-rc03 → 7.2.4-beta03

package/dist/lib/widgets/sorting_bar.js

@@ -1,329 +1,331 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { i18n, utils as dataUtils } from '@easydata/core';
-import { Widget, WidgetGroup, QueryChangeAction, QueryChangePart, SortDirection, ExprTag } from '@easyquery/core';
-import { domel } from '@easydata/ui';
-import { eqCssPrefix } from '../utils/utils';
-import { browserUtils } from '../utils/browser_utils';
-import { PopupMenu } from '../utils/popup_menu';
-import { ColumnRendererSB } from './renderers/sortingbar/column_renderer_sp';
-var SortingBar = /** @class */ (function (_super) {
-    __extends(SortingBar, _super);
-    function SortingBar(slot) {
-        var _this = _super.call(this, slot) || this;
-        _this.options = {
-            showAddRow: true,
-            attrElementFormat: '{entity} {attr}',
-            titleElementFormat: null,
-            menuOptions: {
-                showSearchBoxAfter: 30,
-                searchBoxAutoFocus: true,
-                activateOnMouseOver: true,
-                adjustHeight: true,
-                itemRenderedCallback: null
-            },
-        };
-        _this.sortMenuList = [
-            { id: 'None', text: i18n.getText('CmdNotSorted') },
-            { id: 'Ascending', text: i18n.getText('CmdAscending') },
-            { id: 'Descending', text: i18n.getText('CmdDescending') }
-        ];
-        domel(_this.slot)
-            .addClass(_this.cssPrefix + "-panel")
-            .addClass(browserUtils.getMobileCssClass());
-        _this.group = WidgetGroup.Query;
-        return _this;
-    }
-    Object.defineProperty(SortingBar.prototype, "cssPrefix", {
-        get: function () {
-            return "eqjs-sb";
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SortingBar.prototype.getWidgetType = function () {
-        return 'sortingBar';
-    };
-    SortingBar.prototype.init = function (context, options) {
-        _super.prototype.init.call(this, context, options);
-        this.setOptions(options);
-        this.destroyCore();
-        this.attachQueryObserver();
-    };
-    SortingBar.prototype.setOptions = function (options) {
-        dataUtils.assignDeep(this.options, options);
-    };
-    SortingBar.prototype.attachQueryObserver = function () {
-        var _this = this;
-        var query = this.getQuery();
-        this.queryEventCallbackId = query.addChangedCallback(function (event) {
-            //if something has changed, and that change is related to columns
-            var edata = event.data;
-            if (!edata || (edata.part != QueryChangePart.SortingColumns
-                && edata.part != QueryChangePart.Columns && edata.part != QueryChangePart.All)) {
-                return;
-            }
-            switch (edata.action) {
-                case QueryChangeAction.Modify: {
-                    var columns = edata.changee;
-                    var modifyColumn_1 = function (column) {
-                        var colEl = _this.columnsBlock.querySelector("div[data-id='" + column.id + "']");
-                        if (colEl) {
-                            _this.renderColumn(column, colEl);
-                        }
-                    };
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return modifyColumn_1(col); });
-                    }
-                    else {
-                        modifyColumn_1(columns);
-                    }
-                    break;
-                }
-                case QueryChangeAction.Add: {
-                    var columns = edata.changee;
-                    var addColumn_1 = function (column) {
-                        _this.addColumnElement(column);
-                    };
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return addColumn_1(col); });
-                    }
-                    else {
-                        addColumn_1(columns);
-                    }
-                    break;
-                }
-                case QueryChangeAction.Delete: {
-                    var columns = edata.changee;
-                    var deleteColumn_1 = function (column) {
-                        var colEl = _this.columnsBlock.querySelector("div[data-id='" + column.id + "']");
-                        if (colEl)
-                            _this.columnsBlock.removeChild(colEl);
-                    };
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return deleteColumn_1(col); });
-                    }
-                    else {
-                        deleteColumn_1(columns);
-                    }
-                    break;
-                }
-                default:
-                    _this.refresh();
-                    break;
-            }
-        });
-    };
-    SortingBar.prototype.detachQueryObserver = function () {
-        if (this.queryEventCallbackId) {
-            var query = this.getContext().getQuery();
-            query.removeChangedCallback(this.queryEventCallbackId);
-        }
-    };
-    SortingBar.prototype.getQuery = function () {
-        return this.getContext().getQuery();
-    };
-    SortingBar.prototype.destroyCore = function () {
-        this.detachQueryObserver();
-        this.clear();
-    };
-    SortingBar.prototype.refreshCore = function () {
-        this.clear();
-        this.render();
-    };
-    SortingBar.prototype.renderAddRowButton = function () {
-        var _this = this;
-        domel(this.addRowButton)
-            .addClass(eqCssPrefix + "-addrow", this.cssPrefix + "-addrow", eqCssPrefix + "-addrow-empty")
-            .addClass(browserUtils.getMobileCssClass())
-            .title(i18n.getText('CmdClickToAddColumn'))
-            .addChild('a', function (builder) { return builder
-            .attr('href', 'javascript:void(0)')
-            .on('click', function (e) {
-            e.preventDefault();
-            _this.showEntitiesMenu({
-                anchor: e.target,
-                selectedIds: null,
-                itemSelectedCallback: function (data, items) {
-                    var attrid = data.id;
-                    _this.addNewColumn(attrid);
-                    return false;
-                }
-            });
-        }); });
-        if (browserUtils.isMobileMode()) {
-            domel(this.columnsBlock)
-                .addChildElement(this.addRowButton);
-        }
-    };
-    SortingBar.prototype.showEntitiesMenu = function (menuOptions) {
-        this.entitiesMenu.showMenu(menuOptions);
-    };
-    SortingBar.prototype.createEntitiesMenu = function () {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-EntitiesMenu';
-        }
-        var entitiesList = model.getEntitiesTree({ addUIC: false, addUIR: false, addUIS: true });
-        var options = { items: entitiesList,
-            adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId };
-        this.entitiesMenu = new PopupMenu(options);
-    };
-    SortingBar.prototype.createSortMenu = function () {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-SortMenu';
-        }
-        var items = this.sortMenuList;
-        var menuOptions = { "items": items, id: menuId };
-        menuOptions.searchBoxAlwaysShown = false;
-        this.sortMenu = new PopupMenu(menuOptions);
-    };
-    SortingBar.prototype.render = function () {
-        var _this = this;
-        this.createEntitiesMenu();
-        this.createSortMenu();
-        this.columnsBlock =
-            domel('div')
-                .addClass(this.cssPrefix + "-columns")
-                .addClass(browserUtils.getMobileCssClass())
-                .toDOM();
-        if (this.options.showAddRow) {
-            this.addRowButton =
-                domel('div')
-                    .toDOM();
-            if (browserUtils.isMobileMode()) {
-                domel(this.columnsBlock)
-                    .addChildElement(this.addRowButton);
-            }
-            else {
-                domel(this.slot)
-                    .addChildElement(this.addRowButton);
-            }
-            this.renderAddRowButton();
-        }
-        domel(this.slot)
-            .addChildElement(this.columnsBlock);
-        var query = this.context.getQuery();
-        var columns = query.getColumns().concat(query.getJustSortedColumns());
-        columns.forEach(function (column, index) {
-            var slot = _this.renderColumn(column);
-            _this.columnsBlock.appendChild(slot);
-        });
-    };
-    SortingBar.prototype.addNewColumn = function (attrId) {
-        var _this = this;
-        var model = this.getContext().getModel();
-        var query = this.getContext().getQuery();
-        var getColumnByAttrId = function (attrid) {
-            var attribute = model.getAttributeById(attrid);
-            if (!attribute) {
-                return null;
-            }
-            if (!attribute.useInSorting) {
-                if (attribute.lookupAttr) {
-                    attrid = attribute.lookupAttr;
-                    attribute = model.getAttributeById(attrid);
-                    if (!attribute || !attribute.useInSorting) {
-                        return null;
-                    }
-                }
-                else
-                    return null;
-            }
-            var column = query.createColumn(true);
-            column.caption = _this.getDefaultColumnCaption(attribute);
-            column.sorting = SortDirection.Ascending;
-            column.sortIndex = _this.getQuery().getColumnSortIndex(column);
-            column.expr.tag = ExprTag.EntityAttribute;
-            //column.expr.id = attrid;
-            column.expr.setValue(attrid, true);
-            column.params.concat(attribute.params);
-            return column;
-        };
-        if (!this.getContext().getQuery()) {
-            return;
-        }
-        return this.addColumn(getColumnByAttrId(attrId));
-    };
-    SortingBar.prototype.getDefaultColumnCaption = function (attr) {
-        var format = this.options.titleElementFormat || this.options.attrElementFormat;
-        var model = this.getContext().getModel();
-        return model.getAttributeText(attr, format);
-    };
-    SortingBar.prototype.addColumn = function (column) {
-        var query = this.getContext().getQuery();
-        if (!query) {
-            return;
-        }
-        column = this.checkColumn(column);
-        if (!column) {
-            return;
-        }
-        column = query.addColumn({
-            caption: column.caption,
-            attributeId: column.expr.value,
-            sorting: column.sorting,
-            sortIndex: column.sortIndex,
-            justsorted: true
-        });
-        query.fireChangedEvent({
-            part: QueryChangePart.SortingColumns,
-            action: QueryChangeAction.Add,
-            changee: column
-        });
-        return column;
-    };
-    SortingBar.prototype.checkColumn = function (col) {
-        var query = this.getContext().getQuery();
-        var columns = query.getColumns()
-            .concat(query.getJustSortedColumns());
-        var colJson = JSON.stringify(col.expr.saveToData());
-        for (var i = 0; i < columns.length; i++) {
-            var qcolJson = JSON.stringify(columns[i].expr.saveToData());
-            if (qcolJson === colJson) {
-                return null;
-            }
-        }
-        return col;
-    };
-    SortingBar.prototype.renderColumn = function (column, elem) {
-        var renderer = new ColumnRendererSB(this, column, elem);
-        if (renderer) {
-            var columnSlot = renderer.render();
-            return columnSlot;
-        }
-        return null;
-    };
-    //adds one column to the bar on the specified position
-    SortingBar.prototype.addColumnElement = function (column) {
-        var newColBlock = this.renderColumn(column);
-        this.columnsBlock.appendChild(newColBlock);
-        if (this.options.columnRenderedCallback) {
-            this.options.columnRenderedCallback(newColBlock);
-        }
-    };
-    SortingBar.prototype.clear = function () {
-        this.slot.innerHTML = '';
-    };
-    return SortingBar;
-}(Widget));
-export { SortingBar };
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { i18n, utils as dataUtils } from '@easydata/core';
+import { Widget, WidgetGroup, QueryChangeAction, QueryChangePart, SortDirection, ExprTag } from '@easyquery/core';
+import { domel } from '@easydata/ui';
+import { eqCssPrefix } from '../utils/utils';
+import { browserUtils } from '../utils/browser_utils';
+import { PopupMenu } from '../utils/popup_menu';
+import { ColumnRendererSB } from './renderers/sortingbar/column_renderer_sp';
+var SortingBar = /** @class */ (function (_super) {
+    __extends(SortingBar, _super);
+    function SortingBar(slot) {
+        var _this = _super.call(this, slot) || this;
+        _this.options = {
+            showAddRow: true,
+            attrElementFormat: '{entity} {attr}',
+            titleElementFormat: null,
+            menuOptions: {
+                showSearchBoxAfter: 30,
+                searchBoxAutoFocus: true,
+                activateOnMouseOver: true,
+                adjustHeight: true,
+                itemRenderedCallback: null
+            },
+        };
+        _this.sortMenuList = [
+            { id: 'None', text: i18n.getText('CmdNotSorted') },
+            { id: 'Ascending', text: i18n.getText('CmdAscending') },
+            { id: 'Descending', text: i18n.getText('CmdDescending') }
+        ];
+        domel(_this.slot)
+            .addClass("".concat(_this.cssPrefix, "-panel"))
+            .addClass(browserUtils.getMobileCssClass());
+        _this.group = WidgetGroup.Query;
+        return _this;
+    }
+    Object.defineProperty(SortingBar.prototype, "cssPrefix", {
+        get: function () {
+            return "eqjs-sb";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SortingBar.prototype.getWidgetType = function () {
+        return 'sortingBar';
+    };
+    SortingBar.prototype.init = function (context, options) {
+        _super.prototype.init.call(this, context, options);
+        this.setOptions(options);
+        this.destroyCore();
+        this.attachQueryObserver();
+    };
+    SortingBar.prototype.setOptions = function (options) {
+        dataUtils.assignDeep(this.options, options);
+    };
+    SortingBar.prototype.attachQueryObserver = function () {
+        var _this = this;
+        var query = this.getQuery();
+        this.queryEventCallbackId = query.addChangedCallback(function (event) {
+            //if something has changed, and that change is related to columns
+            var edata = event.data;
+            if (!edata || (edata.part != QueryChangePart.SortingColumns
+                && edata.part != QueryChangePart.Columns && edata.part != QueryChangePart.All)) {
+                return;
+            }
+            switch (edata.action) {
+                case QueryChangeAction.Modify: {
+                    var columns = edata.changee;
+                    var modifyColumn_1 = function (column) {
+                        var colEl = _this.columnsBlock.querySelector("div[data-id='".concat(column.id, "']"));
+                        if (colEl) {
+                            _this.renderColumn(column, colEl);
+                        }
+                    };
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return modifyColumn_1(col); });
+                    }
+                    else {
+                        modifyColumn_1(columns);
+                    }
+                    break;
+                }
+                case QueryChangeAction.Add: {
+                    var columns = edata.changee;
+                    var addColumn_1 = function (column) {
+                        _this.addColumnElement(column);
+                    };
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return addColumn_1(col); });
+                    }
+                    else {
+                        addColumn_1(columns);
+                    }
+                    break;
+                }
+                case QueryChangeAction.Delete: {
+                    var columns = edata.changee;
+                    var deleteColumn_1 = function (column) {
+                        var colEl = _this.columnsBlock.querySelector("div[data-id='".concat(column.id, "']"));
+                        if (colEl)
+                            _this.columnsBlock.removeChild(colEl);
+                    };
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return deleteColumn_1(col); });
+                    }
+                    else {
+                        deleteColumn_1(columns);
+                    }
+                    break;
+                }
+                default:
+                    _this.refresh();
+                    break;
+            }
+        });
+    };
+    SortingBar.prototype.detachQueryObserver = function () {
+        if (this.queryEventCallbackId) {
+            var query = this.getContext().getQuery();
+            query.removeChangedCallback(this.queryEventCallbackId);
+        }
+    };
+    SortingBar.prototype.getQuery = function () {
+        return this.getContext().getQuery();
+    };
+    SortingBar.prototype.destroyCore = function () {
+        this.detachQueryObserver();
+        this.clear();
+    };
+    SortingBar.prototype.refreshCore = function () {
+        this.clear();
+        this.render();
+    };
+    SortingBar.prototype.renderAddRowButton = function () {
+        var _this = this;
+        domel(this.addRowButton)
+            .addClass("".concat(eqCssPrefix, "-addrow"), "".concat(this.cssPrefix, "-addrow"), "".concat(eqCssPrefix, "-addrow-empty"))
+            .addClass(browserUtils.getMobileCssClass())
+            .title(i18n.getText('CmdClickToAddColumn'))
+            .addChild('a', function (builder) { return builder
+            .attr('href', 'javascript:void(0)')
+            .on('click', function (e) {
+            e.preventDefault();
+            _this.showEntitiesMenu({
+                anchor: e.target,
+                selectedIds: null,
+                itemSelectedCallback: function (data, items) {
+                    var attrid = data.id;
+                    _this.addNewColumn(attrid);
+                    return false;
+                }
+            });
+        }); });
+        if (browserUtils.isMobileMode()) {
+            domel(this.columnsBlock)
+                .addChildElement(this.addRowButton);
+        }
+    };
+    SortingBar.prototype.showEntitiesMenu = function (menuOptions) {
+        this.entitiesMenu.showMenu(menuOptions);
+    };
+    SortingBar.prototype.createEntitiesMenu = function () {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-EntitiesMenu';
+        }
+        var entitiesList = model.getEntitiesTree({ addUIC: false, addUIR: false, addUIS: true });
+        var options = { items: entitiesList,
+            adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId };
+        this.entitiesMenu = new PopupMenu(options);
+    };
+    SortingBar.prototype.createSortMenu = function () {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-SortMenu';
+        }
+        var items = this.sortMenuList;
+        var menuOptions = { "items": items, id: menuId };
+        menuOptions.searchBoxAlwaysShown = false;
+        this.sortMenu = new PopupMenu(menuOptions);
+    };
+    SortingBar.prototype.render = function () {
+        var _this = this;
+        this.createEntitiesMenu();
+        this.createSortMenu();
+        this.columnsBlock =
+            domel('div')
+                .addClass("".concat(this.cssPrefix, "-columns"))
+                .addClass(browserUtils.getMobileCssClass())
+                .toDOM();
+        if (this.options.showAddRow) {
+            this.addRowButton =
+                domel('div')
+                    .toDOM();
+            if (browserUtils.isMobileMode()) {
+                domel(this.columnsBlock)
+                    .addChildElement(this.addRowButton);
+            }
+            else {
+                domel(this.slot)
+                    .addChildElement(this.addRowButton);
+            }
+            this.renderAddRowButton();
+        }
+        domel(this.slot)
+            .addChildElement(this.columnsBlock);
+        var query = this.context.getQuery();
+        var columns = query.getColumns().concat(query.getJustSortedColumns());
+        columns.forEach(function (column, index) {
+            var slot = _this.renderColumn(column);
+            _this.columnsBlock.appendChild(slot);
+        });
+    };
+    SortingBar.prototype.addNewColumn = function (attrId) {
+        var _this = this;
+        var model = this.getContext().getModel();
+        var query = this.getContext().getQuery();
+        var getColumnByAttrId = function (attrid) {
+            var attribute = model.getAttributeById(attrid);
+            if (!attribute) {
+                return null;
+            }
+            if (!attribute.useInSorting) {
+                if (attribute.lookupAttr) {
+                    attrid = attribute.lookupAttr;
+                    attribute = model.getAttributeById(attrid);
+                    if (!attribute || !attribute.useInSorting) {
+                        return null;
+                    }
+                }
+                else
+                    return null;
+            }
+            var column = query.createColumn(true);
+            column.caption = _this.getDefaultColumnCaption(attribute);
+            column.sorting = SortDirection.Ascending;
+            column.sortIndex = _this.getQuery().getColumnSortIndex(column);
+            column.expr.tag = ExprTag.EntityAttribute;
+            //column.expr.id = attrid;
+            column.expr.setValue(attrid, true);
+            column.params.concat(attribute.params);
+            return column;
+        };
+        if (!this.getContext().getQuery()) {
+            return;
+        }
+        return this.addColumn(getColumnByAttrId(attrId));
+    };
+    SortingBar.prototype.getDefaultColumnCaption = function (attr) {
+        var format = this.options.titleElementFormat || this.options.attrElementFormat;
+        var model = this.getContext().getModel();
+        return model.getAttributeText(attr, format);
+    };
+    SortingBar.prototype.addColumn = function (column) {
+        var query = this.getContext().getQuery();
+        if (!query) {
+            return;
+        }
+        column = this.checkColumn(column);
+        if (!column) {
+            return;
+        }
+        column = query.addColumn({
+            caption: column.caption,
+            attributeId: column.expr.value,
+            sorting: column.sorting,
+            sortIndex: column.sortIndex,
+            justsorted: true
+        });
+        query.fireChangedEvent({
+            part: QueryChangePart.SortingColumns,
+            action: QueryChangeAction.Add,
+            changee: column
+        });
+        return column;
+    };
+    SortingBar.prototype.checkColumn = function (col) {
+        var query = this.getContext().getQuery();
+        var columns = query.getColumns()
+            .concat(query.getJustSortedColumns());
+        var colJson = JSON.stringify(col.expr.saveToData());
+        for (var i = 0; i < columns.length; i++) {
+            var qcolJson = JSON.stringify(columns[i].expr.saveToData());
+            if (qcolJson === colJson) {
+                return null;
+            }
+        }
+        return col;
+    };
+    SortingBar.prototype.renderColumn = function (column, elem) {
+        var renderer = new ColumnRendererSB(this, column, elem);
+        if (renderer) {
+            var columnSlot = renderer.render();
+            return columnSlot;
+        }
+        return null;
+    };
+    //adds one column to the bar on the specified position
+    SortingBar.prototype.addColumnElement = function (column) {
+        var newColBlock = this.renderColumn(column);
+        this.columnsBlock.appendChild(newColBlock);
+        if (this.options.columnRenderedCallback) {
+            this.options.columnRenderedCallback(newColBlock);
+        }
+    };
+    SortingBar.prototype.clear = function () {
+        this.slot.innerHTML = '';
+    };
+    return SortingBar;
+}(Widget));
+export { SortingBar };
 //# sourceMappingURL=sorting_bar.js.map