| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180 | 1×
1×
1×
1×
20×
20×
20×
20×
20×
20×
20×
20×
20×
1×
19×
19×
19×
1×
354×
354×
19×
19×
19×
19×
1×
19×
19×
19×
19×
19×
19×
19×
1×
19×
2×
19×
19×
19×
19×
19×
19×
19×
19×
1×
19×
19×
19×
1×
19×
1×
19×
19×
19×
19×
19×
1×
1×
1×
18×
1×
19×
19×
19×
19×
19×
5×
5×
4×
19×
1×
1×
1×
18×
1×
10×
10×
10×
10×
10×
10×
10×
10×
10×
10×
10×
10×
10×
1×
4×
4×
4×
4×
4×
4×
4×
1×
7×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "./filter-menu-operator", "./string-filter-ui", "./number-filter-ui", "./boolean-filter-ui", "./date-filter-ui", "../base/util", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, ej2_popups_1, filter_menu_operator_1, string_filter_ui_1, number_filter_ui_1, boolean_filter_ui_1, date_filter_ui_1, util_1, events) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var FilterMenuRenderer = (function () {
function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {
this.isDialogOpen = false;
this.colTypes = {
'string': string_filter_ui_1.StringFilterUI, 'number': number_filter_ui_1.NumberFilterUI, 'date': date_filter_ui_1.DateFilterUI, 'boolean': boolean_filter_ui_1.BooleanFilterUI, 'datetime': date_filter_ui_1.DateFilterUI
};
this.parent = parent;
this.filterSettings = filterSettings;
this.serviceLocator = serviceLocator;
this.customFilterOperators = customFltrOperators;
this.filterObj = fltrObj;
this.flMuiObj = new filter_menu_operator_1.FlMenuOptrUI(this.parent, this.customFilterOperators, this.serviceLocator);
this.l10n = this.serviceLocator.getService('localization');
}
FilterMenuRenderer.prototype.openDialog = function (args) {
this.col = this.parent.getColumnByField(args.field);
Eif (ej2_base_1.isNullOrUndefined(this.col.filter) || (ej2_base_1.isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) {
this.renderDlgContent(args.target, this.col);
}
};
FilterMenuRenderer.prototype.closeDialog = function () {
var elem = document.getElementById(this.dlgObj.element.id);
if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {
this.parent.notify(events.filterMenuClose, { field: this.col.field });
this.isDialogOpen = false;
this.dlgObj.destroy();
ej2_base_1.remove(elem);
}
};
FilterMenuRenderer.prototype.renderDlgContent = function (target, column) {
var args = {
requestType: events.filterBeforeOpen, filterModel: this,
columnName: column.field, columnType: column.type
};
this.parent.trigger(events.actionBegin, args);
var mainDiv = ej2_base_2.createElement('div', { className: 'e-flmenu-maindiv', id: column.uid + '-flmenu' });
this.dlgDiv = ej2_base_2.createElement('div', { className: 'e-flmenu', id: column.uid + '-flmdlg' });
this.parent.element.appendChild(this.dlgDiv);
this.dlgObj = new ej2_popups_1.Dialog({
showCloseIcon: false,
closeOnEscape: false,
locale: this.parent.locale,
visible: false,
enableRtl: this.parent.enableRtl,
created: this.dialogCreated.bind(this, target, column),
position: this.parent.element.classList.contains('e-device') ? { X: 'center', Y: 'center' } : { X: '', Y: '' },
target: this.parent.element.classList.contains('e-device') ? document.body : this.parent.element,
buttons: [{
click: this.filterBtnClick.bind(this, column),
buttonModel: {
content: this.l10n.getConstant('FilterButton'), isPrimary: true, cssClass: 'e-flmenu-okbtn'
}
},
{
click: this.clearBtnClick.bind(this, column),
buttonModel: { content: this.l10n.getConstant('ClearButton'), cssClass: 'e-flmenu-cancelbtn' }
}],
content: mainDiv,
width: (!ej2_base_1.isNullOrUndefined(util_1.parentsUntil(target, 'e-bigger'))) || this.parent.element.classList.contains('e-device') ? 260 : 250,
animationSettings: { effect: 'None' },
cssClass: 'e-filter-popup'
});
this.dlgObj.appendTo(this.dlgDiv);
};
FilterMenuRenderer.prototype.dialogCreated = function (target, column) {
if (!ej2_base_2.Browser.isDevice) {
util_1.getFilterMenuPostion(target, this.dlgObj, this.parent);
}
this.renderFilterUI(target, column);
this.parent.notify(events.filterDialogCreated, {});
this.dlgObj.element.style.maxHeight = '350px';
this.dlgObj.show();
this.writeMethod(column, this.dlgObj.element.querySelector('#' + column.uid + '-flmenu'));
var args = {
requestType: events.filterAfterOpen,
filterModel: this, columnName: column.field, columnType: column.type
};
this.isDialogOpen = true;
this.parent.trigger(events.actionComplete, args);
};
FilterMenuRenderer.prototype.renderFilterUI = function (target, col) {
var dlgConetntEle = this.dlgObj.element.querySelector('.e-flmenu-maindiv');
this.renderOperatorUI(dlgConetntEle, target, col);
this.renderFlValueUI(dlgConetntEle, target, col);
};
FilterMenuRenderer.prototype.renderOperatorUI = function (dlgConetntEle, target, column) {
this.flMuiObj.renderOperatorUI(dlgConetntEle, target, column, this.dlgObj);
};
FilterMenuRenderer.prototype.renderFlValueUI = function (dlgConetntEle, target, column) {
var valueDiv = ej2_base_2.createElement('div', { className: 'e-flmenu-valuediv' });
dlgConetntEle.appendChild(valueDiv);
var args = { target: valueDiv, column: column, getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj };
var instanceofFilterUI = new this.colTypes[column.type](this.parent, this.serviceLocator, this.parent.filterSettings);
if (!ej2_base_1.isNullOrUndefined(column.filter) && !ej2_base_1.isNullOrUndefined(column.filter.ui)
&& !ej2_base_1.isNullOrUndefined(column.filter.ui.create)) {
var temp = column.filter.ui.create;
Iif (typeof temp === 'string') {
temp = ej2_base_1.getValue(temp, window);
}
temp({
column: column, target: valueDiv,
getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj
});
}
else {
instanceofFilterUI.create({
column: column, target: valueDiv,
getOptrInstance: this.flMuiObj, localizeText: this.l10n, dialogObj: this.dlgObj
});
}
};
FilterMenuRenderer.prototype.writeMethod = function (col, dlgContentEle) {
var flValue;
var target = dlgContentEle.querySelector('.e-flmenu-valinput');
var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);
var columns = this.filterSettings.columns;
for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
var column = columns_1[_i];
if (col.field === column.field || col.foreignKeyValue === column.field) {
flValue = column.value;
}
}
if (!ej2_base_1.isNullOrUndefined(col.filter) && !ej2_base_1.isNullOrUndefined(col.filter.ui)
&& !ej2_base_1.isNullOrUndefined(col.filter.ui.write)) {
var temp = col.filter.ui.write;
Iif (typeof temp === 'string') {
temp = ej2_base_1.getValue(temp, window);
}
temp({ column: col, target: target, parent: this.parent, filteredValue: flValue });
}
else {
instanceofFilterUI.write({ column: col, target: target, parent: this.parent, filteredValue: flValue });
}
};
FilterMenuRenderer.prototype.filterBtnClick = function (col) {
var flValue;
var flOptrValue;
var targ = this.dlgObj.element.querySelector('.e-flmenu-valuediv input');
flOptrValue = this.flMuiObj.getFlOperator();
var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);
Iif (!ej2_base_1.isNullOrUndefined(col.filter) &&
!ej2_base_1.isNullOrUndefined(col.filter.ui) && !ej2_base_1.isNullOrUndefined(col.filter.ui.read)) {
var temp = col.filter.ui.read;
if (typeof temp === 'string') {
temp = ej2_base_1.getValue(temp, window);
}
flValue = temp({ element: targ, column: col, operator: flOptrValue, fltrObj: this.filterObj });
}
else {
instanceofFilterUI.read(targ, col, flOptrValue, this.filterObj);
}
var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';
var column = this.parent.element.querySelector('[e-mappinguid="' + col.uid + '"]').parentElement;
var flIcon = column.querySelector(iconClass);
Eif (flIcon) {
flIcon.classList.add('e-filtered');
}
this.closeDialog();
};
FilterMenuRenderer.prototype.clearBtnClick = function (column) {
this.filterObj.removeFilteredColsByField(column.field);
this.closeDialog();
var iconClass = this.parent.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';
var col = this.parent.element.querySelector('[e-mappinguid="' + column.uid + '"]').parentElement;
var flIcon = col.querySelector(iconClass);
Eif (flIcon) {
flIcon.classList.remove('e-filtered');
}
};
FilterMenuRenderer.prototype.destroy = function () {
this.closeDialog();
};
return FilterMenuRenderer;
}());
exports.FilterMenuRenderer = FilterMenuRenderer;
});
|