analytics/webcontent/bi/js/dashboard-analytics/features/dashboard/prompts/controls/RangePromptView.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Dashboard 
 * (C) Copyright IBM Corp. 2019
 * 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', '../../../../util/DashboardFormatter', '../../../../lib/@waca/dashboard-common/dist/ui/Slider', '../../../../widgets/livewidget/nls/StringResources', 'text!./templates/BasePromptView.html', 'text!./templates/RangePromptViewContent.html', 'jquery', 'underscore', 'doT'], function (View, Formatter, RangeSlider, stringResources, BasePromptViewTemplate, RangePromptViewContent, $, _, dot) {
	'use strict';

	var RangePromptView = View.extend({

		events: {
			'primaryaction .tooltip-inner': '_enableOk',
			'primaryaction .postAggregate': '_onAggregateTypeChange',
			'primaryaction .preAggregate': '_onAggregateTypeChange'
		},

		init: function init(options) {
			options.height = '150px';
			options.width = '500px';

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

			_.extend(this, options);
			_.defaults(options, {
				style: 'dual',
				sliderId: 'slider_filter'
			});

			this.minimized = options.minimized;
			this.enabled = options.enabled;
			this.sliderStyle = options.style;
			this.sliderId = options.sliderId;

			// Used to preserve saved prompt values at re-prompt, and while the aggregation type is changed.
			this._initialDefault = {
				'postAggregate': this.postAutoAggregation,
				'defaultValues': this.defaultValues
			};
		},

		render: function render() {
			var sBasePromptViewHtml = dot.template(BasePromptViewTemplate)({
				promptModuleName: this.promptModuleName,
				postAggregate: this.postAutoAggregation,
				preAggregateLabel: stringResources.get('preAggregateLabel'),
				postAggregateLabel: stringResources.get('postAggregateLabel'),
				preAggregateText: stringResources.get('preAggregateText')
			});

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

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

			this.$postAggregateNode = this.$el.find('.postAggregate svg');
			this.$preAggregateNode = this.$el.find('.preAggregate svg');
			this.$content = this.$('.content');

			this.$content.html(RangePromptViewContent);

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

			this.$('.clearCaption').text(stringResources.get('clearTextFilterValue'));
			this.$('.rowButton.invertButton').text(stringResources.get('invertFilterSelection'));

			// Content
			return this._populateContent();
		},

		_populateContent: function _populateContent() {
			var _this = this;

			this._slideContent = this.$('.sliderContent');
			this._slideContent.empty();

			if (!this.minimized) {
				this._showLoading();
			}

			return this._updateMinMax().then(function () {
				return _this._renderSlider();
			});
		},

		setFocus: function setFocus() {
			if (this._rangeSlider) {
				this._rangeSlider.setFocus();
			}
		},

		_renderSlider: function _renderSlider() {
			// Remove everything from slider content, including the loading indicator.
			this._slideContent.empty();

			this.trigger('change:state', {
				state: 'loaded'
			});

			var min = this.minMax[0].value;
			var max = this.minMax[1].value;
			var value = [min, max];

			var model = {
				el: this._slideContent,
				sliderId: this.sliderId,
				min: min,
				max: max,
				value: value,
				showMinMax: false,
				inverted: false,
				minimized: this.minimized,
				enabled: this.enabled,
				style: this.sliderStyle,
				prettyValue: this._formatValues.bind({
					category: this.category
				})
			};

			if (!this.minimized) {
				model.tooltipTemplate = ['<span>&ge;</span><input aria-label="&ge;" type="text"></input>', '<span>&le;</span><input aria-label="&le;" type="text"></input>'];
				model.invertedTooltipTemplate = ['<span>&lt;</span><input aria-label="&lt;"  type="text"></input>', '<span>&gt;</span><input aria-label ="&gt;" type="text"></input>'];
			}

			if (this.defaultValues) {
				model.value = [this.defaultValues[0].label || this.defaultValues[0].d, this.defaultValues[1].label || this.defaultValues[1].d];
			}

			this._rangeSlider = new RangeSlider(model);
			this._rangeSlider.on('action:slidestop', function () {
				this.trigger('action:slidestop');
			}.bind(this));
			this._rangeSlider.on('action:change', function () {
				this._enableOk();
			}.bind(this));

			return this._rangeSlider.render();
		},

		_showLoading: function _showLoading() {
			this.trigger('change:state', {
				state: 'loading'
			});

			var indicator = $('<div></div>');
			indicator.addClass('loading');
			indicator.text(stringResources.get('modellingLoading'));

			// Remove everything, including the slider.
			this._slideContent.html(indicator);
		},

		_updateMinMax: function _updateMinMax() {
			var _this2 = this;

			if (this.queryResult) {
				// queryResult is passed from prompt API at first opening.
				// Delete the queryResult after first open.
				var result = this._getMinMaxValuesFromQueryResult(this.queryResult);
				delete this.queryResult;
				return Promise.resolve(result);
			}

			// Request the min and max.
			return this.getColumnMinMaxValues(this.columnId).then(function (result) {
				return _this2._getMinMaxValuesFromQueryResult(result);
			});
		},

		_getMinMaxValuesFromQueryResult: function _getMinMaxValuesFromQueryResult(result) {
			var minValue = result.getValue(0, 0);
			var maxValue = result.getValue(0, 1);
			this.minMax = [minValue, maxValue];
			return this.minMax;
		},

		getPromptValues: function getPromptValues() {
			return this._rangeSlider.getValue();
		},

		_formatValues: function _formatValues(values) {
			var ret = [];
			var spec = {
				type: 'number'
			};
			if (this.category === 'time') {
				spec.useGrouping = false;
			}
			_.each(values, function (val) {
				ret.push(Formatter.format(val, spec));
			});
			return ret;
		},

		_enableOk: function _enableOk() {
			if (this.enableOk) {
				this.enableOk(true);
			}
		},

		_onAggregateTypeChange: function _onAggregateTypeChange(event) {
			this._onClickRadioButton(event);
			return this._populateContent();
		},

		_onClickRadioButton: function _onClickRadioButton(event) {
			this.postAutoAggregation = $(event.currentTarget).hasClass('postAggregate');
			if (this.postAutoAggregation) {
				this.$postAggregateNode.attr('class', 'checked');
				this.$preAggregateNode.attr('class', '');
				if (this._initialDefault.postAggregate) {
					this.defaultValues = this._initialDefault.defaultValues;
				} else {
					this.defaultValues = null;
				}
			} else {
				this.$postAggregateNode.attr('class', '');
				this.$preAggregateNode.attr('class', 'checked');
				if (this._initialDefault.postAggregate) {
					this.defaultValues = null;
				} else {
					this.defaultValues = this._initialDefault.defaultValues;
				}
			}
		}

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