@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
|
@@ -958,8 +958,8 @@
|
|
|
958
958
|
ColumnSelectorComponent.decorators = [
|
|
959
959
|
{ type: i0.Component, args: [{
|
|
960
960
|
selector: 'app-column-selector',
|
|
961
|
-
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 ",
|
|
962
|
-
encapsulation: i0.ViewEncapsulation.
|
|
961
|
+
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 ",
|
|
962
|
+
encapsulation: i0.ViewEncapsulation.Emulated,
|
|
963
963
|
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 "]
|
|
964
964
|
}] }
|
|
965
965
|
];
|
|
@@ -2006,8 +2006,9 @@
|
|
|
2006
2006
|
if (_this.dataTable) {
|
|
2007
2007
|
var info = _this.dataTable.page.info();
|
|
2008
2008
|
_this.page.emit(info);
|
|
2009
|
-
if (drawIndex_1 > 1)
|
|
2009
|
+
if (drawIndex_1 > 1) {
|
|
2010
2010
|
return;
|
|
2011
|
+
}
|
|
2011
2012
|
try {
|
|
2012
2013
|
drawIndex_1++;
|
|
2013
2014
|
setTimeout(function () { _this.dataTable.columns.adjust(); }, 1);
|
|
@@ -2586,7 +2587,7 @@
|
|
|
2586
2587
|
var index = columnOrder.indexOf(i);
|
|
2587
2588
|
var visible = _this.dataTable.column(index).visible();
|
|
2588
2589
|
// set title for select column
|
|
2589
|
-
if (i
|
|
2590
|
+
if (i === 0 && _this.selectable) {
|
|
2590
2591
|
title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
|
|
2591
2592
|
}
|
|
2592
2593
|
// get column title
|
|
@@ -2620,9 +2621,18 @@
|
|
|
2620
2621
|
});
|
|
2621
2622
|
this._columnSelector.selectColumns(columns).then(function (event) {
|
|
2622
2623
|
if (event.result === 'ok') {
|
|
2624
|
+
var sorted = event.columns
|
|
2625
|
+
.map(function (col) {
|
|
2626
|
+
return {
|
|
2627
|
+
key: col.key,
|
|
2628
|
+
index: col.index
|
|
2629
|
+
};
|
|
2630
|
+
})
|
|
2631
|
+
.sort(function (a, b) { return a.index - b.index; });
|
|
2623
2632
|
// get column order e.g. [3, 1, 2, 0, 4]
|
|
2624
|
-
var indexes =
|
|
2625
|
-
|
|
2633
|
+
var indexes = sorted
|
|
2634
|
+
.map(function (item) {
|
|
2635
|
+
return event.columns.findIndex(function (next) { return item.key === next.key; });
|
|
2626
2636
|
});
|
|
2627
2637
|
// reset column visibilty
|
|
2628
2638
|
for (var index = 0; index < event.columns.length; index++) {
|
|
@@ -2633,6 +2643,12 @@
|
|
|
2633
2643
|
}
|
|
2634
2644
|
// finally apply column order
|
|
2635
2645
|
_this.dataTable.colReorder.order(indexes, true);
|
|
2646
|
+
if (_this.selectable) {
|
|
2647
|
+
// rebind onSelectionChange function
|
|
2648
|
+
var tableElement = jQuery(_this.table.nativeElement);
|
|
2649
|
+
var elements = tableElement.find('input.s-row');
|
|
2650
|
+
elements.off('click').on('click', _this.onSelectionChange.bind(_this));
|
|
2651
|
+
}
|
|
2636
2652
|
}
|
|
2637
2653
|
});
|
|
2638
2654
|
};
|
|
@@ -2737,12 +2753,10 @@
|
|
|
2737
2753
|
cleanupIndexes.push(index);
|
|
2738
2754
|
return false;
|
|
2739
2755
|
}
|
|
2740
|
-
// find item by title
|
|
2741
|
-
var findItem = _this.config.columns.find(function (column) {
|
|
2742
|
-
return column.title && column.title.length && _this._translateService.instant(column.title) === headerItem;
|
|
2743
|
-
});
|
|
2744
2756
|
// exclude hidden columns
|
|
2745
|
-
|
|
2757
|
+
// note: use the datatable visible() function
|
|
2758
|
+
// instead of the hidden config property, to satisfy the column selector
|
|
2759
|
+
if (!_this.dataTable.column(index).visible()) {
|
|
2746
2760
|
cleanupIndexes.push(index);
|
|
2747
2761
|
return false;
|
|
2748
2762
|
}
|
|
@@ -5645,7 +5659,10 @@
|
|
|
5645
5659
|
this.table.stateSave = true;
|
|
5646
5660
|
this.table.stateLoadCallback = function (settings, callback) {
|
|
5647
5661
|
_this.store.pipe(store.select(selectTable, { id: _this.tableState }), operators.first()).subscribe(function (state) {
|
|
5648
|
-
|
|
5662
|
+
callback(state && state.table);
|
|
5663
|
+
if (state && state.table && state.table.ColReorder) {
|
|
5664
|
+
_this.table.dataTable.colReorder.order(state.table.ColReorder, true);
|
|
5665
|
+
}
|
|
5649
5666
|
});
|
|
5650
5667
|
};
|
|
5651
5668
|
var firstDraw = true;
|