[Summary view] [Print] [Text view]

   1  /*+***********************************************************************************
   2   * The contents of this file are subject to the vtiger CRM Public License Version 1.0
   3   * ("License"); You may not use this file except in compliance with the License
   4   * The Original Code is:  vtiger CRM Open Source
   5   * The Initial Developer of the Original Code is vtiger.
   6   * Portions created by vtiger are Copyright (C) vtiger.
   7   * All Rights Reserved.
   8   *************************************************************************************/
   9  
  10  jQuery.Class('Vtiger_Widget_Js',{
  11  
  12      widgetPostLoadEvent : 'Vtiget.Dashboard.PostLoad',
  13      widgetPostRefereshEvent : 'Vtiger.Dashboard.PostRefresh',
  14  
  15      getInstance : function(container, widgetName, moduleName) {
  16          if(typeof moduleName == 'undefined') {
  17              moduleName = app.getModuleName();
  18          }
  19          var widgetClassName = widgetName.toCamelCase();
  20          var moduleClass = window[moduleName+"_"+widgetClassName+"_Widget_Js"];
  21          var fallbackClass = window["Vtiger_"+widgetClassName+"_Widget_Js"];
  22  
  23          var basicClass = Vtiger_Widget_Js;
  24          if(typeof moduleClass != 'undefined') {
  25              var instance = new moduleClass(container);
  26          }else if(typeof fallbackClass != 'undefined') {
  27              var instance = new fallbackClass(container);
  28          } else {
  29              var instance = new basicClass(container);
  30          }
  31          return instance;
  32      }
  33  },{
  34  
  35      container : false,
  36      plotContainer : false,
  37  
  38      init : function (container) {
  39          this.setContainer(jQuery(container));
  40          this.registerWidgetPostLoadEvent(container);
  41          this.registerWidgetPostRefreshEvent(container);
  42      },
  43  
  44      getContainer : function() {
  45          return this.container;
  46      },
  47  
  48      setContainer : function(element) {
  49          this.container = element;
  50          return this;
  51      },
  52  
  53      isEmptyData : function() {
  54          var container = this.getContainer();
  55          return (container.find('.noDataMsg').length > 0) ? true : false;
  56      },
  57  
  58      getUserDateFormat : function() {
  59          return jQuery('#userDateFormat').val();
  60      },
  61  
  62  
  63      getPlotContainer : function(useCache) {
  64          if(typeof useCache == 'undefined'){
  65              useCache = false;
  66          }
  67          if(this.plotContainer == false || !useCache) {
  68              var container = this.getContainer();
  69              this.plotContainer = container.find('.widgetChartContainer');
  70          }
  71          return this.plotContainer;
  72      },
  73  
  74      restrictContentDrag : function(){
  75          this.getContainer().on('mousedown.draggable', function(e){
  76              var element = jQuery(e.target);
  77              var isHeaderElement = element.closest('.dashboardWidgetHeader').length > 0 ? true : false;
  78              if(isHeaderElement){
  79                  return;
  80              }
  81              //Stop the event propagation so that drag will not start for contents
  82              e.stopPropagation();
  83          })
  84      },
  85  
  86      convertToDateRangePicketFormat : function(userDateFormat) {
  87          if(userDateFormat == 'yyyy-mm-dd') {
  88              return 'yyyy-MM-dd';
  89          }else if( userDateFormat == 'mm-dd-yyyy') {
  90              return 'MM-dd-yyyy';
  91          }else if(userDateFormat == 'dd-mm-yyyy') {
  92              return 'dd-MM-yyyy';
  93          }
  94      },
  95  
  96      loadChart : function() {
  97  
  98      },
  99  
 100      positionNoDataMsg : function() {
 101          var container = this.getContainer();
 102          var widgetContentsContainer = container.find('.dashboardWidgetContent');
 103          var noDataMsgHolder = widgetContentsContainer.find('.noDataMsg');
 104          noDataMsgHolder.position({
 105                  'my' : 'center center',
 106                  'at' : 'center center',
 107                  'of' : widgetContentsContainer
 108          })
 109      },
 110  
 111  
 112      //Place holdet can be extended by child classes and can use this to handle the post load
 113      postLoadWidget : function() {
 114          if(!this.isEmptyData()) {
 115              this.loadChart();
 116          }else{
 117              this.positionNoDataMsg();
 118          }
 119          this.registerSectionClick();
 120          this.registerFilter();
 121          this.registerFilterChangeEvent();
 122          this.restrictContentDrag();
 123      },
 124  
 125      postRefreshWidget : function() {
 126          if(!this.isEmptyData()) {
 127              this.loadChart();
 128          }else{
 129              this.positionNoDataMsg();
 130          }
 131      },
 132  
 133      getFilterData : function() {
 134          return {};
 135      },
 136  
 137      refreshWidget : function() {
 138          var parent = this.getContainer();
 139          var element = parent.find('a[name="drefresh"]');
 140          var url = element.data('url');
 141  
 142          var contentContainer = parent.find('.dashboardWidgetContent');
 143          var params = url;
 144          var widgetFilters = parent.find('.widgetFilter');
 145          if(widgetFilters.length > 0) {
 146              params = {};
 147              params.url = url;
 148              params.data = {}
 149              widgetFilters.each(function(index, domElement){
 150                  var widgetFilter = jQuery(domElement);
 151                  if(widgetFilter.is('.dateRange')){
 152                      var dateRangeVal = widgetFilter.val();
 153                      //If not value exists for date field then dont send the value
 154                      if(dateRangeVal.length <= 0) {
 155                          return true;
 156                      }
 157                      var name = widgetFilter.attr('name');
 158                      var dateRangeValComponents = dateRangeVal.split(',');
 159                      params.data[name] = {};
 160                      params.data[name].start = dateRangeValComponents[0];
 161                      params.data[name].end = dateRangeValComponents[1];
 162                  }else{
 163                      var filterName = widgetFilter.attr('name');
 164                      var filterValue = widgetFilter.val();
 165                      params.data[filterName] = filterValue;
 166                  }
 167              });
 168          }
 169          var filterData = this.getFilterData();
 170          if(! jQuery.isEmptyObject(filterData)) {
 171              if(typeof params == 'string') {
 172                  url = params;
 173                  params = {};
 174                  params.url = url
 175                  params.data = {};
 176              }
 177              params.data = jQuery.extend(params.data, this.getFilterData())
 178          }
 179          var refreshContainer = parent.find('.refresh');
 180          refreshContainer.progressIndicator({
 181              'smallLoadingImage' : true
 182          });
 183          AppConnector.request(params).then(
 184              function(data){
 185                  refreshContainer.progressIndicator({'mode': 'hide'});
 186                  contentContainer.html(data).trigger(Vtiger_Widget_Js.widgetPostRefereshEvent);
 187              },
 188              function(){
 189                  refreshContainer.progressIndicator({'mode': 'hide'});
 190              }
 191          );
 192      },
 193  
 194      registerFilter : function() {
 195          var thisInstance = this;
 196          var container = this.getContainer();
 197          var dateRangeElement = container.find('input.dateRange');
 198          var dateChanged = false;
 199          if(dateRangeElement.length <= 0) {
 200              return;
 201          }
 202          var customParams = {
 203              calendars: 3,
 204              mode: 'range',
 205              className : 'rangeCalendar',
 206              onChange: function(formated) {
 207                  dateChanged = true;
 208                  var element = jQuery(this).data('datepicker').el;
 209                  jQuery(element).val(formated);
 210              },
 211              onHide : function() {
 212                  if(dateChanged){
 213                      container.find('a[name="drefresh"]').trigger('click');
 214                      dateChanged = false;
 215                  }
 216              },
 217              onBeforeShow : function(elem) {
 218                  jQuery(elem).css('z-index','3');
 219              }
 220          }
 221          dateRangeElement.addClass('dateField').attr('data-date-format',thisInstance.getUserDateFormat());
 222          app.registerEventForDatePickerFields(dateRangeElement,false,customParams);
 223      },
 224  
 225      registerFilterChangeEvent : function() {
 226          this.getContainer().on('change', '.widgetFilter', function(e) {
 227              var widgetContainer = jQuery(e.currentTarget).closest('li');
 228              widgetContainer.find('a[name="drefresh"]').trigger('click');
 229          })
 230      },
 231  
 232      registerWidgetPostLoadEvent : function(container) {
 233          var thisInstance = this;
 234          container.on(Vtiger_Widget_Js.widgetPostLoadEvent, function(e) {
 235              thisInstance.postLoadWidget();
 236          })
 237      },
 238  
 239      registerWidgetPostRefreshEvent : function(container) {
 240          var thisInstance = this;
 241          container.on(Vtiger_Widget_Js.widgetPostRefereshEvent, function(e) {
 242              thisInstance.postRefreshWidget();
 243          });
 244      },
 245  
 246      registerSectionClick : function() {
 247          this.getContainer().on('jqplotClick', function() {
 248              var sectionData = arguments[3];
 249              var assignedUserId = sectionData[0];
 250              //TODO : we need to construct the list url with the sales stage and filters
 251          });
 252  
 253      }
 254  });
 255  
 256  Vtiger_Widget_Js('Vtiger_History_Widget_Js', {}, {
 257  
 258      postLoadWidget: function() {
 259          this._super();
 260  
 261          var widgetContent = jQuery('.dashboardWidgetContent', this.getContainer());
 262          widgetContent.css({height: widgetContent.height()-40});
 263          this.registerLoadMore();
 264      },
 265  
 266      postRefreshWidget: function() {
 267          this._super();
 268          this.registerLoadMore();
 269      },
 270  
 271      registerLoadMore: function() {
 272          var thisInstance  = this;
 273          var parent = thisInstance.getContainer();
 274          var contentContainer = parent.find('.dashboardWidgetContent');
 275  
 276          var loadMoreHandler = contentContainer.find('.load-more');
 277          loadMoreHandler.click(function(){
 278              var parent = thisInstance.getContainer();
 279              var element = parent.find('a[name="drefresh"]');
 280              var url = element.data('url');
 281              var params = url;
 282  
 283              var widgetFilters = parent.find('.widgetFilter');
 284              if(widgetFilters.length > 0) {
 285                  params = { url: url, data: {}};
 286                  widgetFilters.each(function(index, domElement){
 287                      var widgetFilter = jQuery(domElement);
 288                      var filterName = widgetFilter.attr('name');
 289                      var filterValue = widgetFilter.val();
 290                      params.data[filterName] = filterValue;
 291                  });
 292              }
 293  
 294              var filterData = thisInstance.getFilterData();
 295              if(! jQuery.isEmptyObject(filterData)) {
 296                  if(typeof params == 'string') {
 297                      params = { url: url, data: {}};
 298                  }
 299                  params.data = jQuery.extend(params.data, thisInstance.getFilterData())
 300              }
 301  
 302              // Next page.
 303              params.data['page'] = loadMoreHandler.data('nextpage');
 304  
 305              var refreshContainer = parent.find('.refresh');
 306              refreshContainer.progressIndicator({
 307                  'smallLoadingImage' : true
 308              });
 309              AppConnector.request(params).then(function(data){
 310                  refreshContainer.progressIndicator({'mode': 'hide'});
 311                  loadMoreHandler.replaceWith(data);
 312                  thisInstance.registerLoadMore();
 313              }, function(){
 314                  refreshContainer.progressIndicator({'mode': 'hide'});
 315              });
 316          });
 317      }
 318  
 319  });
 320  
 321  
 322  Vtiger_Widget_Js('Vtiger_Funnel_Widget_Js',{},{
 323  
 324          postLoadWidget: function() {
 325                          this._super();
 326                  var thisInstance = this;
 327  
 328                          this.getContainer().on('jqplotDataClick', function(ev, gridpos, datapos, neighbor, plot) {
 329                      var jData = thisInstance.getContainer().find('.widgetData').val();
 330                                  var data = JSON.parse(jData);
 331                                  var linkUrl = data[datapos][3];
 332                                  if(linkUrl) window.location.href = linkUrl;
 333                          });
 334  
 335                          this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 336                                  $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 337                          });
 338                          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 339                                  $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 340                          });
 341              },
 342  
 343      loadChart : function() {
 344          var container = this.getContainer();
 345          var data = container.find('.widgetData').val();
 346          var labels = new Array();
 347          var dataInfo = JSON.parse(data);
 348          for(var i=0; i<dataInfo.length; i++) {
 349              labels[i] = dataInfo[i][2];
 350              dataInfo[i][1] = parseFloat(dataInfo[i][1]);
 351          }
 352          this.getPlotContainer(false).jqplot([dataInfo],  {
 353              seriesDefaults: {
 354                  renderer:jQuery.jqplot.FunnelRenderer,
 355                  rendererOptions:{
 356                      sectionMargin: 12,
 357                      widthRatio: 0.1,
 358                      showDataLabels:true,
 359                      dataLabelThreshold: 0,
 360                      dataLabels: 'value'
 361                  }
 362              },
 363              legend: {
 364                  show: true,
 365                  location: 'ne',
 366                  placement: 'outside',
 367                  labels:labels,
 368                  xoffset:20
 369              }
 370          });
 371      },
 372  
 373  
 374      registerSectionClick : function() {
 375          this.getContainer().on('jqplotDataClick', function() {
 376              var sectionData = arguments[3];
 377              var salesStageValue = sectionData[0];
 378              //TODO : we need to construct the list url with the sales stage and filters
 379          })
 380  
 381      }
 382  });
 383  
 384  
 385  
 386  Vtiger_Widget_Js('Vtiger_Pie_Widget_Js',{},{
 387  
 388      /**
 389       * Function which will give chart related Data
 390       */
 391      generateData : function() {
 392          var container = this.getContainer();
 393          var jData = container.find('.widgetData').val();
 394          var data = JSON.parse(jData);
 395          var chartData = [];
 396          for(var index in data) {
 397              var row = data[index];
 398              var rowData = [row.last_name, parseFloat(row.amount), row.id];
 399              chartData.push(rowData);
 400          }
 401          return {'chartData':chartData};
 402      },
 403      
 404      postLoadWidget: function() {
 405          this._super();
 406          var thisInstance = this;
 407  
 408          this.getContainer().on('jqplotDataClick', function(ev, gridpos, datapos, neighbor, plot) {
 409              var jData = thisInstance.getContainer().find('.widgetData').val();
 410              var data = JSON.parse(jData);
 411              var linkUrl = data[datapos]['links'];
 412              if(linkUrl) window.location.href = linkUrl;
 413          });
 414  
 415          this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 416              $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 417          });
 418          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 419              $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 420          });
 421      },
 422  
 423      loadChart : function() {
 424          var chartData = this.generateData();
 425  
 426          this.getPlotContainer(false).jqplot([chartData['chartData']], {
 427              seriesDefaults:{
 428                  renderer:jQuery.jqplot.PieRenderer,
 429                  rendererOptions: {
 430                      showDataLabels: true,
 431                      dataLabels: 'value'
 432                  }
 433              },
 434              legend: {
 435                  show: true,
 436                  location: 'e'
 437              },
 438              title : chartData['title']
 439          });
 440      },
 441  
 442      registerSectionClick : function() {
 443          this.getPlotContainer().on('jqplotDataClick', function() {
 444              var sectionData = arguments[3];
 445              var assignedUserId = sectionData[2];
 446              //TODO : we need to construct the list url with the sales stage and filters
 447          })
 448  
 449      }
 450  });
 451  
 452  
 453  Vtiger_Widget_Js('Vtiger_Barchat_Widget_Js',{},{
 454  
 455      generateChartData : function() {
 456          var container = this.getContainer();
 457          var jData = container.find('.widgetData').val();
 458          var data = JSON.parse(jData);
 459          var chartData = [];
 460          var xLabels = new Array();
 461          var yMaxValue = 0;
 462          for(var index in data) {
 463              var row = data[index];
 464              row[0] = parseInt(row[0]);
 465              xLabels.push(app.getDecodedValue(row[1]))
 466              chartData.push(row[0]);
 467              if(parseInt(row[0]) > yMaxValue){
 468                  yMaxValue = parseInt(row[0]);
 469              }
 470          }
 471          // yMaxValue Should be 25% more than Maximum Value
 472          yMaxValue = yMaxValue + 2 + (yMaxValue/100)*25;
 473          return {'chartData':[chartData], 'yMaxValue':yMaxValue, 'labels':xLabels};
 474      },
 475      
 476       postLoadWidget: function() {
 477          this._super();
 478          var thisInstance = this;
 479  
 480          this.getContainer().on('jqplotDataClick', function(ev, gridpos, datapos, neighbor, plot) {
 481              var jData = thisInstance.getContainer().find('.widgetData').val();
 482              var data = JSON.parse(jData);
 483              var linkUrl = data[datapos]['links'];
 484              if(linkUrl) window.location.href = linkUrl;
 485          });
 486  
 487          this.getContainer().on("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 488              $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 489          });
 490          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 491              $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 492          });
 493      },
 494  
 495      loadChart : function() {
 496          var data = this.generateChartData();
 497  
 498                  this.getPlotContainer(false).jqplot(data['chartData'] , {
 499              title: data['title'],
 500              animate: !$.jqplot.use_excanvas,
 501              seriesDefaults:{
 502                  renderer:jQuery.jqplot.BarRenderer,
 503                  rendererOptions: {
 504                      showDataLabels: true,
 505                      dataLabels: 'value',
 506                      barDirection : 'vertical'
 507                  },
 508                  pointLabels: {show: true,edgeTolerance: -15}
 509              },
 510               axes: {
 511                  xaxis: {
 512                        tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer,
 513                        renderer: jQuery.jqplot.CategoryAxisRenderer,
 514                        ticks: data['labels'],
 515                        tickOptions: {
 516                          angle: -45
 517                        }
 518                  },
 519                  yaxis: {
 520                      min:0,
 521                      max: data['yMaxValue'],
 522                      tickOptions: {
 523                          formatString: '%d'
 524                      },
 525                      pad : 1.2
 526                  }
 527              },
 528              legend: {
 529                  show        : (data['data_labels']) ? true:false,
 530                  location    : 'e',
 531                  placement    : 'outside',
 532                  showLabels    : (data['data_labels']) ? true:false,
 533                  showSwatch    : (data['data_labels']) ? true:false,
 534                  labels        : data['data_labels']
 535              }
 536          });
 537  //        this.getPlotContainer(false).on('jqPlotDataClick', function(){
 538  //            console.log('here');
 539  //        });
 540  //        jQuery.jqplot.eventListenerHooks.push(['jqPlotDataClick', myClickHandler]);
 541      }
 542  
 543  //    registerSectionClick : function() {
 544  //        this.getPlotContainer(false);
 545  //    }
 546  });
 547  
 548  Vtiger_Widget_Js('Vtiger_MultiBarchat_Widget_Js',{
 549  
 550      /**
 551       * Function which will give char related Data like data , x labels and legend labels as map
 552       */
 553      getCharRelatedData : function() {
 554          var container = this.getContainer();
 555          var data = container.find('.widgetData').val();
 556          var users = new Array();
 557          var stages = new Array();
 558          var count = new Array();
 559          for(var i=0; i<data.length;i++) {
 560              if($.inArray(data[i].last_name, users) == -1) {
 561                  users.push(data[i].last_name);
 562              }
 563              if($.inArray(data[i].sales_stage, stages) == -1) {
 564                  stages.push(data[i].sales_stage);
 565              }
 566          }
 567  
 568          for(j in stages) {
 569              var salesStageCount = new Array();
 570              for(i in users) {
 571                  var salesCount = 0;
 572                  for(var k in data) {
 573                      var userData = data[k];
 574                      if(userData.sales_stage == stages[j] && userData.last_name == users[i]) {
 575                          salesCount = parseInt(userData.count);
 576                          break;
 577                      }
 578                  }
 579                  salesStageCount.push(salesCount);
 580              }
 581              count.push(salesStageCount);
 582          }
 583          return {
 584              'data' : count,
 585              'ticks' : users,
 586              'labels' : stages
 587          }
 588      },
 589      
 590      loadChart : function(){
 591          var chartRelatedData = this.getCharRelatedData();
 592          var chartData = chartRelatedData.data;
 593          var ticks = chartRelatedData.ticks;
 594          var labels = chartRelatedData.labels;
 595  
 596          this.getPlotContainer(false).jqplot( chartData, {
 597              stackSeries: true,
 598              captureRightClick: true,
 599              seriesDefaults:{
 600                  renderer:$.jqplot.BarRenderer,
 601                  rendererOptions: {
 602                      // Put a 30 pixel margin between bars.
 603                      barMargin: 10,
 604                      // Highlight bars when mouse button pressed.
 605                      // Disables default highlighting on mouse over.
 606                      highlightMouseDown: true,
 607                      highlightMouseOver : true
 608              },
 609                  pointLabels: {show: true,hideZeros: true}
 610              },
 611              axes: {
 612                  xaxis: {
 613                      renderer: $.jqplot.CategoryAxisRenderer,
 614                      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
 615                      tickOptions: {
 616                          angle: -45
 617                      },
 618                      ticks: ticks
 619                  },
 620                  yaxis: {
 621                      // Don't pad out the bottom of the data range.  By default,
 622                      // axes scaled as if data extended 10% above and below the
 623                      // actual range to prevent data points right on grid boundaries.
 624                      // Don't want to do that here.
 625                      padMin: 0,
 626                      min:0
 627                  }
 628              },
 629              legend: {
 630                  show: true,
 631                  location: 'e',
 632                  placement: 'outside',
 633                  labels:labels
 634              }
 635        });
 636      },
 637      
 638       postLoadWidget: function() {
 639          this._super();
 640          var thisInstance = this;
 641  
 642          this.getContainer().on('jqplotDataClick', function(ev, gridpos, datapos, neighbor) {
 643              var chartRelatedData = thisInstance.getCharRelatedData();
 644              var allLinks = chartRelatedData.links;
 645              if(allLinks)
 646                  var linkUrl = allLinks[gridpos][datapos];
 647              if(linkUrl) window.location.href = linkUrl;
 648          });
 649  
 650          this.getContainer().on("jqplotDataMouseOver", function(evt, seriesIndex, pointIndex, neighbor) {
 651              $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
 652          });
 653          this.getContainer().on("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, neighbor) {
 654              $('.jqplot-event-canvas').css( 'cursor', 'auto' );
 655          });
 656      }
 657  
 658  });
 659  
 660  // NOTE Widget-class name camel-case convention
 661  Vtiger_Widget_Js('Vtiger_Minilist_Widget_Js', {}, {
 662  
 663      postLoadWidget: function() {
 664          app.hideModalWindow();
 665          this.restrictContentDrag();
 666      }
 667  });
 668  
 669  Vtiger_Widget_Js('Vtiger_Tagcloud_Widget_Js',{},{
 670  
 671      postLoadWidget : function() {
 672          this._super();
 673          this.registerTagCloud();
 674          this.registerTagClickEvent();
 675      },
 676  
 677      registerTagCloud : function() {
 678          jQuery('#tagCloud').find('a').tagcloud({
 679              size: {
 680                start: parseInt('12'),
 681                end: parseInt('30'),
 682                unit: 'px'
 683              },
 684              color: {
 685                start: "#0266c9",
 686                end: "#759dc4"
 687              }
 688          });
 689      },
 690  
 691      registerChangeEventForModulesList : function() {
 692          jQuery('#tagSearchModulesList').on('change',function(e) {
 693              var modulesSelectElement = jQuery(e.currentTarget);
 694              if(modulesSelectElement.val() == 'all'){
 695                  jQuery('[name="tagSearchModuleResults"]').removeClass('hide');
 696              } else{
 697                  jQuery('[name="tagSearchModuleResults"]').removeClass('hide');
 698                  var selectedOptionValue = modulesSelectElement.val();
 699                  jQuery('[name="tagSearchModuleResults"]').filter(':not(#'+selectedOptionValue+')').addClass('hide');
 700              }
 701          });
 702      },
 703  
 704      registerTagClickEvent : function(){
 705          var thisInstance = this;
 706          var container = this.getContainer();
 707          container.on('click','.tagName',function(e) {
 708              var tagElement = jQuery(e.currentTarget);
 709              var tagId = tagElement.data('tagid');
 710              var params = {
 711                  'module' : app.getModuleName(),
 712                  'view' : 'TagCloudSearchAjax',
 713                  'tag_id' : tagId,
 714                  'tag_name' : tagElement.text()
 715              }
 716              AppConnector.request(params).then(
 717                  function(data) {
 718                      var params = {
 719                          'data' : data,
 720                          'css'  : {'min-width' : '40%'}
 721                      }
 722                      app.showModalWindow(params);
 723                      thisInstance.registerChangeEventForModulesList();
 724                  }
 725              )
 726          });
 727      },
 728  
 729      postRefreshWidget : function() {
 730          this._super();
 731          this.registerTagCloud();
 732      }
 733  });
 734  
 735  /* Notebook Widget */
 736  Vtiger_Widget_Js('Vtiger_Notebook_Widget_Js', {
 737  
 738  }, {
 739  
 740      // Override widget specific functions.
 741      postLoadWidget: function() {
 742          this.reinitNotebookView();
 743      },
 744  
 745      reinitNotebookView: function() {
 746          var self = this;
 747          app.showScrollBar(jQuery('.dashboard_notebookWidget_viewarea', this.container), {'height':'200px'});
 748          jQuery('.dashboard_notebookWidget_edit', this.container).click(function(){
 749              self.editNotebookContent();
 750          });
 751          jQuery('.dashboard_notebookWidget_save', this.container).click(function(){
 752              self.saveNotebookContent();
 753          });
 754      },
 755  
 756      editNotebookContent: function() {
 757          jQuery('.dashboard_notebookWidget_text', this.container).show();
 758          jQuery('.dashboard_notebookWidget_view', this.container).hide();
 759      },
 760  
 761      saveNotebookContent: function() {
 762          var self = this;
 763          var refreshContainer = this.container.find('.refresh');
 764          var textarea = jQuery('.dashboard_notebookWidget_textarea', this.container);
 765  
 766          var url = this.container.data('url');
 767          var params = url + '&content=true&mode=save&contents=' + encodeURIComponent(textarea.val());
 768  
 769          refreshContainer.progressIndicator({
 770              'smallLoadingImage' : true
 771          });
 772          AppConnector.request(params).then(function(data) {
 773              refreshContainer.progressIndicator({'mode': 'hide'});
 774              jQuery('.dashboardWidgetContent', self.container).html(data);
 775              self.reinitNotebookView();
 776          });
 777      }
 778  });