@universis/ngx-tables 0.8.3 → 0.8.5

package/fesm5/universis-ngx-tables.js

@@ -21,7 +21,7 @@ import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 import { GroupByPipe, NgPipesModule } from 'ngx-pipes';
 import { template, at, cloneDeep } from 'lodash';
 import { __extends, __awaiter, __generator, __values, __assign, __spread } from 'tslib';
-import { Injectable, Directive, Optional, Input, Pipe, Component, ElementRef, ViewChild, ViewEncapsulation, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, defineInjectable, inject, HostListener, ChangeDetectorRef, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
+import { Injectable, Directive, Optional, Input, Pipe, Component, ElementRef, ViewChild, ViewEncapsulation, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, HostListener, defineInjectable, inject, ChangeDetectorRef, InjectionToken, Inject, Injector, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, Router, NavigationStart, NavigationEnd, RouterModule } from '@angular/router';
 import { createFeatureSelector, createSelector, select, Store } from '@ngrx/store';
 import { skip, first, filter } from 'rxjs/operators';
@@ -211,9 +211,11 @@ var ActionLinkFormatter = /** @class */ (function (_super) {
                 }
                 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(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(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(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(TranslateService).instant(x.title) + "\n                        </a>";
             })
                 .join('') + "\n                    </div>\n                </div>";
         }
@@ -529,19 +531,32 @@ var AdvancedFilterValueProvider = /** @class */ (function () {
 
 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 EventEmitter();
         _this.availableColumnsControl = new FormControl();
         _this.selectedColumnsControl = new 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');
     };
@@ -752,9 +767,10 @@ var ColumnSelectorComponent = /** @class */ (function (_super) {
     };
     ColumnSelectorComponent.decorators = [
         { type: 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 [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 [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  ",
-                    encapsulation: ViewEncapsulation.None,
+                    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: 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    "]
                 }] }
     ];
@@ -763,8 +779,7 @@ var ColumnSelectorComponent = /** @class */ (function (_super) {
         { type: Router },
         { type: ActivatedRoute },
         { type: BsModalRef },
-        { type: ChangeDetectorRef },
-        { type: TranslateService }
+        { type: ChangeDetectorRef }
     ]; };
     ColumnSelectorComponent.propDecorators = {
         columns: [{ type: Input }],
@@ -1937,113 +1952,141 @@ var AdvancedTableComponent = /** @class */ (function () {
                     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$$1 = self.config.columns.filter(function (column) {
-                        if (column.virtual === true) {
-                            return false;
+                    self.stateLoadCallback(null, function (state) {
+                        // configure $select parameter
+                        var select$$1 = 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$$1);
+                        // 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$$1);
-                    // 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: ' ' }),
@@ -2418,6 +2461,8 @@ var AdvancedTableComponent = /** @class */ (function () {
                 }
                 // finally apply column order
                 _this.dataTable.colReorder.order(indexes, true);
+                // simply redraw the table
+                _this.dataTable.draw();
             }
         });
     };