@universis/ngx-tables 0.8.2 → 0.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/universis-ngx-tables.umd.js +29 -12
- package/bundles/universis-ngx-tables.umd.js.map +1 -1
- package/bundles/universis-ngx-tables.umd.min.js +1 -1
- package/bundles/universis-ngx-tables.umd.min.js.map +1 -1
- package/esm2015/lib/components/advanced-table/advanced-table.component.js +27 -13
- package/esm2015/lib/components/column-selector/column-selector.component.js +3 -3
- package/esm2015/lib/directives/advance-table-state.directive.js +5 -2
- package/esm5/lib/components/advanced-table/advanced-table.component.js +24 -10
- package/esm5/lib/components/column-selector/column-selector.component.js +3 -3
- package/esm5/lib/directives/advance-table-state.directive.js +5 -2
- package/fesm2015/universis-ngx-tables.js +32 -15
- package/fesm2015/universis-ngx-tables.js.map +1 -1
- package/fesm5/universis-ngx-tables.js +29 -12
- package/fesm5/universis-ngx-tables.js.map +1 -1
- package/package.json +1 -1
- package/universis-ngx-tables.metadata.json +1 -1
|
@@ -753,8 +753,8 @@ var ColumnSelectorComponent = /** @class */ (function (_super) {
|
|
|
753
753
|
ColumnSelectorComponent.decorators = [
|
|
754
754
|
{ type: Component, args: [{
|
|
755
755
|
selector: 'app-column-selector',
|
|
756
|
-
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\">×</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 ",
|
|
757
|
-
encapsulation: ViewEncapsulation.
|
|
756
|
+
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\">×</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 ",
|
|
757
|
+
encapsulation: ViewEncapsulation.Emulated,
|
|
758
758
|
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 "]
|
|
759
759
|
}] }
|
|
760
760
|
];
|
|
@@ -1781,8 +1781,9 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
1781
1781
|
if (_this.dataTable) {
|
|
1782
1782
|
var info = _this.dataTable.page.info();
|
|
1783
1783
|
_this.page.emit(info);
|
|
1784
|
-
if (drawIndex_1 > 1)
|
|
1784
|
+
if (drawIndex_1 > 1) {
|
|
1785
1785
|
return;
|
|
1786
|
+
}
|
|
1786
1787
|
try {
|
|
1787
1788
|
drawIndex_1++;
|
|
1788
1789
|
setTimeout(function () { _this.dataTable.columns.adjust(); }, 1);
|
|
@@ -2361,7 +2362,7 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
2361
2362
|
var index = columnOrder.indexOf(i);
|
|
2362
2363
|
var visible = _this.dataTable.column(index).visible();
|
|
2363
2364
|
// set title for select column
|
|
2364
|
-
if (i
|
|
2365
|
+
if (i === 0 && _this.selectable) {
|
|
2365
2366
|
title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
|
|
2366
2367
|
}
|
|
2367
2368
|
// get column title
|
|
@@ -2395,9 +2396,18 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
2395
2396
|
});
|
|
2396
2397
|
this._columnSelector.selectColumns(columns).then(function (event) {
|
|
2397
2398
|
if (event.result === 'ok') {
|
|
2399
|
+
var sorted = event.columns
|
|
2400
|
+
.map(function (col) {
|
|
2401
|
+
return {
|
|
2402
|
+
key: col.key,
|
|
2403
|
+
index: col.index
|
|
2404
|
+
};
|
|
2405
|
+
})
|
|
2406
|
+
.sort(function (a, b) { return a.index - b.index; });
|
|
2398
2407
|
// get column order e.g. [3, 1, 2, 0, 4]
|
|
2399
|
-
var indexes =
|
|
2400
|
-
|
|
2408
|
+
var indexes = sorted
|
|
2409
|
+
.map(function (item) {
|
|
2410
|
+
return event.columns.findIndex(function (next) { return item.key === next.key; });
|
|
2401
2411
|
});
|
|
2402
2412
|
// reset column visibilty
|
|
2403
2413
|
for (var index = 0; index < event.columns.length; index++) {
|
|
@@ -2408,6 +2418,12 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
2408
2418
|
}
|
|
2409
2419
|
// finally apply column order
|
|
2410
2420
|
_this.dataTable.colReorder.order(indexes, true);
|
|
2421
|
+
if (_this.selectable) {
|
|
2422
|
+
// rebind onSelectionChange function
|
|
2423
|
+
var tableElement = jQuery(_this.table.nativeElement);
|
|
2424
|
+
var elements = tableElement.find('input.s-row');
|
|
2425
|
+
elements.off('click').on('click', _this.onSelectionChange.bind(_this));
|
|
2426
|
+
}
|
|
2411
2427
|
}
|
|
2412
2428
|
});
|
|
2413
2429
|
};
|
|
@@ -2511,12 +2527,10 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
2511
2527
|
cleanupIndexes.push(index);
|
|
2512
2528
|
return false;
|
|
2513
2529
|
}
|
|
2514
|
-
// find item by title
|
|
2515
|
-
var findItem = _this.config.columns.find(function (column) {
|
|
2516
|
-
return column.title && column.title.length && _this._translateService.instant(column.title) === headerItem;
|
|
2517
|
-
});
|
|
2518
2530
|
// exclude hidden columns
|
|
2519
|
-
|
|
2531
|
+
// note: use the datatable visible() function
|
|
2532
|
+
// instead of the hidden config property, to satisfy the column selector
|
|
2533
|
+
if (!_this.dataTable.column(index).visible()) {
|
|
2520
2534
|
cleanupIndexes.push(index);
|
|
2521
2535
|
return false;
|
|
2522
2536
|
}
|
|
@@ -5351,7 +5365,10 @@ var AdvancedTableState = /** @class */ (function () {
|
|
|
5351
5365
|
this.table.stateSave = true;
|
|
5352
5366
|
this.table.stateLoadCallback = function (settings, callback) {
|
|
5353
5367
|
_this.store.pipe(select(selectTable, { id: _this.tableState }), first()).subscribe(function (state) {
|
|
5354
|
-
|
|
5368
|
+
callback(state && state.table);
|
|
5369
|
+
if (state && state.table && state.table.ColReorder) {
|
|
5370
|
+
_this.table.dataTable.colReorder.order(state.table.ColReorder, true);
|
|
5371
|
+
}
|
|
5355
5372
|
});
|
|
5356
5373
|
};
|
|
5357
5374
|
var firstDraw = true;
|