@syncfusion/ej2-pivotview
Version:
The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table.
976 lines • 60.4 kB
JavaScript
import { createElement, addClass, removeClass, remove, EventHandler, isNullOrUndefined, getInstance } from '@syncfusion/ej2-base';
import { closest } from '@syncfusion/ej2-base';
import * as cls from '../../common/base/css-constant';
import * as events from '../../common/base/constant';
import { TreeView } from '@syncfusion/ej2-navigations';
import { Dialog } from '@syncfusion/ej2-popups';
import { MaskedTextBox, TextBox } from '@syncfusion/ej2-inputs';
import { PivotUtil } from '../../base/util';
import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
/**
* Module to render Field List
*/
/** @hidden */
var TreeViewRenderer = /** @class */ (function () {
/** Constructor for render module
*
* @param {PivotFieldList} parent - Instance of field list.
*/
function TreeViewRenderer(parent) {
this.selectedNodes = [];
this.isSearching = false;
this.parentIDs = [];
this.isSpaceKey = false;
this.olapFieldListData = [];
this.parent = parent;
this.addEventListener();
}
/**
* Initialize the field list tree rendering
*
* @param {number} axis - Axis position.
* @returns {void}
* @private
*/
TreeViewRenderer.prototype.render = function (axis) {
this.parentElement = this.parent.dialogRenderer.parentElement;
this.fieldListSort = this.parent.pivotGridModule ?
this.parent.pivotGridModule.defaultFieldListOrder : this.parent.defaultFieldListOrder;
this.fieldListSort = this.fieldListSort === 'Ascending' ? 'Ascend' :
this.fieldListSort === 'Descending' ? 'Descend' : 'None';
if (!this.parent.isAdaptive) {
var fieldTable = createElement('div', {
className: cls.FIELD_TABLE_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_FIELD_TABLE_CLASS : '')
});
var treeHeader = createElement('div', {
className: cls.FIELD_HEADER_CLASS,
attrs: { title: this.parent.localeObj.getConstant('allFields') }
});
treeHeader.innerText = this.parent.localeObj.getConstant('allFields');
var treeOuterDiv = createElement('div', {
className: cls.FIELD_LIST_TREE_OUTER_DIV_CLASS + ' ' + cls.TREE_CONTAINER
});
this.treeViewElement = createElement('div', {
id: this.parent.element.id + '_TreeView',
className: cls.FIELD_LIST_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_FIELD_LIST_CLASS : '')
});
var fieldHeaderWrappper = createElement('div', { className: cls.FIELD_HEADER_CONTAINER_CLASS });
fieldHeaderWrappper.appendChild(treeHeader);
fieldTable.appendChild(fieldHeaderWrappper);
this.updateSortElements(fieldHeaderWrappper);
if (this.parent.enableFieldSearching) {
var searchWrapper = createElement('div', {
id: this.parent.element.id + '_SearchDiv', attrs: { 'tabindex': '-1' },
className: cls.FIELD_LIST_SEARCH_CLASS
});
var searchInput = createElement('input', { attrs: { 'type': 'text' } });
searchWrapper.appendChild(searchInput);
this.fieldSearch = new TextBox({
placeholder: this.parent.localeObj.getConstant('search'),
enableRtl: this.parent.enableRtl,
locale: this.parent.locale,
cssClass: cls.FIELD_LIST_SEARCH_INPUT_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
input: this.textChange.bind(this),
showClearButton: true
});
this.fieldSearch.isStringTemplate = true;
this.fieldSearch.appendTo(searchInput);
this.fieldSearch.addIcon('append', cls.FIELD_LIST_SEARCH_ICON_CLASS + ' ' + cls.ICON);
var promptDiv = createElement('div', {
className: cls.EMPTY_MEMBER_CLASS + ' ' + cls.ICON_DISABLE
});
promptDiv.innerText = this.parent.localeObj.getConstant('noMatches');
fieldTable.appendChild(searchWrapper);
fieldTable.appendChild(promptDiv);
}
treeOuterDiv.appendChild(this.treeViewElement);
fieldTable.appendChild(treeOuterDiv);
this.parentElement.appendChild(fieldTable);
if (this.parent.renderMode === 'Fixed') {
var centerDiv = createElement('div', { className: cls.STATIC_CENTER_DIV_CLASS });
var axisHeader = createElement('div', {
className: cls.STATIC_CENTER_HEADER_CLASS
});
axisHeader.innerText = this.parent.localeObj.getConstant('centerHeader');
this.parentElement.appendChild(centerDiv);
this.parentElement.appendChild(axisHeader);
}
this.renderTreeView();
}
else {
this.renderTreeDialog(axis);
}
};
TreeViewRenderer.prototype.updateSortElements = function (headerWrapper) {
var options = { 'None': 'sortNone', 'Ascend': 'sortAscending', 'Descend': 'sortDescending' };
var keys = Object.keys(options);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var option = keys_1[_i];
var spanElement = createElement('span', {
attrs: {
'tabindex': '0',
'aria-disabled': 'false',
'aria-label': 'Sort ' + option,
'data-sort': option,
'title': this.parent.localeObj.getConstant(options[option]),
'role': 'button'
},
className: cls.ICON + ' ' + 'e-sort-' + option.toLowerCase() + ' ' +
(this.fieldListSort === option ? 'e-selected' : '')
});
headerWrapper.appendChild(spanElement);
this.unWireFieldListEvent(spanElement);
this.wireFieldListEvent(spanElement);
}
};
TreeViewRenderer.prototype.renderTreeView = function () {
this.fieldTable = new TreeView({
fields: { dataSource: this.getTreeData(), id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass' },
nodeChecked: this.nodeChecked.bind(this),
nodeClicked: this.nodeStateChange.bind(this),
keyPress: this.nodeStateChange.bind(this),
cssClass: cls.FIELD_LIST_TREE_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
showCheckBox: true,
allowDragAndDrop: true,
sortOrder: 'None',
loadOnDemand: this.parent.dataType === 'olap' ? false : (this.parent.enableFieldSearching ? false : true),
enableRtl: this.parent.enableRtl,
locale: this.parent.locale,
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
nodeDragStart: this.dragStart.bind(this),
nodeDragStop: this.dragStop.bind(this),
drawNode: this.updateTreeNode.bind(this),
nodeExpanding: this.updateNodeIcon.bind(this),
nodeCollapsed: this.updateNodeIcon.bind(this),
nodeSelected: function (args) {
removeClass([args.node], 'e-active');
args.cancel = true;
}
});
this.treeViewElement.innerHTML = '';
this.fieldTable.isStringTemplate = true;
this.fieldTable.appendTo(this.treeViewElement);
var dragEle = this.parent.renderMode === 'Fixed' ? this.parent.element : this.parentElement;
if (!isNullOrUndefined(dragEle.querySelector('.' + cls.FIELD_LIST_CLASS))) {
getInstance(dragEle.querySelector('.' + cls.FIELD_LIST_CLASS), TreeView)['dragObj']
.enableAutoScroll = false;
}
};
TreeViewRenderer.prototype.updateNodeIcon = function (args) {
if (this.parent.dataType === 'olap') {
if (args.node && args.node.querySelector('.e-list-icon') &&
(args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-icon') > -1)) {
var node = args.node.querySelector('.e-list-icon');
removeClass([node], 'e-folderCDB-icon');
addClass([node], 'e-folderCDB-open-icon');
}
else if (args.node && args.node.querySelector('.e-list-icon') &&
(args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-open-icon') > -1)) {
var node = args.node.querySelector('.e-list-icon');
removeClass([node], 'e-folderCDB-open-icon');
addClass([node], 'e-folderCDB-icon');
}
}
};
TreeViewRenderer.prototype.updateTreeNode = function (args) {
var allowDrag = false;
if (this.parent.dataType === 'olap') {
allowDrag = this.updateOlapTreeNode(args);
}
else {
if (args.nodeData.hasChildren) {
allowDrag = false;
args.node.querySelector('.' + cls.CHECKBOX_CONTAINER).style.display = 'none';
addClass([args.node], cls.FIELD_TREE_PARENT);
}
else {
allowDrag = true;
}
}
if (!isNullOrUndefined(args.nodeData.pid)) {
addClass([args.node], cls.FIELD_TREE_CHILD);
}
var liTextElement = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);
if (args.node.querySelector('.e-list-icon') && liTextElement) {
var liIconElement = args.node.querySelector('.e-list-icon');
liTextElement.insertBefore(liIconElement, args.node.querySelector('.e-list-text'));
}
if (allowDrag && !this.parent.isAdaptive) {
var field = PivotUtil.getFieldInfo(args.nodeData.id, this.parent);
allowDrag = false;
var dragElement = createElement('span', {
attrs: {
'tabindex': '-1',
title: (field.fieldItem ? field.fieldItem.allowDragAndDrop ?
this.parent.localeObj.getConstant('drag') : '' : this.parent.localeObj.getConstant('drag')),
'aria-disabled': 'false'
},
className: cls.ICON + ' ' + cls.DRAG_CLASS + ' ' +
(field.fieldItem ? field.fieldItem.allowDragAndDrop ? '' : cls.DRAG_DISABLE_CLASS : '')
});
if (args.node.querySelector('.' + cls.CHECKBOX_CONTAINER) &&
!args.node.querySelector('.cls.DRAG_CLASS') && liTextElement) {
liTextElement.insertBefore(dragElement, args.node.querySelector('.' + cls.CHECKBOX_CONTAINER));
}
}
if (args.node.querySelector('.' + cls.NODE_CHECK_CLASS)) {
addClass([args.node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
}
if (this.parent.enableFieldSearching && this.isSearching && this.parent.dataType === 'pivot') {
var liElement = args.node;
for (var i = 0; i < this.nonSearchList.length; i++) {
if (liElement.textContent === this.nonSearchList[i].textContent) {
addClass([liElement], cls.ICON_DISABLE);
break;
}
else {
if (liElement.innerText === this.nonSearchList[i].textContent) {
addClass([liElement], cls.ICON_DISABLE);
break;
}
}
}
}
};
TreeViewRenderer.prototype.updateOlapTreeNode = function (args) {
var allowDrag = false;
if (this.parent.dataType === 'olap') {
if (args.node && args.node.querySelector('.e-calcMemberGroupCDB,.e-measureGroupCDB-icon,.e-folderCDB-icon,.e-folderCDB-open-icon,.e-dimensionCDB-icon,.e-kpiCDB-icon')) {
args.node.querySelector('.' + cls.CHECKBOX_CONTAINER).style.display = 'none';
}
if (args.node && args.node.querySelector('.e-list-icon') &&
(args.node.querySelector('.e-list-icon').className.indexOf('e-level-members') > -1)) {
if (this.parent.isAdaptive) {
args.node.querySelector('.' + cls.CHECKBOX_CONTAINER).style.display = 'none';
}
else {
args.node.querySelector('.' + cls.CHECKBOX_CONTAINER).style.visibility = 'hidden';
}
}
if (args.node && (args.node.querySelector('.e-hierarchyCDB-icon,.e-attributeCDB-icon,.e-namedSetCDB-icon') ||
args.node.querySelector('.e-measure-icon,.e-kpiGoal-icon,.e-kpiStatus-icon,.e-kpiTrend-icon,.e-kpiValue-icon') ||
args.node.querySelector('.e-calc-measure-icon,.e-calc-dimension-icon'))) {
if (args.node.querySelector('.e-measure-icon')) {
args.node.querySelector('.e-list-icon').style.display = 'none';
allowDrag = true;
}
else {
allowDrag = true;
}
}
}
else {
allowDrag = true;
}
return allowDrag;
};
TreeViewRenderer.prototype.renderTreeDialog = function (axis) {
var fieldListDialog = createElement('div', {
id: this.parent.element.id + '_FieldListTreeView',
className: cls.ADAPTIVE_FIELD_LIST_DIALOG_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-editor-dialog' : '')
});
this.parentElement.appendChild(fieldListDialog);
this.fieldDialog = new Dialog({
animationSettings: { effect: 'Fade' },
allowDragging: false,
header: this.parent.localeObj.getConstant('adaptiveFieldHeader'),
content: this.createTreeView(this.getTreeData(axis)),
isModal: true,
visible: true,
showCloseIcon: false,
enableRtl: this.parent.enableRtl,
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
locale: this.parent.locale,
width: '320px',
height: '350px',
position: { X: 'center', Y: 'center' },
buttons: [{
click: this.closeTreeDialog.bind(this),
isFlat: false,
buttonModel: {
cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('cancel')
}
}, {
click: this.onFieldAdd.bind(this),
isFlat: false,
buttonModel: {
cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), content: this.parent.localeObj.getConstant('add'),
isPrimary: true
}
}],
closeOnEscape: false,
cssClass: this.parent.cssClass,
close: this.closeTreeDialog.bind(this),
target: closest(this.parentElement, '.' + cls.WRAPPER_CLASS)
});
this.fieldDialog.isStringTemplate = true;
this.fieldDialog.appendTo(fieldListDialog);
// this.fieldDialog.element.querySelector('.e-dlg-header').innerText = this.parent.localeObj.getConstant('adaptiveFieldHeader');
};
TreeViewRenderer.prototype.createTreeView = function (treeData) {
var editorTreeWrapper = createElement('div', {
id: this.parent.element.id + 'EditorDiv',
className: cls.EDITOR_TREE_WRAPPER_CLASS
});
var searchWrapper = createElement('div', {
id: this.parent.element.id + '_SearchDiv', attrs: { 'tabindex': '-1' },
className: cls.EDITOR_SEARCH_WRAPPER_CLASS
});
var editorSearch = createElement('input', { attrs: { 'type': 'text' } });
searchWrapper.appendChild(editorSearch);
var treeOuterDiv = createElement('div', { className: cls.FIELD_LIST_TREE_OUTER_DIV_CLASS });
var treeViewContainer = createElement('div', {
className: cls.EDITOR_TREE_CONTAINER_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-field-list-tree' : '')
});
editorTreeWrapper.appendChild(searchWrapper);
this.editorSearch = new MaskedTextBox({
showClearButton: true,
placeholder: this.parent.localeObj.getConstant('search'),
enableRtl: this.parent.enableRtl,
locale: this.parent.locale,
cssClass: cls.EDITOR_SEARCH_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
change: this.textChange.bind(this)
});
this.editorSearch.isStringTemplate = true;
this.editorSearch.appendTo(editorSearch);
var promptDiv = createElement('div', {
className: cls.EMPTY_MEMBER_CLASS + ' ' + cls.ICON_DISABLE
});
promptDiv.innerText = this.parent.localeObj.getConstant('noMatches');
editorTreeWrapper.appendChild(promptDiv);
treeOuterDiv.appendChild(treeViewContainer);
editorTreeWrapper.appendChild(treeOuterDiv);
this.fieldTable = new TreeView({
fields: { dataSource: treeData, id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass' },
showCheckBox: true,
loadOnDemand: this.parent.dataType === 'olap' ? false : true,
sortOrder: this.parent.dataType === 'olap' ? 'None' : 'Ascending',
enableRtl: this.parent.enableRtl,
locale: this.parent.locale,
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
cssClass: this.parent.cssClass,
nodeChecked: this.nodeChecked.bind(this),
nodeClicked: this.addNode.bind(this),
keyPress: this.addNode.bind(this),
drawNode: this.updateTreeNode.bind(this),
nodeExpanding: this.updateNodeIcon.bind(this),
nodeCollapsed: this.updateNodeIcon.bind(this),
nodeSelected: function (args) {
removeClass([args.node], 'e-active');
args.cancel = true;
}
});
this.fieldTable.isStringTemplate = true;
this.fieldTable.appendTo(treeViewContainer);
return editorTreeWrapper;
};
TreeViewRenderer.prototype.textChange = function (e) {
var _this = this;
if (this.parent.dataType === 'olap') {
if (e.value === '') {
this.fieldTable.fields.dataSource = this.olapFieldListData;
setTimeout(function () {
_this.fieldTable.collapseAll();
});
this.isSearching = false;
this.promptVisibility(false);
}
else {
this.fieldTable.fields.dataSource = this.performeSearching(e.value);
setTimeout(function () {
_this.fieldTable.expandAll();
});
this.isSearching = true;
this.promptVisibility(this.fieldTable.fields.dataSource.length === 0);
}
}
else {
this.parent.pivotCommon.eventBase.searchTreeNodes(e, this.fieldTable, true);
var liList = [].slice.call(this.fieldTable.element.querySelectorAll('li'));
var disabledList = [].slice.call(this.fieldTable.element.querySelectorAll('li.' + cls.ICON_DISABLE));
this.promptVisibility(liList.length === disabledList.length);
this.isSearching = disabledList.length > 0 ? true : false;
this.nonSearchList = disabledList;
}
};
TreeViewRenderer.prototype.promptVisibility = function (isPromptVisible) {
var promptDiv;
var treeOuterDiv;
if (this.parent.isAdaptive) {
promptDiv = this.fieldDialog.element.querySelector('.' + cls.EMPTY_MEMBER_CLASS);
}
else {
promptDiv = this.parentElement.querySelector('.' + cls.EMPTY_MEMBER_CLASS);
treeOuterDiv = this.parentElement.querySelector('.' + cls.TREE_CONTAINER);
}
if (isPromptVisible) {
removeClass([promptDiv], cls.ICON_DISABLE);
if (!this.parent.isAdaptive) {
addClass([treeOuterDiv], cls.ICON_DISABLE);
removeClass([promptDiv], cls.FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS);
}
}
else {
addClass([promptDiv], cls.ICON_DISABLE);
if (!this.parent.isAdaptive) {
removeClass([treeOuterDiv], cls.ICON_DISABLE);
addClass([promptDiv], cls.FIELD_LIST_TREE_OUTER_DIV_SEARCH_CLASS);
}
}
};
TreeViewRenderer.prototype.performeSearching = function (searchValue) {
var _this = this;
var dataManager = new DataManager(this.olapFieldListData);
var filteredList = dataManager.executeLocal(new Query().where(new Predicate(this.fieldTable.fields.text, 'contains', searchValue, true)));
var predicates = [];
var filterId = new Set();
filteredList.forEach(function (item) {
if (item) {
var parentItems = [];
var childItems = [];
if (item['pid']) {
parentItems = _this.getParentItems(dataManager, 'id', item['pid']);
}
if (item['hasChildren']) {
childItems = dataManager.executeLocal(new Query().where('pid', 'equal', item['id'], false));
}
var filteredItem = parentItems.concat([item]).concat(childItems);
filteredItem.forEach(function (child) {
var childId = child['id'];
if (!filterId.has(childId)) {
filterId.add(childId);
predicates.push(new Predicate('id', 'equal', childId, false));
}
});
}
});
return predicates.length > 0 ? dataManager.executeLocal(new Query().where(Predicate.or.apply(Predicate, predicates))) : [];
};
TreeViewRenderer.prototype.getParentItems = function (dataManager, key, value) {
var parentItems = dataManager.executeLocal(new Query().where(key, 'equal', value, false));
if (parentItems && parentItems[0] && parentItems[0]['pid']) {
parentItems = this.getParentItems(dataManager, key, parentItems[0]['pid']).concat(parentItems);
}
return parentItems;
};
TreeViewRenderer.prototype.dragStart = function (args) {
var _this = this;
if (args.event.target.classList.contains(cls.DRAG_CLASS) &&
!args.event.target.classList.contains(cls.DRAG_DISABLE_CLASS)) {
var fieldInfo = PivotUtil.getFieldInfo(args.draggedNode.getAttribute('data-uid'), this.parent);
var dragEventArgs = {
fieldName: fieldInfo.fieldName, fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis,
dataSourceSettings: this.parent.dataSourceSettings, cancel: false
};
var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
control.trigger(events.fieldDragStart, dragEventArgs, function (observedArgs) {
if (!observedArgs.cancel) {
_this.parent.isDragging = true;
addClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);
var data = void 0;
if (_this.parent.dataType === 'olap') {
data = _this.parent.olapEngineModule.fieldList[args.draggedNode.getAttribute('data-uid')];
}
else {
data = _this.parent.engineModule.fieldList[args.draggedNode.getAttribute('data-uid')];
}
var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];
if (data && data.aggregateType === 'CalculatedField') {
for (var _i = 0, axis_1 = axis; _i < axis_1.length; _i++) {
var axisContent = axis_1[_i];
addClass([_this.parentElement.querySelector('.' + axisContent)], cls.NO_DRAG_CLASS);
}
}
var dragItem = args.clonedNode;
if (dragItem && (_this.parent.getModuleName() === 'pivotfieldlist' &&
_this.parent.renderMode) === 'Popup') {
dragItem.style.zIndex = (_this.parent.dialogRenderer.fieldListDialog.zIndex + 1).toString();
}
}
else {
_this.parent.isDragging = false;
args.cancel = true;
}
});
}
else {
this.parent.isDragging = false;
args.cancel = true;
}
};
// private getFieldDragEventArgs(dragEventArgs: FieldDragStartEventArgs): FieldDragStartEventArgs | Deferred {
// let callbackPromise: Deferred = new Deferred();
// let control: PivotView | PivotFieldList = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
// control.trigger(events.fieldDragStart, dragEventArgs, (observedArgs: FieldDragStartEventArgs) => {
// callbackPromise.resolve(observedArgs);
// });
// return callbackPromise;
// }
TreeViewRenderer.prototype.dragStop = function (args) {
args.cancel = true;
this.parent.isDragging = false;
var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];
for (var _i = 0, axis_2 = axis; _i < axis_2.length; _i++) {
var axisElement = axis_2[_i];
removeClass([this.parentElement.querySelector('.' + axisElement)], cls.NO_DRAG_CLASS);
}
removeClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);
if (this.parent.pivotCommon.filterDialog.dialogPopUp) {
this.parent.pivotCommon.filterDialog.dialogPopUp.close();
}
var fieldName = args.draggedNodeData.id.toString();
if (!this.isNodeDropped(args, fieldName)) {
return;
}
var list = this.parent.pivotFieldList;
var selectedNode = list[fieldName];
this.parent.pivotCommon.dataSourceUpdate.control = this.parent.getModuleName() === 'pivotview' ? this.parent :
(this.parent.isPopupView && this.parent.pivotGridModule ? this.parent.pivotGridModule
: this.parent);
if (this.parent.pivotCommon.nodeStateModified.onStateModified(args, fieldName)) {
if (this.parent.isDeferLayoutUpdate || (this.parent.pivotGridModule && this.parent.pivotGridModule.pivotDeferLayoutUpdate)) {
selectedNode.isSelected = true;
this.updateDataSource();
}
else {
this.parent.updateDataSource();
}
var parent_1 = this.parent;
//setTimeout(() => {
parent_1.axisFieldModule.render();
//});
}
};
TreeViewRenderer.prototype.isNodeDropped = function (args, targetID) {
var isDropped = true;
if (args.draggedNodeData.isChecked === 'true') {
var target = this.getButton(targetID);
var axisPanel = closest(target, '.' + cls.DROPPABLE_CLASS);
var droppableElement = closest(args.target, '.' + cls.DROPPABLE_CLASS);
if (target && axisPanel === droppableElement) {
var pivotButtons = [].slice.call(axisPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS));
var dropTarget = closest(args.target, '.' + cls.PIVOT_BUTTON_WRAPPER_CLASS);
var sourcePosition = void 0;
var dropPosition = -1;
for (var i = 0, n = pivotButtons.length; i < n; i++) {
if (pivotButtons[i].id === target.id) {
sourcePosition = i;
}
if (dropTarget) {
var droppableButton = dropTarget.querySelector('.' + cls.PIVOT_BUTTON_CLASS);
if (pivotButtons[i].id === droppableButton.id) {
dropPosition = i;
}
}
}
if (sourcePosition === dropPosition || (sourcePosition === (pivotButtons.length - 1) && dropPosition === -1)) {
var parentElement = document.getElementById(this.parent.element.id + '_Container');
removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);
isDropped = false;
}
}
}
return isDropped;
};
TreeViewRenderer.prototype.getButton = function (fieldName) {
var wrapperElement = document.getElementById(this.parent.element.id + '_Container');
var pivotButtons = [].slice.call(wrapperElement.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS));
var buttonElement;
for (var i = 0, n = pivotButtons.length; i < n; i++) {
if (pivotButtons[i].getAttribute('data-uid') === fieldName) {
buttonElement = pivotButtons[i];
break;
}
}
return buttonElement;
};
TreeViewRenderer.prototype.nodeChecked = function (args) {
if (this.isSpaceKey) {
var node = closest(args.node, '.' + cls.TEXT_CONTENT_CLASS);
if (!isNullOrUndefined(node)) {
var li = closest(node, 'li');
var id = li.getAttribute('data-uid');
if (this.parent.isAdaptive) {
this.addNode(undefined, id, args.action === 'check', node);
}
else {
this.nodeStateChange(undefined, id, args.action === 'check', node);
}
}
}
this.isSpaceKey = false;
};
TreeViewRenderer.prototype.nodeStateChange = function (args, id, isChecked, node) {
var _this = this;
node = isNullOrUndefined(node) ? args.node : node;
id = isNullOrUndefined(id) ? node.getAttribute('data-uid') : id;
if (this.parent.pivotCommon.filterDialog.dialogPopUp) {
this.parent.pivotCommon.filterDialog.dialogPopUp.close();
}
var list = this.parent.pivotFieldList;
var selectedNode = list[id];
if (!isNullOrUndefined(args)) {
this.isSpaceKey = args.event.action && args.event.action === 'space';
if (isNullOrUndefined(selectedNode) || node.classList.contains(cls.ICON_DISABLE) || (args.event.target &&
(args.event.target.classList.contains(cls.COLLAPSIBLE) ||
args.event.target.classList.contains(cls.EXPANDABLE))) ||
(args.event.action && args.event.action !== 'enter')) {
return;
}
isChecked = false;
var getNodeDetails = this.fieldTable.getNode(node);
if (args.event && args.event.target &&
!args.event.target.closest('.' + cls.CHECKBOX_CONTAINER)) {
if (getNodeDetails.isChecked === 'true') {
this.fieldTable.uncheckAll([node]);
isChecked = false;
}
else {
this.fieldTable.checkAll([node]);
isChecked = true;
}
}
else {
isChecked = getNodeDetails.isChecked === 'true';
}
}
var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
var fieldInfo = PivotUtil.getFieldInfo(id, this.parent);
var parentNode = node.closest('.' + cls.FIELD_TREE_PARENT);
if (isChecked) {
var eventdrop = {
fieldName: id, dropField: fieldInfo.fieldItem,
dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
dropAxis: (selectedNode.type === 'number' || (selectedNode.type === 'CalculatedField' &&
selectedNode.formula && selectedNode.formula.indexOf('Measure') > -1 &&
this.parent.dataType === 'olap')) ? 'values' : 'rows',
dropPosition: fieldInfo.position, draggedAxis: 'fieldlist', cancel: false
};
control.trigger(events.fieldDrop, eventdrop, function (observedArgs) {
if (!observedArgs.cancel) {
addClass([node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
if (parentNode) {
addClass([parentNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
}
_this.updateSelectedNodes(node, 'check');
var addNode = _this.parent.pivotCommon.dataSourceUpdate.getNewField(id, fieldInfo.fieldItem);
_this.updateReportSettings(addNode, observedArgs);
_this.updateNodeStateChange(id, selectedNode, isChecked);
}
else {
_this.updateCheckState(selectedNode, 'check');
}
});
}
else {
var removeFieldArgs = {
cancel: false, fieldName: id,
dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis
};
control.trigger(events.fieldRemove, removeFieldArgs, function (observedArgs) {
if (!observedArgs.cancel) {
removeClass([node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
if (parentNode && isNullOrUndefined(parentNode.querySelector('.' + cls.FIELD_TREE_CHILD + ' .' + cls.NODE_CHECK_CLASS))) {
removeClass([parentNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
}
_this.updateSelectedNodes(node, 'uncheck');
_this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport(id);
if (_this.parent.dataType === 'pivot' && _this.parent.showValuesButton && _this.parent.dataSourceSettings.values.length > 1 &&
fieldInfo && fieldInfo.position < _this.parent.dataSourceSettings.valueIndex &&
((_this.parent.dataSourceSettings.valueAxis === 'row' && fieldInfo.axis === 'rows') ||
(_this.parent.dataSourceSettings.valueAxis === 'column' && fieldInfo.axis === 'columns'))) {
control.setProperties({ dataSourceSettings: { valueIndex: _this.parent.dataSourceSettings.valueIndex - 1 } }, true);
}
if (_this.parent.dataType === 'olap' && _this.parent.dataSourceSettings.values.length === 0) {
_this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');
}
_this.updateNodeStateChange(id, selectedNode, isChecked);
}
else {
_this.updateCheckState(selectedNode, 'uncheck');
}
});
}
};
TreeViewRenderer.prototype.updateReportSettings = function (newField, dropArgs) {
var dropPosition = dropArgs.dropPosition;
var dropClass = dropArgs.dropAxis;
if (this.parent.dataType === 'pivot' && this.parent.showValuesButton && this.parent.dataSourceSettings.values.length > 1) {
var dropAxisFields = (this.parent.dataSourceSettings.valueAxis === 'row' &&
dropClass === 'rows') ? this.parent.dataSourceSettings.rows : (this.parent.dataSourceSettings.valueAxis === 'column' && dropClass === 'columns') ?
this.parent.dataSourceSettings.columns : undefined;
if (!isNullOrUndefined(dropAxisFields)) {
if (dropPosition === -1 && this.parent.dataSourceSettings.valueIndex === -1) {
this.parent.setProperties({ dataSourceSettings: { valueIndex: dropAxisFields.length } }, true);
}
else if (dropPosition > -1 && dropPosition <= this.parent.dataSourceSettings.valueIndex) {
this.parent.setProperties({ dataSourceSettings: { valueIndex: this.parent.dataSourceSettings.valueIndex + 1 } }, true);
}
else if (this.parent.dataSourceSettings.valueIndex > -1 && dropPosition > this.parent.dataSourceSettings.valueIndex) {
dropPosition = dropPosition - 1;
}
}
}
switch (dropClass) {
case 'filters':
if (dropPosition !== -1) {
this.parent.dataSourceSettings.filters.splice(dropPosition, 0, newField);
}
else {
this.parent.dataSourceSettings.filters.push(newField);
}
break;
case 'rows':
if (dropPosition !== -1) {
this.parent.dataSourceSettings.rows.splice(dropPosition, 0, newField);
}
else {
this.parent.dataSourceSettings.rows.push(newField);
}
break;
case 'columns':
if (dropPosition !== -1) {
this.parent.dataSourceSettings.columns.splice(dropPosition, 0, newField);
}
else {
this.parent.dataSourceSettings.columns.push(newField);
}
break;
case 'values':
if (dropPosition !== -1) {
this.parent.dataSourceSettings.values.splice(dropPosition, 0, newField);
}
else {
this.parent.dataSourceSettings.values.push(newField);
}
if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&
!(this.parent.olapEngineModule).isMeasureAvail && !(this.parent.dataSourceSettings.values.length > 1)) {
var measureField = {
name: '[Measures]', caption: 'Measures', baseField: undefined, baseItem: undefined
};
var fieldAxis = this.parent.dataSourceSettings.valueAxis === 'row' ?
this.parent.dataSourceSettings.rows : this.parent.dataSourceSettings.columns;
fieldAxis.push(measureField);
}
break;
}
};
TreeViewRenderer.prototype.updateCheckState = function (selectedNode, action) {
var chkState = this.fieldTable.element.querySelectorAll('.' + cls.CHECKBOX_CONTAINER);
var innerText = this.fieldTable.element.querySelectorAll('.e-list-text');
for (var i = 0; i < chkState.length; i++) {
if (selectedNode.caption === innerText[i].textContent) {
if (action === 'check') {
this.fieldTable.uncheckAll([selectedNode['id']]);
}
else {
this.fieldTable.checkAll([selectedNode['id']]);
}
}
}
};
TreeViewRenderer.prototype.updateNodeStateChange = function (id, selectedNode, isChecked) {
if (this.parent.isDeferLayoutUpdate === false || (this.parent.pivotGridModule &&
this.parent.pivotGridModule.pivotDeferLayoutUpdate === false)) {
this.parent.updateDataSource(true);
}
else {
selectedNode.isSelected = isChecked;
if (this.parent.dataType === 'olap') {
this.parent.olapEngineModule.updateFieldlistData(id, isChecked);
}
this.updateDataSource();
}
var selectedLi = this.treeViewElement.querySelector('[data-uid="' + id + '"]');
selectedLi.focus();
removeClass([selectedLi], 'e-hover');
var parent = this.parent;
setTimeout(function () {
parent.axisFieldModule.render();
});
};
TreeViewRenderer.prototype.updateSelectedNodes = function (li, state) {
if (li && li.querySelector('ul')) {
for (var _i = 0, _a = [].slice.call(li.querySelectorAll('li')); _i < _a.length; _i++) {
var element = _a[_i];
if (state === 'check') {
addClass([element.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
}
else {
removeClass([element.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);
}
}
}
};
TreeViewRenderer.prototype.updateDataSource = function () {
if (this.parent.isPopupView) {
if (this.parent.dataType === 'olap') {
this.parent.pivotGridModule.olapEngineModule = this.parent.olapEngineModule;
}
else {
this.parent.pivotGridModule.engineModule = this.parent.engineModule;
}
this.parent.pivotGridModule.setProperties({ dataSourceSettings: this.parent.dataSourceSettings.properties }, true);
this.parent.pivotGridModule.notify(events.uiUpdate, this);
}
else {
this.parent.triggerPopulateEvent();
}
};
TreeViewRenderer.prototype.addNode = function (args, id, isChecked, node) {
var _this = this;
node = isNullOrUndefined(node) ? args.node : node;
id = isNullOrUndefined(id) ? node.getAttribute('data-uid') : id;
var list = this.parent.pivotFieldList;
var selectedNode = list[id];
if (!isNullOrUndefined(args)) {
this.isSpaceKey = args.event.key && args.event.key === ' ';
if (isNullOrUndefined(selectedNode) || args.node.classList.contains(cls.ICON_DISABLE) || (args.event.target &&
(args.event.target.classList.contains(cls.COLLAPSIBLE) ||
args.event.target.classList.contains(cls.EXPANDABLE))) ||
(args.event.key && args.event.key !== 'Enter')) {
return;
}
isChecked = false;
var getNodeDetails = this.fieldTable.getNode(args.node);
if (args.event && args.event.target &&
!args.event.target.classList.contains(cls.CHECK_BOX_FRAME_CLASS)) {
if (getNodeDetails.isChecked === 'true') {
this.fieldTable.uncheckAll([args.node]);
isChecked = false;
}
else {
this.fieldTable.checkAll([args.node]);
isChecked = true;
}
}
else {
isChecked = getNodeDetails.isChecked === 'true';
}
}
var fieldInfo = PivotUtil.getFieldInfo(selectedNode.id.toString(), this.parent);
var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
if (isChecked) {
var axis = ['filters', 'columns', 'rows', 'values'];
var eventdrop = {
fieldName: fieldInfo.fieldName, dropField: fieldInfo.fieldItem,
dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
dropAxis: axis[this.parent.dialogRenderer.adaptiveElement.selectedItem], draggedAxis: 'fieldlist', cancel: false
};
control.trigger(events.fieldDrop, eventdrop, function (observedArgs) {
if (!observedArgs.cancel) {
_this.selectedNodes.push(selectedNode.id.toString());
}
else {
_this.updateCheckState(selectedNode, 'check');
}
});
}
else {
var removeFieldArgs = {
cancel: false, fieldName: fieldInfo.fieldName,
dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis
};
control.trigger(events.fieldRemove, removeFieldArgs, function (observedArgs) {
if (!observedArgs.cancel) {
var count = _this.selectedNodes.length;
while (count--) {
if (_this.selectedNodes[count] === selectedNode.id.toString()) {
_this.selectedNodes.splice(count, 1);
break;
}
}
}
else {
_this.updateCheckState(selectedNode, 'uncheck');
}
});
}
};
TreeViewRenderer.prototype.refreshTreeView = function () {
if (this.fieldTable) {
var treeData = this.getUpdatedData();
this.fieldTable.fields = {
dataSource: treeData, id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass'
};
this.fieldTable.dataBind();
}
};
TreeViewRenderer.prototype.getUpdatedData = function () {
var treeData = this.getTreeData();
var expandedNodes = this.fieldTable.expandedNodes;
this.updateExpandedNodes(treeData, expandedNodes);
return this.applySorting(treeData, this.fieldListSort);
};
TreeViewRenderer.prototype.getTreeData = function (axis) {
var data = [];
if (this.parent.dataType === 'olap') {
data = this.getOlapTreeData(axis);
if (this.isSearching && this.olapFieldListData.length > 0) {
data = this.performeSearching(this.fieldSearch.value);
}
}
else {
var keys = this.parent.pivotFieldList ? Object.keys(this.parent.pivotFieldList).reverse() : [];
var treeDataInfo = {};
for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
var key = keys_2[_i];
var member = this.parent.pivotFieldList[key];
treeDataInfo[key] = { id: member.id, pid: member.pid, caption: member.caption, isSelected: member.isSelected };
if (!isNullOrUndefined(member.pid) && !treeDataInfo[key].hasChildren) {
var parentId = member.pid + '_group_name';
treeDataInfo[key].pid = parentId;
treeDataInfo[parentId] = {
id: parentId, caption: member.pid,
isSelected: treeDataInfo[parentId] && treeDataInfo[parentId].isSelected
? treeDataInfo[parentId].isSelected : member.isSelected, hasChildren: true
};
}
}
if (this.parent.isAdaptive) {
var fields = [this.parent.dataSourceSettings.filters, this.parent.dataSourceSettings.columns,
this.parent.dataSourceSettings.rows,
this.parent.dataSourceSettings.values];
var currentFieldSet = fields[axis];
var len = keys.length;
while (len--) {
treeDataInfo[keys[len]].isSelected = false;
}
for (var _a = 0, currentFieldSet_1 = currentFieldSet; _a < currentFieldSet_1.length; _a++) {
var item = currentFieldSet_1[_a];
treeDataInfo[item.name].isSelected = true;
}
}
var members = Object.keys(treeDataInfo);
for (var _b = 0, members_1 = members; _b < members_1.length; _b++) {
var member = members_1[_b];
var obj = treeDataInfo[member];
data.push(obj);
}
}
return data;
};
TreeViewRenderer.prototype.getOlapTreeData = function (axis) {
var data = [];
var fieldListData = this.parent.olapEngineModule.fieldListData ? this.parent.olapEngineModule.fieldListData : [];
if (this.parent.isAdaptive) {
var fields = [
this.parent.dataSourceSettings.filters, this.parent.dataSourceSettings.columns,
this.parent.dataSourceSettings.rows, this.parent.dataSourceSettings.values
];
var currentFieldSet = fields[axis];
var i = 0;
while (i < fieldListData.length) {
var item = fieldListData[i];
var framedSet = void 0;
if (axis === 3) {
if (item.id.toLowerCase() !== '[measures]' &&
(item.id.toLowerCase().indexOf('[measures]') === 0 ||
(item.spriteCssClass && item.spriteCssClass.indexOf('e-measureCDB') !== -1)) ||
(item.id.toLowerCase() === '[calculated members].[_0]' ||
(item.spriteCssClass && item.spriteCssClass.indexOf('e-calc-measure-icon') !== -1))) {
framedSet = {
id: item.id, caption: item.caption, hasChildren: item.hasChildren,
type: item.type, aggregateType: item.aggre