[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_DashBoard_Js", {
  11      gridster : false,
  12  
  13      //static property which will store the instance of dashboard
  14      currentInstance : false,
  15  
  16      addWidget : function(element, url) {
  17          var element = jQuery(element);
  18          var linkId = element.data('linkid');
  19          var name = element.data('name');
  20          jQuery(element).parent().hide();
  21          var widgetContainer = jQuery('<li class="new dashboardWidget" id="'+ linkId +'" data-name="'+name+'" data-mode="open"></li>');
  22          widgetContainer.data('url', url);
  23          var width = element.data('width');
  24          var height = element.data('height');
  25          Vtiger_DashBoard_Js.gridster.add_widget(widgetContainer, width, height);
  26          Vtiger_DashBoard_Js.currentInstance.loadWidget(widgetContainer);
  27      },
  28  
  29      addMiniListWidget: function(element, url) {
  30          // 1. Show popup window for selection (module, filter, fields)
  31          // 2. Compute the dynamic mini-list widget url
  32          // 3. Add widget with URL to the page.
  33  
  34          element = jQuery(element);
  35  
  36          app.showModalWindow(null, "index.php?module=Home&view=MiniListWizard&step=step1", function(wizardContainer){
  37              var form = jQuery('form', wizardContainer);
  38  
  39              var moduleNameSelectDOM = jQuery('select[name="module"]', wizardContainer);
  40              var filteridSelectDOM = jQuery('select[name="filterid"]', wizardContainer);
  41              var fieldsSelectDOM = jQuery('select[name="fields"]', wizardContainer);
  42  
  43              var moduleNameSelect2 = app.showSelect2ElementView(moduleNameSelectDOM, {
  44                  placeholder: app.vtranslate('JS_SELECT_MODULE')
  45              });
  46              var filteridSelect2 = app.showSelect2ElementView(filteridSelectDOM,{
  47                  placeholder: app.vtranslate('JS_PLEASE_SELECT_ATLEAST_ONE_OPTION')
  48              });
  49              var fieldsSelect2 = app.showSelect2ElementView(fieldsSelectDOM, {
  50                  placeholder: app.vtranslate('JS_PLEASE_SELECT_ATLEAST_ONE_OPTION'),
  51                  closeOnSelect: true,
  52                  maximumSelectionSize: 2
  53              });
  54              var footer = jQuery('.modal-footer', wizardContainer);
  55  
  56              filteridSelectDOM.closest('tr').hide();
  57              fieldsSelectDOM.closest('tr').hide();
  58              footer.hide();
  59  
  60              moduleNameSelect2.change(function(){
  61                  if (!moduleNameSelect2.val()) return;
  62  
  63                  AppConnector.request({
  64                      module: 'Home',
  65                      view: 'MiniListWizard',
  66                      step: 'step2',
  67                      selectedModule: moduleNameSelect2.val()
  68                  }).then(function(res) {
  69                      filteridSelectDOM.empty().html(res).trigger('change');
  70                      filteridSelect2.closest('tr').show();
  71                  })
  72              });
  73              filteridSelect2.change(function(){
  74                  if (!filteridSelect2.val()) return;
  75  
  76                  AppConnector.request({
  77                      module: 'Home',
  78                      view: 'MiniListWizard',
  79                      step: 'step3',
  80                      selectedModule: moduleNameSelect2.val(),
  81                      filterid: filteridSelect2.val()
  82                  }).then(function(res){
  83                      fieldsSelectDOM.empty().html(res).trigger('change');
  84                      fieldsSelect2.closest('tr').show();
  85                  });
  86              });
  87              fieldsSelect2.change(function() {
  88                  if (!fieldsSelect2.val()) {
  89                      footer.hide();
  90                  } else {
  91                      footer.show();
  92                  }
  93              });
  94  
  95              form.submit(function(e){
  96                  e.preventDefault();
  97                  //To disable savebutton after one submit to prevent multiple submits
  98                  jQuery("[name='saveButton']").attr('disabled','disabled');
  99                  var selectedModule = moduleNameSelect2.val();
 100                  var selectedFilterId= filteridSelect2.val();
 101                  var selectedFields = fieldsSelect2.val();
 102                  if (typeof selectedFields != 'object') selectedFields = [selectedFields];
 103  
 104                  // TODO mandatory field validation
 105  
 106                  finializeAdd(selectedModule, selectedFilterId, selectedFields);
 107              });
 108          });
 109  
 110  		function finializeAdd(moduleName, filterid, fields) {
 111              var data = {
 112                  module: moduleName
 113              }
 114              if (typeof fields != 'object') fields = [fields];
 115              data['fields'] = fields;
 116  
 117              url += '&filterid='+encodeURIComponent(filterid)+'&data=' + encodeURIComponent(JSON.stringify(data));
 118  
 119              var linkId = element.data('linkid');
 120              var name = element.data('name');
 121              var widgetContainer = jQuery('<li class="new dashboardWidget" id="'+ linkId +"-" + filterid +'" data-name="'+name+'" data-mode="open"></li>');
 122              widgetContainer.data('url', url);
 123              var width = element.data('width');
 124              var height = element.data('height');
 125              Vtiger_DashBoard_Js.gridster.add_widget(widgetContainer, width, height);
 126              Vtiger_DashBoard_Js.currentInstance.loadWidget(widgetContainer);
 127              app.hideModalWindow();
 128          }
 129      },
 130  
 131  
 132      restrictContentDrag : function(container){
 133          container.on('mousedown.draggable', function(e){
 134              var element = jQuery(e.target);
 135              var isHeaderElement = element.closest('.dashboardWidgetHeader').length > 0 ? true : false;
 136              if(isHeaderElement){
 137                  return;
 138              }
 139              //Stop the event propagation so that drag will not start for contents
 140              e.stopPropagation();
 141          })
 142      },
 143  
 144      addNoteBookWidget : function(element, url) {
 145          // 1. Show popup window for selection (module, filter, fields)
 146          // 2. Compute the dynamic mini-list widget url
 147          // 3. Add widget with URL to the page.
 148  
 149          element = jQuery(element);
 150  
 151          app.showModalWindow(null, "index.php?module=Home&view=AddNotePad", function(wizardContainer){
 152              var form = jQuery('form', wizardContainer);
 153              var params = app.validationEngineOptions;
 154              params.onValidationComplete = function(form, valid){
 155                  if(valid) {
 156                      //To prevent multiple click on save
 157                      jQuery("[name='saveButton']").attr('disabled','disabled');
 158                      var notePadName = form.find('[name="notePadName"]').val();
 159                      var notePadContent = form.find('[name="notePadContent"]').val();
 160                      var linkId = element.data('linkid');
 161                      var noteBookParams = {
 162                          'module' : app.getModuleName(),
 163                          'action' : 'NoteBook',
 164                          'mode' : 'NoteBookCreate',
 165                          'notePadName' : notePadName,
 166                          'notePadContent' : notePadContent,
 167                          'linkId' : linkId
 168                      }
 169                      AppConnector.request(noteBookParams).then(
 170                          function(data){
 171                              if(data.result.success){
 172                                  var widgetId = data.result.widgetId;
 173                                  app.hideModalWindow();
 174  
 175                                  url += '&widgetid='+widgetId
 176  
 177                                  var name = element.data('name');
 178                                  var widgetContainer = jQuery('<li class="new dashboardWidget" id="'+ linkId +"-" + widgetId +'" data-name="'+name+'" data-mode="open"></li>');
 179                                  widgetContainer.data('url', url);
 180                                  var width = element.data('width');
 181                                  var height = element.data('height');
 182                                  Vtiger_DashBoard_Js.gridster.add_widget(widgetContainer, width, height);
 183                                  Vtiger_DashBoard_Js.currentInstance.loadWidget(widgetContainer);
 184                              }
 185                          })
 186                  }
 187                  return false;
 188              }
 189              form.validationEngine(params);
 190          });
 191      }
 192  
 193  }, {
 194  
 195      container : false,
 196  
 197      instancesCache : {},
 198  
 199      init : function() {
 200          Vtiger_DashBoard_Js.currentInstance = this;
 201      },
 202  
 203      getContainer : function() {
 204          if(this.container == false) {
 205              this.container = jQuery('.gridster ul');
 206          }
 207          return this.container;
 208      },
 209  
 210      getWidgetInstance : function(widgetContainer) {
 211          var id = widgetContainer.attr('id');
 212          if(!(id in this.instancesCache)) {
 213              var widgetName = widgetContainer.data('name');
 214              this.instancesCache[id] = Vtiger_Widget_Js.getInstance(widgetContainer, widgetName);
 215          }
 216          return this.instancesCache[id];
 217      },
 218  
 219      registerGridster : function() {
 220          var thisInstance = this;
 221          Vtiger_DashBoard_Js.gridster = this.getContainer().gridster({
 222              widget_margins: [7, 7],
 223              widget_base_dimensions: [100, 300],
 224              min_cols: 6,
 225              min_rows: 20,
 226              draggable: {
 227                  'stop': function() {
 228                      thisInstance.savePositions(jQuery('.dashboardWidget'));
 229                  }
 230              }
 231          }).data('gridster');
 232      },
 233  
 234      savePositions: function(widgets) {
 235          var widgetRowColPositions = {}
 236          for (var index=0, len = widgets.length; index < len; ++index) {
 237              var widget = jQuery(widgets[index]);
 238              widgetRowColPositions[widget.attr('id')] = JSON.stringify({
 239                  row: widget.attr('data-row'), col: widget.attr('data-col')
 240              });
 241          }
 242  
 243          AppConnector.request({module: 'Vtiger', action: 'SaveWidgetPositions', 'positionsmap': widgetRowColPositions}).then(function(data){
 244          });
 245      },
 246  
 247      loadWidgets : function() {
 248          var thisInstance = this;
 249          var widgetList = jQuery('.dashboardWidget');
 250          widgetList.each(function(index,widgetContainerELement){
 251              thisInstance.loadWidget(jQuery(widgetContainerELement));
 252          });
 253  
 254      },
 255  
 256      loadWidget : function(widgetContainer) {
 257          var thisInstance = this;
 258          var urlParams = widgetContainer.data('url');
 259          var mode = widgetContainer.data('mode');
 260          widgetContainer.progressIndicator();
 261          if(mode == 'open') {
 262              AppConnector.request(urlParams).then(
 263                  function(data){
 264                      widgetContainer.html(data);
 265                      var adjustedHeight = widgetContainer.height()-50;
 266                      app.showScrollBar(widgetContainer.find('.dashboardWidgetContent'),{'height' : adjustedHeight});
 267                      var widgetInstance = thisInstance.getWidgetInstance(widgetContainer);
 268                      widgetContainer.trigger(Vtiger_Widget_Js.widgetPostLoadEvent);
 269                  },
 270                  function(){
 271                  }
 272                  );
 273          } else {
 274      }
 275      },
 276  
 277  
 278      registerEvents : function() {
 279          this.registerGridster();
 280          this.loadWidgets();
 281  
 282          this.registerRefreshWidget();
 283  
 284          this.showWidgetIcons();
 285          this.hideWidgetIcons();
 286          this.removeWidget();
 287          this.registerFilterInitiater();
 288  
 289          this.gridsterStop();
 290  
 291      },
 292  
 293      gridsterStop : function() {
 294          // TODO: we need to allow the header of the widget to be draggable
 295          var gridster = Vtiger_DashBoard_Js.gridster;
 296  
 297      },
 298  
 299      registerRefreshWidget : function() {
 300          var thisInstance = this;
 301          this.getContainer().on('click', 'a[name="drefresh"]', function(e) {
 302              var element = $(e.currentTarget);
 303              var parent = element.closest('li');
 304              var widgetInstnace = thisInstance.getWidgetInstance(parent);
 305              widgetInstnace.refreshWidget();
 306              return;
 307          });
 308      },
 309  
 310      showWidgetIcons : function() {
 311          this.getContainer().on('mouseover', 'li', function(e) {
 312              var element = $(e.currentTarget);
 313              var widgetIcons = element.find('.widgeticons');
 314              widgetIcons.fadeIn('slow', function() {
 315                  widgetIcons.css('visibility', 'visible');
 316              });
 317          });
 318      },
 319  
 320      hideWidgetIcons : function() {
 321          this.getContainer().on('mouseout', 'li', function(e) {
 322              var element = $(e.currentTarget);
 323              var widgetIcons = element.find('.widgeticons');
 324              widgetIcons.css('visibility', 'hidden');
 325          });
 326      },
 327  
 328      removeWidget : function() {
 329          this.getContainer().on('click', 'li a[name="dclose"]', function(e) {
 330              var element = $(e.currentTarget);
 331              var listItem = jQuery(element).parents('li');
 332              var width = listItem.attr('data-sizex');
 333              var height = listItem.attr('data-sizey');
 334              
 335              var url = element.data('url');
 336              var parent = element.closest('.dashboardWidgetHeader').parent();
 337              var widgetName = parent.data('name');
 338              var widgetTitle = parent.find('.dashboardTitle').attr('title');
 339  
 340              var message = app.vtranslate('JS_ARE_YOU_SURE_TO_DELETE_WIDGET')+" "+widgetTitle;
 341              Vtiger_Helper_Js.showConfirmationBox({'message' : message}).then(
 342                  function(e) {
 343                          AppConnector.request(url).then(
 344                              function(response) {
 345                                  if (response.success) {
 346                                      var nonReversableWidgets = ['MiniList','Notebook']
 347  
 348                                      parent.fadeOut('slow', function() {
 349                                          parent.remove();
 350                                      });
 351                                      if (jQuery.inArray(widgetName, nonReversableWidgets) == -1) {
 352                                          var data = '<li><a onclick="Vtiger_DashBoard_Js.addWidget(this, \''+response.result.url+'\')" href="javascript:void(0);"';
 353                                          data += 'data-width='+width+' data-height='+height+ ' data-linkid='+response.result.linkid+' data-name='+response.result.name+'>'+response.result.title+'</a></li>';
 354                                          var divider = jQuery('.widgetsList .divider');
 355                                          if(divider.length) {
 356                                              jQuery(data).insertBefore(divider);
 357                                          } else {
 358                                              jQuery(data).insertAfter(jQuery('.widgetsList li:last'));
 359                                          }
 360                                      }
 361                                  }
 362                              }
 363                          );
 364                      },
 365                  function(error, err){
 366                  }
 367              );
 368          });
 369      },
 370  
 371      registerFilterInitiater : function() {
 372          var container = this.getContainer();
 373          container.on('click', 'a[name="dfilter"]', function(e) {
 374              var widgetContainer = jQuery(e.currentTarget).closest('.dashboardWidget');
 375              var filterContainer = widgetContainer.find('.filterContainer');
 376              var dashboardWidgetHeader = jQuery('.dashboardWidgetHeader', widgetContainer);
 377  
 378              filterContainer.slideToggle(500);
 379  
 380              var callbackFunction = function() {
 381                  filterContainer.slideUp(500);
 382                  jQuery('.dateRange').DatePickerHide();
 383              }
 384              //adding clickoutside event on the dashboardWidgetHeader
 385              Vtiger_Helper_Js.addClickOutSideEvent(dashboardWidgetHeader, callbackFunction);
 386  
 387              return false;
 388          })
 389      }
 390  });