Replace FCBKComplete with select2 for skill wheel #1941

chamilo · May 12, 2017 · 446cf9b · 446cf9b
1 parent d12a47f
commit 446cf9b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 17 deletions.
diff --git a/main/admin/skills_wheel.php b/main/admin/skills_wheel.php
@@ -16,6 +16,18 @@
     api_not_allowed();
 }
 
+$htmlHeadXtra[] = api_get_asset('select2/dist/js/select2.min.js');
+
+$iso = api_get_language_isocode(api_get_interface_language());
+$languageCondition = '';
+
+if (file_exists(api_get_path(SYS_PATH)."web/assets/select2/dist/js/i18n/$iso.js")) {
+    $htmlHeadXtra[]= api_get_asset("select2/dist/js/i18n/$iso.js");
+//    $languageCondition = "language: '$iso',";
+}
+
+$htmlHeadXtra[] = api_get_css(api_get_path(WEB_PATH).'web/assets/select2/dist/css/select2.min.css');
+
 //Adds the JS needed to use the jqgrid
 $htmlHeadXtra[] = api_get_js('d3/d3.v3.5.4.min.js');
 $htmlHeadXtra[] = api_get_js('d3/colorbrewer.js');

diff --git a/main/inc/ajax/skill.ajax.php b/main/inc/ajax/skill.ajax.php
@@ -37,13 +37,17 @@
         }
         break;
     case 'find_skills':
-        $skills = $skill->find('all', array('where' => array('name LIKE %?% '=>$_REQUEST['tag'])));
-        $return_skills = array();
+        $skills = $skill->find('all', array('where' => array('name LIKE %?% '=>$_REQUEST['q'])));
+        $return_skills = array([
+            'items' => []
+        ]);
         foreach ($skills as $skill) {
-            $skill['key'] = $skill['name'];
-            $skill['value'] = $skill['id'];
-            $return_skills[] = $skill;
+            $return_skills['items'][] = [
+                'id' => $skill['id'],
+                'text' => $skill['name']
+            ];
         }
+        header('Content-Type: application/json');
         echo json_encode($return_skills);
         break;
     case 'get_gradebooks':

diff --git a/main/template/default/skill/skill_wheel.tpl b/main/template/default/skill/skill_wheel.tpl
@@ -3,7 +3,7 @@
     /* Skill search input in the left menu */
     function check_skills_sidebar() {
         //Selecting only selected skills
-        $("#skill_id option:selected").each(function () {
+        $("#skill_id option").each(function () {
             var skill_id = $(this).val();
             if (skill_id != "") {
                 $.ajax({
@@ -369,18 +369,32 @@
             delete_gradebook_from_skill(skill_id, gradebook_id);
         });
 
-        $("#skill_id").fcbkcomplete({
-            json_url: "{{ url }}&a=find_skills",
+        $("#skill_id").select2({
+            ajax: {
+                url: '{{ url }}&a=find_skills',
+                processResults: function (data) {
+                    return {
+                        results: data.items
+                    };
+                }
+            },
             cache: false,
-            filter_case: false,
-            filter_hide: true,
-            complete_text: "{{ 'EnterTheSkillNameToSearch' | get_lang }}",
-            firstselected: true,
-            //onremove: "testme",
-            onselect: "check_skills_sidebar",
-            filter_selected: true,
-            newel: true
+            placeholder: '{{ 'EnterTheSkillNameToSearch'|get_lang }}'
+        }).on('change', function () {
+            check_skills_sidebar();
         });
+        {#$("#skill_id").fcbkcomplete({#}
+            {#json_url: "{{ url }}&a=find_skills",#}
+            {#cache: false,#}
+            {#filter_case: false,#}
+            {#filter_hide: true,#}
+            {#complete_text: "{{ 'EnterTheSkillNameToSearch' | get_lang }}",#}
+            {#firstselected: true,#}
+            {#//onremove: "testme",#}
+            {#onselect: "check_skills_sidebar",#}
+            {#filter_selected: true,#}
+            {#newel: true#}
+        {#});#}
 
         load_nodes(0, main_depth);
 
@@ -501,7 +515,7 @@
                         <h4 class="page-header">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</h4>
                         <div class="search-skill">
                             <form id="skill_search" class="form-search">
-                                <select id="skill_id" name="skill_id" /></select>
+                                <select id="skill_id" name="skill_id" style="width: 100%;" multiple></select>
                                 <table id="skill_holder" class="table table-condensed"></table>
                             </form>
                         </div>