Built motion from commit 2e74e5e.|0.0.138
[motion.git] / 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 bindUserByRole = function(users, agents, telephones, add, remove, selected) {
272     var select = document.createElement('select');
273     select.className = 'multi-select';
274     select.setAttribute('multiple', 'multiple');
275
276     if (selected) {
277       selected = selected[0].split('&');
278       selected = _.map(selected, function(elm) {
279         return elm.split('/')[1];
280       });
281     }
282
283     // START AGENTS
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;
290
291       if (selected && _.includes(selected, agents.rows[i].name)) {
292         option.setAttribute('selected', '');
293       }
294       optgroup.appendChild(option);
295     }
296     select.appendChild(optgroup);
297     // END AGENTS
298
299     // START USERS
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;
306
307       if (selected && _.includes(selected, users.rows[i].name)) {
308         option.setAttribute('selected', '');
309       }
310       optgroup.appendChild(option);
311     }
312     select.appendChild(optgroup);
313     // END USERS
314
315     // START TELEPHONES
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;
322
323       if (selected && _.includes(selected, telephones.rows[i].name)) {
324         option.setAttribute('selected', '');
325       }
326       optgroup.appendChild(option);
327     }
328     select.appendChild(optgroup);
329     // END TELEPHONES
330
331     var div = document.getElementById('multi-select-user-by-role');
332     div.innerHTML = '';
333     div.appendChild(select);
334
335     //
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) {
343         var that = this,
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';
348
349         that.qs1 = $selectableSearch
350           .quicksearch(selectableSearchString)
351           .on('keydown', function(e) {
352             if (e.which === 40) {
353               that.$selectableUl.focus();
354               return false;
355             }
356           });
357
358         that.qs2 = $selectionSearch
359           .quicksearch(selectionSearchString)
360           .on('keydown', function(e) {
361             if (e.which == 40) {
362               that.$selectionUl.focus();
363               return false;
364             }
365           });
366       },
367       afterSelect: function(values) {
368         this.qs1.cache();
369         this.qs2.cache();
370         add(values);
371         // this.qs1.cache();
372         // this.qs2.cache();
373         // teams().select(values);
374       },
375       afterDeselect: function(values) {
376         this.qs1.cache();
377         this.qs2.cache();
378         remove(values);
379         // this.qs1.cache();
380         // this.qs2.cache();
381         // teams().deselect(values);
382       }
383     });
384   }
385
386   var bindTeam = function(teamAgents, agents, teams) {
387     var select = document.createElement('select');
388     select.className = 'multi-select';
389     select.setAttribute('multiple', 'multiple');
390
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 + '>';
396
397       if (_.includes(teamAgents, agents[agent].id)) {
398         option.setAttribute('selected', '');
399       }
400
401       select.appendChild(option);
402     }
403
404     var div = document.getElementById('multi-select-team');
405     div.innerHTML = '';
406     div.appendChild(select);
407
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) {
414         var that = this,
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';
421
422         that.qs1 = $selectableSearch.quicksearch(
423             selectableSearchString)
424           .on('keydown', function(e) {
425             if (e.which === 40) {
426               that.$selectableUl.focus();
427               return false;
428             }
429           });
430
431         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
432           .on('keydown', function(e) {
433             if (e.which == 40) {
434               that.$selectionUl.focus();
435               return false;
436             }
437           });
438       },
439       afterSelect: function(values) {
440         this.qs1.cache();
441         this.qs2.cache();
442         teams().select(values);
443       },
444       afterDeselect: function(values) {
445         this.qs1.cache();
446         this.qs2.cache();
447         teams().deselect(values);
448       }
449     });
450   }
451
452   var bindQueue = function(teams, queues, agents) {
453     var select = document.createElement('select');
454     select.className = 'multi-select';
455     select.setAttribute('multiple', 'multiple');
456
457     for (var team in teams) {
458       var optgroup = document.createElement('optgroup');
459       optgroup.label = teams[team].name;
460
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 + '>';
465
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
470           });
471           option.text += user.hasOwnProperty('penalty') ? ' (' + user.penalty + ')' : '';
472         }
473
474         optgroup.appendChild(option);
475       }
476       select.appendChild(optgroup);
477     }
478
479     var div = document.getElementById('multi-select-team');
480     div.innerHTML = '';
481     div.appendChild(select);
482
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) {
490         var that = this,
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';
497
498         that.qs1 = $selectableSearch.quicksearch(
499             selectableSearchString)
500           .on('keydown', function(e) {
501             if (e.which === 40) {
502               that.$selectableUl.focus();
503               return false;
504             }
505           });
506
507         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
508           .on('keydown', function(e) {
509             if (e.which == 40) {
510               that.$selectionUl.focus();
511               return false;
512             }
513           });
514       },
515       afterSelect: function(values) {
516         this.qs1.cache();
517         this.qs2.cache();
518         agents().select(values);
519       },
520       afterDeselect: function(values) {
521         this.qs1.cache();
522         this.qs2.cache();
523         agents().deselect(values);
524       }
525     });
526   }
527
528   var bindPermit = function(dataQueues, dataPermits, channel, userId,
529     Resource) {
530     var select = document.createElement('select');
531     select.className = 'multi-select';
532     select.setAttribute('multiple', 'multiple');
533
534     _.forEach(dataQueues, function(queues) {
535       var optgroup = document.createElement('optgroup');
536       optgroup.label = 'ALL';
537
538       queues.forEach(function(queue) {
539         var option = document.createElement('option');
540         var _query = {};
541
542         if (queue.id) {
543           _query.id = queue.id;
544         } else {
545           _query.name = queue.name;
546         }
547
548         option.value = queue.id || queue.name;
549         option.text = queue.name;
550
551         if (_.find(dataPermits.queues, _query)) {
552           option.setAttribute('selected', '');
553         }
554
555         optgroup.appendChild(option);
556       });
557
558       select.appendChild(optgroup);
559     });
560
561     var div = document.getElementById('multi-select-permit');
562     div.innerHTML = '';
563     div.appendChild(select);
564
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) {
572         var that = this,
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';
579
580         that.qs1 = $selectableSearch.quicksearch(
581             selectableSearchString)
582           .on('keydown', function(e) {
583             if (e.which === 40) {
584               that.$selectableUl.focus();
585               return false;
586             }
587           });
588
589         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
590           .on('keydown', function(e) {
591             if (e.which == 40) {
592               that.$selectionUl.focus();
593               return false;
594             }
595           });
596       },
597       afterSelect: function(values) {
598         this.qs1.cache();
599         this.qs2.cache();
600         return Resource
601           .save({
602             id: userId,
603             controller: 'allowed',
604             controller2: channel,
605             controller3: 'queues'
606           }, values)
607           .$promise
608           .catch(function(err) {
609             console.error(err);
610           });
611       },
612       afterDeselect: function(values) {
613         this.qs1.cache();
614         this.qs2.cache();
615         return Resource
616           .delete({
617             id: userId,
618             controller: 'allowed',
619             controller2: channel,
620             controller3: 'queues',
621             ids: values
622           })
623           .$promise
624           .catch(function(err) {
625             console.error(err);
626           });
627       }
628     });
629   }
630
631   var bindAgent = function(dataQueues, dataAgent, channel, userId,
632     Resource) {
633     var select = document.createElement('select');
634     select.className = 'multi-select';
635     select.setAttribute('multiple', 'multiple');
636
637     _.forEach(dataQueues, function(queues) {
638       var optgroup = document.createElement('optgroup');
639       optgroup.label = 'ALL';
640
641       queues.forEach(function(queue) {
642         var option = document.createElement('option');
643         var _query = {};
644
645         if (queue.id) {
646           _query.id = queue.id;
647         } else {
648           _query.name = queue.name;
649         }
650
651         option.value = queue.id || queue.name;
652         option.text = queue.name;
653
654         if (_.find(dataAgent.queues, _query)) {
655           option.setAttribute('selected', '');
656         }
657
658         optgroup.appendChild(option);
659       });
660
661       select.appendChild(optgroup);
662     });
663
664     var div = document.getElementById('multi-select-queues');
665     div.innerHTML = '';
666     div.appendChild(select);
667
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) {
675         var that = this,
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';
682
683         that.qs1 = $selectableSearch.quicksearch(
684             selectableSearchString)
685           .on('keydown', function(e) {
686             if (e.which === 40) {
687               that.$selectableUl.focus();
688               return false;
689             }
690           });
691
692         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
693           .on('keydown', function(e) {
694             if (e.which == 40) {
695               that.$selectionUl.focus();
696               return false;
697             }
698           });
699       },
700       afterSelect: function(values) {
701         this.qs1.cache();
702         this.qs2.cache();
703         return Resource
704           .save({
705             id: userId,
706             controller: channel,
707             controller2: 'queues',
708           }, values)
709           .$promise
710           .catch(function(err) {
711             console.error(err);
712           });
713       },
714       afterDeselect: function(values) {
715         this.qs1.cache();
716         this.qs2.cache();
717         return Resource
718           .delete({
719             id: userId,
720             controller: channel,
721             controller2: 'queues',
722             ids: values
723           })
724           .$promise
725           .catch(function(err) {
726             console.error(err);
727           });
728       }
729     });
730   }
731
732   return {
733     //main function to initiate the module
734     init: function() {
735       handleSelect2();
736       handleSelect2Modal();
737       handleMultiSelect();
738       handleBootstrapSelect();
739     },
740     bindTeam: bindTeam,
741     bindMailQueue: bindQueue,
742     bindUserByRole: bindUserByRole,
743     bindChatQueue: bindQueue,
744     bindFaxQueue: bindQueue,
745     bindSmsQueue: bindQueue,
746     bindQueue: bindQueue,
747     bindPermit: bindPermit,
748     bindAgent: bindAgent
749   };
750
751 }();