@easydata/crud 1.4.0-rc01 → 1.4.0-rc02

package/dist/bundles/easydata.crud.js

@@ -4539,7 +4539,7 @@ var easy_grid_EasyGrid = /** @class */ (function () {
                     default: 60
                 }
             },
-            addColumns: false,
+            showPlusButton: false,
             viewportRowsCount: null,
             showActiveRow: true
         };
@@ -4638,8 +4638,8 @@ var easy_grid_EasyGrid = /** @class */ (function () {
         if (options.onRowDbClick) {
             this.addEventListener('rowDbClick', options.onRowDbClick);
         }
-        if (options.onAddColumnClick) {
-            this.addEventListener('addColumnClick', options.onAddColumnClick);
+        if (options.onPlusButtonClick) {
+            this.addEventListener('plusButtonClick', options.onPlusButtonClick);
         }
         if (options.onColumnChanged) {
             this.addEventListener('columnChanged', options.onColumnChanged);
@@ -4725,7 +4725,7 @@ var easy_grid_EasyGrid = /** @class */ (function () {
     };
     EasyGrid.prototype.render = function () {
         var _this = this;
-        if (!this.hasData() && !this.options.addColumns)
+        if (!this.hasData() && !this.options.showPlusButton)
             return;
         this.containerInitialHeight = this.slot.clientHeight;
         this.rootDiv = document.createElement('div');
@@ -4742,12 +4742,16 @@ var easy_grid_EasyGrid = /** @class */ (function () {
         gridContainer.classList.add(this.cssPrefix + "-container");
         gridContainer.appendChild(this.rootDiv);
         this.slot.appendChild(gridContainer);
+        var needAutoResize = this.options.columnWidths.autoResize !== AutoResizeColumns.Never;
         if (this.rowsOnPagePromise) {
             this.rowsOnPagePromise
                 .then(function () { return _this.updateHeight(); })
                 .then(function () {
                 _this.firstRender = false;
                 _this.rowsOnPagePromise = null;
+                if (needAutoResize) {
+                    _this.resizeColumns();
+                }
             });
         }
         else {
@@ -4755,17 +4759,12 @@ var easy_grid_EasyGrid = /** @class */ (function () {
                 _this.updateHeight()
                     .then(function () {
                     _this.firstRender = false;
+                    if (needAutoResize) {
+                        _this.resizeColumns();
+                    }
                 });
             }, 100);
         }
-        var needAutoResize = this.options.columnWidths.autoResize !== AutoResizeColumns.Never;
-        if (needAutoResize) {
-            this.bodyCellContainerDiv.style.visibility = 'hidden';
-            setTimeout(function () {
-                _this.resizeColumns();
-                _this.bodyCellContainerDiv.style.visibility = null;
-            }, 20);
-        }
     };
     EasyGrid.prototype.updateHeight = function () {
         var _this = this;
@@ -4774,14 +4773,14 @@ var easy_grid_EasyGrid = /** @class */ (function () {
                 var firstRow = _this.bodyCellContainerDiv.firstElementChild;
                 var rowHeight = firstRow ? firstRow.offsetHeight : DEFAULT_ROW_HEIGHT;
                 var rowCount = _this.options.viewportRowsCount; // || DEFAULT_ROW_COUNT;
-                var bodyHeight_1 = rowHeight * rowCount;
-                domel(_this.bodyDiv)
-                    .setStyle('height', bodyHeight_1 + "px");
+                var viewportHeight_1 = rowHeight * rowCount;
+                domel(_this.bodyViewportDiv)
+                    .setStyle('height', viewportHeight_1 + "px");
                 setTimeout(function () {
                     var sbHeight = _this.bodyViewportDiv.offsetHeight - _this.bodyViewportDiv.clientHeight;
-                    bodyHeight_1 = bodyHeight_1 + sbHeight;
-                    domel(_this.bodyDiv)
-                        .setStyle('height', bodyHeight_1 + "px");
+                    viewportHeight_1 = viewportHeight_1 + sbHeight;
+                    domel(_this.bodyViewportDiv)
+                        .setStyle('height', viewportHeight_1 + "px");
                     resolve();
                 }, 100);
                 return;
@@ -4828,7 +4827,7 @@ var easy_grid_EasyGrid = /** @class */ (function () {
             _this.headerRowDiv.appendChild(hd);
             if (column.isRowNum) {
                 domel(hd)
-                    .addChildElement(_this.renderAddColumnButton());
+                    .addChildElement(_this.renderHeaderButtons());
             }
         });
         var containerWidth = this.getContainerWidth();
@@ -5167,23 +5166,26 @@ var easy_grid_EasyGrid = /** @class */ (function () {
         var pageInfoDiv = domel('div')
             .addClass(this.cssPrefix + "-page-info")
             .toDOM();
-        var fistPageRecordNum = count
-            ? (this.pagination.page - 1) * this.pagination.pageSize + 1
-            : 0;
-        var lastPageRecordNum = count
-            ? fistPageRecordNum + count - 1
-            : 0;
-        var totalStr = this.dataTable.getTotal().toString();
-        if (this.dataTable.elasticChunks) {
-            var count_1 = this.dataTable.getCachedCount();
-            var total = this.dataTable.getTotal();
-            if (count_1 !== total)
-                totalStr = '?';
-        }
-        pageInfoDiv.innerHTML = i18n_i18n.getText('GridPageInfo')
-            .replace('{FirstPageRecordNum}', "<span>" + fistPageRecordNum.toString() + "</span>")
-            .replace('{LastPageRecordNum}', "<span>" + lastPageRecordNum.toString() + "</span>")
-            .replace('{Total}', "<span>" + totalStr + "</span>");
+        var rowCount = this.dataTable.getTotal();
+        if (rowCount > 0) {
+            var fistPageRecordNum = count
+                ? (this.pagination.page - 1) * this.pagination.pageSize + 1
+                : 0;
+            var lastPageRecordNum = count
+                ? fistPageRecordNum + count - 1
+                : 0;
+            var totalStr = this.dataTable.getTotal().toString();
+            if (this.dataTable.elasticChunks) {
+                var count_1 = this.dataTable.getCachedCount();
+                var total = this.dataTable.getTotal();
+                if (count_1 !== total)
+                    totalStr = '?';
+            }
+            pageInfoDiv.innerHTML = i18n_i18n.getText('GridPageInfo')
+                .replace('{FirstPageRecordNum}', "<span>" + fistPageRecordNum.toString() + "</span>")
+                .replace('{LastPageRecordNum}', "<span>" + lastPageRecordNum.toString() + "</span>")
+                .replace('{Total}', "<span>" + totalStr + "</span>");
+        }
         return pageInfoDiv;
     };
     EasyGrid.prototype.showProgress = function () {
@@ -5278,7 +5280,8 @@ var easy_grid_EasyGrid = /** @class */ (function () {
         var _this = this;
         var paginateDiv = document.createElement('div');
         paginateDiv.className = this.cssPrefix + "-pagination-wrapper";
-        if (this.options.paging && this.options.paging.enabled) {
+        var rowCount = this.dataTable.getTotal();
+        if (this.options.paging && this.options.paging.enabled && rowCount > 0) {
             var prefix_1 = this.paginationOptions.useBootstrap ? '' : this.cssPrefix + "-";
             var buttonClickHandler_1 = function (ev) {
                 var element = ev.target;
@@ -5404,18 +5407,18 @@ var easy_grid_EasyGrid = /** @class */ (function () {
     EasyGrid.prototype.removeEventListener = function (eventType, handlerId) {
         this.eventEmitter.unsubscribe(eventType, handlerId);
     };
-    EasyGrid.prototype.renderAddColumnButton = function () {
+    EasyGrid.prototype.renderHeaderButtons = function () {
         var _this = this;
-        if (this.options.addColumns) {
+        if (this.options.showPlusButton) {
             return domel('div')
-                .addClass(this.cssPrefix + "-addrow")
-                .title(this.options.addColumnsTitle || 'Add column')
+                .addClass(this.cssPrefix + "-header-btn-plus")
+                .title(this.options.plusButtonTitle || 'Add')
                 .addChild('a', function (builder) { return builder
                 .attr('href', 'javascript:void(0)')
                 .on('click', function (e) {
                 e.preventDefault();
                 _this.fireEvent({
-                    type: 'addColumnClick',
+                    type: 'plusButtonClick',
                     sourceEvent: e
                 });
             }); })
@@ -5522,6 +5525,8 @@ var easy_grid_EasyGrid = /** @class */ (function () {
         var containerWidth = this.bodyCellContainerDiv.style.width;
         this.bodyCellContainerDiv.style.visibility = 'hidden';
         this.bodyCellContainerDiv.style.width = '1px';
+        //this.headerRowDiv.style.visibility = 'hidden';
+        this.headerRowDiv.style.width = '1px';
         var sumWidth = 0;
         var columns = this.columns.getItems();
         var headerCells = this.headerCellContainerDiv.querySelectorAll("." + this.cssPrefix + "-header-cell");
@@ -5542,44 +5547,53 @@ var easy_grid_EasyGrid = /** @class */ (function () {
                     value.parentElement.style.width = calculatedWidth + "px";
                 });
                 headerCells[headerIdx].style.width = calculatedWidth + "px";
-                headerIdx++;
             }
-            else if (cellValues.length > 0) {
-                cellValues.forEach(function (value) {
-                    value.parentElement.style.width = null;
-                    var width = value.parentElement.offsetWidth;
-                    if (width > maxWidth) {
-                        maxWidth = width;
-                    }
-                });
-                maxWidth += 3;
-                var maxOption = column.isRowNum
-                    ? this_1.options.columnWidths.rowNumColumn.max || 500
-                    : this_1.options.columnWidths[column.dataColumn.type].max || 2000;
-                var minOption = column.isRowNum
-                    ? this_1.options.columnWidths.rowNumColumn.min || 0
-                    : this_1.options.columnWidths[column.dataColumn.type].min || 20;
-                if (maxWidth > maxOption) {
-                    maxWidth = maxOption;
-                }
-                if (maxWidth < minOption) {
-                    maxWidth = minOption;
+            else {
+                if (cellValues.length == 0) {
+                    headerCells[headerIdx].style.width = null;
+                    headerCells[headerIdx].style.whiteSpace = 'nowrap';
                 }
-                if (utils_utils.isNumericType(column.type)) {
-                    //increase the calculated width in 1.3 times for numeric columns
-                    maxWidth = Math.round(maxWidth * 1.3);
+                maxWidth = headerCells[headerIdx].offsetWidth;
+                if (cellValues.length > 0) {
+                    cellValues.forEach(function (value) {
+                        value.parentElement.style.width = null;
+                        var width = value.parentElement.offsetWidth;
+                        if (width > maxWidth) {
+                            maxWidth = width;
+                        }
+                    });
+                    maxWidth += 3;
+                    var maxOption = column.isRowNum
+                        ? this_1.options.columnWidths.rowNumColumn.max || 500
+                        : this_1.options.columnWidths[column.dataColumn.type].max || 2000;
+                    var minOption = column.isRowNum
+                        ? this_1.options.columnWidths.rowNumColumn.min || 0
+                        : this_1.options.columnWidths[column.dataColumn.type].min || 20;
+                    if (maxWidth > maxOption) {
+                        maxWidth = maxOption;
+                    }
+                    if (maxWidth < minOption) {
+                        maxWidth = minOption;
+                    }
+                    if (utils_utils.isNumericType(column.type)) {
+                        //increase the calculated width in 1.3 times for numeric columns
+                        maxWidth = Math.round(maxWidth * 1.3);
+                    }
+                    sumWidth += maxWidth;
+                    column.width = maxWidth;
+                    cellValues.forEach(function (value) {
+                        value.parentElement.style.width = maxWidth + "px";
+                    });
+                    headerCells[headerIdx].style.width = maxWidth + "px";
+                    if (column.dataColumn) {
+                        column.dataColumn.calculatedWidth = maxWidth;
+                    }
                 }
-                sumWidth += maxWidth;
-                column.width = maxWidth;
-                cellValues.forEach(function (value) {
-                    value.parentElement.style.width = maxWidth + "px";
-                });
-                headerCells[headerIdx].style.width = maxWidth + "px";
-                headerIdx++;
-                if (column.dataColumn) {
-                    column.dataColumn.calculatedWidth = maxWidth;
+                else {
+                    sumWidth += maxWidth;
                 }
             }
+            headerIdx++;
         };
         var this_1 = this;
         for (var idx = 0; idx < this.columns.count; idx++) {
@@ -5594,6 +5608,7 @@ var easy_grid_EasyGrid = /** @class */ (function () {
             this.headerCellContainerDiv.style.width = containerWidth;
         }
         this.bodyCellContainerDiv.style.visibility = null;
+        this.headerRowDiv.removeAttribute('style');
     };
     return EasyGrid;
 }());
@@ -8038,10 +8053,10 @@ var entity_data_view_EntityDataView = /** @class */ (function () {
                     allowPageSizeChange: true,
                     pageSizeItems: [15, 30, 50, 100, 200]
                 },
-                addColumns: _this.context.getActiveEntity().isEditable,
-                addColumnsTitle: i18n_i18n.getText('AddBtnTitle'),
+                showPlusButton: _this.context.getActiveEntity().isEditable,
+                plusButtonTitle: i18n_i18n.getText('AddRecordBtnTitle'),
                 showActiveRow: false,
-                onAddColumnClick: _this.addClickHandler.bind(_this),
+                onPlusButtonClick: _this.addClickHandler.bind(_this),
                 onGetCellRenderer: _this.manageCellRenderer.bind(_this),
                 onRowDbClick: _this.rowDbClickHandler.bind(_this),
                 onSyncGridColumn: _this.syncGridColumnHandler.bind(_this)
@@ -8367,6 +8382,7 @@ function addEasyDataCRUDTexts() {
         CalendarBtnTitle: 'Open calendar',
         TimerBtnTitle: 'Open timer',
         AddBtnTitle: 'Add',
+        AddRecordBtnTitle: 'Add record',
         EditBtn: 'Edit',
         DeleteBtn: 'Delete',
         SelectLink: '[ select ]',