analytics/webcontent/bi/js/schedule/views/MonthlyCadencePickerView.js

/*
 * Licensed Materials - Property of IBM
 * 
 * IBM Cognos Products: SHARE
 * 
 * (C) Copyright IBM Corp. 2015, 2017
 * 
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define([
        'bi/schedule/views/CadencePickerView',
        'bi/schedule/app/appControler',
        'jquery',
        'bi/sharecommon/utils/translator',
        'q',
        'bi/sharecommon/utils/simpledoT',
        'text!bi/schedule/templates/MonthlyCadencePicker.html',
        'underscore',
        "bi/schedule/views/DailyIntervalCadencePickerView",
		'bi/commons/ui/properties/DropDown',
		'bi/commons/ui/properties/RadioButtonGroup'
    ],
    function (View, controler, $, t, Q, dot, template, _, DailyIntervalCadencePicker, DropDown, RadioButtonGroup) {
        'use strict';

        var monthlyCadence = View.extend({
        	isEditMode: false,

        	/**
             * @constructor
             */
            init: function(options) {
                monthlyCadence.inherited('init', this, arguments);
                _.extend(this, options);
                if(typeof(this.objectInformation.descriptor)!=="undefined"){
                    this.scheduleInfo = this.objectInformation.descriptor.scheduleInfo;
                    this.isEditMode = true;
                }
                
                this.uniqueId = _.uniqueId();
				this.dayTypeSelector = null;
				this.daySelector = null;
                this.dayOfMonthSelector = null;
                this.readOnly = false;
                
            },
            
            /**
             * Render the new schedule view month picker section
             * 
             */
            render: function() {
                var deferred = Q.defer();
                var htmlGenerator = dot.simpleTemplate(template);
                var defaultPeriod = 1;
                if (this.isEditMode && this.scheduleInfo.everyNPeriods > 1) {
                    defaultPeriod = this.scheduleInfo.everyNPeriods;
                }
                this.readOnly = this.isEditMode && this.hasPermission && !this.hasPermission.write && this.hasPermission.read;

                var attributes = {
						schedule_run_on_label: t.translate("schedule_run_on_label"),
                	    schedule_repeat_interval_label: t.translate("schedule_repeat_interval_label"),
                	    schedule_of_every_n_months_value: defaultPeriod,
                	    schedule_repeat_interval_months_label: t.translate("schedule_repeat_interval_months_label"),
                	    uniqueid: this.uniqueId
                };
                this.$el.append(htmlGenerator(attributes));

				this._renderSelectors();
				this.dayTypeSelector.setValue('relative', true);
				
                if (this.isEditMode){
                	if (this.scheduleInfo.monthlyRelative) {
						var day = this.scheduleInfo.monthlyRelative.monthlyRelativeDay || "monday";
						var week = this.scheduleInfo.monthlyRelative.monthlyRelativeWeek || "first";
						this.daySelector.getHTMLControl().val(week + '|' + day);
                	}
                	else if (this.scheduleInfo.monthlyAbsolute) {
						this.dayTypeSelector.setValue('absolute', true);
						this.dayOfMonthSelector.getHTMLControl().val(this.scheduleInfo.monthlyAbsolute.monthlyAbsoluteDay || 25);
                	}
                }
                if(this.objectInformation.showDailyInterval){
                     this.dailyInterval = new DailyIntervalCadencePicker({
                    	$el: this.$el,
          				objectInformation: {
         					descriptor: this.objectInformation.descriptor,
         					showDailyIntervalCheckbox: true
         					},
         				glassContext: this.glassContext,
         				readOnly: this.readOnly
                 	 });
                     
                     this.dailyInterval.render();
                }

                this._setEvents();
                
                deferred.resolve(this);
                return deferred.promise;
            },

            _setEvents: function() {                
                $('.schedule_every_weeks_input').on('input', function (event) { 
                    this.value = this.value.replace(/[^0-9]/g, '');
                });
            },

            /** All views should overwrite this function.
             * It takes a partially populated json schedule descriptor and adds to it 
             * based on the properties of this view.
             * @param desc the partial JSON schedule descriptor
             * @returns the descriptor passed in, with added attributes.
             */
            toDescriptor: function(desc) {
            	
            	if (this.dayTypeSelector.getValue() === 'absolute') {
            		desc.monthlyAbsolute = {
            				monthlyAbsoluteDay: parseInt(this.dayOfMonthSelector.getHTMLControl().val(), 10)
            		};
            		desc.type = "monthlyAbsolute";
            	}else {
					var val = this.daySelector.getHTMLControl().val();
					var vals = val.split('|');
					
            		desc.monthlyRelative = {
						monthlyRelativeDay: vals[1],
	                	monthlyRelativeWeek: vals[0]
					}; 
	                desc.type = "monthlyRelative";
            	}

                desc.everyNPeriods = parseInt(this.$el.find('.schedule_every_weeks_input').val(), 10);
                if(this.dailyInterval) {
                	desc = this.dailyInterval.toDescriptor(desc);
                }
                return desc;
            },

            validate: function(msgs) {
                if(this.dailyInterval) {
                    msgs = this.dailyInterval.validate(msgs);
                    // One warning at a time
                    if ( msgs.length > 0) {
                    	return msgs;
                    }
                }                
                var parameters = {};
                var $everyNPeriodDiv = this.$el.find(".schedule_frequency_input_container");
                $everyNPeriodDiv.removeAttr('aria-invalid aria-describedby');
                var everyNPeriods = parseInt(this.$el.find('.schedule_every_weeks_input').val(), 10);
                if ( isNaN(everyNPeriods)) {
 					parameters.param1 = t.translate("schedule_repeat_interval_label");
 					msgs.push(t.translate("schedule_invalid_form_input_every_month_repeat_input", parameters));
 					$everyNPeriodDiv.attr({
						'aria-invalid': 'true',
						'aria-describedby': msgs[0]
					});
                }
                return msgs;
            },
            
            _renderSelectors: function() {
				this.dayTypeSelector = new RadioButtonGroup({
            		'id': 'schedule_day_type_selector_' + this.uniqueId,
					'el': this.$el.find('#schedule_day_type_selector_container_' + this.uniqueId),
            		'label': t.translate("schedule_run_on_label"),
            		'ariaLabel': t.translate("schedule_run_on_select_description"),
					'name': 'schedule_day_type_selector',
					'value': 'relative',
					'indent': 2, // * 10 pixels
            		'separator': false,
					'onChange': function(name, value){this._handleSelectors(name, value);}.bind(this),
					'controlOnLeft': true,
            		'items': [{
						'label': t.translate("schedule_relative_absolute_radio_absolute"),
						'value': 'absolute'
					},{
						'label': t.translate("schedule_relative_absolute_radio_relative"),
						'value': 'relative'

					}],
					'readOnly': this.readOnly
				});
				this.dayTypeSelector.render();

				this.daySelector = new DropDown({
            		'id': 'schedule_run_on_the_' + this.uniqueId,
            		'el': this.$el.find('#schedule_day_selector_container_' + this.uniqueId),
            		'label': t.translate("schedule_run_on_day_label"),
            		'ariaDescribedby': t.translate("schedule_run_on_select_description"),
            		'name' : 'schedule_relative_day_of_month',
            		'responsive': false,
            		'options': [{
					//Monday
						'label': t.translate("schedule_run_on_first_monday_label"),
						'value': 'first|monday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_monday_label"),
						'value': 'second|monday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_monday_label"),
						'value': 'third|monday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_monday_label"),
						'value': 'fourth|monday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_monday_label"),
						'value': 'last|monday',
						'selected': false
					}, {
					//Tuesday
						'label': t.translate("schedule_run_on_first_tuesday_label"),
						'value': 'first|tuesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_tuesday_label"),
						'value': 'second|tuesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_tuesday_label"),
						'value': 'third|tuesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_tuesday_label"),
						'value': 'fourth|tuesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_tuesday_label"),
						'value': 'last|tuesday',
						'selected': false
					}, {
					//Wednesday
						'label': t.translate("schedule_run_on_first_wednesday_label"),
						'value': 'first|wednesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_wednesday_label"),
						'value': 'second|wednesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_wednesday_label"),
						'value': 'third|wednesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_wednesday_label"),
						'value': 'fourth|wednesday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_wednesday_label"),
						'value': 'last|wednesday',
						'selected': false
					}, {
					//Thursday
						'label': t.translate("schedule_run_on_first_thursday_label"),
						'value': 'first|thursday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_thursday_label"),
						'value': 'second|thursday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_thursday_label"),
						'value': 'third|thursday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_thursday_label"),
						'value': 'fourth|thursday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_thursday_label"),
						'value': 'last|thursday',
						'selected': false
					}, {
					//Friday
						'label': t.translate("schedule_run_on_first_friday_label"),
						'value': 'first|friday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_friday_label"),
						'value': 'second|friday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_friday_label"),
						'value': 'third|friday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_friday_label"),
						'value': 'fourth|friday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_friday_label"),
						'value': 'last|friday',
						'selected': false
					}, {
					//Saturday
						'label': t.translate("schedule_run_on_first_saturday_label"),
						'value': 'first|saturday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_saturday_label"),
						'value': 'second|saturday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_saturday_label"),
						'value': 'third|saturday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_saturday_label"),
						'value': 'fourth|saturday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_saturday_label"),
						'value': 'last|saturday',
						'selected': false
					}, {
					//Sunday
						'label': t.translate("schedule_run_on_first_sunday_label"),
						'value': 'first|sunday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_second_sunday_label"),
						'value': 'second|sunday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_third_sunday_label"),
						'value': 'third|sunday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_fourth_sunday_label"),
						'value': 'fourth|sunday',
						'selected': false
					}, {
						'label': t.translate("schedule_run_on_the_last_sunday_label"),
						'value': 'last|sunday',
						'selected': false
					}],
					'readOnly': this.readOnly
            	});
            	this.daySelector.doRender();
            	
            	this.dayOfMonthSelector = new DropDown({
            		'id': 'schedule_absolute_day_of_month_' + this.uniqueId,
            		'el': this.$el.find('#schedule_day_selector_container_' + this.uniqueId),
            		'label': t.translate("schedule_run_on_day_label"),
            		'ariaDescribedby': t.translate("schedule_run_on_select_description"),
            		'name' : 'schedule_absolute_day_of_month',
					'responsive': false,
					'readOnly': this.readOnly,
            		'options': [{
						'label': '1',
						'value': '1',
						'selected': false
					}, {
						'label': '2',
						'value': '2',
						'selected': false
					}, {
						'label': '3',
						'value': '3',
						'selected': false
					}, {
						'label': '4',
						'value': '4',
						'selected': false
					}, {
						'label': '5',
						'value': '5',
						'selected': false
					}, {
						'label': '6',
						'value': '6',
						'selected': false
					}, {
						'label': '7',
						'value': '7',
						'selected': false
					}, {
						'label': '8',
						'value': '8',
						'selected': false
					}, {
						'label': '9',
						'value': '9',
						'selected': false
					}, {
						'label': '10',
						'value': '10',
						'selected': false
					}, {
						'label': '11',
						'value': '11',
						'selected': false
					}, {
						'label': '12',
						'value': '12',
						'selected': false
					}, {
						'label': '13',
						'value': '13',
						'selected': false
					}, {
						'label': '14',
						'value': '14',
						'selected': false
					}, {
						'label': '15',
						'value': '15',
						'selected': false
					}, {
						'label': '16',
						'value': '16',
						'selected': false
					}, {
						'label': '17',
						'value': '17',
						'selected': false
					}, {
						'label': '18',
						'value': '18',
						'selected': false
					}, {
						'label': '19',
						'value': '19',
						'selected': false
					}, {
						'label': '20',
						'value': '20',
						'selected': false
					}, {
						'label': '21',
						'value': '21',
						'selected': false
					}, {
						'label': '22',
						'value': '22',
						'selected': false
					}, {
						'label': '23',
						'value': '23',
						'selected': false
					}, {
						'label': '24',
						'value': '24',
						'selected': false
					}, {
						'label': '25',
						'value': '25',
						'selected': false
					}, {
						'label': '26',
						'value': '26',
						'selected': false
					}, {
						'label': '27',
						'value': '27',
						'selected': false
					}, {
						'label': '28',
						'value': '28',
						'selected': false
					}, {
						'label': '29',
						'value': '29',
						'selected': false
					}, {
						'label': '30',
						'value': '30',
						'selected': false
					}, {
						'label': '31',
						'value': '31',
						'selected': false
					}]
            	});
            	
            	this.dayOfMonthSelector.doRender();
            },
            
            _handleSelectors: function(name, value) {
				if (value === "absolute") {
					this.daySelector.hide();
					this.dayOfMonthSelector.show();
				}else{
					this.daySelector.show();
					this.dayOfMonthSelector.hide();
				}
            }
        });

        return monthlyCadence;

    });