@universis/ngx-tables 0.8.4 → 0.8.5

package/bundles/universis-ngx-tables.umd.js

@@ -367,9 +367,11 @@
                     }
                     if (x.formatOptions && x.formatOptions.commands) {
                         var urlTree = _this.createUrlTree(row, x.formatOptions);
-                        return "<a data-name='" + x.name + "' class=\"dropdown-item\" href=\"#" + urlTree.toString() + "\">\n                            " + _this.injector.get(core.TranslateService).instant(x.title) + "\n                          </a>";
+                        return "<a data-name='" + x.name + "' class=\"dropdown-item" + (typeof x.className === 'string' && x.className.length
+                            ? " " + x.className.trim() : '') + "\" href=\"#" + urlTree.toString() + "\">\n                            " + _this.injector.get(core.TranslateService).instant(x.title) + "\n                          </a>";
                     }
-                    return "<a data-name='" + x.name + "' class=\"dropdown-item\" href=\"" + AdvancedColumnFormatter.template(x.href)(row) + "\">\n                          " + _this.injector.get(core.TranslateService).instant(x.title) + "\n                        </a>";
+                    return "<a data-name='" + x.name + "' class=\"dropdown-item" + (typeof x.className === 'string' && x.className.length
+                        ? " " + x.className.trim() : '') + "\" href=\"" + AdvancedColumnFormatter.template(x.href)(row) + "\">\n                          " + _this.injector.get(core.TranslateService).instant(x.title) + "\n                        </a>";
                 })
                     .join('') + "\n                    </div>\n                </div>";
             }
