@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
|
@@ -2,6 +2,7 @@ import { getNativeName } from 'iso-639-1/build';
|
|
|
2
2
|
import * as jQuery_ from 'jquery';
|
|
3
3
|
import 'datatables.net';
|
|
4
4
|
import 'datatables.net-scroller';
|
|
5
|
+
import 'datatables.net-colreorder';
|
|
5
6
|
import 'rxjs/add/observable/combineLatest';
|
|
6
7
|
import { HttpClient } from '@angular/common/http';
|
|
7
8
|
import { ClientDataQueryable, ResponseError, TextUtils } from '@themost/client';
|
|
@@ -9,8 +10,8 @@ import { BehaviorSubject } from 'rxjs';
|
|
|
9
10
|
import { AngularDataContext } from '@themost/angular';
|
|
10
11
|
import { DatePipe, CommonModule } from '@angular/common';
|
|
11
12
|
import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
|
|
12
|
-
import { FormArray, FormBuilder,
|
|
13
|
-
import { TemplatePipe, LoadingService, ErrorService, DIALOG_BUTTONS,
|
|
13
|
+
import { FormControl, FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
14
|
+
import { TemplatePipe, ModalService, LoadingService, ErrorService, DIALOG_BUTTONS, UserActivityService, ToastService, AppEventService, UserStorageService, ConfigurationService, SharedModule } from '@universis/common';
|
|
14
15
|
import { RouterModalOkCancel, RouterModalModule } from '@universis/common/routing';
|
|
15
16
|
import { ServiceUrlPreProcessor, TranslatePreProcessor, AdvancedFormsModule } from '@universis/forms';
|
|
16
17
|
import { FormioModule } from 'angular-formio';
|
|
@@ -520,6 +521,299 @@ var AdvancedFilterValueProvider = /** @class */ (function () {
|
|
|
520
521
|
return AdvancedFilterValueProvider;
|
|
521
522
|
}());
|
|
522
523
|
|
|
524
|
+
var ColumnSelectorComponent = /** @class */ (function (_super) {
|
|
525
|
+
__extends(ColumnSelectorComponent, _super);
|
|
526
|
+
function ColumnSelectorComponent(router, activatedRoute, _modalRef, ref, _translateService) {
|
|
527
|
+
var _this = _super.call(this, router, activatedRoute) || this;
|
|
528
|
+
_this._modalRef = _modalRef;
|
|
529
|
+
_this.ref = ref;
|
|
530
|
+
_this._translateService = _translateService;
|
|
531
|
+
_this.dismiss = new EventEmitter();
|
|
532
|
+
_this.availableColumnsControl = new FormControl();
|
|
533
|
+
_this.selectedColumnsControl = new FormControl();
|
|
534
|
+
return _this;
|
|
535
|
+
}
|
|
536
|
+
ColumnSelectorComponent.prototype.ok = function () {
|
|
537
|
+
this._modalRef.hide();
|
|
538
|
+
this.applyChanges();
|
|
539
|
+
this.dismiss.emit('ok');
|
|
540
|
+
return Promise.resolve('ok');
|
|
541
|
+
};
|
|
542
|
+
ColumnSelectorComponent.prototype.cancel = function () {
|
|
543
|
+
this._modalRef.hide();
|
|
544
|
+
this.dismiss.emit('cancel');
|
|
545
|
+
return Promise.resolve('cancel');
|
|
546
|
+
};
|
|
547
|
+
ColumnSelectorComponent.prototype.ngOnChanges = function (changes) {
|
|
548
|
+
//
|
|
549
|
+
};
|
|
550
|
+
ColumnSelectorComponent.prototype.ngOnDestroy = function () {
|
|
551
|
+
//
|
|
552
|
+
};
|
|
553
|
+
ColumnSelectorComponent.prototype.ngOnInit = function () {
|
|
554
|
+
if (Array.isArray(this.columns)) {
|
|
555
|
+
this.selectedColumns = this.columns.filter(function (item) {
|
|
556
|
+
return item.visible;
|
|
557
|
+
}).sort(function (a, b) {
|
|
558
|
+
if (a.index < b.index) {
|
|
559
|
+
return -1;
|
|
560
|
+
}
|
|
561
|
+
if (a.index > b.index) {
|
|
562
|
+
return 1;
|
|
563
|
+
}
|
|
564
|
+
return 0;
|
|
565
|
+
}).map(function (item) {
|
|
566
|
+
return {
|
|
567
|
+
key: item.key,
|
|
568
|
+
title: item.title
|
|
569
|
+
};
|
|
570
|
+
});
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
ColumnSelectorComponent.prototype.applyChanges = function () {
|
|
574
|
+
var e_1, _a;
|
|
575
|
+
var moveIndex = this.selectedColumns.length - 1;
|
|
576
|
+
var _loop_1 = function (column) {
|
|
577
|
+
var findIndex = this_1.selectedColumns.findIndex(function (item) {
|
|
578
|
+
return item.key === column.key;
|
|
579
|
+
});
|
|
580
|
+
if (findIndex < 0) {
|
|
581
|
+
column.visible = false;
|
|
582
|
+
moveIndex += 1;
|
|
583
|
+
column.index = moveIndex;
|
|
584
|
+
}
|
|
585
|
+
else {
|
|
586
|
+
column.visible = true;
|
|
587
|
+
column.index = findIndex;
|
|
588
|
+
}
|
|
589
|
+
};
|
|
590
|
+
var this_1 = this;
|
|
591
|
+
try {
|
|
592
|
+
for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
593
|
+
var column = _c.value;
|
|
594
|
+
_loop_1(column);
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
598
|
+
finally {
|
|
599
|
+
try {
|
|
600
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
601
|
+
}
|
|
602
|
+
finally { if (e_1) throw e_1.error; }
|
|
603
|
+
}
|
|
604
|
+
};
|
|
605
|
+
ColumnSelectorComponent.prototype.removeColumns = function () {
|
|
606
|
+
var e_2, _a;
|
|
607
|
+
var selected = this.selectedColumnsControl.value;
|
|
608
|
+
if (selected.length > 0) {
|
|
609
|
+
var _loop_2 = function (value) {
|
|
610
|
+
var findIndex = this_2.selectedColumns.findIndex(function (item) {
|
|
611
|
+
return item.key === value;
|
|
612
|
+
});
|
|
613
|
+
if (findIndex >= 0) {
|
|
614
|
+
this_2.selectedColumns.splice(findIndex, 1);
|
|
615
|
+
}
|
|
616
|
+
};
|
|
617
|
+
var this_2 = this;
|
|
618
|
+
try {
|
|
619
|
+
for (var selected_1 = __values(selected), selected_1_1 = selected_1.next(); !selected_1_1.done; selected_1_1 = selected_1.next()) {
|
|
620
|
+
var value = selected_1_1.value;
|
|
621
|
+
_loop_2(value);
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
625
|
+
finally {
|
|
626
|
+
try {
|
|
627
|
+
if (selected_1_1 && !selected_1_1.done && (_a = selected_1.return)) _a.call(selected_1);
|
|
628
|
+
}
|
|
629
|
+
finally { if (e_2) throw e_2.error; }
|
|
630
|
+
}
|
|
631
|
+
// reset column
|
|
632
|
+
this.selectedColumnsControl.reset();
|
|
633
|
+
}
|
|
634
|
+
};
|
|
635
|
+
ColumnSelectorComponent.prototype.addColumns = function () {
|
|
636
|
+
var e_3, _a;
|
|
637
|
+
var selected = this.availableColumnsControl.value;
|
|
638
|
+
if (selected.length > 0) {
|
|
639
|
+
var _loop_3 = function (value) {
|
|
640
|
+
var findColumn = this_3.columns.find(function (item) {
|
|
641
|
+
return item.key === value;
|
|
642
|
+
});
|
|
643
|
+
if (findColumn) {
|
|
644
|
+
var findIndex = this_3.selectedColumns.findIndex(function (item) {
|
|
645
|
+
return item.key === value;
|
|
646
|
+
});
|
|
647
|
+
if (findIndex < 0) {
|
|
648
|
+
this_3.selectedColumns.push({
|
|
649
|
+
key: findColumn.key,
|
|
650
|
+
title: findColumn.title
|
|
651
|
+
});
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
var this_3 = this;
|
|
656
|
+
try {
|
|
657
|
+
for (var selected_2 = __values(selected), selected_2_1 = selected_2.next(); !selected_2_1.done; selected_2_1 = selected_2.next()) {
|
|
658
|
+
var value = selected_2_1.value;
|
|
659
|
+
_loop_3(value);
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
663
|
+
finally {
|
|
664
|
+
try {
|
|
665
|
+
if (selected_2_1 && !selected_2_1.done && (_a = selected_2.return)) _a.call(selected_2);
|
|
666
|
+
}
|
|
667
|
+
finally { if (e_3) throw e_3.error; }
|
|
668
|
+
}
|
|
669
|
+
// find the last index of the selected items
|
|
670
|
+
var lastSelectedIndex = this.columns.findIndex(function (item) {
|
|
671
|
+
return item.key === selected[selected.length - 1];
|
|
672
|
+
});
|
|
673
|
+
// reset control
|
|
674
|
+
this.availableColumnsControl.reset();
|
|
675
|
+
if (lastSelectedIndex > -1 && lastSelectedIndex < this.columns.length - 1) {
|
|
676
|
+
this.availableColumnsControl.patchValue([
|
|
677
|
+
this.columns[lastSelectedIndex + 1].key
|
|
678
|
+
]);
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
};
|
|
682
|
+
ColumnSelectorComponent.prototype.moveUp = function () {
|
|
683
|
+
var e_4, _a;
|
|
684
|
+
this.moveUpButton.nativeElement.disabled = true;
|
|
685
|
+
var selected = this.selectedColumnsControl.value;
|
|
686
|
+
if (selected.length > 0) {
|
|
687
|
+
var _loop_4 = function (value) {
|
|
688
|
+
var findIndex = this_4.selectedColumns.findIndex(function (item) {
|
|
689
|
+
return item.key === value;
|
|
690
|
+
});
|
|
691
|
+
if (findIndex > 0) {
|
|
692
|
+
var column = this_4.selectedColumns[findIndex];
|
|
693
|
+
this_4.selectedColumns.splice(findIndex, 1);
|
|
694
|
+
this_4.selectedColumns.splice(findIndex - 1, 0, column);
|
|
695
|
+
}
|
|
696
|
+
};
|
|
697
|
+
var this_4 = this;
|
|
698
|
+
try {
|
|
699
|
+
for (var selected_3 = __values(selected), selected_3_1 = selected_3.next(); !selected_3_1.done; selected_3_1 = selected_3.next()) {
|
|
700
|
+
var value = selected_3_1.value;
|
|
701
|
+
_loop_4(value);
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
705
|
+
finally {
|
|
706
|
+
try {
|
|
707
|
+
if (selected_3_1 && !selected_3_1.done && (_a = selected_3.return)) _a.call(selected_3);
|
|
708
|
+
}
|
|
709
|
+
finally { if (e_4) throw e_4.error; }
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
this.moveUpButton.nativeElement.disabled = false;
|
|
713
|
+
};
|
|
714
|
+
ColumnSelectorComponent.prototype.moveDown = function () {
|
|
715
|
+
var e_5, _a;
|
|
716
|
+
this.moveDownButton.nativeElement.disabled = true;
|
|
717
|
+
var selected = this.selectedColumnsControl.value;
|
|
718
|
+
if (selected.length > 0) {
|
|
719
|
+
var _loop_5 = function (value) {
|
|
720
|
+
var findIndex = this_5.selectedColumns.findIndex(function (item) {
|
|
721
|
+
return item.key === value;
|
|
722
|
+
});
|
|
723
|
+
var length_1 = this_5.columns.length;
|
|
724
|
+
if (findIndex >= 0 && findIndex < length_1) {
|
|
725
|
+
var column = this_5.selectedColumns[findIndex];
|
|
726
|
+
this_5.selectedColumns.splice(findIndex, 1);
|
|
727
|
+
this_5.selectedColumns.splice(findIndex + 1, 0, column);
|
|
728
|
+
}
|
|
729
|
+
};
|
|
730
|
+
var this_5 = this;
|
|
731
|
+
try {
|
|
732
|
+
for (var selected_4 = __values(selected), selected_4_1 = selected_4.next(); !selected_4_1.done; selected_4_1 = selected_4.next()) {
|
|
733
|
+
var value = selected_4_1.value;
|
|
734
|
+
_loop_5(value);
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
catch (e_5_1) { e_5 = { error: e_5_1 }; }
|
|
738
|
+
finally {
|
|
739
|
+
try {
|
|
740
|
+
if (selected_4_1 && !selected_4_1.done && (_a = selected_4.return)) _a.call(selected_4);
|
|
741
|
+
}
|
|
742
|
+
finally { if (e_5) throw e_5.error; }
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
this.moveDownButton.nativeElement.disabled = false;
|
|
746
|
+
};
|
|
747
|
+
ColumnSelectorComponent.decorators = [
|
|
748
|
+
{ type: Component, args: [{
|
|
749
|
+
selector: 'app-column-selector',
|
|
750
|
+
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 ",
|
|
751
|
+
encapsulation: ViewEncapsulation.None,
|
|
752
|
+
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 "]
|
|
753
|
+
}] }
|
|
754
|
+
];
|
|
755
|
+
/** @nocollapse */
|
|
756
|
+
ColumnSelectorComponent.ctorParameters = function () { return [
|
|
757
|
+
{ type: Router },
|
|
758
|
+
{ type: ActivatedRoute },
|
|
759
|
+
{ type: BsModalRef },
|
|
760
|
+
{ type: ChangeDetectorRef },
|
|
761
|
+
{ type: TranslateService }
|
|
762
|
+
]; };
|
|
763
|
+
ColumnSelectorComponent.propDecorators = {
|
|
764
|
+
columns: [{ type: Input }],
|
|
765
|
+
selectedColumns: [{ type: Input }],
|
|
766
|
+
moveUpButton: [{ type: ViewChild, args: ['moveUpButton',] }],
|
|
767
|
+
moveDownButton: [{ type: ViewChild, args: ['moveDownButton',] }]
|
|
768
|
+
};
|
|
769
|
+
return ColumnSelectorComponent;
|
|
770
|
+
}(RouterModalOkCancel));
|
|
771
|
+
|
|
772
|
+
var ColumnSelectorService = /** @class */ (function () {
|
|
773
|
+
function ColumnSelectorService(_modal) {
|
|
774
|
+
this._modal = _modal;
|
|
775
|
+
//
|
|
776
|
+
}
|
|
777
|
+
ColumnSelectorService.prototype.selectColumns = function (columns) {
|
|
778
|
+
var _this = this;
|
|
779
|
+
return new Promise(function (resolve, reject) {
|
|
780
|
+
try {
|
|
781
|
+
var modalRef = _this._modal.openModalComponent(ColumnSelectorComponent, {
|
|
782
|
+
class: 'modal-lg modal-table',
|
|
783
|
+
ignoreBackdropClick: true,
|
|
784
|
+
animated: true,
|
|
785
|
+
initialState: {
|
|
786
|
+
columns: columns,
|
|
787
|
+
}
|
|
788
|
+
});
|
|
789
|
+
var componentRef_1 = modalRef.content;
|
|
790
|
+
componentRef_1.dismiss.subscribe(function (result) {
|
|
791
|
+
if (result === 'ok') {
|
|
792
|
+
return resolve({
|
|
793
|
+
result: result,
|
|
794
|
+
columns: componentRef_1.columns
|
|
795
|
+
});
|
|
796
|
+
}
|
|
797
|
+
return resolve({
|
|
798
|
+
result: result
|
|
799
|
+
});
|
|
800
|
+
});
|
|
801
|
+
}
|
|
802
|
+
catch (err) {
|
|
803
|
+
return reject(err);
|
|
804
|
+
}
|
|
805
|
+
});
|
|
806
|
+
};
|
|
807
|
+
ColumnSelectorService.decorators = [
|
|
808
|
+
{ type: Injectable }
|
|
809
|
+
];
|
|
810
|
+
/** @nocollapse */
|
|
811
|
+
ColumnSelectorService.ctorParameters = function () { return [
|
|
812
|
+
{ type: ModalService }
|
|
813
|
+
]; };
|
|
814
|
+
return ColumnSelectorService;
|
|
815
|
+
}());
|
|
816
|
+
|
|
523
817
|
// restore jquery import to avoid Cannot call a namespace ('jquery') error
|
|
524
818
|
var jQuery = jQuery_;
|
|
525
819
|
var DataTablesApi = jQuery.fn.dataTable.Api;
|
|
@@ -576,7 +870,7 @@ function getRandomIdentifier() {
|
|
|
576
870
|
return (Number(String(Math.random()).slice(2))).toString(36);
|
|
577
871
|
}
|
|
578
872
|
var AdvancedTableComponent = /** @class */ (function () {
|
|
579
|
-
function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http) {
|
|
873
|
+
function AdvancedTableComponent(_context, _columnFormatters, _activatedRoute, _translateService, _injector, _advancedFilterValueProvider, _element, _template, _loading, _http, _columnSelector) {
|
|
580
874
|
var _this = this;
|
|
581
875
|
this._context = _context;
|
|
582
876
|
this._columnFormatters = _columnFormatters;
|
|
@@ -588,6 +882,7 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
588
882
|
this._template = _template;
|
|
589
883
|
this._loading = _loading;
|
|
590
884
|
this._http = _http;
|
|
885
|
+
this._columnSelector = _columnSelector;
|
|
591
886
|
this._firstLoad = true;
|
|
592
887
|
this._showFooter = true;
|
|
593
888
|
this._showHeader = true;
|
|
@@ -612,6 +907,7 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
612
907
|
this.lengthMenu = [50, 100, 200, 500];
|
|
613
908
|
this.paging = true;
|
|
614
909
|
this.pageLength = 25;
|
|
910
|
+
this.columnOrdering = false;
|
|
615
911
|
this.stateSave = false;
|
|
616
912
|
this.scrollY = 800;
|
|
617
913
|
this.scrollX = true;
|
|
@@ -1246,6 +1542,7 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
1246
1542
|
serverSide: this.serverSide,
|
|
1247
1543
|
// enumerate table columns
|
|
1248
1544
|
columns: tableColumns_1,
|
|
1545
|
+
colReorder: this.columnOrdering,
|
|
1249
1546
|
order: [],
|
|
1250
1547
|
// set scroll x
|
|
1251
1548
|
scrollX: this.scrollX,
|
|
@@ -1680,6 +1977,69 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
1680
1977
|
this.autoLoad = !!load;
|
|
1681
1978
|
this.ngOnInit();
|
|
1682
1979
|
};
|
|
1980
|
+
AdvancedTableComponent.prototype.selectColumns = function () {
|
|
1981
|
+
var _this = this;
|
|
1982
|
+
// get column order e.g. [0, 4, 1, 2, 3]
|
|
1983
|
+
var columnOrder = this.dataTable.colReorder.order();
|
|
1984
|
+
// get column definitions
|
|
1985
|
+
var columnDefs = this.dataTable.settings().init().columns;
|
|
1986
|
+
var columns = columnDefs.map(function (columnDef, i) {
|
|
1987
|
+
var key = "column-" + i;
|
|
1988
|
+
var title = columnDef.title;
|
|
1989
|
+
// get column index
|
|
1990
|
+
var index = columnOrder.indexOf(i);
|
|
1991
|
+
var visible = _this.dataTable.column(index).visible();
|
|
1992
|
+
// set title for select column
|
|
1993
|
+
if (i == 0 && _this.selectable) {
|
|
1994
|
+
title = '<' + _this._translateService.instant('Tables.SelectColumn') + '>';
|
|
1995
|
+
}
|
|
1996
|
+
// get column title
|
|
1997
|
+
if (title != null && title.length === 0) {
|
|
1998
|
+
title = null;
|
|
1999
|
+
}
|
|
2000
|
+
if (title == null) {
|
|
2001
|
+
// try to find column placeholder
|
|
2002
|
+
var placeholder = null;
|
|
2003
|
+
if (_this.selectable) {
|
|
2004
|
+
if (i > 0) {
|
|
2005
|
+
placeholder = _this.config.columns[i - 1].placeholder;
|
|
2006
|
+
}
|
|
2007
|
+
}
|
|
2008
|
+
else {
|
|
2009
|
+
placeholder = _this.config.columns[i].placeholder;
|
|
2010
|
+
}
|
|
2011
|
+
if (placeholder != null) {
|
|
2012
|
+
title = '<' + _this._translateService.instant(placeholder) + '>';
|
|
2013
|
+
}
|
|
2014
|
+
}
|
|
2015
|
+
if (title == null) {
|
|
2016
|
+
title = '<' + _this._translateService.instant('Tables.UnknownColumn') + '>';
|
|
2017
|
+
}
|
|
2018
|
+
return {
|
|
2019
|
+
key: key,
|
|
2020
|
+
title: title,
|
|
2021
|
+
visible: visible,
|
|
2022
|
+
index: index
|
|
2023
|
+
};
|
|
2024
|
+
});
|
|
2025
|
+
this._columnSelector.selectColumns(columns).then(function (event) {
|
|
2026
|
+
if (event.result === 'ok') {
|
|
2027
|
+
// get column order e.g. [3, 1, 2, 0, 4]
|
|
2028
|
+
var indexes = event.columns.map(function (item) {
|
|
2029
|
+
return item.index;
|
|
2030
|
+
});
|
|
2031
|
+
// reset column visibilty
|
|
2032
|
+
for (var index = 0; index < event.columns.length; index++) {
|
|
2033
|
+
var element = event.columns[index];
|
|
2034
|
+
var colIndex = columnOrder.indexOf(index);
|
|
2035
|
+
// set visibilty with redraw (=true)
|
|
2036
|
+
_this.dataTable.column(colIndex).visible(element.visible, true);
|
|
2037
|
+
}
|
|
2038
|
+
// finally apply column order
|
|
2039
|
+
_this.dataTable.colReorder.order(indexes, true);
|
|
2040
|
+
}
|
|
2041
|
+
});
|
|
2042
|
+
};
|
|
1683
2043
|
AdvancedTableComponent.decorators = [
|
|
1684
2044
|
{ type: Component, args: [{
|
|
1685
2045
|
// tslint:disable-next-line: component-selector
|
|
@@ -1700,7 +2060,8 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
1700
2060
|
{ type: ElementRef },
|
|
1701
2061
|
{ type: TemplatePipe },
|
|
1702
2062
|
{ type: LoadingService },
|
|
1703
|
-
{ type: HttpClient }
|
|
2063
|
+
{ type: HttpClient },
|
|
2064
|
+
{ type: ColumnSelectorService }
|
|
1704
2065
|
]; };
|
|
1705
2066
|
AdvancedTableComponent.propDecorators = {
|
|
1706
2067
|
table: [{ type: ViewChild, args: ['table',] }],
|
|
@@ -1723,6 +2084,7 @@ var AdvancedTableComponent = /** @class */ (function () {
|
|
|
1723
2084
|
lengthMenu: [{ type: Input }],
|
|
1724
2085
|
paging: [{ type: Input }],
|
|
1725
2086
|
pageLength: [{ type: Input }],
|
|
2087
|
+
columnOrdering: [{ type: Input }],
|
|
1726
2088
|
stateSave: [{ type: Input }],
|
|
1727
2089
|
stateLoadCallback: [{ type: Input }],
|
|
1728
2090
|
stateSaveCallback: [{ type: Input }],
|
|
@@ -4517,7 +4879,17 @@ var TABLES_EL = {
|
|
|
4517
4879
|
"CompletedWithSuccess": {
|
|
4518
4880
|
"Title": "Η διαδικασία ολοκληρώθηκε με επιτυχία."
|
|
4519
4881
|
}
|
|
4520
|
-
}
|
|
4882
|
+
},
|
|
4883
|
+
"SelectColumns": "Επιλογή στηλών",
|
|
4884
|
+
"MoveUp": "Επάνω",
|
|
4885
|
+
"MoveDown": "Κάτω",
|
|
4886
|
+
"AddColumn": "Επιλογή",
|
|
4887
|
+
"RemoveColumn": "Αφαίρεση",
|
|
4888
|
+
"SelectColumnHelp": "Επιλέξτε μία ή περισσότερες από τις διαθέσιμες στήλες και πατήστε το πλήκτρο 'Επιλογή' για να τις εμφανίσετε. Χρησιμοποιήστε το πλήκτρο 'Αφαίρεση' για να αφαιρέσετε τις επιλεγμένες στήλες.",
|
|
4889
|
+
"MoveColumnHelp": "Χρησιμοποιήστε τα πλήκτρα 'Επάνω' και 'Κάτω' για να αλλάξετε την σειρά εμφάνισης των στηλών του πίνακα.",
|
|
4890
|
+
"UnknownColumn": "Άγνωστο",
|
|
4891
|
+
"SelectColumn": "Επιλογή",
|
|
4892
|
+
"ActionLinkColumn": "Ενέργειες"
|
|
4521
4893
|
},
|
|
4522
4894
|
"TrueFalse": {
|
|
4523
4895
|
"long": {
|
|
@@ -4626,7 +4998,17 @@ var TABLES_EN = {
|
|
|
4626
4998
|
"CompletedWithSuccess": {
|
|
4627
4999
|
"Title": "The operation was completed successfully."
|
|
4628
5000
|
}
|
|
4629
|
-
}
|
|
5001
|
+
},
|
|
5002
|
+
"SelectColumns": "Select columns",
|
|
5003
|
+
"MoveUp": "Move up",
|
|
5004
|
+
"MoveDown": "Move down",
|
|
5005
|
+
"AddColumn": "Add",
|
|
5006
|
+
"RemoveColumn": "Remove",
|
|
5007
|
+
"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.",
|
|
5008
|
+
"MoveColumnHelp": "Use 'Move up' and 'Move down' buttons to change column order.",
|
|
5009
|
+
"UnknownColumn": "Unknown",
|
|
5010
|
+
"SelectColumn": "Select",
|
|
5011
|
+
"ActionLinkColumn": "Actions"
|
|
4630
5012
|
},
|
|
4631
5013
|
"TrueFalse": {
|
|
4632
5014
|
"long": {
|
|
@@ -4984,6 +5366,7 @@ var TablesModule = /** @class */ (function () {
|
|
|
4984
5366
|
AdvancedSearchConfigurationResolver,
|
|
4985
5367
|
AdvancedSelectService,
|
|
4986
5368
|
AdvancedAggregatorService,
|
|
5369
|
+
ColumnSelectorService,
|
|
4987
5370
|
GroupByPipe
|
|
4988
5371
|
],
|
|
4989
5372
|
declarations: [
|
|
@@ -5007,7 +5390,8 @@ var TablesModule = /** @class */ (function () {
|
|
|
5007
5390
|
AddItemsComponent,
|
|
5008
5391
|
AdvancedSearchState,
|
|
5009
5392
|
AdvancedTableState,
|
|
5010
|
-
AdvancedSearchRouterState
|
|
5393
|
+
AdvancedSearchRouterState,
|
|
5394
|
+
ColumnSelectorComponent
|
|
5011
5395
|
],
|
|
5012
5396
|
exports: [
|
|
5013
5397
|
AdvancedTableComponent,
|
|
@@ -5026,14 +5410,16 @@ var TablesModule = /** @class */ (function () {
|
|
|
5026
5410
|
AddItemsComponent,
|
|
5027
5411
|
AdvancedSearchState,
|
|
5028
5412
|
AdvancedTableState,
|
|
5029
|
-
AdvancedSearchRouterState
|
|
5413
|
+
AdvancedSearchRouterState,
|
|
5414
|
+
ColumnSelectorComponent
|
|
5030
5415
|
],
|
|
5031
5416
|
entryComponents: [
|
|
5032
5417
|
AdvancedTableModalBaseComponent,
|
|
5033
5418
|
AdvancedTableSettingsComponent,
|
|
5034
5419
|
AdvancedRowActionComponent,
|
|
5035
5420
|
AdvancedSelectComponent,
|
|
5036
|
-
AddItemsComponent
|
|
5421
|
+
AddItemsComponent,
|
|
5422
|
+
ColumnSelectorComponent
|
|
5037
5423
|
],
|
|
5038
5424
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
5039
5425
|
},] }
|
|
@@ -5053,6 +5439,6 @@ var TablesModule = /** @class */ (function () {
|
|
|
5053
5439
|
* Generated bundle index. Do not edit.
|
|
5054
5440
|
*/
|
|
5055
5441
|
|
|
5056
|
-
export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
|
|
5442
|
+
export { AdvancedSearchState as ɵa, AdvancedTableState as ɵc, AdvancedSearchRouterState as ɵd, AdvancedListComponent, AdvancedRowActionComponent, AdvancedSearchFormComponent, AdvancedSelectComponent, AdvancedSelectService, AdvancedTableConfigurationResolver, AdvancedSearchConfigurationResolver, AdvancedColumnFormatter, NestedPropertyFormatter, ButtonFormatter, LinkFormatter, ActionLinkFormatter, ActionButtonFormatter, ActionSplitButtonFormatter, SelectRowFormatter, TemplateFormatter, TrueFalseFormatter, TranslationFormatter, DateTimeFormatter, NgClassFormatter, LanguageFormatter, COLUMN_FORMATTERS, AdvancedTableConfiguration, AdvancedTableComponent, AdvancedTableSettingsComponent, AdvancedTableSearchBaseComponent, AdvancedTableSearchComponent, FORMATTERS, AdvancedFilterValueProvider, AdvancedTableModalBaseTemplate, AdvancedTableModalBaseComponent, SimpleHeaderToolsComponent, TableSimpleHeaderComponent, AdvancedTableNotNullError, AdvancedTableEditorDirective, BtnExpDirective, AdvancedAggregatorComponent, AdvancedAggregatorListComponent, AddItemsComponent, AdvancedAggregatorPipe, ParseTitlePipe, AdvancedAggregatorService, TablesModule, ɵ0, ActivatedTableService, ColumnSelectorService, ColumnSelectorComponent, initialState, tableInitialState, tableReducer, tableReducers, featureName, getTablesState, selectTable };
|
|
5057
5443
|
|
|
5058
5444
|
//# sourceMappingURL=universis-ngx-tables.js.map
|