@zeedhi/teknisa-components-common 1.130.0 → 1.131.0
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/.package.json +39 -0
- package/coverage/clover.xml +1204 -1142
- package/coverage/coverage-final.json +48 -47
- package/coverage/lcov-report/index.html +18 -18
- package/coverage/lcov-report/tests/__helpers__/component-event-helper.ts.html +3 -3
- package/coverage/lcov-report/tests/__helpers__/flush-promises-helper.ts.html +1 -1
- package/coverage/lcov-report/tests/__helpers__/get-child-helper.ts.html +11 -11
- package/coverage/lcov-report/tests/__helpers__/index.html +1 -1
- package/coverage/lcov-report/tests/__helpers__/index.ts.html +4 -4
- package/coverage/lcov-report/tests/__helpers__/mock-created-helper.ts.html +3 -3
- package/coverage/lcov.info +2082 -1961
- package/dist/tek-components-common.esm.js +278 -163
- package/dist/tek-components-common.umd.js +278 -162
- package/package.json +2 -2
- package/tests/unit/components/tek-grid/grid-columns-button.spec.ts +123 -2
- package/tests/unit/components/tek-grid/grid-export-button.spec.ts +403 -0
- package/tests/unit/components/tek-grid/grid-filter-button.spec.ts +147 -4
- package/tests/unit/components/tek-grid/grid.spec.ts +142 -9
- package/tests/unit/components/tek-grid/layout_options.spec.ts +166 -0
- package/types/components/index.d.ts +1 -0
- package/types/components/tek-ag-grid/default-icons.d.ts +53 -0
- package/types/components/tek-ag-grid/interfaces.d.ts +9 -0
- package/types/components/tek-ag-grid/tek-ag-grid.d.ts +35 -0
- package/types/components/tek-datasource/datasource.d.ts +94 -0
- package/types/components/tek-grid/default-icons.d.ts +53 -0
- package/types/components/tek-grid/filter-dynamic-values.d.ts +9 -0
- package/types/components/tek-grid/grid-columns-button.d.ts +2 -1
- package/types/components/tek-grid/grid-controller.d.ts +19 -0
- package/types/components/tek-grid/grid-export-button.d.ts +19 -0
- package/types/components/tek-grid/grid-filter-button.d.ts +1 -0
- package/types/components/tek-grid/grid.d.ts +4 -0
- package/types/components/tek-grid/grid_column.d.ts +14 -0
- package/types/components/tek-grid/grid_controller.d.ts +15 -0
- package/types/components/tek-grid/interfaces.d.ts +8 -0
- package/types/components/tek-grid/layout-options.d.ts +6 -0
- package/types/components/tek-grid/tek-grid.d.ts +35 -0
- package/types/components/tek-login/interfaces.d.ts +3 -0
- package/types/components/tek-login/login-children.d.ts +3 -0
- package/types/components/tek-login/login.d.ts +58 -0
- package/types/components/tek-login/login_children.d.ts +3 -0
- package/types/components/tek-tree-grid/tree-grid.d.ts +2 -0
- package/types/utils/grid-base/export-options/button-option.d.ts +3 -1
- package/types/utils/grid-base/export-options/multi-option.d.ts +3 -1
- package/types/utils/grid-base/grid-base.d.ts +1 -3
|
@@ -635,6 +635,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
|
635
635
|
PERFORMANCE OF THIS SOFTWARE.
|
|
636
636
|
***************************************************************************** */
|
|
637
637
|
|
|
638
|
+
function __rest(s, e) {
|
|
639
|
+
var t = {};
|
|
640
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
641
|
+
t[p] = s[p];
|
|
642
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
643
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
644
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
645
|
+
t[p[i]] = s[p[i]];
|
|
646
|
+
}
|
|
647
|
+
return t;
|
|
648
|
+
}
|
|
649
|
+
|
|
638
650
|
function __decorate(decorators, target, key, desc) {
|
|
639
651
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
640
652
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -711,98 +723,8 @@ class TekGridDeleteRowsError extends Error {
|
|
|
711
723
|
}
|
|
712
724
|
}
|
|
713
725
|
|
|
714
|
-
class ButtonOption {
|
|
715
|
-
constructor(config) {
|
|
716
|
-
this.config = config;
|
|
717
|
-
}
|
|
718
|
-
buildComponent(grid) {
|
|
719
|
-
const { type, label, portrait = true, iconName, } = this.config;
|
|
720
|
-
const orientation = portrait ? 'portrait' : 'landscape';
|
|
721
|
-
return {
|
|
722
|
-
label,
|
|
723
|
-
iconName,
|
|
724
|
-
name: `${grid.name}_export_${type}_${orientation}`,
|
|
725
|
-
component: 'ZdButton',
|
|
726
|
-
flat: true,
|
|
727
|
-
events: {
|
|
728
|
-
click: () => grid.getReport(type, portrait),
|
|
729
|
-
},
|
|
730
|
-
};
|
|
731
|
-
}
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
class MultiOption {
|
|
735
|
-
constructor(config) {
|
|
736
|
-
this.config = config;
|
|
737
|
-
}
|
|
738
|
-
formatName(id, type, grid) {
|
|
739
|
-
return `${grid.name}_export_${type}_${id}`;
|
|
740
|
-
}
|
|
741
|
-
buildTooltip(option, type, grid) {
|
|
742
|
-
const { label } = option;
|
|
743
|
-
return {
|
|
744
|
-
name: this.formatName(`tooltip_${label}`, type, grid),
|
|
745
|
-
component: 'ZdTooltip',
|
|
746
|
-
bottom: true,
|
|
747
|
-
label,
|
|
748
|
-
children: [],
|
|
749
|
-
};
|
|
750
|
-
}
|
|
751
|
-
buildButton(option, type, grid) {
|
|
752
|
-
const { cssClass, label, iconName, reportParams, } = option;
|
|
753
|
-
const { portrait: optionPortrait, rowObj } = reportParams || {};
|
|
754
|
-
return {
|
|
755
|
-
name: this.formatName(`button_${label}`, type, grid),
|
|
756
|
-
component: 'ZdButton',
|
|
757
|
-
cssClass,
|
|
758
|
-
icon: true,
|
|
759
|
-
iconName,
|
|
760
|
-
events: {
|
|
761
|
-
click: () => grid.getReport(type, optionPortrait, rowObj),
|
|
762
|
-
},
|
|
763
|
-
};
|
|
764
|
-
}
|
|
765
|
-
buildDivider(option, type, grid) {
|
|
766
|
-
const { label } = option;
|
|
767
|
-
return {
|
|
768
|
-
name: this.formatName(`divider_${label}`, type, grid),
|
|
769
|
-
component: 'ZdDivider',
|
|
770
|
-
cssClass: 'zd-my-1',
|
|
771
|
-
vertical: true,
|
|
772
|
-
};
|
|
773
|
-
}
|
|
774
|
-
buildComponent(grid) {
|
|
775
|
-
const { type, label, multiOption, } = this.config;
|
|
776
|
-
const optionComponents = multiOption.map((option) => ([
|
|
777
|
-
Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
|
|
778
|
-
this.buildButton(option, type, grid),
|
|
779
|
-
] }),
|
|
780
|
-
this.buildDivider(option, type, grid),
|
|
781
|
-
]))
|
|
782
|
-
.flat();
|
|
783
|
-
optionComponents.pop();
|
|
784
|
-
const text = {
|
|
785
|
-
name: this.formatName('text', type, grid),
|
|
786
|
-
component: 'ZdText',
|
|
787
|
-
cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
|
|
788
|
-
events: {
|
|
789
|
-
click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
|
|
790
|
-
},
|
|
791
|
-
text: label || '',
|
|
792
|
-
};
|
|
793
|
-
const result = {
|
|
794
|
-
name: this.formatName('row', type, grid),
|
|
795
|
-
component: 'ZdRow',
|
|
796
|
-
cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
|
|
797
|
-
children: [text, ...optionComponents],
|
|
798
|
-
};
|
|
799
|
-
return result;
|
|
800
|
-
}
|
|
801
|
-
}
|
|
802
|
-
|
|
803
726
|
class GridBase {
|
|
804
727
|
constructor(grid) {
|
|
805
|
-
this.exportConfigButtons = [];
|
|
806
728
|
this.defaultToolbar = {};
|
|
807
729
|
this.atoms = {
|
|
808
730
|
TITLE: '_gridTitle',
|
|
@@ -824,20 +746,8 @@ class GridBase {
|
|
|
824
746
|
ACTIONS_DROPDOWN: '_actions_dropdown',
|
|
825
747
|
};
|
|
826
748
|
this.grid = grid;
|
|
827
|
-
this.exportConfigButtons = this.getExportConfigButtons();
|
|
828
749
|
this.initializeDefaultToolbarItems();
|
|
829
750
|
}
|
|
830
|
-
getOption(config) {
|
|
831
|
-
if (config.multiOption)
|
|
832
|
-
return new MultiOption(config);
|
|
833
|
-
return new ButtonOption(config);
|
|
834
|
-
}
|
|
835
|
-
getExportConfigButtons() {
|
|
836
|
-
return this.grid.exportConfig.map((config) => {
|
|
837
|
-
const option = this.getOption(config);
|
|
838
|
-
return option.buildComponent(this.grid);
|
|
839
|
-
});
|
|
840
|
-
}
|
|
841
751
|
initializeDefaultToolbarItems() {
|
|
842
752
|
this.defaultToolbar = {
|
|
843
753
|
title: () => ({
|
|
@@ -945,7 +855,7 @@ class GridBase {
|
|
|
945
855
|
name: `${this.grid.name}_columnsButton`,
|
|
946
856
|
component: 'TekGridColumnsButton',
|
|
947
857
|
isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
|
|
948
|
-
|
|
858
|
+
gridName: this.grid.name,
|
|
949
859
|
hideGroups: !(this.grid instanceof TekGrid),
|
|
950
860
|
ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
|
|
951
861
|
},
|
|
@@ -954,21 +864,15 @@ class GridBase {
|
|
|
954
864
|
layoutOptions: () => ({
|
|
955
865
|
name: `${this.grid.name}_layout_options`,
|
|
956
866
|
component: 'TekGridLayoutOptions',
|
|
867
|
+
gridName: this.grid.name,
|
|
957
868
|
isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
|
|
958
869
|
}),
|
|
959
870
|
exportDropdown: () => ({
|
|
960
871
|
name: `${this.grid.name}_export_dropdown`,
|
|
961
|
-
component: '
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
name: `${this.grid.name}_exportButton`,
|
|
966
|
-
component: 'ZdButton',
|
|
967
|
-
icon: true,
|
|
968
|
-
iconName: 'fileDownload',
|
|
969
|
-
isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
|
|
970
|
-
},
|
|
971
|
-
children: this.grid.exportActions || this.exportConfigButtons,
|
|
872
|
+
component: 'TekGridExportButton',
|
|
873
|
+
grid: this.grid,
|
|
874
|
+
gridName: this.grid.name,
|
|
875
|
+
isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
|
|
972
876
|
}),
|
|
973
877
|
actionsDivider: (index) => ({
|
|
974
878
|
name: `${this.grid.name}_actions_divider${index}`,
|
|
@@ -1137,7 +1041,10 @@ class GridBase {
|
|
|
1137
1041
|
return toolbarItems;
|
|
1138
1042
|
}
|
|
1139
1043
|
loadFilterButton({ component }) {
|
|
1140
|
-
this.
|
|
1044
|
+
this.registerFilterButton(component);
|
|
1045
|
+
}
|
|
1046
|
+
registerFilterButton(filterButton) {
|
|
1047
|
+
this.filterButton = filterButton;
|
|
1141
1048
|
}
|
|
1142
1049
|
hideButtonClick({ event }) {
|
|
1143
1050
|
if (!event.defaultPrevented) {
|
|
@@ -1239,7 +1146,14 @@ class GridBase {
|
|
|
1239
1146
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1240
1147
|
const { datasource } = this.grid;
|
|
1241
1148
|
if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
|
|
1242
|
-
const
|
|
1149
|
+
const searchIn = datasource.searchIn || [];
|
|
1150
|
+
const lookupColumns = this.grid.columns.filter((column) => {
|
|
1151
|
+
if (!column.componentProps.datasource || column.skipLookupSearch)
|
|
1152
|
+
return false;
|
|
1153
|
+
if (searchIn.length > 0)
|
|
1154
|
+
return searchIn.indexOf(column.name) !== -1;
|
|
1155
|
+
return true;
|
|
1156
|
+
});
|
|
1243
1157
|
const searchJoin = {};
|
|
1244
1158
|
if (search) {
|
|
1245
1159
|
const promises = lookupColumns.map((column) => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -1577,6 +1491,95 @@ class GridController {
|
|
|
1577
1491
|
}
|
|
1578
1492
|
}
|
|
1579
1493
|
|
|
1494
|
+
class ButtonOption {
|
|
1495
|
+
constructor(config) {
|
|
1496
|
+
this.config = config;
|
|
1497
|
+
}
|
|
1498
|
+
buildComponent(grid) {
|
|
1499
|
+
const { type, label, portrait = true, iconName, } = this.config;
|
|
1500
|
+
const orientation = portrait ? 'portrait' : 'landscape';
|
|
1501
|
+
return {
|
|
1502
|
+
label,
|
|
1503
|
+
iconName,
|
|
1504
|
+
name: `${grid.name}_export_${type}_${orientation}`,
|
|
1505
|
+
component: 'ZdButton',
|
|
1506
|
+
flat: true,
|
|
1507
|
+
events: {
|
|
1508
|
+
click: () => grid.getReport(type, portrait),
|
|
1509
|
+
},
|
|
1510
|
+
};
|
|
1511
|
+
}
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
class MultiOption {
|
|
1515
|
+
constructor(config) {
|
|
1516
|
+
this.config = config;
|
|
1517
|
+
}
|
|
1518
|
+
formatName(id, type, grid) {
|
|
1519
|
+
return `${grid.name}_export_${type}_${id}`;
|
|
1520
|
+
}
|
|
1521
|
+
buildTooltip(option, type, grid) {
|
|
1522
|
+
const { label } = option;
|
|
1523
|
+
return {
|
|
1524
|
+
name: this.formatName(`tooltip_${label}`, type, grid),
|
|
1525
|
+
component: 'ZdTooltip',
|
|
1526
|
+
bottom: true,
|
|
1527
|
+
label,
|
|
1528
|
+
children: [],
|
|
1529
|
+
};
|
|
1530
|
+
}
|
|
1531
|
+
buildButton(option, type, grid) {
|
|
1532
|
+
const { cssClass, label, iconName, reportParams, } = option;
|
|
1533
|
+
const { portrait: optionPortrait, rowObj } = reportParams || {};
|
|
1534
|
+
return {
|
|
1535
|
+
name: this.formatName(`button_${label}`, type, grid),
|
|
1536
|
+
component: 'ZdButton',
|
|
1537
|
+
cssClass,
|
|
1538
|
+
icon: true,
|
|
1539
|
+
iconName,
|
|
1540
|
+
events: {
|
|
1541
|
+
click: () => grid.getReport(type, optionPortrait, rowObj),
|
|
1542
|
+
},
|
|
1543
|
+
};
|
|
1544
|
+
}
|
|
1545
|
+
buildDivider(option, type, grid) {
|
|
1546
|
+
const { label } = option;
|
|
1547
|
+
return {
|
|
1548
|
+
name: this.formatName(`divider_${label}`, type, grid),
|
|
1549
|
+
component: 'ZdDivider',
|
|
1550
|
+
cssClass: 'zd-my-1',
|
|
1551
|
+
vertical: true,
|
|
1552
|
+
};
|
|
1553
|
+
}
|
|
1554
|
+
buildComponent(grid) {
|
|
1555
|
+
const { type, label, multiOption, } = this.config;
|
|
1556
|
+
const optionComponents = multiOption.map((option) => ([
|
|
1557
|
+
Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
|
|
1558
|
+
this.buildButton(option, type, grid),
|
|
1559
|
+
] }),
|
|
1560
|
+
this.buildDivider(option, type, grid),
|
|
1561
|
+
]))
|
|
1562
|
+
.flat();
|
|
1563
|
+
optionComponents.pop();
|
|
1564
|
+
const text = {
|
|
1565
|
+
name: this.formatName('text', type, grid),
|
|
1566
|
+
component: 'ZdText',
|
|
1567
|
+
cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
|
|
1568
|
+
events: {
|
|
1569
|
+
click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
|
|
1570
|
+
},
|
|
1571
|
+
text: label || '',
|
|
1572
|
+
};
|
|
1573
|
+
const result = {
|
|
1574
|
+
name: this.formatName('row', type, grid),
|
|
1575
|
+
component: 'ZdRow',
|
|
1576
|
+
cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
|
|
1577
|
+
children: [text, ...optionComponents],
|
|
1578
|
+
};
|
|
1579
|
+
return result;
|
|
1580
|
+
}
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1580
1583
|
/**
|
|
1581
1584
|
* Extracts properties from an object based on a list of properties
|
|
1582
1585
|
* @param obj object whose properties will be extracted
|
|
@@ -2996,44 +2999,38 @@ class TekGrid extends GridEditable {
|
|
|
2996
2999
|
super.navigateDown();
|
|
2997
3000
|
return;
|
|
2998
3001
|
}
|
|
2999
|
-
if (this.
|
|
3002
|
+
if (this.viewNavigate) {
|
|
3000
3003
|
this.viewNavigate('down');
|
|
3001
3004
|
return;
|
|
3002
3005
|
}
|
|
3003
|
-
|
|
3004
|
-
if (!this.groupedData.length || index === this.groupedData.length)
|
|
3005
|
-
return;
|
|
3006
|
-
const { uniqueKey, currentRow } = this.datasource;
|
|
3007
|
-
const rowIndex = index !== undefined
|
|
3008
|
-
? index
|
|
3009
|
-
: this.groupedData.findIndex((row) => {
|
|
3010
|
-
if (currentRow.group) {
|
|
3011
|
-
return row.group && row.groupValue === currentRow.groupValue;
|
|
3012
|
-
}
|
|
3013
|
-
return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
|
|
3014
|
-
});
|
|
3015
|
-
const newRow = this.groupedData[rowIndex + 1];
|
|
3016
|
-
if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
|
|
3017
|
-
this.navigateDown({ index: rowIndex + 1 });
|
|
3018
|
-
return;
|
|
3019
|
-
}
|
|
3020
|
-
this.datasource.currentRow = newRow;
|
|
3006
|
+
this.navigateGroupedDatasource(false, params);
|
|
3021
3007
|
}
|
|
3022
3008
|
navigateUp(params) {
|
|
3023
3009
|
if (!this.isGrouped()) {
|
|
3024
3010
|
super.navigateUp();
|
|
3025
3011
|
return;
|
|
3026
3012
|
}
|
|
3027
|
-
if (this.
|
|
3013
|
+
if (this.viewNavigate) {
|
|
3028
3014
|
this.viewNavigate('up');
|
|
3029
3015
|
return;
|
|
3030
3016
|
}
|
|
3017
|
+
this.navigateGroupedDatasource(true, params);
|
|
3018
|
+
}
|
|
3019
|
+
navigateDatasource(up) {
|
|
3020
|
+
if (!this.isGrouped()) {
|
|
3021
|
+
super.navigateDatasource(up);
|
|
3022
|
+
return;
|
|
3023
|
+
}
|
|
3024
|
+
this.navigateGroupedDatasource(up);
|
|
3025
|
+
}
|
|
3026
|
+
navigateGroupedDatasource(up, params = {}) {
|
|
3031
3027
|
const { index } = params;
|
|
3032
|
-
if (!this.groupedData.length
|
|
3028
|
+
if (!this.groupedData.length
|
|
3029
|
+
|| (!up && index === this.groupedData.length)
|
|
3030
|
+
|| (up && index === -1))
|
|
3033
3031
|
return;
|
|
3034
3032
|
const { uniqueKey, currentRow } = this.datasource;
|
|
3035
|
-
let rowIndex
|
|
3036
|
-
rowIndex = index !== undefined
|
|
3033
|
+
let rowIndex = index !== undefined
|
|
3037
3034
|
? index
|
|
3038
3035
|
: this.groupedData.findIndex((row) => {
|
|
3039
3036
|
if (currentRow.group) {
|
|
@@ -3041,11 +3038,12 @@ class TekGrid extends GridEditable {
|
|
|
3041
3038
|
}
|
|
3042
3039
|
return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
|
|
3043
3040
|
});
|
|
3044
|
-
if (rowIndex === -1)
|
|
3041
|
+
if (up && rowIndex === -1)
|
|
3045
3042
|
rowIndex = this.groupedData.length;
|
|
3046
|
-
const
|
|
3043
|
+
const nextIndex = rowIndex + (up ? -1 : 1);
|
|
3044
|
+
const newRow = this.groupedData[nextIndex];
|
|
3047
3045
|
if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
|
|
3048
|
-
this.
|
|
3046
|
+
this.navigateGroupedDatasource(up, { index: nextIndex });
|
|
3049
3047
|
return;
|
|
3050
3048
|
}
|
|
3051
3049
|
this.datasource.currentRow = newRow;
|
|
@@ -3168,6 +3166,9 @@ class TekGrid extends GridEditable {
|
|
|
3168
3166
|
getFilterInputs(columnName) {
|
|
3169
3167
|
return this.gridBase.getFilterInputs(columnName);
|
|
3170
3168
|
}
|
|
3169
|
+
registerFilterButton(filterButton) {
|
|
3170
|
+
this.gridBase.registerFilterButton(filterButton);
|
|
3171
|
+
}
|
|
3171
3172
|
isColumnSearchable(column) {
|
|
3172
3173
|
return column.searchable && (!this.searchVisibleOnly || column.isVisible || column.grouped);
|
|
3173
3174
|
}
|
|
@@ -3376,16 +3377,14 @@ class TekGridColumnsButtonController extends IterableColumnsButtonController {
|
|
|
3376
3377
|
*/
|
|
3377
3378
|
class TekGridColumnsButton extends IterableColumnsButton {
|
|
3378
3379
|
constructor(props) {
|
|
3379
|
-
super(props);
|
|
3380
|
+
super(Object.assign(Object.assign({}, props), { iterableComponentName: props.gridName || props.iterableComponentName }));
|
|
3380
3381
|
this.hideGroups = false;
|
|
3381
3382
|
this.aggregationDataSet = [];
|
|
3382
3383
|
this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
|
|
3383
3384
|
this.createAccessors();
|
|
3384
3385
|
}
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
this.controller = new TekGridColumnsButtonController(this.iterableComponent);
|
|
3388
|
-
Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
|
|
3386
|
+
createController() {
|
|
3387
|
+
return new TekGridColumnsButtonController(this.iterableComponent);
|
|
3389
3388
|
}
|
|
3390
3389
|
getAggregationSelectData() {
|
|
3391
3390
|
if (!this.aggregationDataSet.length) {
|
|
@@ -3398,6 +3397,67 @@ class TekGridColumnsButton extends IterableColumnsButton {
|
|
|
3398
3397
|
}
|
|
3399
3398
|
}
|
|
3400
3399
|
|
|
3400
|
+
/**
|
|
3401
|
+
* Base class for TekGrid export button/dropdown component.
|
|
3402
|
+
*/
|
|
3403
|
+
class TekGridExportButton extends ComponentRender {
|
|
3404
|
+
constructor(props) {
|
|
3405
|
+
super(props);
|
|
3406
|
+
this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
|
|
3407
|
+
this.grid = this.getInitValue('grid', props.grid, this.grid);
|
|
3408
|
+
this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
|
|
3409
|
+
this.exportActions = this.getInitValue('exportActions', props.exportActions, this.exportActions);
|
|
3410
|
+
this.children = this.getInitValue('children', props.children, []);
|
|
3411
|
+
this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
|
|
3412
|
+
this.createAccessors();
|
|
3413
|
+
this.loadGrid();
|
|
3414
|
+
}
|
|
3415
|
+
getOption(config) {
|
|
3416
|
+
if (config.multiOption)
|
|
3417
|
+
return new MultiOption(config);
|
|
3418
|
+
return new ButtonOption(config);
|
|
3419
|
+
}
|
|
3420
|
+
getExportConfigButtons() {
|
|
3421
|
+
if (!this.grid)
|
|
3422
|
+
return [];
|
|
3423
|
+
const exportConfig = this.exportConfig || this.grid.exportConfig;
|
|
3424
|
+
return exportConfig.map((config) => {
|
|
3425
|
+
const option = this.getOption(config);
|
|
3426
|
+
return option.buildComponent(this.grid);
|
|
3427
|
+
});
|
|
3428
|
+
}
|
|
3429
|
+
loadChildren() {
|
|
3430
|
+
if (!this.grid)
|
|
3431
|
+
return;
|
|
3432
|
+
if (this.exportActions) {
|
|
3433
|
+
this.children = this.exportActions;
|
|
3434
|
+
return;
|
|
3435
|
+
}
|
|
3436
|
+
if (this.exportConfig) {
|
|
3437
|
+
this.children = this.getExportConfigButtons();
|
|
3438
|
+
return;
|
|
3439
|
+
}
|
|
3440
|
+
this.children = this.grid.exportActions || this.getExportConfigButtons();
|
|
3441
|
+
}
|
|
3442
|
+
loadGrid(gridName) {
|
|
3443
|
+
if (gridName)
|
|
3444
|
+
this.gridName = gridName;
|
|
3445
|
+
if (!this.grid && this.gridName) {
|
|
3446
|
+
const grid = Metadata.getInstances(this.gridName)[0];
|
|
3447
|
+
if (grid)
|
|
3448
|
+
this.grid = grid;
|
|
3449
|
+
}
|
|
3450
|
+
if (this.grid) {
|
|
3451
|
+
this.gridName = this.grid.name;
|
|
3452
|
+
this.loadChildren();
|
|
3453
|
+
}
|
|
3454
|
+
}
|
|
3455
|
+
onCreated() {
|
|
3456
|
+
super.onCreated();
|
|
3457
|
+
this.loadGrid();
|
|
3458
|
+
}
|
|
3459
|
+
}
|
|
3460
|
+
|
|
3401
3461
|
class TekFilterHelper {
|
|
3402
3462
|
static getLabel(name) {
|
|
3403
3463
|
return DateHelper.getLabel(name);
|
|
@@ -3425,23 +3485,35 @@ class TekGridFilterButton extends Button {
|
|
|
3425
3485
|
this.grid = this.getInitValue('grid', props.grid, undefined);
|
|
3426
3486
|
this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
|
|
3427
3487
|
this.createAccessors();
|
|
3428
|
-
|
|
3429
|
-
this.loadGrid();
|
|
3488
|
+
this.loadGrid();
|
|
3430
3489
|
}
|
|
3431
3490
|
loadGrid(gridName) {
|
|
3432
3491
|
if (gridName)
|
|
3433
3492
|
this.gridName = gridName;
|
|
3434
|
-
if (!this.gridName)
|
|
3435
|
-
|
|
3436
|
-
|
|
3493
|
+
if (!this.grid && this.gridName) {
|
|
3494
|
+
const grid = Metadata.getInstances(this.gridName)[0];
|
|
3495
|
+
if (grid)
|
|
3496
|
+
this.grid = grid;
|
|
3497
|
+
}
|
|
3498
|
+
if (this.grid) {
|
|
3499
|
+
this.gridName = this.grid.name;
|
|
3500
|
+
this.grid.registerFilterButton(this);
|
|
3501
|
+
}
|
|
3437
3502
|
}
|
|
3438
3503
|
click(event) {
|
|
3439
3504
|
this.callEvent('click', { component: this, event });
|
|
3505
|
+
this.loadGrid();
|
|
3506
|
+
if (!this.grid)
|
|
3507
|
+
return;
|
|
3440
3508
|
this.grid.callEvent('filterClick', { component: this.grid, event });
|
|
3441
3509
|
if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
|
|
3442
3510
|
this.createFilterFromColumns.call(this);
|
|
3443
3511
|
}
|
|
3444
3512
|
}
|
|
3513
|
+
onCreated() {
|
|
3514
|
+
super.onCreated();
|
|
3515
|
+
this.loadGrid();
|
|
3516
|
+
}
|
|
3445
3517
|
loadFilterValues({ component }) {
|
|
3446
3518
|
const changedCompNames = [];
|
|
3447
3519
|
const { datasource } = this.grid;
|
|
@@ -3497,7 +3569,8 @@ class TekGridFilterButton extends Button {
|
|
|
3497
3569
|
});
|
|
3498
3570
|
}
|
|
3499
3571
|
hideFilterModal() {
|
|
3500
|
-
this.filterModal
|
|
3572
|
+
if (this.filterModal)
|
|
3573
|
+
this.filterModal.hide();
|
|
3501
3574
|
}
|
|
3502
3575
|
destroyFilterModal() {
|
|
3503
3576
|
if (this.filterModal)
|
|
@@ -3543,9 +3616,14 @@ class TekGridFilterButton extends Button {
|
|
|
3543
3616
|
},
|
|
3544
3617
|
{
|
|
3545
3618
|
name: `${this.grid.name}-filter-close-button`,
|
|
3546
|
-
component: '
|
|
3619
|
+
component: 'ZdButton',
|
|
3620
|
+
icon: true,
|
|
3621
|
+
iconName: 'close',
|
|
3622
|
+
flat: true,
|
|
3547
3623
|
small: true,
|
|
3548
|
-
|
|
3624
|
+
events: {
|
|
3625
|
+
click: this.hideFilterModal.bind(this),
|
|
3626
|
+
},
|
|
3549
3627
|
},
|
|
3550
3628
|
],
|
|
3551
3629
|
},
|
|
@@ -3691,15 +3769,20 @@ class TekGridFilterButton extends Button {
|
|
|
3691
3769
|
this.setFilter(filter, event, datasource.setBaseFilter.bind(datasource));
|
|
3692
3770
|
}
|
|
3693
3771
|
else {
|
|
3772
|
+
const structuredFilter = {};
|
|
3694
3773
|
Object.keys(formValue).forEach((item) => {
|
|
3695
3774
|
let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
|
|
3696
3775
|
columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
|
|
3697
|
-
|
|
3698
|
-
|
|
3776
|
+
const itemValue = formValue[item];
|
|
3777
|
+
if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
|
|
3778
|
+
filter[columnName] = itemValue;
|
|
3779
|
+
if (!structuredFilter[columnName])
|
|
3780
|
+
structuredFilter[columnName] = [];
|
|
3781
|
+
structuredFilter[columnName].push({ relation: 'AND', operation: 'CONTAINS', value: itemValue });
|
|
3699
3782
|
}
|
|
3700
3783
|
});
|
|
3701
3784
|
datasource.filter = filter;
|
|
3702
|
-
this.setFilter(
|
|
3785
|
+
this.setFilter(structuredFilter, event, datasource.setBaseFilter.bind(datasource));
|
|
3703
3786
|
}
|
|
3704
3787
|
this.grid.changeLayout(event);
|
|
3705
3788
|
}
|
|
@@ -3749,7 +3832,8 @@ class TekGridFilterButton extends Button {
|
|
|
3749
3832
|
columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
|
|
3750
3833
|
}
|
|
3751
3834
|
this.filterFormInputs[column.name].push(columnComponentName);
|
|
3752
|
-
const
|
|
3835
|
+
const _b = column.componentProps || {}, componentProps = __rest(_b, ["dataValueOut"]);
|
|
3836
|
+
const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, componentProps), filterItem), { name: columnComponentName });
|
|
3753
3837
|
if (filterItem.helperOptions) {
|
|
3754
3838
|
if (!newColumnComponent.events)
|
|
3755
3839
|
newColumnComponent.events = {};
|
|
@@ -3783,8 +3867,8 @@ class TekGridFilterButton extends Button {
|
|
|
3783
3867
|
}
|
|
3784
3868
|
|
|
3785
3869
|
class TekGridLayoutOptions extends ComponentRender {
|
|
3786
|
-
constructor() {
|
|
3787
|
-
super(
|
|
3870
|
+
constructor(props) {
|
|
3871
|
+
super(props);
|
|
3788
3872
|
this.currentLayoutName = '';
|
|
3789
3873
|
this.layoutEdited = false;
|
|
3790
3874
|
this.layouts = {};
|
|
@@ -3793,6 +3877,8 @@ class TekGridLayoutOptions extends ComponentRender {
|
|
|
3793
3877
|
this.originalDatasourceOrder = [];
|
|
3794
3878
|
this.originalDatasourceDynamicFilter = {};
|
|
3795
3879
|
this.originalDatasourceFilter = {};
|
|
3880
|
+
this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
|
|
3881
|
+
this.createAccessors();
|
|
3796
3882
|
}
|
|
3797
3883
|
getParentGrid() {
|
|
3798
3884
|
let { parent } = this;
|
|
@@ -3803,13 +3889,39 @@ class TekGridLayoutOptions extends ComponentRender {
|
|
|
3803
3889
|
}
|
|
3804
3890
|
return parent;
|
|
3805
3891
|
}
|
|
3892
|
+
loadGrid(gridName) {
|
|
3893
|
+
if (gridName)
|
|
3894
|
+
this.gridName = gridName;
|
|
3895
|
+
if (this.gridName) {
|
|
3896
|
+
const grid = Metadata.getInstances(this.gridName)[0];
|
|
3897
|
+
if (grid)
|
|
3898
|
+
this.grid = grid;
|
|
3899
|
+
}
|
|
3900
|
+
else {
|
|
3901
|
+
this.grid = this.getParentGrid();
|
|
3902
|
+
}
|
|
3903
|
+
if (this.grid) {
|
|
3904
|
+
this.gridName = this.grid.name;
|
|
3905
|
+
}
|
|
3906
|
+
return this.grid;
|
|
3907
|
+
}
|
|
3908
|
+
onGridChangeLayout() {
|
|
3909
|
+
this.layoutEdited = true;
|
|
3910
|
+
}
|
|
3911
|
+
registerChangeLayoutEvent() {
|
|
3912
|
+
if (!this.grid || this.changeLayoutEventGrid === this.grid)
|
|
3913
|
+
return;
|
|
3914
|
+
this.grid.addEvent('changeLayout', this.onGridChangeLayout.bind(this));
|
|
3915
|
+
this.changeLayoutEventGrid = this.grid;
|
|
3916
|
+
}
|
|
3806
3917
|
onMounted(element) {
|
|
3807
3918
|
const _super = Object.create(null, {
|
|
3808
3919
|
onMounted: { get: () => super.onMounted }
|
|
3809
3920
|
});
|
|
3810
3921
|
return __awaiter(this, void 0, void 0, function* () {
|
|
3811
3922
|
_super.onMounted.call(this, element);
|
|
3812
|
-
this.
|
|
3923
|
+
this.loadGrid();
|
|
3924
|
+
this.registerChangeLayoutEvent();
|
|
3813
3925
|
this.originalDatasourceOrder = [...this.grid.datasource.order];
|
|
3814
3926
|
this.originalDatasourceDynamicFilter = Object.assign({}, this.grid.datasource.dynamicFilter);
|
|
3815
3927
|
this.originalDatasourceFilter = Object.assign({}, this.grid.datasource.filter);
|
|
@@ -4346,6 +4458,9 @@ class TekTreeGrid extends TreeGridEditable {
|
|
|
4346
4458
|
getFilterInputs(columnName) {
|
|
4347
4459
|
return this.gridBase.getFilterInputs(columnName);
|
|
4348
4460
|
}
|
|
4461
|
+
registerFilterButton(filterButton) {
|
|
4462
|
+
this.gridBase.registerFilterButton(filterButton);
|
|
4463
|
+
}
|
|
4349
4464
|
getColumn(name) {
|
|
4350
4465
|
return super.getColumn(name);
|
|
4351
4466
|
}
|
|
@@ -4932,4 +5047,4 @@ Messages.add({
|
|
|
4932
5047
|
const packageContent = require('../package.json');
|
|
4933
5048
|
VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
4934
5049
|
|
|
4935
|
-
export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };
|
|
5050
|
+
export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridExportButton, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };
|