@universis/ngx-tables 0.7.21 → 0.7.23
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 +430 -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 +11 -2
- package/esm2015/lib/i18n/tables.en.js +11 -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 +11 -2
- package/esm5/lib/i18n/tables.en.js +11 -2
- package/esm5/lib/tables.module.js +10 -4
- package/esm5/public_api.js +3 -1
- package/fesm2015/universis-ngx-tables.js +326 -10
- package/fesm2015/universis-ngx-tables.js.map +1 -1
- package/fesm5/universis-ngx-tables.js +394 -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 +9 -0
- package/lib/i18n/tables.en.d.ts +9 -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,16 @@
|
|
|
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": "Επιλογή"
|
|
4780
5184
|
},
|
|
4781
5185
|
"TrueFalse": {
|
|
4782
5186
|
"long": {
|
|
@@ -4885,7 +5289,16 @@
|
|
|
4885
5289
|
"CompletedWithSuccess": {
|
|
4886
5290
|
"Title": "The operation was completed successfully."
|
|
4887
5291
|
}
|
|
4888
|
-
}
|
|
5292
|
+
},
|
|
5293
|
+
"SelectColumns": "Select columns",
|
|
5294
|
+
"MoveUp": "Move up",
|
|
5295
|
+
"MoveDown": "Move down",
|
|
5296
|
+
"AddColumn": "Add",
|
|
5297
|
+
"RemoveColumn": "Remove",
|
|
5298
|
+
"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.",
|
|
5299
|
+
"MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
|
|
5300
|
+
"UnknownColumn": "Unknown",
|
|
5301
|
+
"SelectColumn": "Select"
|
|
4889
5302
|
},
|
|
4890
5303
|
"TrueFalse": {
|
|
4891
5304
|
"long": {
|
|
@@ -5251,6 +5664,7 @@
|
|
|
5251
5664
|
AdvancedSearchConfigurationResolver,
|
|
5252
5665
|
AdvancedSelectService,
|
|
5253
5666
|
AdvancedAggregatorService,
|
|
5667
|
+
ColumnSelectorService,
|
|
5254
5668
|
ngxPipes.GroupByPipe
|
|
5255
5669
|
],
|
|
5256
5670
|
declarations: [
|
|
@@ -5274,7 +5688,8 @@
|
|
|
5274
5688
|
AddItemsComponent,
|
|
5275
5689
|
AdvancedSearchState,
|
|
5276
5690
|
AdvancedTableState,
|
|
5277
|
-
AdvancedSearchRouterState
|
|
5691
|
+
AdvancedSearchRouterState,
|
|
5692
|
+
ColumnSelectorComponent
|
|
5278
5693
|
],
|
|
5279
5694
|
exports: [
|
|
5280
5695
|
AdvancedTableComponent,
|
|
@@ -5293,14 +5708,16 @@
|
|
|
5293
5708
|
AddItemsComponent,
|
|
5294
5709
|
AdvancedSearchState,
|
|
5295
5710
|
AdvancedTableState,
|
|
5296
|
-
AdvancedSearchRouterState
|
|
5711
|
+
AdvancedSearchRouterState,
|
|
5712
|
+
ColumnSelectorComponent
|
|
5297
5713
|
],
|
|
5298
5714
|
entryComponents: [
|
|
5299
5715
|
AdvancedTableModalBaseComponent,
|
|
5300
5716
|
AdvancedTableSettingsComponent,
|
|
5301
5717
|
AdvancedRowActionComponent,
|
|
5302
5718
|
AdvancedSelectComponent,
|
|
5303
|
-
AddItemsComponent
|
|
5719
|
+
AddItemsComponent,
|
|
5720
|
+
ColumnSelectorComponent
|
|
5304
5721
|
],
|
|
5305
5722
|
schemas: [i0.CUSTOM_ELEMENTS_SCHEMA]
|
|
5306
5723
|
},] }
|
|
@@ -5370,6 +5787,8 @@
|
|
|
5370
5787
|
exports.TablesModule = TablesModule;
|
|
5371
5788
|
exports.ɵ0 = ɵ0;
|
|
5372
5789
|
exports.ActivatedTableService = ActivatedTableService;
|
|
5790
|
+
exports.ColumnSelectorService = ColumnSelectorService;
|
|
5791
|
+
exports.ColumnSelectorComponent = ColumnSelectorComponent;
|
|
5373
5792
|
exports.initialState = initialState;
|
|
5374
5793
|
exports.tableInitialState = tableInitialState;
|
|
5375
5794
|
exports.tableReducer = tableReducer;
|