analytics/webcontent/bi/js/dashboard-analytics/prompts/controls/SearchAndSelectPromptView.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2016, 2017
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['../../lib/@waca/core-client/js/core-client/ui/AccessibleView', '../../widgets/livewidget/nls/StringResources', 'text!./templates/BasePromptView.html', 'text!./templates/SearchAndSelectContent.html', 'jquery', 'underscore', 'doT'], function (View, stringResources, BasePromptViewTemplate, SearchAndSelectContentTemplate, $, _, dot) {
	'use strict';

	var SearchAndSelectPromptView = View.extend({

		events: {
			'primaryaction .itemRow': '_selectItem',
			'keydown .itemRow': '_moveFocus',
			'primaryaction .searchWrapper .wfg_remove': '_clearSearch',
			'keyup .search': 'searchTypeDelay'
		},

		_selectedPromptValues: null,
		_selectedTab: null,

		init: function init(options) {

			options.width = '400px';

			SearchAndSelectPromptView.inherited('init', this, arguments);

			_.extend(this, options);

			// Default specs
			this._selectedPromptValues = {
				refId: options.columnId,
				columnId: options.columnId,
				values: this.defaultValues ? this.defaultValues : [],
				ui: 'picklist'
			};
		},

		render: function render() {
			var sBasePromptViewHtml = dot.template(BasePromptViewTemplate)({
				promptModuleName: this.promptModuleName
			});

			this.$el.addClass('promptDialogContainer promptViewDialog').width(this.width).append(sBasePromptViewHtml);

			this.$('.content').html(SearchAndSelectContentTemplate);

			this.$el.attr('role', 'region');
			this.$el.attr('aria-label', this.viewTitle);

			// Search Field
			this.$('.search').attr('placeholder', stringResources.get('search')).attr('aria-label', stringResources.get('search'));

			this._populateRows();

			var axisLabelList = this.$('.selectItems');
			axisLabelList.attr('aria-label', this.$('.title').text());

			return this;
		},

		_moveFocus: function _moveFocus(evt) {
			var $target = $(evt.currentTarget);
			if (evt.keyCode === 37 || evt.keyCode === 38) {
				//left/up
				this._moveToItem($target, $target.prev());
			} else if (evt.keyCode === 39 || evt.keyCode === 40) {
				//right/down
				this._moveToItem($target, $target.next());
			}
		},

		_moveToItem: function _moveToItem($current, $next) {
			$current.attr('tabindex', '-1');
			$next.focus();
			$next.attr('tabindex', '0');
		},

		setFocus: function setFocus() {
			this.$('.search').focus();
		},

		_clearSearch: function _clearSearch() {
			this.$('.search').val('');
			return this.searchData();
		},

		_serverResponse: function _serverResponse(resultData) {
			this._collectDistinctValuesResponse(resultData);
			this._populateRows();
		},

		_collectDistinctValuesResponse: function _collectDistinctValuesResponse(resultData) {
			if (resultData) {
				var resultRowSize = resultData.getDatapointCount();
				var aResults = [];
				for (var rowIndex = 0; rowIndex < resultRowSize; rowIndex++) {
					// Only one column and one tuple part for singleItemQuery result.
					aResults.push(resultData.getCellValue(rowIndex, 0)[0]);
				}
				this.promptValues = aResults;
			} else {
				this.promptValues = [];
			}
		},

		_getRowValue: function _getRowValue($el) {
			var rowValue = JSON.parse(_.unescape($el.attr('data')));
			return rowValue === undefined ? null : rowValue;
		},

		_highlightSelected: function _highlightSelected() {
			var selectRows = this.$('.itemRow');
			var aExistingSelectionKeys = _.pluck(this._selectedPromptValues.values, 'u');
			_.each(selectRows, function (item) {
				var $item = $(item);
				var data = this._getRowValue($item);
				var bInclude = true;
				if (_.contains(aExistingSelectionKeys, data.u)) {
					$item.toggleClass('exclude', !bInclude).toggleClass('include', bInclude);
					$item.find('.check').toggleClass('wfg_checkmark', bInclude);
					$item.find('.text').toggleClass('bold', bInclude);
					$item.attr('aria-selected', 'true');
				} else {
					$item.removeClass('include exclude');
					$item.find('.check').toggleClass('wfg_checkmark', !bInclude);
					$item.find('.text').toggleClass('bold', !bInclude);
					$item.attr('aria-selected', 'false');
				}
			}.bind(this));
		},

		_populateRows: function _populateRows() {
			var items = this.$('.selectItems').empty();
			if (this.promptValues.length > 0) {
				_.each(this.promptValues, function (dataItem) {
					var sRowLabel = dataItem === null ? stringResources.get('nullValueLabel') : dataItem.d;
					var item = $('<div></div>').addClass('itemRow').attr('data', _.escape(JSON.stringify(dataItem)));
					$('<div></div>').addClass('check wfg_checkmark').appendTo(item);
					$('<div></div>').addClass('text').text(sRowLabel).appendTo(item);
					item.appendTo(items);
				}.bind(this));

				setTimeout(function () {
					if (!items[0].style.height && items.height()) {
						// set height to prevent shrinking lists when search.
						items.height(items.height());
					}
				}, 500);
			} else {
				$('<div></div>').addClass('itemNotAvailable').text(stringResources.get('textFilterItemsNotFound')).appendTo(items);
			}
			this._highlightSelected();

			var listItem = this.$('.itemRow');
			listItem.attr('role', 'option');
			listItem.attr('aria-selected', 'false');
			listItem.attr('tabindex', '-1');
			listItem.first().attr('tabindex', '0');
		},

		_selectItem: function _selectItem(evt) {
			evt.stopPropagation();

			var target = this._getRowValue($(evt.currentTarget));
			var aExistingSelectionKeys = _.pluck(this._selectedPromptValues.values, 'u');
			if (_.contains(aExistingSelectionKeys, target.u)) {
				this._selectedPromptValues.values = _.filter(this._selectedPromptValues.values, function (promptValue) {
					return promptValue.u !== target.u;
				}.bind(this));
			} else if (this.singleSelect && this._selectedPromptValues.values.length > 0) {
				this._selectedPromptValues.values = [target];
			} else {
				this._selectedPromptValues.values.push(target);
			}

			this._highlightSelected();
			this._enableOk();
		},

		/**
   * @public
   * Get prompt values from dialog.
   *
   */
		getPromptValues: function getPromptValues() {
			return this._selectedPromptValues.values;
		},

		searchData: function searchData() {
			var sSearchText = this.$('.search')[0].value;
			var result = void 0;
			if (this.whenSingleItemQueryReady) {
				result = this.whenSingleItemQueryReady({
					'column': { 'columnId': this.columnId },
					'nativeQuery': true,
					'promptName': this.name
				}, {
					'searchTerm': sSearchText
				}).then(this._serverResponse.bind(this));
			} else {
				result = Promise.resolve();
			}

			var sRemoveBtnVisibility = sSearchText.length > 0 ? 'visible' : 'hidden';
			this.$('.searchWrapper .wfg_remove').css('visibility', sRemoveBtnVisibility);
			return result;
		},

		/**
   * Performs search request on a delay. If a new request arrives before the
   * search is performed then the previous search is cancelled and the new
   * request is set up on a delay.
   * @protected
   */
		searchTypeDelay: function searchTypeDelay() {
			// already have search pending so clear
			if (this.iTypeDelayTimer) {
				window.clearTimeout(this.iTypeDelayTimer);
			}
			// set up a search for 250ms after a type event stops.
			// hard to set a value here, needs to be slow enough to collect multiple key presses
			// but not too slow that the delay after typing is noticeable to the end user.
			// according to the internets the average person types at 240 characters/minute
			this.iTypeDelayTimer = window.setTimeout(this.searchData.bind(this), 250);
		},

		_enableOk: function _enableOk() {
			if (this._selectedPromptValues.values.length > 0) {
				this.enableOk(true);
			} else {
				this.enableOk(false);
			}
		}

	});

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