DateTimePromptView.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. 'use strict';
  2. /**
  3. * Licensed Materials - Property of IBM
  4. * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2016, 2017
  5. * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  6. */
  7. 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', 'moment-timezone', 'doT'], function (View, _, stringResources, BasePromptViewTemplate, DateTimePromptContentTemplate, DatePicker, TimePicker, moment, dot) {
  8. 'use strict';
  9. var DateTimePromptView = View.extend({
  10. DATE_TIME_FORMAT: 'YYYY-MM-DDTHH:mm:ss',
  11. _iHeight: '212',
  12. startDate: null,
  13. endDate: null,
  14. startTime: null,
  15. endTime: null,
  16. timezone: null,
  17. /**
  18. * @classdesc Date, Time, DateTime prompt view class.
  19. * @public
  20. *
  21. * @param {String} options.columnId - The prompt item column ID.
  22. * @param {String} options.name - The parameter name.
  23. * @param {String} options.dataType -The parameter data type.
  24. * @param {Object} options.capabilities -The capabilities of the prompt.
  25. * @param {String} options.timezone -The timezone in user preferences.
  26. */
  27. init: function init(options) {
  28. DateTimePromptView.inherited('init', this, arguments);
  29. _.extend(this, options);
  30. this._isRangePrompt = options.capabilities.multivalued && !options.capabilities.discreteValue;
  31. if (options.timezone) {
  32. this.timezone = options.timezone;
  33. } else {
  34. this.timezone = 'America/New_York';
  35. }
  36. },
  37. render: function render() {
  38. var sBasePromptViewHtml = dot.template(BasePromptViewTemplate)({
  39. promptModuleName: this.promptModuleName
  40. });
  41. this.$el.addClass('popoverDialogContainer promptViewDialog').height(this._iHeight + 'px').width(this._iWidth + 'px').append(sBasePromptViewHtml);
  42. this.$el.attr('role', 'region');
  43. this.$el.attr('aria-label', this.viewTitle);
  44. var dateTitle = stringResources.get('dateTitle');
  45. var timeTitle = stringResources.get('timeTitle');
  46. var sPromptContentHtml = dot.template(DateTimePromptContentTemplate)({
  47. dataType: this.dataType,
  48. //title: stringResources.get('dateTimeFilterMessage'), //stringResourecs.get('promptControlTitle');
  49. isRangePrompt: this._isRangePrompt
  50. });
  51. this.$('.content').append(sPromptContentHtml);
  52. return new Promise(function (resolve) {
  53. switch (this.dataType) {
  54. case 'xsdDate':
  55. this._renderDate().then(function () {
  56. this.$el.find('.dateTitle').text(dateTitle);
  57. resolve(this);
  58. }.bind(this));
  59. break;
  60. case 'xsdDateTime':
  61. this._renderDateTime().then(function () {
  62. this.$el.find('.dateTitle').text(dateTitle);
  63. this.$el.find('.timeTitle').text(timeTitle);
  64. resolve(this);
  65. }.bind(this));
  66. break;
  67. case 'xsdTime':
  68. this._renderTime().then(function () {
  69. this.$el.find('.timeTitle').text(timeTitle);
  70. resolve(this);
  71. }.bind(this));
  72. break;
  73. default:
  74. resolve(this);
  75. break;
  76. }
  77. }.bind(this));
  78. },
  79. _getDateTimes: function _getDateTimes() {
  80. var dates = [];
  81. if (this.defaultValues) {
  82. var momentTime = moment.tz(this.defaultValues[0].d, this.DATE_TIME_FORMAT, this.timezone);
  83. dates.push(momentTime.toDate());
  84. if (this.defaultValues.length > 1) {
  85. var momentTime1 = moment.tz(this.defaultValues[1].d, this.DATE_TIME_FORMAT, this.timezone);
  86. dates.push(momentTime1.toDate());
  87. }
  88. } else {
  89. var currentdate = new Date();
  90. dates = [currentdate, currentdate];
  91. }
  92. return dates;
  93. },
  94. _renderDate: function _renderDate() {
  95. var dates = this._getDateTimes();
  96. this.$el.find('.dateContainer').css('display', 'inline-flex');
  97. this.startDate = new DatePicker({
  98. '$el': this.$el.find('.dateRowStart'),
  99. 'labelText': '',
  100. 'ariaLabelText': stringResources.get('dateTitle'),
  101. 'timezone': this.timezone,
  102. 'attributes': {
  103. 'firstDay': 1,
  104. 'defaultDate': dates[0],
  105. 'inputFieldDate': dates[0]
  106. },
  107. 'setOnSelect': true,
  108. 'setDiv': this.$el
  109. });
  110. var datePickers = [];
  111. datePickers.push(this.startDate.render());
  112. if (this._isRangePrompt) {
  113. this.endDate = new DatePicker({
  114. '$el': this.$el.find('.dateRowEnd'),
  115. 'labelText': '',
  116. 'ariaLabelText': stringResources.get('dateTitle'),
  117. 'timezone': this.timezone,
  118. 'attributes': {
  119. 'firstDay': 1,
  120. 'defaultDate': dates[1],
  121. 'inputFieldDate': dates[1]
  122. },
  123. 'setOnSelect': false,
  124. 'setDiv': this.$el
  125. });
  126. datePickers.push(this.endDate.render());
  127. }
  128. return Promise.all(datePickers);
  129. },
  130. _renderTime: function _renderTime() {
  131. this.$el.find('.timeContainer').css('display', 'inline-flex');
  132. var times = this._getDateTimes();
  133. var timepickers = [];
  134. this.startTime = new TimePicker({
  135. '$el': this.$el.find('.timeRowStart'),
  136. 'timezone': this.timezone,
  137. 'ariaLabel': stringResources.get('timeTitle'),
  138. 'setDiv': this.$el,
  139. 'attributes': {
  140. 'minuteStep': 1,
  141. 'showMeridian': true,
  142. 'defaultTime': times[0]
  143. }
  144. });
  145. timepickers.push(this.startTime.render());
  146. if (this._isRangePrompt) {
  147. this.endTime = new TimePicker({
  148. '$el': this.$el.find('.timeRowEnd'),
  149. 'timezone': this.timezone,
  150. 'ariaLabel': stringResources.get('timeTitle'),
  151. 'setDiv': this.$el,
  152. 'attributes': {
  153. 'minuteStep': 1,
  154. 'showMeridian': true,
  155. 'defaultTime': times[1]
  156. }
  157. });
  158. timepickers.push(this.endTime.render());
  159. }
  160. return Promise.all(timepickers);
  161. },
  162. _renderDateTime: function _renderDateTime() {
  163. return this._renderDate().then(this._renderTime.bind(this)).then(function () {
  164. this.$el.find('.timeContainer').css('display', 'inline-flex');
  165. this.$el.find('.dateContainer').css('display', 'inline-flex');
  166. this._iWidth = 500;
  167. this.$el.width(this._iWidth + 'px');
  168. this.$el.find('.flexFifty').css('flex', '2 33%');
  169. }.bind(this));
  170. },
  171. setFocus: function setFocus() {
  172. var element = this.startDate ? this.startDate.$el.find('input') : this.startTime.$el.find('input');
  173. element.focus();
  174. },
  175. /**
  176. * @public
  177. * Get prompt values from dialog.
  178. *
  179. */
  180. getPromptValues: function getPromptValues() {
  181. var values;
  182. switch (this.dataType) {
  183. case 'xsdDate':
  184. values = this._getDateValues();
  185. break;
  186. case 'xsdDateTime':
  187. values = [];
  188. var timeValues = this._getTimeValues();
  189. var dateValues = this._getDateValues();
  190. for (var i = 0; i < dateValues.length; i++) {
  191. values.push(dateValues[i] + 'T' + timeValues[i]);
  192. }
  193. break;
  194. case 'xsdTime':
  195. values = this._getTimeValues();
  196. break;
  197. default:
  198. break;
  199. }
  200. return values;
  201. },
  202. _getDateValues: function _getDateValues() {
  203. var values = [];
  204. if (this.startDate.isValidDate()) {
  205. values.push(this.startDate.getDateVal());
  206. }
  207. if (this._isRangePrompt && this.endDate.isValidDate()) {
  208. values.push(this.endDate.getDateVal());
  209. }
  210. return values;
  211. },
  212. _getTimeValues: function _getTimeValues() {
  213. var values = [];
  214. if (this.startTime.isValidTime()) {
  215. values.push(this.startTime.getTime24HShort());
  216. }
  217. if (this._isRangePrompt && this.endTime.isValidTime()) {
  218. values.push(this.endTime.getTime24HShort());
  219. }
  220. return values;
  221. }
  222. });
  223. return DateTimePromptView;
  224. });
  225. //# sourceMappingURL=DateTimePromptView.js.map