analytics/webcontent/bi/js/dashboard-analytics/drill-through/controls/DrillThroughDefinitionView.js

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: BI UI Commons
 *
 * Copyright IBM Corp. 2018, 2019
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
//jshint maxparams:9
define(['../../lib/@waca/core-client/js/core-client/ui/core/View', 'jquery', 'doT', 'underscore', 'react', 'react-dom', 'ca-ui-toolkit', 'prop-types', 'text!../templates/DrillThroughDefinitionView.html', 'text!../templates/SelectMenu.html', 'text!../templates/NoPromptContent.html', '../../widgets/livewidget/nls/StringResources', '../../lib/@waca/loading-indicator/src/js/LoadingIndicatorView'], function (BaseView, $, doT, _, React, ReactDOM, UI_Toolkit, PropTypes, template, selectMenuTemplate, noPromptContentTemplate, StringResources, LoadingIndicator) {

	var KEY_CODES = {
		ENTER: 13,
		UP: 38,
		DOWN: 40,
		TAB: 9,
		SPACE: 32
	};

	var NO_MAPPING_TEXT = '---';
	/**
  * This class renders a view with a parameters list and a corresponding drop down list to show the mapped parameters
  * and metadata items from the dashboard, also allows picking a metadata item for the mapped or unmapped
  * parameter by user preferences
 */
	var DrillThroughDefinitionView = BaseView.extend({

		events: {
			'primaryaction .dtColDropdown': 'toggleSelectMenu',
			'primaryaction .dtCloseBtnIcon': '_closeDialog',
			'primaryaction .dtBackIcon': '_goBack',
			'primaryaction .dtSelectListItem': '_onSelectValue'
		},

		templateString: template,
		selectMenuTemplate: selectMenuTemplate,
		noPromptContentTemplate: noPromptContentTemplate,

		init: function init(options) {
			DrillThroughDefinitionView.inherited('init', this, arguments);
			this.selectMenuTemplateFunc = doT.template(selectMenuTemplate);
			this.noPromptContentTemplateFunc = doT.template(noPromptContentTemplate);
			this.name = options.name || options.targetName;
			this.applicationName = options.applicationName;
			this.boardName = options.boardName;
			this.targetName = options.targetName;
			this.handlers = options.handlers;
			this.rowSize = options.rowSize;
			this.scope = options.scope;
			this.isLoading = options.isLoading;
			this.sourceName = options.sourceName;
			this.type = options.type;
			this.perspective = options.perspective;
			this.iconsFeature = options.iconsFeature;
		},

		/**
  * Render the dialog
  */
		render: function render() {
			this.$el.empty();

			if (this.isLoading) {
				this.rowSize = 0;
			}

			var previousIcon = this.iconsFeature.getIcon('common-previous');
			var reportIcon = this.iconsFeature.getIcon('reportIcon');
			var dashboardIcon = this.iconsFeature.getIcon('dashboardIcon');
			var chevronLeftIcon = this.iconsFeature.getIcon('common-chevron_left');

			var sHtml = this.dotTemplate({
				getRow: this.handlers.getRow,
				metadataTitle: StringResources.get('drillThroughMetadataColumnTitle', {
					boardName: this.boardName
				}),
				rowSize: this.rowSize,
				noMappingText: NO_MAPPING_TEXT,
				subTitle: this._getSubTitleText(),
				title: StringResources.get('drillthrough_jumpTo', {
					name: this.name
				}),
				drillDefinitionName: this.name,
				parametersTitle: StringResources.get('drillThroughParametersColumnTitle', {
					targetName: this.targetName
				}),
				editTitle: StringResources.get('edit'),
				StringResources: StringResources,
				isReportPerspective: this._isReportPerspective(),
				previousIcon: previousIcon.id,
				reportIcon: reportIcon.id,
				dashboardIcon: dashboardIcon.id,
				chevronLeftIcon: chevronLeftIcon.id
			});
			this.$el.append(sHtml);

			this._createTitleInput(this.$el.find('.dtTitleInput')[0]);
			this._createScopeRadio(this.$el.find('.dtEditFooter')[0]);

			if (this.isLoading) {
				var loadingIndicator = new LoadingIndicator();
				loadingIndicator.render().then(function ($el) {
					this.$el.find('.dtEditTable').empty().addClass('dtLoading').append($el);
				}.bind(this));
			} else {
				if (!this.rowSize && this._isReportPerspective()) {
					this._showNoTargetParamIcon();
				}
			}
		},

		_createTitleInput: function _createTitleInput(parent) {
			var _this = this;

			var titleInput = React.createElement(
				React.Fragment,
				null,
				React.createElement(UI_Toolkit.Label, { id: 'dtTitleInputLabel', type: 'caption', label: StringResources.get('drillthrough_titleLabel') }),
				React.createElement(UI_Toolkit.TextInput, {
					id: 'dtTitleInput',
					value: this.name,
					onChange: function onChange(value) {
						return _this.handlers.onNameChange(value);
					}
				})
			);
			ReactDOM.render(titleInput, parent);
		},

		_createScopeRadio: function _createScopeRadio(parent) {
			var options = [{
				label: StringResources.get('drillthroughScopeRadioOptionVisualization'),
				value: 'visualization'
			}, {
				label: StringResources.get('drillthroughScopeRadioOptionConnection'),
				value: 'connection'
			}, {
				label: StringResources.get('drillthroughScopeRadioOptionDashboard', {
					perspective: this.applicationName
				}),
				value: 'dashboard'
			}];

			var ScopeRadio = function (_React$Component) {
				_inherits(ScopeRadio, _React$Component);

				_createClass(ScopeRadio, null, [{
					key: 'propTypes',
					get: function get() {
						return {
							checked: PropTypes.string,
							onChange: PropTypes.func,
							options: PropTypes.object
						};
					}
				}]);

				function ScopeRadio(props) {
					_classCallCheck(this, ScopeRadio);

					var _this2 = _possibleConstructorReturn(this, _React$Component.call(this, props));

					_this2.state = {
						checked: props.checked
					};
					return _this2;
				}

				ScopeRadio.prototype.render = function render() {
					var _this3 = this;

					return React.createElement(
						React.Fragment,
						null,
						React.createElement(UI_Toolkit.Label, { id: 'dtScopeRadioLabel', label: StringResources.get('drillthroughScopeRadioLabel') }),
						React.createElement(UI_Toolkit.RadioGroup, {
							direction: 'vertical',
							options: this.props.options,
							'aria-labelledby': 'dtScopeRadioLabel',
							checked: this.state.checked,
							onChange: function onChange(value) {
								_this3._onScopeChange(value);
							}
						})
					);
				};

				ScopeRadio.prototype._onScopeChange = function _onScopeChange(value) {
					this.setState({ checked: value });
					this.props.onChange(value);
				};

				return ScopeRadio;
			}(React.Component);

			ReactDOM.render(React.createElement(ScopeRadio, { options: options, checked: this.scope, onChange: this.handlers.onScopeChange }), parent);
		},

		_showNoTargetParamIcon: function _showNoTargetParamIcon() {
			var sHtml = this.noPromptContentTemplateFunc({
				'noPromptHeading': StringResources.get('noPrompt'),
				'noPromptDetails': StringResources.get('drillThroughDefinitionNoParameter')
			});

			this.$el.find('.dtEditTable').addClass('dtNoPromptTable').empty().html(sHtml);
		},

		_isReportPerspective: function _isReportPerspective() {
			return this.type !== 'exploration';
		},

		_getSubTitleText: function _getSubTitleText() {
			if (this.isLoading) {
				return '';
			} else if (this._isReportPerspective()) {
				return this.rowSize ? StringResources.get('drillThroughMappingViewLabel') : StringResources.get('drillThroughDefinitionNoParameterSubTitle');
			} else {
				return StringResources.get('drillthrough_subTitle', { perspective: this.perspective });
			}
		},

		/*
  * Toggle the select menu drop down
  */
		toggleSelectMenu: function toggleSelectMenu(event) {
			var $currentTarget = $(event.currentTarget);

			if ($currentTarget.hasClass('dtColDropdown') && this.$el.find('.dtSelectList').length) {
				this._closeSelectMenu();
			} else if ($currentTarget.hasClass('dtColDropdown')) {
				this._openSelectMenu(event);
			}
		},

		/*
  * Close the select menu dropdown
  */
		_closeSelectMenu: function _closeSelectMenu() {
			var $list = this.$el.find('.dtSelectList');
			if ($list.length) {
				var $dropDownNode = $list.siblings('.dtColDropdown');

				$dropDownNode.find('.dtDropDownIcon').removeClass('open');
				$list.hide();
				$list.remove();
				// $list .unbind('keydown', this._onDropDownKeydown_bind);
				if (this._closeSelectMenu_bind) {
					$(document.body).off('click', this._closeSelectMenu_bind);
				}
				$dropDownNode.attr('aria-expanded', false);
			}
		},

		/*
  * Open the select menu dropdown
  */
		_openSelectMenu: function _openSelectMenu(event) {
			event.preventDefault();
			event.stopPropagation();
			var $dropDownNode = $(event.currentTarget);
			var $selectNode = $dropDownNode.parent();
			var $dtDropDownIcon = $dropDownNode.find('.dtDropDownIcon');
			var rowId = event.currentTarget.dataset.rowid;

			var sHtml = this.selectMenuTemplateFunc({
				rowId: rowId,
				getRow: this.handlers.getRow,
				noMappingText: NO_MAPPING_TEXT
			});
			var $node = $(sHtml);
			$selectNode.append($node);
			$dtDropDownIcon.addClass('open');
			$dropDownNode.attr('aria-expanded', true);

			this._closeSelectMenu_bind = this._closeSelectMenu.bind(this, { body: true });
			$(document.body).on('click', this._closeSelectMenu_bind);

			$node.on('mouseover mousemove mousein mouseout', function (event) {
				$node.find('span').removeClass('noPsuedoHover psuedoHover');
				$(event.target).addClass('psuedoHover');
			});

			$node.show();

			var $list = $selectNode.find('.dtSelectList');
			var $selected = $list.find('span.dtSelected').addClass('psuedoHover');
			if ($selected.length) {
				if (!this._iswithinVerticalBounds($selected, $list)) {
					$selected.get(0).scrollIntoView();
				}
			}

			$list.get(0).focus();
			this._onDropDownKeydown_bind = this._onDropDownKeydown.bind(this, $list);
			$list.keydown(this._onDropDownKeydown_bind);
		},

		/**
  * Select value callback
  */
		_onSelectValue: function _onSelectValue(event) {
			this._selectValue(event.currentTarget);
			this._closeSelectMenu();
		},

		/**
  * Select value callback helper
  */
		_selectValue: function _selectValue(target) {

			var $currentTarget = $(target);
			var $dropDownNode = $currentTarget.closest('.dtSelect').find('.dtColDropdown');
			var $list = $currentTarget.parent('.dtSelectList');
			var rowId = $list.data('rowid');

			$list.find('.dtSelected').removeClass('dtSelected');

			this.handlers.onValueSelected(rowId, $currentTarget.data('optid'));
			var update = this.handlers.getRow(rowId);
			var text = null;
			var checkmarkSelector = '.row_checkIcon_' + rowId + ' .dt-checked';
			this.$checkmark = this.$el.find(checkmarkSelector);
			this.$tableRow = this.$checkmark.closest('.dtEditTableRowsItem');

			if (update.state.selectedIndex >= 0) {
				text = update.state.values[update.state.selectedIndex];
				this.$checkmark.removeClass('hidden');
				this.$tableRow.addClass('mapped');
			} else {
				text = NO_MAPPING_TEXT;
				this.$checkmark.addClass('hidden');
				this.$tableRow.removeClass('mapped');
			}
			$dropDownNode.find('.dtColDropdownLabel').text(text);
			$dropDownNode.find('.dtColDropdownLabel').attr('aria-label', text);
		},

		/**
  * Keydown handler when select drop down is focus
  */
		_onDropDownKeydown: function _onDropDownKeydown($node, event) {

			var $current = $node.find('span.psuedoHover');
			var next,
			    prev = null;
			var isUpArrow = event.which === KEY_CODES.UP || event.keyCode === KEY_CODES.UP;
			var isDownArrow = event.which === KEY_CODES.DOWN || event.keyCode === KEY_CODES.DOWN;
			var isDirectionAllowed = isUpArrow || isDownArrow;
			var isEnter = event.which === KEY_CODES.ENTER || event.keyCode === KEY_CODES.ENTER;
			var isTab = event.which === KEY_CODES.TAB || event.keyCode === KEY_CODES.TAB;

			if (isTab) {
				this._closeSelectMenu();
			}

			if ($current.length) {
				next = $current.next();
				prev = $current.prev();

				if (isDirectionAllowed) {
					//Check for hover due to mouse
					$current = $current.is(':hover') ? $current.addClass('noPsuedoHover') : $current;
					//Remove psuedo Hover
					$current = $current.removeClass('psuedoHover');
					$current.attr('id', '');
				}
			}

			if ($current.length) {
				if (isEnter) {
					this._selectValue($current);
					this._closeSelectMenu();
				} else if (isDirectionAllowed) {
					if (isUpArrow) {
						if (prev && prev.length) {
							prev.addClass('psuedoHover').removeClass('noPsuedoHover');
						} else {
							$node.find('span').last().addClass('psuedoHover').removeClass('noPsuedoHover');
						}
					} else if (isDownArrow) {
						if (next && next.length) {
							next.addClass('psuedoHover').removeClass('noPsuedoHover');
						} else {
							$node.find('span').first().addClass('psuedoHover').removeClass('noPsuedoHover');
						}
					}
					event.preventDefault();
					event.stopPropagation();
				}
			} else if (isDirectionAllowed) {
				if (isUpArrow) {
					$node.find('span').last().addClass('psuedoHover').removeClass('noPsuedoHover');
				} else if (isDownArrow) {
					$node.find('span').first().addClass('psuedoHover').removeClass('noPsuedoHover');
				}
				event.preventDefault();
				event.stopPropagation();
			}

			$current = $node.find('span.psuedoHover');
			$current.attr('id', 'dt-activedescendant');
			$current.focus();
			if ($current.length && !this._iswithinVerticalBounds($current, $node)) {
				$current.get(0).scrollIntoView();
			}
		},

		/**
  * Check is an element is within the bound of another
  */
		_iswithinVerticalBounds: function _iswithinVerticalBounds($childElement, $containerElem) {
			var containerRect = $containerElem.get(0).getBoundingClientRect();
			var childRect = $childElement.get(0).getBoundingClientRect();

			return childRect.top >= containerRect.top && childRect.bottom <= containerRect.bottom;
		},

		/**
  *	close dialog callback
  */
		_closeDialog: function _closeDialog() {
			this.handlers.onCloseDialog();
		},

		/**
  *	back callback
  */
		_goBack: function _goBack() {
			this.handlers.onBack();
		},

		update: function update(options) {
			this.rowSize = options.rowSize || this.rowSize;
			this.isLoading = options.isLoading;
			this.targetName = options.targetName || this.targetName;
			this.render();
		},

		remove: function remove() {
			DrillThroughDefinitionView.inherited('remove', this, arguments);
		}
	});

	return DrillThroughDefinitionView;
});
//# sourceMappingURL=DrillThroughDefinitionView.js.map