/**
* DevExtreme (ui/pivot_grid/ui.pivot_grid.field_chooser.js)
* Version: 19.1.16
* Build date: Tue Oct 18 2022
*
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
var _renderer = require("../../core/renderer");
var _renderer2 = _interopRequireDefault(_renderer);
var _icon = require("../../core/utils/icon");
var _window = require("../../core/utils/window");
var _type = require("../../core/utils/type");
var _extend = require("../../core/utils/extend");
var _array = require("../../core/utils/array");
var _iterator = require("../../core/utils/iterator");
var _message = require("../../localization/message");
var _component_registrator = require("../../core/component_registrator");
var _component_registrator2 = _interopRequireDefault(_component_registrator);
var _uiPivot_grid = require("./ui.pivot_grid.utils");
var _tree_view = require("../tree_view");
var _tree_view2 = _interopRequireDefault(_tree_view);
var _context_menu = require("../context_menu");
var _context_menu2 = _interopRequireDefault(_context_menu);
var _uiPivot_grid2 = require("./ui.pivot_grid.field_chooser_base");
var _uiPivot_grid3 = _interopRequireDefault(_uiPivot_grid2);
require("./data_source");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
}
}
var DIV = "
";
var hasWindow = (0, _window.hasWindow)();
var FIELDCHOOSER_CLASS = "dx-pivotgridfieldchooser";
var FIELDCHOOSER_CONTAINER_CLASS = "dx-pivotgridfieldchooser-container";
var FIELDS_CONTAINER_CLASS = "dx-pivotgrid-fields-container";
var AREA_DRAG_CLASS = "dx-pivotgrid-drag-action";
function getDimensionFields(item, fields) {
var result = [];
if (item.items) {
for (var i = 0; i < item.items.length; i++) {
result.push.apply(result, getDimensionFields(item.items[i], fields))
}
} else {
if ((0, _type.isDefined)(item.index)) {
result.push(fields[item.index])
}
}
return result
}
function getFirstItem(item, condition) {
if (item.items) {
for (var i = 0; i < item.items.length; i++) {
var childrenItem = getFirstItem(item.items[i], condition);
if (childrenItem) {
return childrenItem
}
}
}
if (condition(item)) {
return item
}
}
var compareOrder = [function(a, b) {
var aValue = -!!a.isMeasure;
var bValue = +!!b.isMeasure;
return aValue + bValue
}, function(a, b) {
var aValue = -!!(a.items && a.items.length);
var bValue = +!!(b.items && b.items.length);
return aValue + bValue
}, function(a, b) {
var aValue = +!!(false === a.isMeasure && a.field && a.field.levels && a.field.levels.length);
var bValue = -!!(false === b.isMeasure && b.field && b.field.levels && b.field.levels.length);
return aValue + bValue
}, (0, _uiPivot_grid.getCompareFunction)(function(item) {
return item.text
})];
function compareItems(a, b) {
var result = 0;
var i = 0;
while (!result && compareOrder[i]) {
result = compareOrder[i++](a, b)
}
return result
}
function getScrollable(container) {
return container.find(".dx-scrollable").dxScrollable("instance")
}
var FieldChooser = _uiPivot_grid3.default.inherit({
_getDefaultOptions: function() {
return (0, _extend.extend)(this.callBase(), {
height: 400,
layout: 0,
dataSource: null,
onContextMenuPreparing: null,
allowSearch: false,
searchTimeout: 500,
texts: {
columnFields: (0, _message.format)("dxPivotGrid-columnFields"),
rowFields: (0, _message.format)("dxPivotGrid-rowFields"),
dataFields: (0, _message.format)("dxPivotGrid-dataFields"),
filterFields: (0, _message.format)("dxPivotGrid-filterFields"),
allFields: (0, _message.format)("dxPivotGrid-allFields")
}
})
},
_refreshDataSource: function() {
var that = this;
that._expandedPaths = [];
that._changedHandler = that._changedHandler || function() {
(0, _iterator.each)(that._dataChangedHandlers, function(_, func) {
func()
});
that._fireContentReadyAction();
that._skipStateChange = true;
that.option("state", that._dataSource.state());
that._skipStateChange = false
};
if (that._dataSource) {
that._dataSource.off("changed", that._changedHandler);
that._dataSource = void 0
}
that.callBase();
that._dataSource && that._dataSource.on("changed", that._changedHandler)
},
_init: function() {
this.callBase();
this._refreshDataSource();
this._dataChangedHandlers = [];
this._initActions()
},
_initActions: function() {
this._actions = {
onContextMenuPreparing: this._createActionByOption("onContextMenuPreparing")
}
},
_trigger: function(eventName, eventArg) {
this._actions[eventName](eventArg)
},
_setOptionsByReference: function() {
this.callBase();
(0, _extend.extend)(this._optionsByReference, {
dataSource: true
})
},
_optionChanged: function(args) {
var that = this;
switch (args.name) {
case "dataSource":
that._refreshDataSource();
that._invalidate();
break;
case "layout":
case "texts":
case "allowSearch":
case "searchTimeout":
that._invalidate();
break;
case "onContextMenuPreparing":
that._actions[args.name] = that._createActionByOption(args.name);
break;
default:
that.callBase(args)
}
},
_clean: function(skipStateSetting) {
!skipStateSetting && this._dataSource && this.option("state", this._dataSource.state());
this.$element().children("." + FIELDCHOOSER_CONTAINER_CLASS).remove()
},
_renderLayout0: function($container) {
var that = this;
$container.addClass("dx-layout-0");
var $row1 = (0, _renderer2.default)(DIV).addClass("dx-row").appendTo($container);
var $row2 = (0, _renderer2.default)(DIV).addClass("dx-row").appendTo($container);
var $col1 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row1);
var $col2 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row1);
var $col3 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row2);
var $col4 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row2);
that._renderArea($col1, "all");
that._renderArea($col2, "row");
that._renderArea($col2, "column");
that._renderArea($col3, "filter");
that._renderArea($col4, "data")
},
_renderLayout1: function($container) {
var that = this;
var $col1 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($container);
var $col2 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($container);
that._renderArea($col1, "all");
that._renderArea($col2, "filter");
that._renderArea($col2, "row");
that._renderArea($col2, "column");
that._renderArea($col2, "data")
},
_renderLayout2: function($container) {
var that = this;
$container.addClass("dx-layout-2");
var $row1 = (0, _renderer2.default)(DIV).addClass("dx-row").appendTo($container);
that._renderArea($row1, "all");
var $row2 = (0, _renderer2.default)(DIV).addClass("dx-row").appendTo($container);
var $col1 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row2);
var $col2 = (0, _renderer2.default)(DIV).addClass("dx-col").appendTo($row2);
that._renderArea($col1, "filter");
that._renderArea($col1, "row");
that._renderArea($col2, "column");
that._renderArea($col2, "data")
},
_initMarkup: function() {
var that = this;
var $element = this.$element();
var $container = (0, _renderer2.default)(DIV).addClass(FIELDCHOOSER_CONTAINER_CLASS).appendTo($element);
var layout = that.option("layout");
that.callBase();
$element.addClass(FIELDCHOOSER_CLASS).addClass(FIELDS_CONTAINER_CLASS);
that._dataChangedHandlers = [];
var dataSource = this._dataSource;
var currentState = "instantly" !== that.option("applyChangesMode") && dataSource && dataSource.state();
currentState && that.option("state") && dataSource.state(that.option("state"), true);
if (0 === layout) {
that._renderLayout0($container)
} else {
if (1 === layout) {
that._renderLayout1($container)
} else {
that._renderLayout2($container)
}
}
currentState && dataSource.state(currentState, true)
},
_renderContentImpl: function() {
this.callBase();
this.renderSortable();
this._renderContextMenu();
this.updateDimensions()
},
_fireContentReadyAction: function() {
if (!this._dataSource || !this._dataSource.isLoading()) {
this.callBase()
}
},
_getContextMenuArgs: function(dxEvent) {
var targetFieldElement = (0, _renderer2.default)(dxEvent.target).closest(".dx-area-field");
var targetGroupElement = (0, _renderer2.default)(dxEvent.target).closest(".dx-area-fields");
var field;
var area;
if (targetFieldElement.length) {
var fieldCopy = targetFieldElement.data("field");
if (fieldCopy) {
field = this.getDataSource().field(fieldCopy.index) || fieldCopy
}
}
if (targetGroupElement.length) {
area = targetGroupElement.attr("group")
}
return {
event: dxEvent,
field: field,
area: area,
items: []
}
},
_renderContextMenu: function() {
var that = this;
var $container = that.$element();
if (that._contextMenu) {
that._contextMenu.$element().remove()
}
that._contextMenu = that._createComponent((0, _renderer2.default)(DIV).appendTo($container), _context_menu2.default, {
onPositioning: function(actionArgs) {
var event = actionArgs.event;
if (!event) {
return
}
var args = that._getContextMenuArgs(event);
that._trigger("onContextMenuPreparing", args);
if (args.items && args.items.length) {
actionArgs.component.option("items", args.items)
} else {
actionArgs.cancel = true
}
},
target: $container,
onItemClick: function(params) {
params.itemData.onItemClick && params.itemData.onItemClick(params)
},
cssClass: "dx-pivotgridfieldchooser-context-menu"
})
},
_createTreeItems: function(fields, groupFieldNames, path) {
var that = this;
var isMeasure;
var resultItems = [];
var groupedItems = [];
var groupFieldName = groupFieldNames[0];
var fieldsByGroup = {};
if (!groupFieldName) {
(0, _iterator.each)(fields, function(index, field) {
var icon;
if (true === field.isMeasure) {
icon = "measure"
}
if (false === field.isMeasure) {
icon = field.groupName ? "hierarchy" : "dimension"
}
resultItems.push({
index: field.index,
field: field,
key: field.dataField,
selected: (0, _type.isDefined)(field.area),
text: field.caption || field.dataField,
icon: icon,
isMeasure: field.isMeasure,
isDefault: field.isDefault
})
})
} else {
(0, _iterator.each)(fields, function(index, field) {
var groupName = field[groupFieldName] || "";
fieldsByGroup[groupName] = fieldsByGroup[groupName] || [];
fieldsByGroup[groupName].push(field);
if (void 0 === isMeasure) {
isMeasure = true
}
isMeasure = isMeasure && true === field.isMeasure
});
(0, _iterator.each)(fieldsByGroup, function(groupName, fields) {
var currentPath = path ? path + "." + groupName : groupName;
var items = that._createTreeItems(fields, groupFieldNames.slice(1), currentPath);
if (groupName) {
groupedItems.push({
key: groupName,
text: groupName,
path: currentPath,
isMeasure: items.isMeasure,
expanded: (0, _array.inArray)(currentPath, that._expandedPaths) >= 0,
items: items
})
} else {
resultItems = items
}
});
resultItems = groupedItems.concat(resultItems);
resultItems.isMeasure = isMeasure
}
return resultItems
},
_createFieldsDataSource: function(dataSource) {
var fields = dataSource && dataSource.fields() || [];
fields = fields.filter(function(field) {
return false !== field.visible && !(0, _type.isDefined)(field.groupIndex)
});
var treeItems = this._createTreeItems(fields, ["dimension", "displayFolder"]);
(0, _uiPivot_grid.foreachDataLevel)(treeItems, function(items) {
items.sort(compareItems)
}, 0, "items");
return treeItems
},
_renderFieldsTreeView: function(container) {
var that = this;
var dataSource = that._dataSource;
var treeView = that._createComponent(container, _tree_view2.default, {
dataSource: that._createFieldsDataSource(dataSource),
showCheckBoxesMode: "normal",
searchEnabled: that.option("allowSearch"),
searchTimeout: that.option("searchTimeout"),
itemTemplate: function(itemData, itemIndex, itemElement) {
if (itemData.icon) {
(0, _icon.getImageContainer)(itemData.icon).appendTo(itemElement)
}(0, _renderer2.default)("").toggleClass("dx-area-field", !itemData.items).data("field", itemData.field).text(itemData.text).appendTo(itemElement)
},
onItemCollapsed: function(e) {
var index = (0, _array.inArray)(e.itemData.path, that._expandedPaths);
if (index >= 0) {
that._expandedPaths.splice(index, 1)
}
},
onItemExpanded: function(e) {
var index = (0, _array.inArray)(e.itemData.path, that._expandedPaths);
if (index < 0) {
that._expandedPaths.push(e.itemData.path)
}
},
onItemSelectionChanged: function(e) {
var data = e.itemData;
var fields;
var needSelectDefaultItem = true;
var area;
if (data.items) {
if (data.selected) {
treeView.unselectItem(data);
return
}
that._processDemandState(function() {
fields = getDimensionFields(data, dataSource.fields());
for (var i = 0; i < fields.length; i++) {
if (fields[i].area) {
needSelectDefaultItem = false;
break
}
}
});
if (needSelectDefaultItem) {
var item = getFirstItem(data, function(item) {
return item.isDefault
}) || getFirstItem(data, function(item) {
return (0, _type.isDefined)(item.index)
});
item && treeView.selectItem(item);
return
}
} else {
var field = dataSource.fields()[data.index];
if (data.selected) {
area = field.isMeasure ? "data" : "column"
}
if (field) {
fields = [field]
}
}
that._applyChanges(fields, {
area: area,
areaIndex: void 0
})
}
});
var dataChanged = function() {
var scrollable = getScrollable(container);
var scrollTop = scrollable ? scrollable.scrollTop() : 0;
treeView.option({
dataSource: that._createFieldsDataSource(dataSource)
});
scrollable = getScrollable(container);
if (scrollable) {
scrollable.scrollTo({
y: scrollTop
});
scrollable.update()
}
};
that._dataChangedHandlers.push(dataChanged)
},
_renderAreaFields: function($container, area) {
var that = this;
var dataSource = that._dataSource;
var fields = dataSource ? (0, _extend.extend)(true, [], dataSource.getAreaFields(area, true)) : [];
$container.empty();
(0, _iterator.each)(fields, function(_, field) {
if (false !== field.visible) {
that.renderField(field, true).appendTo($container)
}
})
},
_renderArea: function(container, area) {
var that = this;
var $areaContainer = (0, _renderer2.default)(DIV).addClass("dx-area").appendTo(container);
var $fieldsHeaderContainer = (0, _renderer2.default)(DIV).addClass("dx-area-fields-header").appendTo($areaContainer);
var caption = that.option("texts." + area + "Fields");
var $fieldsContent;
(0, _renderer2.default)("").addClass("dx-area-icon").addClass("dx-area-icon-" + area).appendTo($fieldsHeaderContainer);
(0, _renderer2.default)("").html(" ").appendTo($fieldsHeaderContainer);
(0, _renderer2.default)("").addClass("dx-area-caption").text(caption).appendTo($fieldsHeaderContainer);
var $fieldsContainer = (0, _renderer2.default)(DIV).addClass("dx-area-fields").addClass(AREA_DRAG_CLASS).appendTo($areaContainer);
if ("all" !== area) {
$fieldsContainer.attr("group", area).attr("allow-scrolling", true);
$fieldsContent = (0, _renderer2.default)(DIV).addClass("dx-area-field-container").appendTo($fieldsContainer);
var render = function() {
that._renderAreaFields($fieldsContent, area)
};
that._dataChangedHandlers.push(render);
render();
$fieldsContainer.dxScrollable()
} else {
$areaContainer.addClass("dx-all-fields");
$fieldsContainer.addClass("dx-treeview-border-visible");
that._renderFieldsTreeView($fieldsContainer)
}
},
_getSortableOptions: function() {
return {}
},
_adjustSortableOnChangedArgs: function() {},
resetTreeView: function() {
var treeView = this.$element().find(".dx-treeview").dxTreeView("instance");
if (treeView) {
treeView.option("searchValue", "");
treeView.collapseAll()
}
},
applyChanges: function() {
var state = this.option("state");
if ((0, _type.isDefined)(state)) {
this._dataSource.state(state)
}
},
cancelChanges: function() {
var dataSource = this._dataSource;
if (!dataSource.isLoading()) {
this.option("state", dataSource.state());
return true
}
return false
},
getDataSource: function() {
return this._dataSource
},
updateDimensions: function() {
var $scrollableElements = this.$element().find(".dx-area .dx-scrollable");
$scrollableElements.dxScrollable("update")
},
_visibilityChanged: function(visible) {
if (visible && hasWindow) {
this.updateDimensions()
}
}
});
(0, _component_registrator2.default)("dxPivotGridFieldChooser", FieldChooser);
module.exports = FieldChooser;