public/assets/scripts/components-dropdowns.js

   1 var ComponentsDropdowns = function() {
   2
   3   var handleSelect2 = function() {
   4
   5     $('#select2_sample1').select2({
   6       placeholder: "Select an option",
   7       allowClear: true
   8     });
   9
  10     $('#select2_sample2').select2({
  11       placeholder: "Select a State",
  12       allowClear: true
  13     });
  14
  15     $("#select2_sample3").select2({
  16       placeholder: "Select...",
  17       allowClear: true,
  18       minimumInputLength: 1,
  19       query: function(query) {
  20         var data = {
  21             results: []
  22           },
  23           i, j, s;
  24         for (i = 1; i < 5; i++) {
  25           s = "";
  26           for (j = 0; j < i; j++) {
  27             s = s + query.term;
  28           }
  29           data.results.push({
  30             id: query.term + i,
  31             text: s
  32           });
  33         }
  34         query.callback(data);
  35       }
  36     });
  37
  38     function format(state) {
  39       if (!state.id) return state.text; // optgroup
  40       return "<img class='flag' src='" + Metronic.getGlobalImgPath() +
  41         "flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
  42     }
  43     $("#select2_sample4").select2({
  44       placeholder: "Select a Country",
  45       allowClear: true,
  46       formatResult: format,
  47       formatSelection: format,
  48       escapeMarkup: function(m) {
  49         return m;
  50       }
  51     });
  52
  53     $("#select2_sample5").select2({
  54       tags: ["red", "green", "blue", "yellow", "pink"]
  55     });
  56
  57
  58     function movieFormatResult(movie) {
  59       var markup = "<table class='movie-result'><tr>";
  60       if (movie.posters !== undefined && movie.posters.thumbnail !==
  61         undefined) {
  62         markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
  63           "'/></td>";
  64       }
  65       markup += "<td valign='top'><h5>" + movie.title + "</h5>";
  66       if (movie.critics_consensus !== undefined) {
  67         markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
  68           "</div>";
  69       } else if (movie.synopsis !== undefined) {
  70         markup += "<div class='movie-synopsis'>" + movie.synopsis +
  71           "</div>";
  72       }
  73       markup += "</td></tr></table>"
  74       return markup;
  75     }
  76
  77     function movieFormatSelection(movie) {
  78       return movie.title;
  79     }
  80
  81     $("#select2_sample6").select2({
  82       placeholder: "Search for a movie",
  83       minimumInputLength: 1,
  84       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
  85         url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
  86         dataType: 'jsonp',
  87         data: function(term, page) {
  88           return {
  89             q: term, // search term
  90             page_limit: 10,
  91             apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
  92           };
  93         },
  94         results: function(data, page) { // parse the results into the format expected by Select2.
  95           // since we are using custom formatting functions we do not need to alter remote JSON data
  96           return {
  97             results: data.movies
  98           };
  99         }
 100       },
 101       initSelection: function(element, callback) {
 102         // the input tag has a value attribute preloaded that points to a preselected movie's id
 103         // this function resolves that id attribute to an object that select2 can render
 104         // using its formatResult renderer - that way the movie name is shown preselected
 105         var id = $(element).val();
 106         if (id !== "") {
 107           $.ajax(
 108             "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
 109             id + ".json", {
 110               data: {
 111                 apikey: "ju6z9mjyajq2djue3gbvv26t"
 112               },
 113               dataType: "jsonp"
 114             }).done(function(data) {
 115             callback(data);
 116           });
 117         }
 118       },
 119       formatResult: movieFormatResult, // omitted for brevity, see the source of this page
 120       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
 121       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
 122       escapeMarkup: function(m) {
 123           return m;
 124         } // we do not want to escape markup since we are displaying html in results
 125     });
 126   }
 127
 128   var handleSelect2Modal = function() {
 129
 130     $('#select2_sample_modal_1').select2({
 131       placeholder: "Select an option",
 132       allowClear: true
 133     });
 134
 135     $('#select2_sample_modal_2').select2({
 136       placeholder: "Select a State",
 137       allowClear: true
 138     });
 139
 140     $("#select2_sample_modal_3").select2({
 141       allowClear: true,
 142       minimumInputLength: 1,
 143       query: function(query) {
 144         var data = {
 145             results: []
 146           },
 147           i, j, s;
 148         for (i = 1; i < 5; i++) {
 149           s = "";
 150           for (j = 0; j < i; j++) {
 151             s = s + query.term;
 152           }
 153           data.results.push({
 154             id: query.term + i,
 155             text: s
 156           });
 157         }
 158         query.callback(data);
 159       }
 160     });
 161
 162     function format(state) {
 163       if (!state.id) return state.text; // optgroup
 164       return "<img class='flag' src='" + Metronic.getGlobalImgPath() +
 165         "flags/" + state.id.toLowerCase() + ".png'/>&nbsp;&nbsp;" + state.text;
 166     }
 167     $("#select2_sample_modal_4").select2({
 168       allowClear: true,
 169       formatResult: format,
 170       formatSelection: format,
 171       escapeMarkup: function(m) {
 172         return m;
 173       }
 174     });
 175
 176     $("#select2_sample_modal_5").select2({
 177       tags: ["red", "green", "blue", "yellow", "pink"]
 178     });
 179
 180
 181     function movieFormatResult(movie) {
 182       var markup = "<table class='movie-result'><tr>";
 183       if (movie.posters !== undefined && movie.posters.thumbnail !==
 184         undefined) {
 185         markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
 186           "'/></td>";
 187       }
 188       markup += "<td valign='top'><h5>" + movie.title + "</h5>";
 189       if (movie.critics_consensus !== undefined) {
 190         markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
 191           "</div>";
 192       } else if (movie.synopsis !== undefined) {
 193         markup += "<div class='movie-synopsis'>" + movie.synopsis +
 194           "</div>";
 195       }
 196       markup += "</td></tr></table>"
 197       return markup;
 198     }
 199
 200     function movieFormatSelection(movie) {
 201       return movie.title;
 202     }
 203
 204     $("#select2_sample_modal_6").select2({
 205       placeholder: "Search for a movie",
 206       minimumInputLength: 1,
 207       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
 208         url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
 209         dataType: 'jsonp',
 210         data: function(term, page) {
 211           return {
 212             q: term, // search term
 213             page_limit: 10,
 214             apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
 215           };
 216         },
 217         results: function(data, page) { // parse the results into the format expected by Select2.
 218           // since we are using custom formatting functions we do not need to alter remote JSON data
 219           return {
 220             results: data.movies
 221           };
 222         }
 223       },
 224       initSelection: function(element, callback) {
 225         // the input tag has a value attribute preloaded that points to a preselected movie's id
 226         // this function resolves that id attribute to an object that select2 can render
 227         // using its formatResult renderer - that way the movie name is shown preselected
 228         var id = $(element).val();
 229         if (id !== "") {
 230           $.ajax(
 231             "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
 232             id + ".json", {
 233               data: {
 234                 apikey: "ju6z9mjyajq2djue3gbvv26t"
 235               },
 236               dataType: "jsonp"
 237             }).done(function(data) {
 238             callback(data);
 239           });
 240         }
 241       },
 242       formatResult: movieFormatResult, // omitted for brevity, see the source of this page
 243       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
 244       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
 245       escapeMarkup: function(m) {
 246           return m;
 247         } // we do not want to escape markup since we are displaying html in results
 248     });
 249   }
 250
 251   var handleBootstrapSelect = function() {
 252     $('.bs-select').selectpicker({
 253       iconBase: 'fa',
 254       tickIcon: 'fa-check'
 255     });
 256   }
 257
 258   var handleMultiSelect = function() {
 259     $('#my_multi_select1').multiSelect();
 260     $('#my_multi_select2').multiSelect({
 261       selectableOptgroup: true,
 262       afterSelect: function(values) {
 263         console.log(values);
 264       },
 265       afterDeselect: function(values) {
 266         console.log(values);
 267       }
 268     });
 269   }
 270
 271   var bindTeam = function(teamAgents, agents, teams) {
 272     var select = document.createElement('select');
 273     select.className = 'multi-select';
 274     select.setAttribute('multiple', 'multiple');
 275
 276     for (var agent in agents) {
 277       var option = document.createElement('option');
 278       option.value = agents[agent].id;
 279       option.text = agents[agent].fullname + ' <' + agents[agent].name +
 280         ',' + agents[agent].internal + '>';
 281
 282       if (_.includes(teamAgents, agents[agent].id)) {
 283         option.setAttribute('selected', '');
 284       }
 285
 286       select.appendChild(option);
 287     }
 288
 289     var div = document.getElementById('multi-select-team');
 290     div.innerHTML = '';
 291     div.appendChild(select);
 292
 293     $(select).multiSelect({
 294       selectableFooter: 'Agents available',
 295       selectionFooter: 'Agents associated',
 296       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 297       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 298       afterInit: function(ms) {
 299         var that = this,
 300           $selectableSearch = that.$selectableUl.prev(),
 301           $selectionSearch = that.$selectionUl.prev(),
 302           selectableSearchString = '#' + that.$container.attr('id') +
 303           ' .ms-elem-selectable:not(.ms-selected)',
 304           selectionSearchString = '#' + that.$container.attr('id') +
 305           ' .ms-elem-selection.ms-selected';
 306
 307         that.qs1 = $selectableSearch.quicksearch(
 308             selectableSearchString)
 309           .on('keydown', function(e) {
 310             if (e.which === 40) {
 311               that.$selectableUl.focus();
 312               return false;
 313             }
 314           });
 315
 316         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 317           .on('keydown', function(e) {
 318             if (e.which == 40) {
 319               that.$selectionUl.focus();
 320               return false;
 321             }
 322           });
 323       },
 324       afterSelect: function(values) {
 325         this.qs1.cache();
 326         this.qs2.cache();
 327         teams().select(values);
 328       },
 329       afterDeselect: function(values) {
 330         this.qs1.cache();
 331         this.qs2.cache();
 332         teams().deselect(values);
 333       }
 334     });
 335   }
 336
 337   var bindQueue = function(teams, queues, agents) {
 338     var select = document.createElement('select');
 339     select.className = 'multi-select';
 340     select.setAttribute('multiple', 'multiple');
 341
 342     for (var team in teams) {
 343       var optgroup = document.createElement('optgroup');
 344       optgroup.label = teams[team].name;
 345
 346       for (var user in teams[team].Users) {
 347         var option = document.createElement('option');
 348         option.value = teams[team].Users[user].id;
 349         option.text = teams[team].Users[user].fullname + ' <' + teams[team]
 350           .Users[user].name + ',' + teams[team].Users[user].internal + '>';
 351         if (_.includes(_.map(queues, 'id'), teams[team].Users[user].id)) {
 352           option.setAttribute('selected', '');
 353           var user = _.find(queues, {
 354             id: teams[team].Users[user].id
 355           });
 356           option.text += user.hasOwnProperty('penalty') ? ' (' + user.penalty +
 357             ')' : '';
 358         }
 359
 360         optgroup.appendChild(option);
 361       }
 362       select.appendChild(optgroup);
 363     }
 364
 365     var div = document.getElementById('multi-select-team');
 366     div.innerHTML = '';
 367     div.appendChild(select);
 368
 369     $(select).multiSelect({
 370       selectableFooter: 'Agents available',
 371       selectionFooter: 'Agents associated',
 372       selectableOptgroup: true,
 373       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 374       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 375       afterInit: function(ms) {
 376         var that = this,
 377           $selectableSearch = that.$selectableUl.prev(),
 378           $selectionSearch = that.$selectionUl.prev(),
 379           selectableSearchString = '#' + that.$container.attr('id') +
 380           ' .ms-elem-selectable:not(.ms-selected)',
 381           selectionSearchString = '#' + that.$container.attr('id') +
 382           ' .ms-elem-selection.ms-selected';
 383
 384         that.qs1 = $selectableSearch.quicksearch(
 385             selectableSearchString)
 386           .on('keydown', function(e) {
 387             if (e.which === 40) {
 388               that.$selectableUl.focus();
 389               return false;
 390             }
 391           });
 392
 393         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 394           .on('keydown', function(e) {
 395             if (e.which == 40) {
 396               that.$selectionUl.focus();
 397               return false;
 398             }
 399           });
 400       },
 401       afterSelect: function(values) {
 402         this.qs1.cache();
 403         this.qs2.cache();
 404         agents().select(values);
 405       },
 406       afterDeselect: function(values) {
 407         this.qs1.cache();
 408         this.qs2.cache();
 409         agents().deselect(values);
 410       }
 411     });
 412   }
 413
 414   var bindPermit = function(dataQueues, dataPermits, channel, userId,
 415     Resource) {
 416     var select = document.createElement('select');
 417     select.className = 'multi-select';
 418     select.setAttribute('multiple', 'multiple');
 419
 420     _.forEach(dataQueues, function(queues) {
 421       var optgroup = document.createElement('optgroup');
 422       optgroup.label = 'ALL';
 423
 424       queues.forEach(function(queue) {
 425         var option = document.createElement('option');
 426         var _query = {};
 427
 428         if (queue.id) {
 429           _query.id = queue.id;
 430         } else {
 431           _query.name = queue.name;
 432         }
 433
 434         option.value = queue.id || queue.name;
 435         option.text = queue.name;
 436
 437         if (_.find(dataPermits.queues, _query)) {
 438           option.setAttribute('selected', '');
 439         }
 440
 441         optgroup.appendChild(option);
 442       });
 443
 444       select.appendChild(optgroup);
 445     });
 446
 447     var div = document.getElementById('multi-select-permit');
 448     div.innerHTML = '';
 449     div.appendChild(select);
 450
 451     $(select).multiSelect({
 452       selectableFooter: 'Queues available',
 453       selectionFooter: 'Queues associated',
 454       selectableOptgroup: true,
 455       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 456       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 457       afterInit: function(ms) {
 458         var that = this,
 459           $selectableSearch = that.$selectableUl.prev(),
 460           $selectionSearch = that.$selectionUl.prev(),
 461           selectableSearchString = '#' + that.$container.attr('id') +
 462           ' .ms-elem-selectable:not(.ms-selected)',
 463           selectionSearchString = '#' + that.$container.attr('id') +
 464           ' .ms-elem-selection.ms-selected';
 465
 466         that.qs1 = $selectableSearch.quicksearch(
 467             selectableSearchString)
 468           .on('keydown', function(e) {
 469             if (e.which === 40) {
 470               that.$selectableUl.focus();
 471               return false;
 472             }
 473           });
 474
 475         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 476           .on('keydown', function(e) {
 477             if (e.which == 40) {
 478               that.$selectionUl.focus();
 479               return false;
 480             }
 481           });
 482       },
 483       afterSelect: function(values) {
 484         this.qs1.cache();
 485         this.qs2.cache();
 486         return Resource
 487           .save({
 488             id: userId,
 489             controller: 'allowed',
 490             controller2: channel,
 491             controller3: 'queues'
 492           }, values)
 493           .$promise
 494           .catch(function(err) {
 495             console.error(err);
 496           });
 497       },
 498       afterDeselect: function(values) {
 499         this.qs1.cache();
 500         this.qs2.cache();
 501         return Resource
 502           .delete({
 503             id: userId,
 504             controller: 'allowed',
 505             controller2: channel,
 506             controller3: 'queues',
 507             ids: values
 508           })
 509           .$promise
 510           .catch(function(err) {
 511             console.error(err);
 512           });
 513       }
 514     });
 515   }
 516
 517   var bindAgent = function(dataQueues, dataAgent, channel, userId,
 518     Resource) {
 519     var select = document.createElement('select');
 520     select.className = 'multi-select';
 521     select.setAttribute('multiple', 'multiple');
 522
 523     _.forEach(dataQueues, function(queues) {
 524       var optgroup = document.createElement('optgroup');
 525       optgroup.label = 'ALL';
 526
 527       queues.forEach(function(queue) {
 528         var option = document.createElement('option');
 529         var _query = {};
 530
 531         if (queue.id) {
 532           _query.id = queue.id;
 533         } else {
 534           _query.name = queue.name;
 535         }
 536
 537         option.value = queue.id || queue.name;
 538         option.text = queue.name;
 539
 540         if (_.find(dataAgent.queues, _query)) {
 541           option.setAttribute('selected', '');
 542         }
 543
 544         optgroup.appendChild(option);
 545       });
 546
 547       select.appendChild(optgroup);
 548     });
 549
 550     var div = document.getElementById('multi-select-queues');
 551     div.innerHTML = '';
 552     div.appendChild(select);
 553
 554     $(select).multiSelect({
 555       selectableFooter: 'Queues available',
 556       selectionFooter: 'Queues associated',
 557       selectableOptgroup: true,
 558       selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 559       selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
 560       afterInit: function(ms) {
 561         var that = this,
 562           $selectableSearch = that.$selectableUl.prev(),
 563           $selectionSearch = that.$selectionUl.prev(),
 564           selectableSearchString = '#' + that.$container.attr('id') +
 565           ' .ms-elem-selectable:not(.ms-selected)',
 566           selectionSearchString = '#' + that.$container.attr('id') +
 567           ' .ms-elem-selection.ms-selected';
 568
 569         that.qs1 = $selectableSearch.quicksearch(
 570             selectableSearchString)
 571           .on('keydown', function(e) {
 572             if (e.which === 40) {
 573               that.$selectableUl.focus();
 574               return false;
 575             }
 576           });
 577
 578         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
 579           .on('keydown', function(e) {
 580             if (e.which == 40) {
 581               that.$selectionUl.focus();
 582               return false;
 583             }
 584           });
 585       },
 586       afterSelect: function(values) {
 587         this.qs1.cache();
 588         this.qs2.cache();
 589         return Resource
 590           .save({
 591             id: userId,
 592             controller: channel,
 593             controller2: 'queues',
 594           }, values)
 595           .$promise
 596           .catch(function(err) {
 597             console.error(err);
 598           });
 599       },
 600       afterDeselect: function(values) {
 601         this.qs1.cache();
 602         this.qs2.cache();
 603         return Resource
 604           .delete({
 605             id: userId,
 606             controller: channel,
 607             controller2: 'queues',
 608             ids: values
 609           })
 610           .$promise
 611           .catch(function(err) {
 612             console.error(err);
 613           });
 614       }
 615     });
 616   }
 617
 618   return {
 619     //main function to initiate the module
 620     init: function() {
 621       handleSelect2();
 622       handleSelect2Modal();
 623       handleMultiSelect();
 624       handleBootstrapSelect();
 625     },
 626     bindTeam: bindTeam,
 627     bindMailQueue: bindQueue,
 628     bindChatQueue: bindQueue,
 629     bindFaxQueue: bindQueue,
 630     bindSmsQueue: bindQueue,
 631     bindQueue: bindQueue,
 632     bindPermit: bindPermit,
 633     bindAgent: bindAgent
 634   };
 635
 636 }();