@universis/ngx-tables 0.7.21 → 0.7.25
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 +432 -11
- 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 +72 -3
- package/esm2015/lib/components/advanced-table/advanced-table.interfaces.js +1 -1
- package/esm2015/lib/components/column-selector/column-selector.component.js +190 -0
- package/esm2015/lib/components/column-selector/column-selector.service.js +47 -0
- package/esm2015/lib/directives/advance-table-state.directive.js +1 -1
- package/esm2015/lib/i18n/tables.el.js +12 -2
- package/esm2015/lib/i18n/tables.en.js +12 -2
- package/esm2015/lib/tables.module.js +10 -4
- package/esm2015/public_api.js +3 -1
- package/esm5/lib/components/advanced-table/advanced-table.component.js +73 -3
- package/esm5/lib/components/advanced-table/advanced-table.interfaces.js +1 -1
- package/esm5/lib/components/column-selector/column-selector.component.js +257 -0
- package/esm5/lib/components/column-selector/column-selector.service.js +50 -0
- package/esm5/lib/directives/advance-table-state.directive.js +1 -1
- package/esm5/lib/i18n/tables.el.js +12 -2
- package/esm5/lib/i18n/tables.en.js +12 -2
- package/esm5/lib/tables.module.js +10 -4
- package/esm5/public_api.js +3 -1
- package/fesm2015/universis-ngx-tables.js +328 -10
- package/fesm2015/universis-ngx-tables.js.map +1 -1
- package/fesm5/universis-ngx-tables.js +396 -10
- package/fesm5/universis-ngx-tables.js.map +1 -1
- package/lib/components/advanced-table/advanced-table.component.d.ts +6 -1
- package/lib/components/advanced-table/advanced-table.interfaces.d.ts +2 -0
- package/lib/components/column-selector/column-selector.component.d.ts +37 -0
- package/lib/components/column-selector/column-selector.service.d.ts +19 -0
- package/lib/i18n/tables.el.d.ts +10 -0
- package/lib/i18n/tables.en.d.ts +10 -0
- package/package.json +3 -2
- package/public_api.d.ts +2 -0
- package/universis-ngx-tables.metadata.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('datatables.net-scroller'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('lodash'), require('@angular/core'), require('@angular/router'), require('@ngrx/store'), require('rxjs/operators')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'datatables.net-scroller', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes', 'lodash', '@angular/core', '@angular/router', '@ngrx/store', 'rxjs/operators'], factory) :
|
|
4
|
-
(factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.modal,global.progressbar,global.ngxPipes,global.lodash,global.ng.core,global.ng.router,global.store,global.rxjs.operators));
|
|
5
|
-
}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,datatables_netScroller,combineLatest,http,client,i1,common,core,forms,i2,routing,forms$1,angularFormio,modal,progressbar,ngxPipes,lodash,i0,i1$1,store,operators) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('iso-639-1/build'), require('rxjs'), require('jquery'), require('datatables.net'), require('datatables.net-scroller'), require('datatables.net-colreorder'), require('rxjs/add/observable/combineLatest'), require('@angular/common/http'), require('@themost/client'), require('@themost/angular'), require('@angular/common'), require('@ngx-translate/core'), require('@angular/forms'), require('@universis/common'), require('@universis/common/routing'), require('@universis/forms'), require('angular-formio'), require('ngx-bootstrap/modal'), require('ngx-bootstrap/progressbar'), require('ngx-pipes'), require('lodash'), require('@angular/core'), require('@angular/router'), require('@ngrx/store'), require('rxjs/operators')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('@universis/ngx-tables', ['exports', 'iso-639-1/build', 'rxjs', 'jquery', 'datatables.net', 'datatables.net-scroller', 'datatables.net-colreorder', 'rxjs/add/observable/combineLatest', '@angular/common/http', '@themost/client', '@themost/angular', '@angular/common', '@ngx-translate/core', '@angular/forms', '@universis/common', '@universis/common/routing', '@universis/forms', 'angular-formio', 'ngx-bootstrap/modal', 'ngx-bootstrap/progressbar', 'ngx-pipes', 'lodash', '@angular/core', '@angular/router', '@ngrx/store', 'rxjs/operators'], factory) :
|
|
4
|
+
(factory((global.universis = global.universis || {}, global.universis['ngx-tables'] = {}),global.ISO6391,global.rxjs,global.jQuery_,null,null,null,global.rxjs['add/observable/combineLatest'],global.ng.common.http,global.client,global.i1,global.ng.common,global.core,global.ng.forms,global.i2,global.routing,global.forms$1,global.angularFormio,global.modal,global.progressbar,global.ngxPipes,global.lodash,global.ng.core,global.ng.router,global.store,global.rxjs.operators));
|
|
5
|
+
}(this, (function (exports,ISO6391,rxjs,jQuery_,datatables_net,datatables_netScroller,datatables_netColreorder,combineLatest,http,client,i1,common,core,forms,i2,routing,forms$1,angularFormio,modal,progressbar,ngxPipes,lodash,i0,i1$1,store,operators) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/*! *****************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -697,6 +697,333 @@
|
|
|
697
697
|
return AdvancedFilterValueProvider;
|
|
698
698
|
}());
|
|
699
699
|
|
|
700
|
+
var ColumnSelectorComponent = /** @class */ (function (_super) {
|
|
701
|
+
__extends(ColumnSelectorComponent, _super);
|
|
702
|
+
function ColumnSelectorComponent(router, activatedRoute, _modalRef, ref, _translateService) {
|
|
703
|
+
var _this = _super.call(this, router, activatedRoute) || this;
|
|
704
|
+
_this._modalRef = _modalRef;
|
|
705
|
+
_this.ref = ref;
|
|
706
|
+
_this._translateService = _translateService;
|
|
707
|
+
_this.dismiss = new i0.EventEmitter();
|
|
708
|
+
_this.availableColumnsControl = new forms.FormControl();
|
|
709
|
+
_this.selectedColumnsControl = new forms.FormControl();
|
|
710
|
+
return _this;
|
|
711
|
+
}
|
|
712
|
+
ColumnSelectorComponent.prototype.ok = function () {
|
|
713
|
+
this._modalRef.hide();
|
|
714
|
+
this.applyChanges();
|
|
715
|
+
this.dismiss.emit('ok');
|
|
716
|
+
return Promise.resolve('ok');
|
|
717
|
+
};
|
|
718
|
+
ColumnSelectorComponent.prototype.cancel = function () {
|
|
719
|
+
this._modalRef.hide();
|
|
720
|
+
this.dismiss.emit('cancel');
|
|
721
|
+
return Promise.resolve('cancel');
|
|
722
|
+
};
|
|
723
|
+
ColumnSelectorComponent.prototype.ngOnChanges = function (changes) {
|
|
724
|
+
//
|
|
725
|
+
};
|
|
726
|
+
ColumnSelectorComponent.prototype.ngOnDestroy = function () {
|
|
727
|
+
//
|
|
728
|
+
};
|
|
729
|
+
ColumnSelectorComponent.prototype.ngOnInit = function () {
|
|
730
|
+
if (Array.isArray(this.columns)) {
|
|
731
|
+
this.selectedColumns = this.columns.filter(function (item) {
|
|
732
|
+
return item.visible;
|
|
733
|
+
}).sort(function (a, b) {
|
|
734
|
+
if (a.index < b.index) {
|
|
735
|
+
return -1;
|
|
736
|
+
}
|
|
737
|
+
if (a.index > b.index) {
|
|
738
|
+
return 1;
|
|
739
|
+
}
|
|
740
|
+
return 0;
|
|
741
|
+
}).map(function (item) {
|
|
742
|
+
return {
|
|
743
|
+
key: item.key,
|
|
744
|
+
title: item.title
|
|
745
|
+
};
|
|
746
|
+
});
|
|
747
|
+
}
|
|
748
|
+
};
|
|
749
|
+
ColumnSelectorComponent.prototype.applyChanges = function () {
|
|
750
|
+
var e_1, _a;
|
|
751
|
+
var moveIndex = this.selectedColumns.length - 1;
|
|
752
|
+
var _loop_1 = function (column) {
|
|
753
|
+
var findIndex = this_1.selectedColumns.findIndex(function (item) {
|
|
754
|
+
return item.key === column.key;
|
|
755
|
+
});
|
|
756
|
+
if (findIndex < 0) {
|
|
757
|
+
column.visible = false;
|
|
758
|
+
moveIndex += 1;
|
|
759
|
+
column.index = moveIndex;
|
|
760
|
+
}
|
|
761
|
+
else {
|
|
762
|
+
column.visible = true;
|
|
763
|
+
column.index = findIndex;
|
|
764
|
+
}
|
|
765
|
+
};
|
|
766
|
+
var this_1 = this;
|
|
767
|
+
try {
|
|
768
|
+
for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
769
|
+
var column = _c.value;
|
|
770
|
+
_loop_1(column);
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
catch (e_1_1) {
|
|
774
|
+
e_1 = { error: e_1_1 };
|
|
775
|
+
}
|
|
776
|
+
finally {
|
|
777
|
+
try {
|
|
778
|
+
if (_c && !_c.done && (_a = _b.return))
|
|
779
|
+
_a.call(_b);
|
|
780
|
+
}
|
|
781
|
+
finally {
|
|
782
|
+
if (e_1)
|
|
783
|
+
throw e_1.error;
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
};
|
|
787
|
+
ColumnSelectorComponent.prototype.removeColumns = function () {
|
|
788
|
+
var e_2, _a;
|
|
789
|
+
var selected = this.selectedColumnsControl.value;
|
|
790
|
+
if (selected.length > 0) {
|
|
791
|
+
var _loop_2 = function (value) {
|
|
792
|
+
var findIndex = this_2.selectedColumns.findIndex(function (item) {
|
|
793
|
+
return item.key === value;
|
|
794
|
+
});
|
|
795
|
+
if (findIndex >= 0) {
|
|
796
|
+
this_2.selectedColumns.splice(findIndex, 1);
|
|
797
|
+
}
|
|
798
|
+
};
|
|
799
|
+
var this_2 = this;
|
|
800
|
+
try {
|
|
801
|
+
for (var selected_1 = __values(selected), selected_1_1 = selected_1.next(); !selected_1_1.done; selected_1_1 = selected_1.next()) {
|
|
802
|
+
var value = selected_1_1.value;
|
|
803
|
+
_loop_2(value);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
catch (e_2_1) {
|
|
807
|
+
e_2 = { error: e_2_1 };
|
|
808
|
+
}
|
|
809
|
+
finally {
|
|
810
|
+
try {
|
|
811
|
+
if (selected_1_1 && !selected_1_1.done && (_a = selected_1.return))
|
|
812
|
+
_a.call(selected_1);
|
|
813
|
+
}
|
|
814
|
+
finally {
|
|
815
|
+
if (e_2)
|
|
816
|
+
throw e_2.error;
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
// reset column
|
|
820
|
+
this.selectedColumnsControl.reset();
|
|
821
|
+
}
|
|
822
|
+
};
|
|
823
|
+
ColumnSelectorComponent.prototype.addColumns = function () {
|
|
824
|
+
var e_3, _a;
|
|
825
|
+
var selected = this.availableColumnsControl.value;
|
|
826
|
+
if (selected.length > 0) {
|
|
827
|
+
var _loop_3 = function (value) {
|
|
828
|
+
var findColumn = this_3.columns.find(function (item) {
|
|
829
|
+
return item.key === value;
|
|
830
|
+
});
|
|
831
|
+
if (findColumn) {
|
|
832
|
+
var findIndex = this_3.selectedColumns.findIndex(function (item) {
|
|
833
|
+
return item.key === value;
|
|
834
|
+
});
|
|
835
|
+
if (findIndex < 0) {
|
|
836
|
+
this_3.selectedColumns.push({
|
|
837
|
+
key: findColumn.key,
|
|
838
|
+
title: findColumn.title
|
|
839
|
+
});
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
};
|
|
843
|
+
var this_3 = this;
|
|
844
|
+
try {
|
|
845
|
+
for (var selected_2 = __values(selected), selected_2_1 = selected_2.next(); !selected_2_1.done; selected_2_1 = selected_2.next()) {
|
|
846
|
+
var value = selected_2_1.value;
|
|
847
|
+
_loop_3(value);
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
catch (e_3_1) {
|
|
851
|
+
e_3 = { error: e_3_1 };
|
|
852
|
+
}
|
|
853
|
+
finally {
|
|
854
|
+
try {
|
|
855
|
+
if (selected_2_1 && !selected_2_1.done && (_a = selected_2.return))
|
|
856
|
+
_a.call(selected_2);
|
|
857
|
+
}
|
|
858
|
+
finally {
|
|
859
|
+
if (e_3)
|
|
860
|
+
throw e_3.error;
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
// find the last index of the selected items
|
|
864
|
+
var lastSelectedIndex = this.columns.findIndex(function (item) {
|
|
865
|
+
return item.key === selected[selected.length - 1];
|
|
866
|
+
});
|
|
867
|
+
// reset control
|
|
868
|
+
this.availableColumnsControl.reset();
|
|
869
|
+
if (lastSelectedIndex > -1 && lastSelectedIndex < this.columns.length - 1) {
|
|
870
|
+
this.availableColumnsControl.patchValue([
|
|
871
|
+
this.columns[lastSelectedIndex + 1].key
|
|
872
|
+
]);
|
|
873
|
+
}
|
|
874
|
+
}
|
|
875
|
+
};
|
|
876
|
+
ColumnSelectorComponent.prototype.moveUp = function () {
|
|
877
|
+
var e_4, _a;
|
|
878
|
+
this.moveUpButton.nativeElement.disabled = true;
|
|
879
|
+
var selected = this.selectedColumnsControl.value;
|
|
880
|
+
if (selected.length > 0) {
|
|
881
|
+
var _loop_4 = function (value) {
|
|
882
|
+
var findIndex = this_4.selectedColumns.findIndex(function (item) {
|
|
883
|
+
return item.key === value;
|
|
884
|
+
});
|
|
885
|
+
if (findIndex > 0) {
|
|
886
|
+
var column = this_4.selectedColumns[findIndex];
|
|
887
|
+
this_4.selectedColumns.splice(findIndex, 1);
|
|
888
|
+
this_4.selectedColumns.splice(findIndex - 1, 0, column);
|
|
889
|
+
}
|
|
890
|
+
};
|
|
891
|
+
var this_4 = this;
|
|
892
|
+
try {
|
|
893
|
+
for (var selected_3 = __values(selected), selected_3_1 = selected_3.next(); !selected_3_1.done; selected_3_1 = selected_3.next()) {
|
|
894
|
+
var value = selected_3_1.value;
|
|
895
|
+
_loop_4(value);
|
|
896
|
+
}
|
|
897
|
+
}
|
|
898
|
+
catch (e_4_1) {
|
|
899
|
+
e_4 = { error: e_4_1 };
|
|
900
|
+
}
|
|
901
|
+
finally {
|
|
902
|
+
try {
|
|
903
|
+
if (selected_3_1 && !selected_3_1.done && (_a = selected_3.return))
|
|
904
|
+
_a.call(selected_3);
|
|
905
|
+
}
|
|
906
|
+
finally {
|
|
907
|
+
if (e_4)
|
|
908
|
+
throw e_4.error;
|
|
909
|
+
}
|
|
910
|
+
}
|
|
911
|
+
}
|
|
912
|
+
this.moveUpButton.nativeElement.disabled = false;
|
|
913
|
+
};
|
|
914
|
+
ColumnSelectorComponent.prototype.moveDown = function () {
|
|
915
|
+
var e_5, _a;
|
|
916
|
+
this.moveDownButton.nativeElement.disabled = true;
|
|
917
|
+
var selected = this.selectedColumnsControl.value;
|
|
918
|
+
if (selected.length > 0) {
|
|
919
|
+
var _loop_5 = function (value) {
|
|
920
|
+
var findIndex = this_5.selectedColumns.findIndex(function (item) {
|
|
921
|
+
return item.key === value;
|
|
922
|
+
});
|
|
923
|
+
var length_1 = this_5.columns.length;
|
|
924
|
+
if (findIndex >= 0 && findIndex < length_1) {
|
|
925
|
+
var column = this_5.selectedColumns[findIndex];
|
|
926
|
+
this_5.selectedColumns.splice(findIndex, 1);
|
|
927
|
+
this_5.selectedColumns.splice(findIndex + 1, 0, column);
|
|
928
|
+
}
|
|
929
|
+
};
|
|
930
|
+
var this_5 = this;
|
|
931
|
+
try {
|
|
932
|
+
for (var selected_4 = __values(selected), selected_4_1 = selected_4.next(); !selected_4_1.done; selected_4_1 = selected_4.next()) {
|
|
933
|
+
var value = selected_4_1.value;
|
|
934
|
+
_loop_5(value);
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
catch (e_5_1) {
|
|
938
|
+
e_5 = { error: e_5_1 };
|
|
939
|
+
}
|
|
940
|
+
finally {
|
|
941
|
+
try {
|
|
942
|
+
if (selected_4_1 && !selected_4_1.done && (_a = selected_4.return))
|
|
943
|
+
_a.call(selected_4);
|
|
944
|
+
}
|
|
945
|
+
finally {
|
|
946
|
+
if (e_5)
|
|
947
|
+
throw e_5.error;
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
this.moveDownButton.nativeElement.disabled = false;
|
|
952
|
+
};
|
|
953
|
+
ColumnSelectorComponent.decorators = [
|
|
954
|
+
{ type: i0.Component, args: [{
|
|
955
|
+
selector: 'app-column-selector',
|
|
956
|
+
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 ",
|
|
957
|
+
encapsulation: i0.ViewEncapsulation.None,
|
|
958
|
+
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 "]
|
|
959
|
+
}] }
|
|
960
|
+
];
|
|
961
|
+
/** @nocollapse */
|
|
962
|
+
ColumnSelectorComponent.ctorParameters = function () {
|
|
963
|
+
return [
|
|
964
|
+
{ type: i1$1.Router },
|
|
965
|
+
{ type: i1$1.ActivatedRoute },
|
|
966
|
+
{ type: modal.BsModalRef },
|
|
967
|
+
{ type: i0.ChangeDetectorRef },
|
|
968
|
+
{ type: core.TranslateService }
|
|
969
|
+
];
|
|
970
|
+
};
|
|
971
|
+
ColumnSelectorComponent.propDecorators = {
|
|
972
|
+
columns: [{ type: i0.Input }],
|
|
973
|
+
selectedColumns: [{ type: i0.Input }],
|
|
974
|
+
moveUpButton: [{ type: i0.ViewChild, args: ['moveUpButton',] }],
|
|
975
|
+
moveDownButton: [{ type: i0.ViewChild, args: ['moveDownButton',] }]
|
|
976
|
+
};
|
|
977
|
+
return ColumnSelectorComponent;
|
|
978
|
+
}(routing.RouterModalOkCancel));
|
|
979
|
+
|
|
980
|
+
var ColumnSelectorService = /** @class */ (function () {
|
|
981
|
+
function ColumnSelectorService(_modal) {
|
|
982
|
+
this._modal = _modal;
|
|
983
|
+
//
|
|
984
|
+
}
|
|
985
|
+
ColumnSelectorService.prototype.selectColumns = function (columns) {
|
|
986
|
+
var _this = this;
|
|
987
|
+
return new Promise(function (resolve, reject) {
|
|
988
|
+
try {
|
|
989
|
+
var modalRef = _this._modal.openModalComponent(ColumnSelectorComponent, {
|
|
990
|
+
class: 'modal-lg modal-table',
|
|
991
|
+
ignoreBackdropClick: true,
|
|
992
|
+
animated: true,
|
|
993
|
+
initialState: {
|
|
994
|
+
columns: columns,
|
|
995
|
+
}
|
|
996
|
+
});
|
|
997
|
+
var componentRef_1 = modalRef.content;
|
|
998
|
+
componentRef_1.dismiss.subscribe(function (result) {
|
|
999
|
+
if (result === 'ok') {
|
|
1000
|
+
return resolve({
|
|
1001
|
+
result: result,
|
|
1002
|
+
columns: componentRef_1.columns
|
|
1003
|
+
});
|
|
1004
|
+
}
|
|
1005
|
+
return resolve({
|
|
1006
|
+
result: result
|
|
1007
|
+
});
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
1010
|
+
catch (err) {
|
|
1011
|
+
return reject(err);
|
|
1012
|
+
}
|
|
1013
|
+
});
|
|
1014
|
+
};
|
|
1015
|
+
ColumnSelectorService.decorators = [
|
|
1016
|
+
{ type: i0.Injectable }
|
|
1017
|
+
];
|
|
1018
|
+
/** @nocollapse */
|
|
1019
|
+
ColumnSelectorService.ctorParameters = function () {
|
|
1020
|
+
return [
|
|
1021
|
+
{ type: i2.ModalService }
|
|
1022
|
+
];
|
|
1023
|
+
};
|
|
1024
|
+
return ColumnSelectorService;
|
|
1025
|
+
}());
|
|
1026
|
+
|
|
700
1027
|
// restore jquery import to avoid Cannot call a namespace ('jquery') error
|
|
701
1028
|
var jQuery = jQuery_;
|
|
702
1029
|
var DataTablesApi = jQuery.fn.dataTable.Api;
|
|
@@ -753,7 +1080,7 @@
|
|
|
753
1080
|
return (Number(String(Math.random()).slice(2))).toString(36);
|
|
754
1081
|
}
|
|
755
1082
|
var AdvancedTableComponent = /** @class */ (function () {
|
|
756
|
-
function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
|
|
1083
|
+
function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
|
|
757
1084
|
var _this = this;
|
|
758
1085
|
this._context = _context;
|
|
759
1086
|
this._columnFormatters = _columnFormatters;
|
|
@@ -765,6 +1092,7 @@
|
|
|
765
1092
|
this._template = _template;
|
|
766
1093
|
this._loading = _loading;
|
|
767
1094
|
this._http = _http;
|
|
1095
|
+
this._columnSelector = _columnSelector;
|
|
768
1096
|
this._firstLoad = true;
|
|
769
1097
|
this._showFooter = true;
|
|
770
1098
|
this._showHeader = true;
|
|
@@ -789,6 +1117,7 @@
|
|
|
789
1117
|
this.lengthMenu = [50, 100, 200, 500];
|
|
790
1118
|
this.paging = true;
|
|
791
1119
|
this.pageLength = 25;
|
|
1120
|
+
this.columnOrdering = false;
|
|
792
1121
|
this.stateSave = false;
|
|
793
1122
|
this.scrollY = 800;
|
|
794
1123
|
this.scrollX = true;
|
|
@@ -1423,6 +1752,7 @@
|
|
|
1423
1752
|
serverSide: this.serverSide,
|
|
1424
1753
|
// enumerate table columns
|
|
1425
1754
|
columns: tableColumns_1,
|
|
1755
|
+
colReorder: this.columnOrdering,
|
|
1426
1756
|
order: [],
|
|
1427
1757
|
// set scroll x
|
|
1428
1758
|
scrollX: this.scrollX,
|
|
@@ -1857,6 +2187,69 @@
|
|
|
1857
2187
|
this.autoLoad = !!load;
|
|
1858
2188
|
this.ngOnInit();
|
|
1859
2189
|
};
|
|
2190
|
+
AdvancedTableComponent.prototype.selectColumns = function () {
|
|
2191
|
+
var _this = this;
|
|
2192
|
+
// get column order e.g. [0, 4, 1, 2, 3]
|
|
2193
|
+
var columnOrder = this.dataTable.colReorder.order();
|
|
2194
|
+
// get column definitions
|
|
2195
|
+
var columnDefs = this.dataTable.settings().init().columns;
|
|
2196
|
+
var columns = columnDefs.map(function (columnDef, i) {
|
|
2197
|
+
var key = "column-" + i;
|
|
2198
|
+
var title = columnDef.title;
|
|
2199
|
+
// get column index
|
|
2200
|
+
var index = columnOrder.indexOf(i);
|
|
2201
|
+
var visible = _this.dataTable.column(index).visible();
|
|
2202
|
+
// set title for select column
|
|
2203
|
+
if (i == 0 && _this.selectable) {
|
|
2204
|
+
title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
|
|
2205
|
+
}
|
|
2206
|
+
// get column title
|
|
2207
|
+
if (title != null && title.length === 0) {
|
|
2208
|
+
title = null;
|
|
2209
|
+
}
|
|
2210
|
+
if (title == null) {
|
|
2211
|
+
// try to find column placeholder
|
|
2212
|
+
var placeholder = null;
|
|
2213
|
+
if (_this.selectable) {
|
|
2214
|
+
if (i > 0) {
|
|
2215
|
+
placeholder = _this.config.columns[i - 1].placeholder;
|
|
2216
|
+
}
|
|
2217
|
+
}
|
|
2218
|
+
else {
|
|
2219
|
+
placeholder = _this.config.columns[i].placeholder;
|
|
2220
|
+
}
|
|
2221
|
+
if (placeholder != null) {
|
|
2222
|
+
title = '<' + _this._translateService.instant(placeholder) + '>';
|
|
2223
|
+
}
|
|
2224
|
+
}
|
|
2225
|
+
if (title == null) {
|
|
2226
|
+
title = '<' + _this._translateService.instant('Tables.UnknownColumn') + '>';
|
|
2227
|
+
}
|
|
2228
|
+
return {
|
|
2229
|
+
key: key,
|
|
2230
|
+
title: title,
|
|
2231
|
+
visible: visible,
|
|
2232
|
+
index: index
|
|
2233
|
+
};
|
|
2234
|
+
});
|
|
2235
|
+
this._columnSelector.selectColumns(columns).then(function (event) {
|
|
2236
|
+
if (event.result === 'ok') {
|
|
2237
|
+
// get column order e.g. [3, 1, 2, 0, 4]
|
|
2238
|
+
var indexes = event.columns.map(function (item) {
|
|
2239
|
+
return item.index;
|
|
2240
|
+
});
|
|
2241
|
+
// reset column visibilty
|
|
2242
|
+
for (var index = 0; index < event.columns.length; index++) {
|
|
2243
|
+
var element = event.columns[index];
|
|
2244
|
+
var colIndex = columnOrder.indexOf(index);
|
|
2245
|
+
// set visibilty with redraw (=true)
|
|
2246
|
+
_this.dataTable.column(colIndex).visible(element.visible, true);
|
|
2247
|
+
}
|
|
2248
|
+
// finally apply column order
|
|
2249
|
+
_this.dataTable.colReorder.order(indexes, true);
|
|
2250
|
+
}
|
|
2251
|
+
});
|
|
2252
|
+
};
|
|
1860
2253
|
AdvancedTableComponent.decorators = [
|
|
1861
2254
|
{ type: i0.Component, args: [{
|
|
1862
2255
|
// tslint:disable-next-line: component-selector
|
|
@@ -1878,7 +2271,8 @@
|
|
|
1878
2271
|
{ type: i0.ElementRef },
|
|
1879
2272
|
{ type: i2.TemplatePipe },
|
|
1880
2273
|
{ type: i2.LoadingService },
|
|
1881
|
-
{ type: http.HttpClient }
|
|
2274
|
+
{ type: http.HttpClient },
|
|
2275
|
+
{ type: ColumnSelectorService }
|
|
1882
2276
|
];
|
|
1883
2277
|
};
|
|
1884
2278
|
AdvancedTableComponent.propDecorators = {
|
|
@@ -1902,6 +2296,7 @@
|
|
|
1902
2296
|
lengthMenu: [{ type: i0.Input }],
|
|
1903
2297
|
paging: [{ type: i0.Input }],
|
|
1904
2298
|
pageLength: [{ type: i0.Input }],
|
|
2299
|
+
columnOrdering: [{ type: i0.Input }],
|
|
1905
2300
|
stateSave: [{ type: i0.Input }],
|
|
1906
2301
|
stateLoadCallback: [{ type: i0.Input }],
|
|
1907
2302
|
stateSaveCallback: [{ type: i0.Input }],
|
|
@@ -4776,7 +5171,17 @@
|
|
|
4776
5171
|
"CompletedWithSuccess": {
|
|
4777
5172
|
"Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
|
|
4778
5173
|
}
|
|
4779
|
-
}
|
|
5174
|
+
},
|
|
5175
|
+
"SelectColumns": "Επιλογή στηλών",
|
|
5176
|
+
"MoveUp": "Επάνω",
|
|
5177
|
+
"MoveDown": "Κάτω",
|
|
5178
|
+
"AddColumn": "Επιλογή",
|
|
5179
|
+
"RemoveColumn": "Αφαίρεση",
|
|
5180
|
+
"SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
|
|
5181
|
+
"MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
|
|
5182
|
+
"UnknownColumn": "Άγνωστο",
|
|
5183
|
+
"SelectColumn": "Επιλογή",
|
|
5184
|
+
"ActionLinkColumn": "Ενέργειες"
|
|
4780
5185
|
},
|
|
4781
5186
|
"TrueFalse": {
|
|
4782
5187
|
"long": {
|
|
@@ -4885,7 +5290,17 @@
|
|
|
4885
5290
|
"CompletedWithSuccess": {
|
|
4886
5291
|
"Title": "The operation was completed successfully."
|
|
4887
5292
|
}
|
|
4888
|
-
}
|
|
5293
|
+
},
|
|
5294
|
+
"SelectColumns": "Select columns",
|
|
5295
|
+
"MoveUp": "Move up",
|
|
5296
|
+
"MoveDown": "Move down",
|
|
5297
|
+
"AddColumn": "Add",
|
|
5298
|
+
"RemoveColumn": "Remove",
|
|
5299
|
+
"SelectColumnHelp": "Select one or more columns and press 'Add' button to include them in table. Use 'Remove' button to exclude one or more columns from view.",
|
|
5300
|
+
"MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
|
|
5301
|
+
"UnknownColumn": "Unknown",
|
|
5302
|
+
"SelectColumn": "Select",
|
|
5303
|
+
"ActionLinkColumn": "Actions"
|
|
4889
5304
|
},
|
|
4890
5305
|
"TrueFalse": {
|
|
4891
5306
|
"long": {
|
|
@@ -5251,6 +5666,7 @@
|
|
|
5251
5666
|
AdvancedSearchConfigurationResolver,
|
|
5252
5667
|
AdvancedSelectService,
|
|
5253
5668
|
AdvancedAggregatorService,
|
|
5669
|
+
ColumnSelectorService,
|
|
5254
5670
|
ngxPipes.GroupByPipe
|
|
5255
5671
|
],
|
|
5256
5672
|
declarations: [
|
|
@@ -5274,7 +5690,8 @@
|
|
|
5274
5690
|
AddItemsComponent,
|
|
5275
5691
|
AdvancedSearchState,
|
|
5276
5692
|
AdvancedTableState,
|
|
5277
|
-
AdvancedSearchRouterState
|
|
5693
|
+
AdvancedSearchRouterState,
|
|
5694
|
+
ColumnSelectorComponent
|
|
5278
5695
|
],
|
|
5279
5696
|
exports: [
|
|
5280
5697
|
AdvancedTableComponent,
|
|
@@ -5293,14 +5710,16 @@
|
|
|
5293
5710
|
AddItemsComponent,
|
|
5294
5711
|
AdvancedSearchState,
|
|
5295
5712
|
AdvancedTableState,
|
|
5296
|
-
AdvancedSearchRouterState
|
|
5713
|
+
AdvancedSearchRouterState,
|
|
5714
|
+
ColumnSelectorComponent
|
|
5297
5715
|
],
|
|
5298
5716
|
entryComponents: [
|
|
5299
5717
|
AdvancedTableModalBaseComponent,
|
|
5300
5718
|
AdvancedTableSettingsComponent,
|
|
5301
5719
|
AdvancedRowActionComponent,
|
|
5302
5720
|
AdvancedSelectComponent,
|
|
5303
|
-
AddItemsComponent
|
|
5721
|
+
AddItemsComponent,
|
|
5722
|
+
ColumnSelectorComponent
|
|
5304
5723
|
],
|
|
5305
5724
|
schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
|
|
5306
5725
|
},] }
|
|
@@ -5370,6 +5789,8 @@
|
|
|
5370
5789
|
exports.TablesModule = TablesModule;
|
|
5371
5790
|
exports.ɵ0 = ɵ0;
|
|
5372
5791
|
exports.ActivatedTableService = ActivatedTableService;
|
|
5792
|
+
exports.ColumnSelectorService = ColumnSelectorService;
|
|
5793
|
+
exports.ColumnSelectorComponent = ColumnSelectorComponent;
|
|
5373
5794
|
exports.initialState = initialState;
|
|
5374
5795
|
exports.tableInitialState = tableInitialState;
|
|
5375
5796
|
exports.tableReducer = tableReducer;
|