1 var ComponentsDropdowns = function() {
3 var handleSelect2 = function() {
5 $('#select2_sample1').select2({
6 placeholder: "Select an option",
10 $('#select2_sample2').select2({
11 placeholder: "Select a State",
15 $("#select2_sample3").select2({
16 placeholder: "Select...",
18 minimumInputLength: 1,
19 query: function(query) {
24 for (i = 1; i < 5; i++) {
26 for (j = 0; j < i; j++) {
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'/> " + state.text;
43 $("#select2_sample4").select2({
44 placeholder: "Select a Country",
47 formatSelection: format,
48 escapeMarkup: function(m) {
53 $("#select2_sample5").select2({
54 tags: ["red", "green", "blue", "yellow", "pink"]
58 function movieFormatResult(movie) {
59 var markup = "<table class='movie-result'><tr>";
60 if (movie.posters !== undefined && movie.posters.thumbnail !==
62 markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
65 markup += "<td valign='top'><h5>" + movie.title + "</h5>";
66 if (movie.critics_consensus !== undefined) {
67 markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
69 } else if (movie.synopsis !== undefined) {
70 markup += "<div class='movie-synopsis'>" + movie.synopsis +
73 markup += "</td></tr></table>"
77 function movieFormatSelection(movie) {
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",
87 data: function(term, page) {
89 q: term, // search term
91 apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
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
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();
108 "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
111 apikey: "ju6z9mjyajq2djue3gbvv26t"
114 }).done(function(data) {
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) {
124 } // we do not want to escape markup since we are displaying html in results
128 var handleSelect2Modal = function() {
130 $('#select2_sample_modal_1').select2({
131 placeholder: "Select an option",
135 $('#select2_sample_modal_2').select2({
136 placeholder: "Select a State",
140 $("#select2_sample_modal_3").select2({
142 minimumInputLength: 1,
143 query: function(query) {
148 for (i = 1; i < 5; i++) {
150 for (j = 0; j < i; j++) {
158 query.callback(data);
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'/> " + state.text;
167 $("#select2_sample_modal_4").select2({
169 formatResult: format,
170 formatSelection: format,
171 escapeMarkup: function(m) {
176 $("#select2_sample_modal_5").select2({
177 tags: ["red", "green", "blue", "yellow", "pink"]
181 function movieFormatResult(movie) {
182 var markup = "<table class='movie-result'><tr>";
183 if (movie.posters !== undefined && movie.posters.thumbnail !==
185 markup += "<td valign='top'><img src='" + movie.posters.thumbnail +
188 markup += "<td valign='top'><h5>" + movie.title + "</h5>";
189 if (movie.critics_consensus !== undefined) {
190 markup += "<div class='movie-synopsis'>" + movie.critics_consensus +
192 } else if (movie.synopsis !== undefined) {
193 markup += "<div class='movie-synopsis'>" + movie.synopsis +
196 markup += "</td></tr></table>"
200 function movieFormatSelection(movie) {
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",
210 data: function(term, page) {
212 q: term, // search term
214 apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
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
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();
231 "http://api.rottentomatoes.com/api/public/v1.0/movies/" +
234 apikey: "ju6z9mjyajq2djue3gbvv26t"
237 }).done(function(data) {
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) {
247 } // we do not want to escape markup since we are displaying html in results
251 var handleBootstrapSelect = function() {
252 $('.bs-select').selectpicker({
258 var handleMultiSelect = function() {
259 $('#my_multi_select1').multiSelect();
260 $('#my_multi_select2').multiSelect({
261 selectableOptgroup: true,
262 afterSelect: function(values) {
265 afterDeselect: function(values) {
271 var bindUserByRole = function(users, agents, telephones, add, remove, selected) {
272 var select = document.createElement('select');
273 select.className = 'multi-select';
274 select.setAttribute('multiple', 'multiple');
277 selected = selected[0].split('&');
278 selected = _.map(selected, function(elm) {
279 return elm.split('/')[1];
284 var optgroup = document.createElement('optgroup');
285 optgroup.label = 'AGENTS';
286 for (var i = 0; i < agents.rows.length; i++) {
287 var option = document.createElement('option');
288 option.value = agents.rows[i].name;
289 option.text = agents.rows[i].fullname;
291 if (selected && _.includes(selected, agents.rows[i].name)) {
292 option.setAttribute('selected', '');
294 optgroup.appendChild(option);
296 select.appendChild(optgroup);
300 var optgroup = document.createElement('optgroup');
301 optgroup.label = 'USERS';
302 for (var i = 0; i < users.rows.length; i++) {
303 var option = document.createElement('option');
304 option.value = users.rows[i].name;
305 option.text = users.rows[i].fullname;
307 if (selected && _.includes(selected, users.rows[i].name)) {
308 option.setAttribute('selected', '');
310 optgroup.appendChild(option);
312 select.appendChild(optgroup);
316 var optgroup = document.createElement('optgroup');
317 optgroup.label = 'TELEPHONES';
318 for (var i = 0; i < telephones.rows.length; i++) {
319 var option = document.createElement('option');
320 option.value = telephones.rows[i].name;
321 option.text = telephones.rows[i].fullname;
323 if (selected && _.includes(selected, telephones.rows[i].name)) {
324 option.setAttribute('selected', '');
326 optgroup.appendChild(option);
328 select.appendChild(optgroup);
331 var div = document.getElementById('multi-select-user-by-role');
333 div.appendChild(select);
336 $(select).multiSelect({
337 selectableFooter: 'Agents available',
338 selectionFooter: 'Agents associated',
339 selectableOptgroup: true,
340 selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
341 selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
342 afterInit: function(ms) {
344 $selectableSearch = that.$selectableUl.prev(),
345 $selectionSearch = that.$selectionUl.prev(),
346 selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
347 selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
349 that.qs1 = $selectableSearch
350 .quicksearch(selectableSearchString)
351 .on('keydown', function(e) {
352 if (e.which === 40) {
353 that.$selectableUl.focus();
358 that.qs2 = $selectionSearch
359 .quicksearch(selectionSearchString)
360 .on('keydown', function(e) {
362 that.$selectionUl.focus();
367 afterSelect: function(values) {
373 // teams().select(values);
375 afterDeselect: function(values) {
381 // teams().deselect(values);
386 var bindTeam = function(teamAgents, agents, teams) {
387 var select = document.createElement('select');
388 select.className = 'multi-select';
389 select.setAttribute('multiple', 'multiple');
391 for (var agent in agents) {
392 var option = document.createElement('option');
393 option.value = agents[agent].id;
394 option.text = agents[agent].fullname + ' <' + agents[agent].name +
395 ',' + agents[agent].internal + '>';
397 if (_.includes(teamAgents, agents[agent].id)) {
398 option.setAttribute('selected', '');
401 select.appendChild(option);
404 var div = document.getElementById('multi-select-team');
406 div.appendChild(select);
408 $(select).multiSelect({
409 selectableFooter: 'Agents available',
410 selectionFooter: 'Agents associated',
411 selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
412 selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
413 afterInit: function(ms) {
415 $selectableSearch = that.$selectableUl.prev(),
416 $selectionSearch = that.$selectionUl.prev(),
417 selectableSearchString = '#' + that.$container.attr('id') +
418 ' .ms-elem-selectable:not(.ms-selected)',
419 selectionSearchString = '#' + that.$container.attr('id') +
420 ' .ms-elem-selection.ms-selected';
422 that.qs1 = $selectableSearch.quicksearch(
423 selectableSearchString)
424 .on('keydown', function(e) {
425 if (e.which === 40) {
426 that.$selectableUl.focus();
431 that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
432 .on('keydown', function(e) {
434 that.$selectionUl.focus();
439 afterSelect: function(values) {
442 teams().select(values);
444 afterDeselect: function(values) {
447 teams().deselect(values);
452 var bindQueue = function(teams, queues, agents) {
453 var select = document.createElement('select');
454 select.className = 'multi-select';
455 select.setAttribute('multiple', 'multiple');
457 for (var team in teams) {
458 var optgroup = document.createElement('optgroup');
459 optgroup.label = teams[team].name;
461 for (var user in teams[team].Users) {
462 var option = document.createElement('option');
463 option.value = teams[team].Users[user].id;
464 option.text = teams[team].Users[user].fullname + ' <' + teams[team].Users[user].name + ',' + teams[team].Users[user].internal + '>';
466 if (_.includes(_.map(queues, 'id'), teams[team].Users[user].id)) {
467 option.setAttribute('selected', '');
468 var user = _.find(queues, {
469 id: teams[team].Users[user].id
471 option.text += user.hasOwnProperty('penalty') ? ' (' + user.penalty + ')' : '';
474 optgroup.appendChild(option);
476 select.appendChild(optgroup);
479 var div = document.getElementById('multi-select-team');
481 div.appendChild(select);
483 $(select).multiSelect({
484 selectableFooter: 'Agents available',
485 selectionFooter: 'Agents associated',
486 selectableOptgroup: true,
487 selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
488 selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
489 afterInit: function(ms) {
491 $selectableSearch = that.$selectableUl.prev(),
492 $selectionSearch = that.$selectionUl.prev(),
493 selectableSearchString = '#' + that.$container.attr('id') +
494 ' .ms-elem-selectable:not(.ms-selected)',
495 selectionSearchString = '#' + that.$container.attr('id') +
496 ' .ms-elem-selection.ms-selected';
498 that.qs1 = $selectableSearch.quicksearch(
499 selectableSearchString)
500 .on('keydown', function(e) {
501 if (e.which === 40) {
502 that.$selectableUl.focus();
507 that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
508 .on('keydown', function(e) {
510 that.$selectionUl.focus();
515 afterSelect: function(values) {
518 agents().select(values);
520 afterDeselect: function(values) {
523 agents().deselect(values);
528 var bindPermit = function(dataQueues, dataPermits, channel, userId,
530 var select = document.createElement('select');
531 select.className = 'multi-select';
532 select.setAttribute('multiple', 'multiple');
534 _.forEach(dataQueues, function(queues) {
535 var optgroup = document.createElement('optgroup');
536 optgroup.label = 'ALL';
538 queues.forEach(function(queue) {
539 var option = document.createElement('option');
543 _query.id = queue.id;
545 _query.name = queue.name;
548 option.value = queue.id || queue.name;
549 option.text = queue.name;
551 if (_.find(dataPermits.queues, _query)) {
552 option.setAttribute('selected', '');
555 optgroup.appendChild(option);
558 select.appendChild(optgroup);
561 var div = document.getElementById('multi-select-permit');
563 div.appendChild(select);
565 $(select).multiSelect({
566 selectableFooter: 'Queues available',
567 selectionFooter: 'Queues associated',
568 selectableOptgroup: true,
569 selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
570 selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
571 afterInit: function(ms) {
573 $selectableSearch = that.$selectableUl.prev(),
574 $selectionSearch = that.$selectionUl.prev(),
575 selectableSearchString = '#' + that.$container.attr('id') +
576 ' .ms-elem-selectable:not(.ms-selected)',
577 selectionSearchString = '#' + that.$container.attr('id') +
578 ' .ms-elem-selection.ms-selected';
580 that.qs1 = $selectableSearch.quicksearch(
581 selectableSearchString)
582 .on('keydown', function(e) {
583 if (e.which === 40) {
584 that.$selectableUl.focus();
589 that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
590 .on('keydown', function(e) {
592 that.$selectionUl.focus();
597 afterSelect: function(values) {
603 controller: 'allowed',
604 controller2: channel,
605 controller3: 'queues'
608 .catch(function(err) {
612 afterDeselect: function(values) {
618 controller: 'allowed',
619 controller2: channel,
620 controller3: 'queues',
624 .catch(function(err) {
631 var bindAgent = function(dataQueues, dataAgent, channel, userId,
633 var select = document.createElement('select');
634 select.className = 'multi-select';
635 select.setAttribute('multiple', 'multiple');
637 _.forEach(dataQueues, function(queues) {
638 var optgroup = document.createElement('optgroup');
639 optgroup.label = 'ALL';
641 queues.forEach(function(queue) {
642 var option = document.createElement('option');
646 _query.id = queue.id;
648 _query.name = queue.name;
651 option.value = queue.id || queue.name;
652 option.text = queue.name;
654 if (_.find(dataAgent.queues, _query)) {
655 option.setAttribute('selected', '');
658 optgroup.appendChild(option);
661 select.appendChild(optgroup);
664 var div = document.getElementById('multi-select-queues');
666 div.appendChild(select);
668 $(select).multiSelect({
669 selectableFooter: 'Queues available',
670 selectionFooter: 'Queues associated',
671 selectableOptgroup: true,
672 selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
673 selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='Search...'>",
674 afterInit: function(ms) {
676 $selectableSearch = that.$selectableUl.prev(),
677 $selectionSearch = that.$selectionUl.prev(),
678 selectableSearchString = '#' + that.$container.attr('id') +
679 ' .ms-elem-selectable:not(.ms-selected)',
680 selectionSearchString = '#' + that.$container.attr('id') +
681 ' .ms-elem-selection.ms-selected';
683 that.qs1 = $selectableSearch.quicksearch(
684 selectableSearchString)
685 .on('keydown', function(e) {
686 if (e.which === 40) {
687 that.$selectableUl.focus();
692 that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
693 .on('keydown', function(e) {
695 that.$selectionUl.focus();
700 afterSelect: function(values) {
707 controller2: 'queues',
710 .catch(function(err) {
714 afterDeselect: function(values) {
721 controller2: 'queues',
725 .catch(function(err) {
733 //main function to initiate the module
736 handleSelect2Modal();
738 handleBootstrapSelect();
741 bindMailQueue: bindQueue,
742 bindUserByRole: bindUserByRole,
743 bindChatQueue: bindQueue,
744 bindFaxQueue: bindQueue,
745 bindSmsQueue: bindQueue,
746 bindQueue: bindQueue,
747 bindPermit: bindPermit,