@@ -704,19 +706,32 @@
 
     var ColumnSelectorComponent = /** @class */ (function (_super) {
         __extends(ColumnSelectorComponent, _super);
-        function ColumnSelectorComponent(router, activatedRoute, _modalRef, ref, _translateService) {
+        function ColumnSelectorComponent(router, activatedRoute, _modalRef, _changeDetector) {
             var _this = _super.call(this, router, activatedRoute) || this;
             _this._modalRef = _modalRef;
-            _this.ref = ref;
-            _this._translateService = _translateService;
+            _this._changeDetector = _changeDetector;
             _this.dismiss = new i0.EventEmitter();
             _this.availableColumnsControl = new forms.FormControl();
             _this.selectedColumnsControl = new forms.FormControl();
+            _this.changing = false;
             return _this;
         }
         ColumnSelectorComponent.prototype.ok = function () {
-            this._modalRef.hide();
-            this.applyChanges();
+            var _this = this;
+            this._changeDetector.detectChanges();
+            setTimeout(function () {
+                _this.changing = true;
+                _this._modalRef.hide();
+            }, 0);
+            try {
+                this.applyChanges();
+            }
+            catch (err) {
+                throw err;
+            }
+            finally {
+                this.changing = false;
+            }
             this.dismiss.emit('ok');
             return Promise.resolve('ok');
         };
@@ -957,8 +972,9 @@
         };
         ColumnSelectorComponent.decorators = [
             { type: i0.Component, args: [{
+                        // tslint:disable-next-line:component-selector
                         selector: 'app-column-selector',
-                        template: "<div>\n    <div class=\"modal-header\">\n      <h5 class=\"modal-title\">{{'Tables.SelectColumns' | translate}}</h5>\n      <button (click)=\"cancel()\"\n              type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body pt-0\">\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <p [translate]=\"'Tables.SelectColumnHelp'\"></p>\n          <p [translate]=\"'Tables.MoveColumnHelp'\"></p>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-4\">\n            <select [formControl]=\"availableColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n                <ng-container *ngIf=\"columns\">\n                  <ng-container *ngFor=\"let column of columns | orderBy: ['title']\">\n                    <option class=\"text-wrap\" [value]=\"column.key\">{{column.title}}</option>\n                  </ng-container>\n                </ng-container>\n            </select>\n        </div>\n        <div class=\"col-4 d-flex justify-content-center align-items-center\">\n          <div class=\"col-9\">\n            <div>\n              <button [disabled]=\"!(availableColumnsControl.value && availableColumnsControl.value.length)\" (click)=\"addColumns()\" type=\"button\" class=\"btn btn-primary btn-block\">\n                <i class=\"fas fa-plus mr-2\"></i><span [translate]=\"'Tables.AddColumn'\"></span>\n              </button>\n            </div>\n            <div class=\"mt-3\">\n              <button [disabled]=\"!(selectedColumnsControl.value && selectedColumnsControl.value.length)\" (click)=\"removeColumns()\" type=\"button\" class=\"btn btn-secondary btn-block\">\n                <i class=\"fas fa-minus mr-2\"></i><span [translate]=\"'Tables.RemoveColumn'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-4\">\n            <select [formControl]=\"selectedColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n              <ng-container *ngIf=\"selectedColumns\">\n                <ng-container *ngFor=\"let column of selectedColumns\">\n                  <option class=\"text-wrap\" [value]=\"column.key\">{{column.title}}</option>\n                </ng-container>\n              </ng-container>\n          </select>\n          <div class=\"d-flex justify-content-center align-items-center\">\n            <div class=\"btn-group mt-4\">\n              <button #moveUpButton (click)=\"moveUp()\" type=\"button\" class=\"btn btn-primary\">\n                <i class=\"fas fa-chevron-up mr-2\"></i><span [translate]=\"'Tables.MoveUp'\"></span>\n              </button>\n              <button #moveDownButton (click)=\"moveDown()\" type=\"button\" class=\"btn btn-primary ml-2\">\n                <i class=\"fas fa-chevron-down mr-2\"></i><span [translate]=\"'Tables.MoveDown'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n        \n    </div>\n    <div class=\"modal-footer justify-content-end\">\n      <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\"\n              type=\"button\" class=\"btn btn-primary\">\n        {{'OK' | translate}}\n      </button>\n      <button [disabled]=\"cancelButtonDisabled\"\n              (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n        {{'Cancel' | translate}}\n      </button>\n    </div>\n  </div>\n  ",
+                        template: "<div>\n    <div class=\"modal-header\">\n      <h5 class=\"modal-title\">{{'Tables.SelectColumns' | translate}}</h5>\n      <button (click)=\"cancel()\"\n              type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Cancel\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </div>\n    <div class=\"modal-body pt-0\">\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <p [translate]=\"'Tables.SelectColumnHelp'\"></p>\n          <p [translate]=\"'Tables.MoveColumnHelp'\"></p>\n        </div>\n      </div>\n      <div class=\"row\">\n        <div class=\"col-4\">\n            <select [formControl]=\"availableColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n                <ng-container *ngIf=\"columns\">\n                  <ng-container *ngFor=\"let column of columns | orderBy: ['title']\">\n                    <option class=\"text-wrap\" [value]=\"column.key\">{{column.title}}</option>\n                  </ng-container>\n                </ng-container>\n            </select>\n        </div>\n        <div class=\"col-4 d-flex justify-content-center align-items-center\">\n          <div class=\"col-9\">\n            <div>\n              <button [disabled]=\"!(availableColumnsControl.value && availableColumnsControl.value.length)\" (click)=\"addColumns()\" type=\"button\" class=\"btn btn-primary btn-block\">\n                <i class=\"fas fa-plus mr-2\"></i><span [translate]=\"'Tables.AddColumn'\"></span>\n              </button>\n            </div>\n            <div class=\"mt-3\">\n              <button [disabled]=\"!(selectedColumnsControl.value && selectedColumnsControl.value.length)\" (click)=\"removeColumns()\" type=\"button\" class=\"btn btn-secondary btn-block\">\n                <i class=\"fas fa-minus mr-2\"></i><span [translate]=\"'Tables.RemoveColumn'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-4\">\n            <select [formControl]=\"selectedColumnsControl\" size=\"10\" class=\"form-select form-control\" multiple aria-label=\"multiple select example\">\n              <ng-container *ngIf=\"selectedColumns\">\n                <ng-container *ngFor=\"let column of selectedColumns\">\n                  <option class=\"text-wrap\" [value]=\"column.key\">{{column.title}}</option>\n                </ng-container>\n              </ng-container>\n          </select>\n          <div class=\"d-flex justify-content-center align-items-center\">\n            <div class=\"btn-group mt-4\">\n              <button #moveUpButton (click)=\"moveUp()\" type=\"button\" class=\"btn btn-primary\">\n                <i class=\"fas fa-chevron-up mr-2\"></i><span [translate]=\"'Tables.MoveUp'\"></span>\n              </button>\n              <button #moveDownButton (click)=\"moveDown()\" type=\"button\" class=\"btn btn-primary ml-2\">\n                <i class=\"fas fa-chevron-down mr-2\"></i><span [translate]=\"'Tables.MoveDown'\"></span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n        \n    </div>\n    <div class=\"modal-footer justify-content-end\">\n\n      <button [disabled]=\"okButtonDisabled\" (click)=\"ok()\"\n              type=\"button\" class=\"btn btn-primary\">\n              <i *ngIf=\"changing\" class=\"fa fa-spinner fa-spin mr-1\"></i>\n        {{'OK' | translate}}\n      </button>\n      <button [disabled]=\"cancelButtonDisabled\"\n              (click)=\"cancel()\" type=\"button\" [ngClass]=\"cancelButtonClass\" data-dismiss=\"modal\">\n        {{'Cancel' | translate}}\n      </button>\n    </div>\n  </div>\n  ",
                         encapsulation: i0.ViewEncapsulation.Emulated,
                         styles: ["\n    .form-select {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        padding: 5px;\n    }\n    .form-select * {\n        padding: 5px 5px;\n    }\n    .btn.disabled, .btn:disabled {\n        border-color: transparent !important;\n    }\n    "]
                     }] }
@@ -969,8 +985,7 @@
                 { type: i1$1.Router },
                 { type: i1$1.ActivatedRoute },
                 { type: modal.BsModalRef },
-                { type: i0.ChangeDetectorRef },
-                { type: core.TranslateService }
+                { type: i0.ChangeDetectorRef }
             ];
         };
         ColumnSelectorComponent.propDecorators = {
@@ -2162,113 +2177,141 @@
                         if (order && order.length) {
                             // get order query expression
                             var orderByStr = order.map(function (expr) {
-                                return tableColumns_1[expr.column].name + ' ' + expr.dir || 'asc';
+                                var columnIndex;
+                                if (self.columnOrdering === false) {
+                                    columnIndex = expr.column;
+                                }
+                                else {
+                                    // get the current column order (from colReorder)
+                                    var columnOrder = self.dataTable.colReorder.order();
+                                    // and match the dataTable index to the config columns index
+                                    // expr.column should always be valid (e.g. in range), but perform a minor validation
+                                    if (expr.column >= 0 && expr.column < columnOrder.length) {
+                                        columnIndex = columnOrder[expr.column];
+                                    }
+                                    else {
+                                        // use the first column as a fallback (won't happen, just for safety)
+                                        columnIndex = 0;
+                                    }
+                                }
+                                return tableColumns_1[columnIndex].name + ' ' + expr.dir || 'asc';
                             }).join(',');
                             // set order
                             q.setParam('$orderby', orderByStr);
                         }
-                        // configure $select parameter
-                        var select = self.config.columns.filter(function (column) {
-                            if (column.virtual === true) {
-                                return false;
+                        self.stateLoadCallback(null, function (state) {
+                            // configure $select parameter
+                            var select = self.config.columns.filter(function (column) {
+                                if (column.virtual === true) {
+                                    return false;
+                                }
+                                if (column.optional === true) {
+                                    if (state && state.columns) {
+                                        var index = tableColumns_1.findIndex(function (tableColumn) { return tableColumn.name === column.name; });
+                                        if (index >= 0) {
+                                            return state.columns[index].visible;
+                                        }
+                                    }
+                                    return false;
+                                }
+                                return true;
+                            }).map(function (column) {
+                                if (column.property) {
+                                    return column.name + ' as ' + column.property;
+                                }
+                                else {
+                                    return column.name;
+                                }
+                            });
+                            q.select.apply(q, select);
+                            // configure $filter
+                            if (queryParams.$filter && queryParams.$filter.length) {
+                                // set route filter
+                                var qParams = q.getParams();
+                                q.setParam('$filter', null);
+                                var expressions = [queryParams.$filter];
+                                if (qParams.$filter) {
+                                    expressions.push('(' + qParams.$filter + ')');
+                                }
+                                q.filter(expressions.join(' and '));
                             }
-                            return true;
-                        }).map(function (column) {
-                            if (column.property) {
-                                return column.name + ' as ' + column.property;
+                            // check if query parameters contain filter
+                            if (queryParams.$expand && queryParams.$expand.length) {
+                                // set route $expand
+                                q.setParam('$expand', queryParams.$expand);
                             }
-                            else {
-                                return column.name;
+                            else if (self.config && self.config.defaults && self.config.defaults.expand) {
+                                q.setParam('$expand', self.config.defaults.expand);
                             }
-                        });
-                        q.select.apply(q, select);
-                        // configure $filter
-                        if (queryParams.$filter && queryParams.$filter.length) {
-                            // set route filter
-                            var qParams = q.getParams();
-                            q.setParam('$filter', null);
-                            var expressions = [queryParams.$filter];
-                            if (qParams.$filter) {
-                                expressions.push('(' + qParams.$filter + ')');
+                            if (!q.getParams()['$orderby'] && self.config && self.config.defaults && self.config.defaults.orderBy) {
+                                q.setParam('$orderby', self.config.defaults.orderBy);
                             }
-                            q.filter(expressions.join(' and '));
-                        }
-                        // check if query parameters contain filter
-                        if (queryParams.$expand && queryParams.$expand.length) {
-                            // set route $expand
-                            q.setParam('$expand', queryParams.$expand);
-                        }
-                        else if (self.config && self.config.defaults && self.config.defaults.expand) {
-                            q.setParam('$expand', self.config.defaults.expand);
-                        }
-                        if (!q.getParams()['$orderby'] && self.config && self.config.defaults && self.config.defaults.orderBy) {
-                            q.setParam('$orderby', self.config.defaults.orderBy);
-                        }
-                        if (self.config && self.config.defaults && self.config.defaults.groupBy) {
-                            q.setParam('$groupby', self.config.defaults.groupBy);
-                        }
-                        // append default filter
-                        if (self.config && self.config.defaults && self.config.defaults.filter) {
-                            return self._advancedFilterValueProvider.asyncBuildFilter(self.config.defaults.filter).then(function (defaultFilterString) {
-                                if (defaultFilterString) {
-                                    var qParams = q.getParams();
-                                    q.setParam('$filter', null);
-                                    var expressions = [defaultFilterString];
-                                    if (qParams.$filter) {
-                                        expressions.push('(' + qParams.$filter + ')');
-                                    }
-                                    q.filter(expressions.join(' and '));
-                                }
-                                self.lastQueryParams = q.getParams();
-                                return q.getList().then(function (items) {
-                                    var dataSet = {
-                                        recordsTotal: items.total,
-                                        recordsFiltered: items.total,
-                                        data: items.value,
-                                    };
-                                    self._lastQueryTotalItems = items.total;
-                                    if (items.total === 0) {
-                                        self.resetEmptyTable();
+                            if (self.config && self.config.defaults && self.config.defaults.groupBy) {
+                                q.setParam('$groupby', self.config.defaults.groupBy);
+                            }
+                            // append default filter
+                            if (self.config && self.config.defaults && self.config.defaults.filter) {
+                                return self._advancedFilterValueProvider.asyncBuildFilter(self.config.defaults.filter).then(function (defaultFilterString) {
+                                    if (defaultFilterString) {
+                                        var qParams = q.getParams();
+                                        q.setParam('$filter', null);
+                                        var expressions = [defaultFilterString];
+                                        if (qParams.$filter) {
+                                            expressions.push('(' + qParams.$filter + ')');
+                                        }
+                                        q.filter(expressions.join(' and '));
                                     }
-                                    // emit load event
-                                    self.load.emit(dataSet);
-                                    // return data
-                                    return fnCallback(dataSet);
+                                    self.lastQueryParams = q.getParams();
+                                    return q.getList().then(function (items) {
+                                        var dataSet = {
+                                            recordsTotal: items.total,
+                                            recordsFiltered: items.total,
+                                            data: items.value,
+                                        };
+                                        self._lastQueryTotalItems = items.total;
+                                        if (items.total === 0) {
+                                            self.resetEmptyTable();
+                                        }
+                                        // emit load event
+                                        self.load.emit(dataSet);
+                                        // return data
+                                        return fnCallback(dataSet);
+                                    });
+                                }).catch(function (err) {
+                                    // log error to console
+                                    console.error('TABLES', err);
+                                    // show error
+                                    self.toggleError(err);
+                                    self._lastQueryTotalItems = 0;
+                                    // by returning empty dataset
+                                    self.load.emit(EMPTY_DATASET);
+                                    return fnCallback(EMPTY_DATASET);
                                 });
+                            }
+                            self.lastQueryParams = q.getParams();
+                            q.getList().then(function (items) {
+                                var dataSet = {
+                                    recordsTotal: items.total,
+                                    recordsFiltered: items.total,
+                                    data: items.value,
+                                };
+                                self._lastQueryTotalItems = items.total;
+                                if (items.total === 0) {
+                                    self.resetEmptyTable();
+                                }
+                                // emit load event
+                                self.load.emit(dataSet);
+                                // return data
+                                return fnCallback(dataSet);
                             }).catch(function (err) {
                                 // log error to console
                                 console.error('TABLES', err);
                                 // show error
                                 self.toggleError(err);
-                                self._lastQueryTotalItems = 0;
                                 // by returning empty dataset
                                 self.load.emit(EMPTY_DATASET);
                                 return fnCallback(EMPTY_DATASET);
                             });
-                        }
-                        self.lastQueryParams = q.getParams();
-                        q.getList().then(function (items) {
-                            var dataSet = {
-                                recordsTotal: items.total,
-                                recordsFiltered: items.total,
-                                data: items.value,
-                            };
-                            self._lastQueryTotalItems = items.total;
-                            if (items.total === 0) {
-                                self.resetEmptyTable();
-                            }
-                            // emit load event
-                            self.load.emit(dataSet);
-                            // return data
-                            return fnCallback(dataSet);
-                        }).catch(function (err) {
-                            // log error to console
-                            console.error('TABLES', err);
-                            // show error
-                            self.toggleError(err);
-                            // by returning empty dataset
-                            self.load.emit(EMPTY_DATASET);
-                            return fnCallback(EMPTY_DATASET);
                         });
                     },
                     language: Object.assign({}, self.translator.transform('Tables.DataTable'), { emptyTable: ' ' }),
@@ -2643,12 +2686,8 @@
                     }
                     // finally apply column order
                     _this.dataTable.colReorder.order(indexes, true);
-                    if (_this.selectable) {
-                        // rebind onSelectionChange function
-                        var tableElement = jQuery(_this.table.nativeElement);
-                        var elements = tableElement.find('input.s-row');
-                        elements.off('click').on('click', _this.onSelectionChange.bind(_this));
-                    }
+                    // simply redraw the table
+                    _this.dataTable.draw();
                 }
             });
         };