'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 = $('
').addClass('itemRow').attr('data', _.escape(JSON.stringify(dataItem))); $('
').addClass('check wfg_checkmark').appendTo(item); $('
').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 { $('
').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