[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  jQuery.Class('Settings_PickListDependency_Js', {
  10      
  11      //holds the picklist dependency instance
  12      pickListDependencyInstance : false,
  13      
  14      /**
  15       * Function used to triggerAdd new Dependency for the picklists
  16       */
  17      triggerAdd : function(event) {
  18          event.stopPropagation();
  19          var instance = Settings_PickListDependency_Js.pickListDependencyInstance;
  20          instance.updatedSourceValues = [];
  21          instance.showEditView(instance.listViewForModule).then(
  22              function(data) {
  23                  instance.registerAddViewEvents();
  24              }
  25          );
  26      },
  27      
  28      /**
  29       * This function used to trigger Edit picklist dependency
  30       */
  31      triggerEdit : function(event, module, sourceField, targetField) {
  32          event.stopPropagation();
  33          var instance = Settings_PickListDependency_Js.pickListDependencyInstance;
  34          instance.updatedSourceValues = [];
  35          instance.showEditView(module, sourceField, targetField).then(
  36              function(data){
  37                  var form = jQuery('#pickListDependencyForm');
  38                  form.find('[name="sourceModule"],[name="sourceField"],[name="targetField"]').select2('disable');
  39                  var element = form.find('.dependencyMapping');
  40                  app.showHorizontalScrollBar(element);
  41                  instance.registerDependencyGraphEvents();
  42                  instance.registerSubmitEvent();
  43              }
  44          );
  45      },
  46      
  47      /**
  48       * This function used to trigger Delete picklist dependency
  49       */
  50      triggerDelete : function(event, module, sourceField, targetField) {
  51          event.stopPropagation();
  52          var currentTarget = jQuery(event.currentTarget);
  53          var currentTrEle = currentTarget.closest('tr');
  54          var instance = Settings_PickListDependency_Js.pickListDependencyInstance;
  55          
  56          var message = app.vtranslate('JS_LBL_ARE_YOU_SURE_YOU_WANT_TO_DELETE');
  57          Vtiger_Helper_Js.showConfirmationBox({'message' : message}).then(
  58              function(e) {
  59                  instance.deleteDependency(module, sourceField, targetField).then(
  60                      function(data){
  61                          var params = {};
  62                          params.text = app.vtranslate('JS_DEPENDENCY_DELETED_SUEESSFULLY');
  63                          Settings_Vtiger_Index_Js.showMessage(params);
  64                          currentTrEle.fadeOut('slow').remove();
  65                      }
  66                  );
  67              },
  68              function(error, err){
  69                  
  70              }
  71          );
  72      }
  73      
  74  }, {
  75      
  76      //constructor
  77      init : function() {
  78          Settings_PickListDependency_Js.pickListDependencyInstance = this;
  79      },
  80      
  81      //holds the listview forModule
  82      listViewForModule : '',
  83      
  84      //holds the updated sourceValues while editing dependency
  85      updatedSourceValues : [],
  86      
  87      //holds the new mapping of source values and target values
  88      valueMapping : [],
  89      
  90      //holds the list of selected source values for dependency
  91      selectedSourceValues : [],
  92      
  93      /*
  94       * function to show editView for Add/Edit Dependency
  95       * @params: module - selected module
  96       *            sourceField - source picklist
  97       *            targetField - target picklist
  98       */
  99      showEditView : function(module, sourceField, targetField) {
 100          var aDeferred = jQuery.Deferred();
 101          var progressIndicatorElement = jQuery.progressIndicator({
 102              'position' : 'html',
 103              'blockInfo' : {
 104                  'enabled' : true
 105              }
 106          });
 107          var params = {};
 108          params['module'] = app.getModuleName();
 109          params['parent'] = app.getParentModuleName();
 110          params['view'] = 'Edit';
 111          params['sourceModule'] = module;
 112          params['sourcefield'] = sourceField;
 113          params['targetfield'] = targetField;
 114          
 115          AppConnector.requestPjax(params).then(
 116              function(data) {
 117                  progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 118                  var container = jQuery('.contentsDiv');
 119                  container.html(data);
 120                  //register all select2 Elements
 121                  app.showSelect2ElementView(container.find('select.select2'), {dropdownCss : {'z-index' : 0}});
 122                  aDeferred.resolve(data);
 123              },
 124              function(error) {
 125                  progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 126                  aDeferred.reject(error);
 127              }
 128          );
 129          return aDeferred.promise();
 130      },
 131      
 132      /**
 133       * Function to get the Dependency graph based on selected module
 134       */
 135      getModuleDependencyGraph : function(form) {
 136          var thisInstance = this;
 137          form.find('[name="sourceModule"]').on('change', function() {
 138              var forModule = form.find('[name="sourceModule"]').val();
 139              thisInstance.showEditView(forModule).then(
 140                  function(data) {
 141                      thisInstance.registerAddViewEvents();
 142                  }
 143              );
 144          })
 145      },
 146      
 147      /**
 148       * Register change event for picklist fields in add/edit picklist dependency
 149       */
 150      registerPicklistFieldsChangeEvent : function(form) {
 151          var thisInstance = this;
 152          form.find('[name="sourceField"],[name="targetField"]').on('change', function() {
 153              thisInstance.checkValuesForDependencyGraph(form);
 154          })
 155      },
 156      
 157      /**
 158       * Function used to check the selected picklist fields are valid before showing dependency graph
 159       */
 160      checkValuesForDependencyGraph : function(form) {
 161          var thisInstance = this;
 162          var sourceField = form.find('[name="sourceField"]');
 163          var targetField = form.find('[name="targetField"]');
 164          var select2SourceField = app.getSelect2ElementFromSelect(sourceField);
 165          var select2TargetField = app.getSelect2ElementFromSelect(targetField);
 166          var sourceFieldValue = sourceField.val();
 167          var targetFieldValue = targetField.val();
 168          var dependencyGraph = jQuery('#dependencyGraph');
 169          if(sourceFieldValue != '' && targetFieldValue != '') {
 170              var result = app.vtranslate('JS_SOURCE_AND_TARGET_FIELDS_SHOULD_NOT_BE_SAME');
 171              form.find('.errorMessage').addClass('hide');
 172              if(sourceFieldValue == targetFieldValue) {
 173                  select2TargetField.validationEngine('showPrompt', result , 'error','topLeft',true);
 174                  dependencyGraph.html('');
 175              } else {
 176                  select2SourceField.validationEngine('hide');
 177                  select2TargetField.validationEngine('hide');
 178                  var sourceModule = form.find('[name="sourceModule"]').val();
 179                  var progressIndicatorElement = jQuery.progressIndicator({
 180                      'position' : 'html',
 181                      'blockInfo' : {
 182                          'enabled' : true
 183                      }
 184                  });
 185                  thisInstance.checkCyclicDependency(sourceModule, sourceFieldValue, targetFieldValue).then(
 186                      function(data) {
 187                          var result = data['result'];
 188                          if(!result['result']) {
 189                              thisInstance.addNewDependencyPickList(sourceModule, sourceFieldValue, targetFieldValue);
 190                              progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 191                          } else {
 192                              progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 193                              form.find('.errorMessage').removeClass('hide');
 194                              form.find('.cancelAddView').removeClass('hide');
 195                              dependencyGraph.html('');
 196                          }
 197                      },
 198                      function(error, err) {
 199                          progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 200                      }
 201                  );
 202              }
 203          } else {
 204              form.find('.errorMessage').addClass('hide');
 205              var result = app.vtranslate('JS_SELECT_SOME_VALUE');
 206              if(sourceFieldValue == '') {
 207                  select2SourceField.validationEngine('showPrompt', result , 'error','topRight',true);
 208              }else if(targetFieldValue == '') {
 209                  select2TargetField.validationEngine('showPrompt', result , 'error','topRight',true);
 210              }
 211          }
 212      },
 213      
 214      /**
 215       * Function used to check the cyclic dependency of the selected picklist fields
 216       * @params: sourceModule - selected module
 217       *            sourceFieldValue - source picklist value
 218       *            targetFieldValue - target picklist value
 219       */
 220      checkCyclicDependency : function(sourceModule, sourceFieldValue, targetFieldValue) {
 221          var aDeferred = jQuery.Deferred();
 222          var params = {};
 223          params['mode'] = 'checkCyclicDependency';
 224          params['module'] = app.getModuleName();
 225          params['parent'] = app.getParentModuleName();
 226          params['action'] = 'Index';
 227          params['sourceModule'] = sourceModule;
 228          params['sourcefield'] = sourceFieldValue;
 229          params['targetfield'] = targetFieldValue;
 230          
 231          AppConnector.request(params).then(
 232              function(data) {
 233                  aDeferred.resolve(data);
 234              }, function(error, err) {
 235                  aDeferred.reject();
 236              }
 237          );
 238          return aDeferred.promise();
 239      },
 240      
 241      /**
 242       * Function used to show the new picklist dependency graph
 243       * @params: sourceModule - selected module
 244       *            sourceFieldValue - source picklist value
 245       *            targetFieldValue - target picklist value
 246       */
 247      addNewDependencyPickList : function(sourceModule, sourceFieldValue, targetFieldValue) {
 248          var thisInstance = this;
 249          thisInstance.updatedSourceValues = [];
 250          var params = {};
 251          params['mode'] = 'getDependencyGraph';
 252          params['module'] = app.getModuleName();
 253          params['parent'] = app.getParentModuleName();
 254          params['view'] = 'IndexAjax';
 255          params['sourceModule'] = sourceModule;
 256          params['sourcefield'] = sourceFieldValue;
 257          params['targetfield'] = targetFieldValue;
 258          
 259          AppConnector.request(params).then(
 260              function(data) {
 261                  var dependencyGraph = jQuery('#dependencyGraph');
 262                  dependencyGraph.html(data).css(    {'padding': '10px','border': '1px solid #ddd','background': '#fff'});
 263                  
 264                  var element = dependencyGraph.find('.dependencyMapping');
 265                  app.showHorizontalScrollBar(element);
 266                  thisInstance.registerDependencyGraphEvents();
 267              }, function(error, err) {
 268  
 269              }
 270          );
 271      },
 272      
 273      /**
 274       * This function will delete the pickList Dependency
 275       * @params: module - selected module
 276       *            sourceField - source picklist value
 277       *            targetField - target picklist value
 278       */
 279      deleteDependency : function(module, sourceField, targetField) {
 280          var aDeferred = jQuery.Deferred();
 281          var params = {};
 282          params['module'] = app.getModuleName();
 283          params['parent'] = app.getParentModuleName();
 284          params['action'] = 'DeleteAjax';
 285          params['sourceModule'] = module;
 286          params['sourcefield'] = sourceField;
 287          params['targetfield'] = targetField;
 288          
 289          AppConnector.request(params).then(
 290              function(data) {
 291                  aDeferred.resolve(data);
 292              }, function(error, err) {
 293                  aDeferred.reject();
 294              }
 295          );
 296          return aDeferred.promise();
 297      },
 298      
 299      /**
 300       * Function used to show cancel link in add view and register click event for cancel
 301       */
 302      registerCancelAddView : function(form) {
 303          var thisInstance = this;
 304          var cancelDiv = form.find('.cancelAddView');
 305          cancelDiv.removeClass('hide');
 306          cancelDiv.find('.cancelLink').click(function() {
 307              thisInstance.loadListViewContents(thisInstance.listViewForModule);
 308          })
 309      },
 310      
 311      /**
 312       * Register all the events related to addView of picklist dependency
 313       */
 314      registerAddViewEvents : function() {
 315          var thisInstance = this;
 316          var form = jQuery('#pickListDependencyForm');
 317          thisInstance.registerCancelAddView(form);
 318          thisInstance.getModuleDependencyGraph(form);
 319          thisInstance.registerPicklistFieldsChangeEvent(form);
 320          thisInstance.registerSubmitEvent();
 321      },
 322      
 323      /**
 324       * Register all the events in editView of picklist dependency
 325       */
 326      registerDependencyGraphEvents : function() {
 327          var thisInstance = this;
 328          var form = jQuery('#pickListDependencyForm');
 329          var dependencyGraph = jQuery('#dependencyGraph');
 330          form.find('.cancelAddView').addClass('hide');
 331          thisInstance.registerTargetFieldsClickEvent(dependencyGraph);
 332          thisInstance.registerSelectSourceValuesClick(dependencyGraph);
 333          thisInstance.registerCancelDependency(form);
 334      },
 335      
 336      /**
 337       * Register all the events related to listView of picklist dependency
 338       */
 339      registerListViewEvents : function() {
 340          var thisInstance = this;
 341          var forModule = jQuery('.contentsDiv').find('.pickListSupportedModules').val();
 342          thisInstance.listViewForModule = forModule;
 343          //thisInstance.triggerDisplayTypeEvent();
 344          thisInstance.registerSourceModuleChangeEvent();
 345      },
 346      
 347      /**
 348       * Register the click event for cancel picklist dependency changes
 349       */
 350      registerCancelDependency : function(form) {
 351          var thisInstance = this;
 352          //Register click event for cancel link
 353          var cancelDependencyLink = form.find('.cancelDependency');
 354          cancelDependencyLink.click(function() {
 355              thisInstance.loadListViewContents(thisInstance.listViewForModule);
 356          })
 357      },
 358      
 359      /**
 360       * Register the click event for target fields in dependency graph
 361       */
 362      registerTargetFieldsClickEvent : function(dependencyGraph) {
 363          var thisInstance = this;
 364          thisInstance.updatedSourceValues = [];
 365          dependencyGraph.find('td.picklistValueMapping').on('click', function(e) {
 366              var currentTarget = jQuery(e.currentTarget);
 367              var sourceValue = currentTarget.data('sourceValue');
 368              if(jQuery.inArray(sourceValue, thisInstance.updatedSourceValues) == -1) {
 369                  thisInstance.updatedSourceValues.push(sourceValue);
 370              }
 371              if(currentTarget.hasClass('selectedCell')) {
 372                  currentTarget.addClass('unselectedCell').removeClass('selectedCell').find('i.icon-ok').remove();
 373              } else {
 374                  currentTarget.addClass('selectedCell').removeClass('unselectedCell').prepend('<i class="icon-ok pull-left"></i>');
 375              }
 376          });
 377      },
 378      
 379      /**
 380       * Function used to update the value mapping to save the picklist dependency
 381       */
 382      updateValueMapping : function(dependencyGraph) {
 383          var thisInstance = this;
 384          thisInstance.valueMapping = [];
 385          var sourceValuesArray = thisInstance.updatedSourceValues;
 386          var dependencyTable = dependencyGraph.find('.pickListDependencyTable');
 387          for(var key in sourceValuesArray) {
 388              if(typeof sourceValuesArray[key] == 'string'){
 389                  var encodedSourceValue = sourceValuesArray[key].replace(/"/g, '\\"');
 390              } else {
 391                  encodedSourceValue = sourceValuesArray[key];
 392              }
 393              var selectedTargetValues = dependencyTable.find('td[data-source-value="'+encodedSourceValue+'"]').filter('.selectedCell');
 394              var targetValues = [];
 395              if(selectedTargetValues.length > 0) {
 396                  jQuery.each(selectedTargetValues, function(index, element) {
 397                      targetValues.push(jQuery(element).data('targetValue'));
 398                  });
 399              } else {
 400                  targetValues.push('');
 401              }
 402              thisInstance.valueMapping.push({'sourcevalue' : sourceValuesArray[key], 'targetvalues' : targetValues});
 403          }
 404      },
 405      
 406      /**
 407       * register click event for select source values button in add/edit view
 408       */
 409      registerSelectSourceValuesClick : function(dependencyGraph) {
 410          var thisInstance = this;
 411          dependencyGraph.find('button.sourceValues').click(function() {
 412              var selectSourceValues = dependencyGraph.find('.modalCloneCopy');
 413              var clonedContainer = selectSourceValues.clone(true, true).removeClass('modalCloneCopy');
 414              var callBackFunction = function(data) {
 415                  data.find('.sourcePicklistValuesModal').removeClass('hide');
 416                  data.find('[name="saveButton"]').click(function(e) {
 417                      thisInstance.selectedSourceValues = [];
 418                      var sourceValues = data.find('.sourceValue');
 419                      jQuery.each(sourceValues, function(index, ele) {
 420                          var element = jQuery(ele);
 421                          var value = element.val();
 422                          if(typeof value == 'string'){
 423                              var encodedValue = value.replace(/"/g, '\\"');
 424                          } else {
 425                              encodedValue = value;
 426                          }
 427                          var hiddenElement = selectSourceValues.find('[class*="'+encodedValue+'"]');
 428                          if(element.is(':checked')) {
 429                              thisInstance.selectedSourceValues.push(value);
 430                              hiddenElement.attr('checked', true);
 431                          } else {
 432                              hiddenElement.removeAttr('checked');
 433                          }
 434                      })
 435                      app.hideModalWindow();
 436                      thisInstance.loadMappingForSelectedValues(dependencyGraph);
 437                  });
 438              }
 439              
 440              app.showModalWindow(clonedContainer,function(data) {
 441                  if(typeof callBackFunction == 'function') {
 442                      callBackFunction(data);
 443                  }
 444              }, {'width':'1000px'});
 445          })
 446      },
 447      
 448      /**
 449       * Function used to load mapping for selected picklist fields
 450       */
 451      loadMappingForSelectedValues : function(dependencyGraph) {
 452          var thisInstance = this;
 453          var allSourcePickListValues = jQuery.parseJSON(dependencyGraph.find('.allSourceValues').val());
 454          var dependencyTable = dependencyGraph.find('.pickListDependencyTable');
 455          for(var key in allSourcePickListValues) {
 456              if(typeof allSourcePickListValues[key] == 'string'){
 457                  var encodedSourcePickListValue = allSourcePickListValues[key].replace(/"/g, '\\"');
 458              } else {
 459                  encodedSourcePickListValue = allSourcePickListValues[key];
 460              }
 461              var mappingCells = dependencyTable.find('[data-source-value="'+encodedSourcePickListValue+'"]');
 462              if(jQuery.inArray(allSourcePickListValues[key], thisInstance.selectedSourceValues) == -1) {
 463                  mappingCells.hide();
 464              } else {
 465                  mappingCells.show();
 466              }
 467          }
 468          dependencyGraph.find('.dependencyMapping').mCustomScrollbar("update");
 469      },
 470      
 471      /**
 472       * This function will save the picklist dependency details
 473       */
 474      savePickListDependency : function(form) {
 475          var thisInstance = this;
 476          var progressIndicatorElement = jQuery.progressIndicator({
 477              'position' : 'html',
 478              'blockInfo' : {
 479                  'enabled' : true
 480              }
 481          });
 482          var data = form.serializeFormData();
 483          data['module'] = app.getModuleName();
 484          data['parent'] = app.getParentModuleName();
 485          data['action'] = 'SaveAjax';
 486          data['mapping'] = JSON.stringify(thisInstance.valueMapping);
 487          AppConnector.request(data).then(
 488              function(data) {
 489                  if(data['success']) {
 490                      progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 491                      var params = {};
 492                      params.text = app.vtranslate('JS_PICKLIST_DEPENDENCY_SAVED');
 493                      Settings_Vtiger_Index_Js.showMessage(params);
 494                      thisInstance.loadListViewContents(thisInstance.listViewForModule);
 495                  }
 496              },
 497              function(error) {
 498                  progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 499              }
 500          );
 501      },
 502      
 503      /**
 504       * This function will load the listView contents after Add/Edit picklist dependency
 505       */
 506      loadListViewContents : function(forModule) {
 507          var thisInstance = this;
 508          var progressIndicatorElement = jQuery.progressIndicator({
 509              'position' : 'html',
 510              'blockInfo' : {
 511                  'enabled' : true
 512              }
 513          });
 514          var params = {};
 515          params['module'] = app.getModuleName();
 516          params['parent'] = app.getParentModuleName();
 517          params['view'] = 'List';
 518          params['formodule'] = forModule;
 519          
 520          AppConnector.requestPjax(params).then(
 521              function(data) {
 522                  progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 523                  //replace the new list view contents
 524                  jQuery('.contentsDiv').html(data);
 525                  app.changeSelectElementView(jQuery('.contentsDiv').find('.pickListSupportedModules'));
 526                  thisInstance.registerListViewEvents();
 527              }, function(error, err) {
 528                  progressIndicatorElement.progressIndicator({'mode' : 'hide'});
 529              }
 530          );
 531      },
 532      
 533      /**
 534       * trigger the display type event to show the width
 535       */
 536      triggerDisplayTypeEvent : function() {
 537          var widthType = app.cacheGet('widthType', 'narrowWidthType');
 538          if(widthType) {
 539              var elements = jQuery('.listViewEntriesTable').find('td,th');
 540              elements.attr('class', widthType);
 541          }
 542      },
 543      
 544      /**
 545       * register change event for source module in add/edit picklist dependency
 546       */
 547      registerSourceModuleChangeEvent : function() {
 548          var thisInstance = this;
 549          var container = jQuery('.contentsDiv');
 550          container.find('.pickListSupportedModules').on('change', function(e) {
 551              var currentTarget = jQuery(e.currentTarget);
 552              var forModule = currentTarget.val();
 553              thisInstance.loadListViewContents(forModule);
 554          });
 555      },
 556      
 557      /**
 558       * register the form submit event
 559       */
 560      registerSubmitEvent : function() {
 561          var thisInstance = this;
 562          var form = jQuery('#pickListDependencyForm');
 563          var dependencyGraph = jQuery('#dependencyGraph');
 564          form.submit(function(e) {
 565              e.preventDefault();
 566              try{
 567                  thisInstance.updateValueMapping(dependencyGraph);
 568              }catch(e) {
 569                  bootbox.alert(e.message);
 570                  return;
 571              }
 572              thisInstance.savePickListDependency(form);
 573          });
 574      },
 575      
 576      /**
 577       * register events for picklist dependency
 578       */
 579      registerEvents : function() {
 580          var thisInstance = this;
 581          var form = jQuery('#pickListDependencyForm');
 582          if(form.length > 0) {
 583              var element = form.find('.dependencyMapping');
 584              app.showHorizontalScrollBar(element);
 585              if(form.find('.editDependency').val() == "true") {
 586                  form.find('[name="sourceModule"],[name="sourceField"],[name="targetField"]').select2('disable');
 587                  thisInstance.registerDependencyGraphEvents();
 588                  thisInstance.registerSubmitEvent();
 589              } else {
 590                  thisInstance.registerAddViewEvents();
 591              }
 592          } else {
 593              thisInstance.registerListViewEvents();
 594          }
 595      }
 596      
 597  });
 598  
 599  jQuery(document).ready(function(){
 600      var instance = new Settings_PickListDependency_Js();
 601      instance.registerEvents();
 602  })