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

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: Dashboard
 * (C) Copyright IBM Corp. 2019, 2020
 * 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', 'underscore', 'app/nls/StringResources', 'text!./templates/BasePromptView.html', 'text!./templates/DateTimePromptContent.html', '../../../../lib/@waca/core-client/js/core-client/ui/widgets/DatePicker', '../../../../lib/@waca/core-client/js/core-client/ui/widgets/TimePicker', '../../../../lib/@waca/core-client/js/core-client/utils/DateTimeUtils', 'moment-timezone', 'doT'], function (View, _, stringResources, BasePromptViewTemplate, DateTimePromptContentTemplate, DatePicker, TimePicker, DateTimeUtils, moment, dot) {
	'use strict';

	var DateTimePromptView = View.extend({

		DATE_TIME_FORMAT: 'YYYY-MM-DDTHH:mm:ss',

		_iHeight: '212',

		startDate: null,
		endDate: null,
		startTime: null,
		endTime: null,
		timezone: null,

		/**
   * @classdesc  Date, Time, DateTime prompt view class.
   * @public
   *
   * @param {String} options.columnId - The prompt item column ID.
   * @param {String} options.name - The parameter name.
   * @param {String} options.dataType -The parameter data type.
   * @param {Object} options.capabilities -The capabilities of the prompt.
   * @param {String} options.timezone -The timezone in user preferences.
   */
		init: function init(options) {

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

			_.extend(this, options);
			this._isRangePrompt = options.capabilities.multivalued && !options.capabilities.discreteValue;

			if (options.timezone) {
				this.timezone = options.timezone;
			} else {
				this.timezone = 'America/New_York';
			}
			this.locale = options.locale || 'en';
			this.is24HrFormat = DateTimeUtils.is24HrFormat(this.locale);
		},

		render: function render() {

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

			this.$el.addClass('popoverDialogContainer promptViewDialog').height(this._iHeight + 'px').width(this._iWidth + 'px').append(sBasePromptViewHtml);

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

			var dateTitle = stringResources.get('dateTitle');
			var timeTitle = stringResources.get('timeTitle');

			var sPromptContentHtml = dot.template(DateTimePromptContentTemplate)({
				dataType: this.dataType,
				//title: stringResources.get('dateTimeFilterMessage'), //stringResourecs.get('promptControlTitle');
				isRangePrompt: this._isRangePrompt
			});
			this.$('.content').append(sPromptContentHtml);

			return new Promise(function (resolve) {
				switch (this.dataType) {
					case 'xsdDate':
						this._renderDate().then(function () {
							this.$el.find('.dateTitle').text(dateTitle);
							resolve(this);
						}.bind(this));

						break;

					case 'xsdDateTime':
						this._renderDateTime().then(function () {
							this.$el.find('.dateTitle').text(dateTitle);
							this.$el.find('.timeTitle').text(timeTitle);
							resolve(this);
						}.bind(this));

						break;

					case 'xsdTime':
						this._renderTime().then(function () {
							this.$el.find('.timeTitle').text(timeTitle);
							resolve(this);
						}.bind(this));
						break;

					default:
						resolve(this);
						break;
				}
			}.bind(this));
		},

		_getDateTimes: function _getDateTimes() {
			var dates = [];
			if (this.defaultValues) {
				var momentTime = moment.tz(this.defaultValues[0].label || this.defaultValues[0].d, this.DATE_TIME_FORMAT, this.timezone);
				dates.push(momentTime.toDate());
				if (this.defaultValues.length > 1) {
					var momentTime1 = moment.tz(this.defaultValues[1].label || this.defaultValues[1].d, this.DATE_TIME_FORMAT, this.timezone);
					dates.push(momentTime1.toDate());
				}
			} else {
				// initialize the locale for moment objects.
				var localMoment = moment();
				localMoment.locale(this.locale);

				//Get current date in format of YYYY-MM-DDTHH:mm:ss
				var _now = new Date().toISOString().replace(/\..*/, '');
				var currentDate = localMoment.tz(_now, this.timezone).toDate();
				dates = [currentDate, currentDate];
			}

			return dates;
		},

		_renderDate: function _renderDate() {
			var dates = this._getDateTimes();

			this.$el.find('.dateContainer').css('display', 'inline-flex');

			this.startDate = new DatePicker({
				'$el': this.$el.find('.dateRowStart'),
				'labelText': '',
				'ariaLabelText': stringResources.get('dateTitle'),
				'timezone': this.timezone,
				'locale': this.locale,
				'attributes': {
					'firstDay': 1,
					'defaultDate': dates[0],
					'inputFieldDate': dates[0]
				},
				'setOnSelect': true,
				'setDiv': this.$el
			});
			var datePickers = [];
			datePickers.push(this.startDate.render());

			if (this._isRangePrompt) {
				this.endDate = new DatePicker({
					'$el': this.$el.find('.dateRowEnd'),
					'labelText': '',
					'ariaLabelText': stringResources.get('dateTitle'),
					'timezone': this.timezone,
					'locale': this.locale,
					'attributes': {
						'firstDay': 1,
						'defaultDate': dates[1],
						'inputFieldDate': dates[1]
					},
					'setOnSelect': false,
					'setDiv': this.$el
				});
				datePickers.push(this.endDate.render());
			}

			return Promise.all(datePickers);
		},

		_renderTime: function _renderTime() {
			this.$el.find('.timeContainer').css('display', 'inline-flex');
			var times = this._getDateTimes();

			var timepickers = [];
			this.startTime = new TimePicker({
				'$el': this.$el.find('.timeRowStart'),
				'timezone': this.timezone,
				'ariaLabel': stringResources.get('timeTitle'),
				'setDiv': this.$el,
				'attributes': {
					'minuteStep': 1,
					'showMeridian': !this.is24HrFormat,
					'defaultTime': times[0]
				}
			});

			timepickers.push(this.startTime.render());

			if (this._isRangePrompt) {
				this.endTime = new TimePicker({
					'$el': this.$el.find('.timeRowEnd'),
					'timezone': this.timezone,
					'ariaLabel': stringResources.get('timeTitle'),
					'setDiv': this.$el,
					'attributes': {
						'minuteStep': 1,
						'showMeridian': !this.is24HrFormat,
						'defaultTime': times[1]
					}
				});

				timepickers.push(this.endTime.render());
			}

			return Promise.all(timepickers);
		},

		_renderDateTime: function _renderDateTime() {
			return this._renderDate().then(this._renderTime.bind(this)).then(function () {
				this.$el.find('.timeContainer').css('display', 'inline-flex');
				this.$el.find('.dateContainer').css('display', 'inline-flex');

				this._iWidth = 500;

				this.$el.width(this._iWidth + 'px');
				this.$el.find('.flexFifty').css('flex', '2 33%');
			}.bind(this));
		},

		setFocus: function setFocus() {
			var element = this.startDate ? this.startDate.$el.find('input') : this.startTime.$el.find('input');
			element.focus();
		},

		/**
   * @public
   * Get prompt values from dialog.
   *
   */
		getPromptValues: function getPromptValues() {
			var values;

			switch (this.dataType) {
				case 'xsdDate':
					values = this._getDateValues();
					break;

				case 'xsdDateTime':
					values = [];
					var timeValues = this._getTimeValues();
					var dateValues = this._getDateValues();

					for (var i = 0; i < dateValues.length; i++) {
						values.push(dateValues[i] + 'T' + timeValues[i]);
					}
					break;

				case 'xsdTime':
					values = this._getTimeValues();
					break;

				default:
					break;
			}

			return values;
		},

		_getDateValues: function _getDateValues() {
			var values = [];

			if (this.startDate.isValidDate()) {
				values.push(this.startDate.getDateVal());
			}

			if (this._isRangePrompt && this.endDate.isValidDate()) {
				values.push(this.endDate.getDateVal());
			}

			return values;
		},

		_getTimeValues: function _getTimeValues() {
			var values = [];

			if (this.startTime.isValidTime()) {
				values.push(this.startTime.getTime24HShort());
			}

			if (this._isRangePrompt && this.endTime.isValidTime()) {
				values.push(this.endTime.getTime24HShort());
			}

			return values;
		}

	});

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