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

/*
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: SHARE
 *
 * (C) Copyright IBM Corp. 2015, 2019
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with
 * IBM Corp.
 */
define([
    'underscore',
    'jquery',
    'q',
    'bi/sharecommon/utils/simpledoT',
    'bi/commons/ui/View',
    'bi/sharecommon/utils/translator',
    'bi/commons/utils/Utils',
    'bi/commons/utils/ContentFormatter',
    'text!bi/schedule/templates/FormatPicker.html',
    'bi/commons/ui/properties/CheckBox',
    'bi/content_apps/authoring/AuthoringHelper',
    'bootstrap'
], function(_, $, Q, dot, View, t, Utils, stringFormatter, template ,CheckBox, AuthoringHelper) {
    'use strict';

    var __SLIDEOUT_PRESET_WIDTH = '350px';

    var formatPickerView = View.extend({

        init: function(options) {
            formatPickerView.inherited('init', this, arguments);

            this._initVariables();

            if(options.$toggler === undefined) {
                throw "Error: $toggler parameter must be provided.";
            }

            $.extend(this, options);

            // Default the outputFormats
            // TODO update this to use user preference default option
            if(!Array.isArray(this.outputFormats) || this.outputFormats.length === 0) {
            	if(this.showHTML) {
                  this.outputFormats = ['HTML'];
            	} else if ((this.showPDF) && (AuthoringHelper.userCanGenerateFormat(options.glassContext, 'PDF'))){
            		this.outputFormats = ['PDF'];
            	} else if ((this.showExcel) && (AuthoringHelper.userCanGenerateFormat(options.glassContext, 'spreadsheetML'))) {
            		this.outputFormats = ['spreadsheetML'];
            	} else if ((this.showCSV) && (AuthoringHelper.userCanGenerateFormat(options.glassContext, 'CSV'))) {
            		this.outputFormats = ['CSV'];
            	} else if ((this.showXML) && (AuthoringHelper.userCanGenerateFormat(options.glassContext, 'XML')))  {
            		this.outputFormats = ['XML'];
            	} else {
            		this.outputFormats = ['HTML'];
            	}
            }

            // Check if formats contain unsupported format(s)
            if ( _.contains(this.outputFormats, 'XLWA') ) {
            	this.showUnsupported = true;
            }
        },

        getOutputFormats: function() {
            return this.outputFormats;
        },

        render: function() {
            var htmlGenerator = dot.simpleTemplate(template);
            var attributes = {
            	schedule_done_btn: t.translate("schedule_delivery_done_label"),
                uniqueId: this.uniqueId,
                showHTML: this.showHTML,
                showPDF: this.showPDF,
                showExcel: this.showExcel,
                showCSV: this.showCSV,
                showXML: this.showXML,
                showUnsupported: this.showUnsupported
            };
            this._popoverContent = htmlGenerator(attributes);
            this.$popoverContent = $(this._popoverContent);
            this._renderCheckBoxes(this.$popoverContent);

            // Initially update the "Format:" area in the subscribe pane
            this._updateFormatList(this.$popoverContent);
            // in update mode the permissions are passed
            if ( this.hasPermission && !this.hasPermission.write && this.hasPermission.read ) {
                this.$toggler.prop('disabled', true);
            }

            this._setEvents();
            return Q(this);
        },

        _renderCheckBoxes: function($popoverContent) {

        	this.htmlCheckbox = new CheckBox({
       		   'id': 'output_html_checkbox_' + this.uniqueId,
       		   'el': $popoverContent.find('.html_format_option_' + this.uniqueId),
       		   'name': 'HTML',
       		   'label': t.translate(this.formatLabels.HTML),
       		   'ariaLabel': t.translate(this.formatLabels.HTML),
       		   'svgIcon': 'html_icon',
       		   'checked': _.contains(this.outputFormats, 'HTML'),
       		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
       	   	});

        	this.pdfCheckbox = new CheckBox({
        	   'id': 'output_pdf_checkbox_' + this.uniqueId,
     		   'el': $popoverContent.find('.pdf_format_option_' + this.uniqueId),
     		   'name': 'PDF',
     		   'label': t.translate(this.formatLabels.PDF),
       		   'ariaLabel': t.translate(this.formatLabels.PDF),
     		   'svgIcon': 'pdf_icon',
     		   'checked': _.contains(this.outputFormats, 'PDF'),
     		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
     	   	});

        	this.spreadsheetCheckbox = new CheckBox({
         	   'id': 'output_spreadsheet_checkbox_' + this.uniqueId,
      		   'el': $popoverContent.find('.spreadsheet_format_option_' + this.uniqueId),
      		   'name': 'spreadsheetML',
      		   'label': t.translate(this.formatLabels.spreadsheetML),
       		   'ariaLabel': t.translate(this.formatLabels.spreadsheetML),
      		   'svgIcon': 'excel_icon',
      		   'checked': _.contains(this.outputFormats, 'spreadsheetML'),
      		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
      	   	});

        	this.xlsxDataCheckbox = new CheckBox({
          	   'id': 'output_xlsxdata_checkbox_' + this.uniqueId,
       		   'el': $popoverContent.find('.xlsxdata_format_option_' + this.uniqueId),
       		   'name': 'xlsxData',
       		   'label': t.translate(this.formatLabels.xlsxData),
       		   'ariaLabel': t.translate(this.formatLabels.xlsxData),
       		   'svgIcon': 'excel_icon',
       		   'checked': _.contains(this.outputFormats, 'xlsxData'),
       		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
       	   	});

        	this.csvCheckbox = new CheckBox({
           	   'id': 'output_csv_checkbox_' + this.uniqueId,
	           'el': $popoverContent.find('.csv_format_option_' + this.uniqueId),
	 		   'name': 'CSV',
	 		   'label': t.translate(this.formatLabels.CSV),
       		   'ariaLabel': t.translate(this.formatLabels.CSV),
	 		   'svgIcon': 'csv_icon',
	 		   'checked': _.contains(this.outputFormats, 'CSV'),
	 		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
	 	   	});

        	this.xmlCheckbox = new CheckBox({
				'id': 'output_xml_checkbox_' + this.uniqueId,
				'el': $popoverContent.find('.xml_format_option_' + this.uniqueId),
				'name': 'XML',
				'label': t.translate(this.formatLabels.XML),
				'ariaLabel': t.translate(this.formatLabels.XML),
				'svgIcon': 'xml_icon',
				'checked': _.contains(this.outputFormats, 'XML'),
				'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
 	 	   	});

        	this.unsupportedCheckbox = new CheckBox({
               'id': 'output_unsupported_checkbox_' + this.uniqueId,
 	           'el': $popoverContent.find('.unsupported_format_option_' + this.uniqueId),
 	 		   'name': 'XLWA',
 	 		   'label': t.translate(this.formatLabels.XLWA),
        	   'ariaLabel': t.translate(this.formatLabels.XLWA),
 	 		   'svgIcon': 'unsupportedformat_icon',
 	 		   'checked': _.contains(this.outputFormats, 'XLWA'),
	 		   'onChange': function(name, value) {this._handleCheckBoxes(name, value, $popoverContent);}.bind(this)
 	 	   	});

        	if (this.showHTML) {
        		this.htmlCheckbox.doRender();
        	}
        	if (this.showPDF) {
             	    this.pdfCheckbox.doRender();
        	}
        	if (this.showExcel) {
            	    this.spreadsheetCheckbox.doRender();
            	    this.xlsxDataCheckbox.doRender();
        	}
        	if (this.showCSV) {
            	    this.csvCheckbox.doRender();
        	}
        	if (this.showXML) {
        	    this.xmlCheckbox.doRender();
    	}
        	if (this.showUnsupported) {
        	    this.unsupportedCheckbox.doRender();
    	}
        },

        _handleCheckBoxes: function(name, value, $popoverContent) {
        	this._updateOutputFormats(name);

        	// Force first shown format to be used if everything has been unchecked
            if(this.outputFormats.length === 0) {
            	if (this.showHTML) {
            		this.htmlCheckbox.check();
            	} else if (this.showPDF) {
                 	this.pdfCheckbox.check();
            	} else if (this.showExcel) {
                	this.spreadsheetCheckbox.check();
            	} else if (this.showCSV) {
                	this.csvCheckbox.check();
            	} else if (this.showXML) {
                	this.xmlCheckbox.check();
            	} else {
            		// should not get here because of check in init
            		console.error("No checkboxes shown, nothing to select.");
            	}
            }

            this._updateFormatList($popoverContent);
        },

        /* Functions that are internally used for this object are below */

        _setEvents: function() {
            this.$toggler.on('primaryaction', function(event) {
                this.isVisible = !this.isVisible;
                if ( !_.contains(this.outputFormats, 'XLWA') ) {
                	this.showUnsupported = false;
                }

                if(this.isVisible) {
                	var $updatedContent = $(this._popoverContent);
                	this._renderCheckBoxes($updatedContent);

                	this.glassContext.appController.showSlideOut({
                        'parent': this.slideoutparent,
                        'overlay': this.overlay,
                        'width': __SLIDEOUT_PRESET_WIDTH,
						'enableTabLooping': true,
						'label': t.translate("schedule_format_picker_name"),
                        'onHide': this._close(),
                        'content': {
                            'module': 'bi/schedule/views/OptionsSlideoutView',
                            'content': $updatedContent,
                            'title': t.translate("schedule_output_label")
                        }
                    });
                }
            }.bind(this));

            // This handles the user clicking away from the popover
            this.hideHandler = function(event) {
                var $event = $(event.target);
                var $p = $event.closest(".popover");
                var $f = $event.closest('.output_format_toggler');
                if(this.isVisible) {
                    if($p.length === 0 && $f.length === 0) {
                        this._close();
                    }
                }
            }.bind(this);
            $(document).on('clicktap', this.hideHandler);
        },

        _close: function() {
            this.isVisible = false;
        },

        _updateFormatList: function($popoverContent) {
            if(typeof $popoverContent === 'object') {
                this.$el.html('');
                for(var i = 0; i < this.outputFormats.length; i++) {
                    var format = this.outputFormats[i];
                    var $link = $("<div/>").addClass('subscription_link').html(t.translate(this.formatLabels[format]));

                    $("<div/>").addClass('format_type_container').append(
                    	"<span class='subscription_icon' data-icon='" + this.formatIcons[format] + "'></span>").append(
                        $link).appendTo(this.$el);
                }

                this._setActiveOutputSvg();
            }
        },

        _setActiveOutputSvg: function() {
            var icons = this.$el.find(".subscription_icon");
            var links = this.$el.find(".subscription_link");
            for(var i = 0; i < icons.length; i++) {
                var $icon = $(icons[i]);
                Utils.setIcon($icon, 'common-' + $icon.data('icon') + "_icon", $(links[i]).html());
            }
            for(var j = 0; j < links.length; j++) {
            	stringFormatter.middleShortenString(links[j]);
            }
        },

        _updateOutputFormats: function(format) {
            if(_.contains(this.outputFormats, format)) {
                this._removeOutputFormats(format);
            } else if(!_.contains(this.outputFormats, format)) {
                this.outputFormats.push(format);
            }
        },

        _removeOutputFormats: function(format) {
            var index = this.outputFormats.indexOf(format);
            if(index >= 0) {
                this.outputFormats.splice(index, 1);
            }
        },

        _initVariables: function() {
            this.$el = {};
            this.$toggler = {};
            this.isVisible = false;
            this.showHTML = true;
            this.showPDF = true;
            this.showExcel = true;
            this.showCSV = true;
            this.showXML = true;
            this.showUnsupported = false;
            this.placement = 'left';
            this.outputFormats = [];
            this._popoverContent = '';
            this.formatLabels = {
            		HTML: "schedule_format_web",
                    PDF: "schedule_format_pdf",
                    spreadsheetML: "schedule_format_xlsx",
                    xlsxData: "schedule_format_xlsx_data",
                    CSV: "schedule_format_csv",
                    XML: "schedule_format_xml",
                    XLWA: "schedule_format_unsupported"
            };
            this.formatIcons = {
            		HTML: "html",
                    PDF: "pdf",
                    spreadsheetML: "excel",
                    xlsxData: "excel",
                    CSV: "csv",
                    XML: "xml",
                    XLWA: "unsupportedformat"
            };
            this.uniqueId = _.uniqueId('id_');
        }
    });

    return formatPickerView;
});