Adding skill edition in the skill wheel see #1791

main/admin/skills_wheel.php

@@ -24,6 +24,10 @@ $htmlHeadXtra[] = api_get_js('d3/d3.v2.min.js');
 $htmlHeadXtra[] = api_get_js('d3/colorbrewer.js');
 $htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
 
+$htmlHeadXtra[] = '<script src="'.api_get_path(WEB_LIBRARY_PATH).'javascript/tag/jquery.fcbkcomplete.js" type="text/javascript" language="javascript"></script>';
+$htmlHeadXtra[] = '<link  href="'.api_get_path(WEB_LIBRARY_PATH).'javascript/tag/style.css" rel="stylesheet" type="text/css" />';
+
+
 //$htmlHeadXtra[] = api_get_css(api_get_path(WEB_LIBRARY_PATH).'javascript/d3/colorbrewer.css');
 
 $tpl = new Template(null, false, false);
@@ -39,9 +43,11 @@ if (isset($_GET['skill_id'])) {
 }
 
 $url = api_get_path(WEB_AJAX_PATH)."skill.ajax.php?a=get_skills_tree_json&load_user=$load_user&skill_id=$skill_id";
-
 $tpl->assign('wheel_url', $url);
 
+$url  = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
+$tpl->assign('url', $url);
+
 $content = $tpl->fetch('default/skill/skill_wheel.tpl');
 $tpl->assign('content', $content);
 $tpl->display_no_layout_template();

main/gradebook/gradebook_edit_cat.php

@@ -25,6 +25,7 @@ $htmlHeadXtra[] = '<link  href="'.api_get_path(WEB_LIBRARY_PATH).'javascript/tag
 
 $htmlHeadXtra[] = '<script type="text/javascript">
 $(document).ready(function () {
+
     $("#skills").fcbkcomplete({
         json_url: "'.api_get_path(WEB_AJAX_PATH).'skill.ajax.php?a=find_skills",
         cache: false,

main/inc/ajax/skill.ajax.php

@@ -27,7 +27,7 @@ switch ($action) {
     case 'find_skills':        
         $skills = $skill->find('all', array('where' => array('name LIKE %?% '=>$_REQUEST['tag'])));
         $return_skills = array();    
-        foreach($skills as $skill) {
+        foreach ($skills as $skill) {
             $skill['caption'] = $skill['name'];
             $skill['value'] =  $skill['id'];
             $return_skills[] = $skill;
@@ -36,6 +36,7 @@ switch ($action) {
         break;
     case 'get_gradebooks':        
         $gradebooks = $gradebook_list = $gradebook->get_all();
+        
         $gradebook_list = array();
         //Only course gradebook with certificate
         if (!empty($gradebooks)) {
@@ -53,6 +54,25 @@ switch ($action) {
         }
         echo json_encode($gradebook_list);
         break;
+    case 'find_gradebooks':        
+        $gradebooks = $gradebook->find('all', array('where' => array('name LIKE %?% ' => $_REQUEST['tag'])));
+        
+        $return = array();    
+        foreach ($gradebooks as $item) {
+            $item['caption'] = $item['name'];
+            $item['value'] =  $item['id'];
+            $return[] = $item;
+        }        
+        echo json_encode($return);        
+        break;          
+    case 'gradebook_exists':
+        $data = $gradebook->get($_REQUEST['gradebook_id']);        
+        if (!empty($data)) {
+            echo 1;
+        } else {
+            echo 0;
+        }
+        break;        
     case 'get_skills':
         $load_user_data = isset($_REQUEST['load_user_data']) ? $_REQUEST['load_user_data'] : null;
         //$parent_id = intval($_REQUEST['parent_id']);
@@ -65,6 +85,11 @@ switch ($action) {
         $skill_info = $skill->get_skill_info($id);                    
         echo json_encode($skill_info);
         break;     
+    case 'get_gradebook_info':
+        $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : null;
+        $info = $gradebook->get($id);                    
+        echo json_encode($info);
+        break;  
     case 'load_children':
         $id             = isset($_REQUEST['id']) ? $_REQUEST['id'] : null;
         $load_user_data = isset($_REQUEST['load_user_data']) ? $_REQUEST['load_user_data'] : null;
@@ -103,12 +128,15 @@ switch ($action) {
         }
         echo json_encode($return);        
         break;        
+    case 'delete_gradebook_from_skill':
     case 'remove_skill':
         if (!empty($_REQUEST['skill_id']) && !empty($_REQUEST['gradebook_id'])) {            
             $skill_item = $skill_gradebook->get_skill_info($_REQUEST['skill_id'], $_REQUEST['gradebook_id']);            
             if (!empty($skill_item)) {
                 $skill_gradebook->delete($skill_item['id']);
                 echo 1;
+            } else {
+                echo 0;    
             }
         } else {
             echo 0;

main/inc/lib/database.lib.php

@@ -1347,6 +1347,9 @@ class Database {
             //Cleaning attributes
             $count = 1;
             foreach ($attributes as $key=>$value) {
+                
+                if (!is_array($value))
+                    
                 $value = self::escape_string($value);
                 $update_sql .= "$key = '$value' ";
                 if ($count < count($attributes)) {

main/inc/lib/gradebook.lib.php

@@ -53,6 +53,7 @@ class Gradebook extends Model {
             if (empty($gradebook['name'])) {
                 $gradebook['name'] = $gradebook['course_code'];
             }
+            //$gradebook['name'] = $gradebook['course_code'] .' > '.$gradebook['name'];
         }
         return $gradebooks;        
     }

main/inc/lib/javascript/tag/style.css

@@ -33,7 +33,7 @@ ul.holder input[type="text"]:focus, ul.holder input-text input[type="password"]:
 
 
 
-form ul.holder { width: 500px; }
+/*form ul.holder { width: 500px; } */
 form ul { margin: 0 !important }
 ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
 #apple-list ul.holder li.bit-input { margin: 0; }

main/inc/lib/skill.lib.php

@@ -15,7 +15,7 @@ define ('SKILL_TYPE_BOTH',          'both');
 require_once api_get_path(LIBRARY_PATH).'model.lib.php';
 
 class SkillProfile extends Model {
-    var $columns = array('id', 'name','description');
+    var $columns = array('id', 'name', 'description');
     public function __construct() {
         $this->table = Database::get_main_table(TABLE_MAIN_SKILL_PROFILE);
         $this->table_rel_profile = Database::get_main_table(TABLE_MAIN_SKILL_REL_PROFILE);
@@ -276,7 +276,7 @@ class SkillRelUser extends Model {
 
 
 class Skill extends Model {
-    var $columns  = array('id', 'name','description', 'access_url_id');
+    var $columns  = array('id', 'name','description', 'access_url_id', 'short_code');
     var $required = array('name');
     /** Array of colours by depth, for the coffee wheel. Each depth has 4 col */
     var $colours = array(
@@ -473,19 +473,29 @@ class Skill extends Model {
         $skill_rel_gradebook = new SkillRelGradebook();
 
         //Saving name, description        
-
         $this->update($params);
+        
         $skill_id = $params['id'];
 
         if ($skill_id) {
             //Saving skill_rel_skill (parent_id, relation_type)
+            
+            if (!is_array($params['parent_id'])) {
+                $params['parent_id'] = array($params['parent_id']);
+            }
+            
+            foreach ($params['parent_id'] as $parent_id) {   
+                $relation_exists = $skill_rel_skill->relation_exists($skill_id, $parent_id);                
+                if (!$relation_exists) {
                     $attributes = array(
                                     'skill_id'      => $skill_id,
-                            'parent_id'     => $params['parent_id'],
+                                    'parent_id'     => $parent_id,
                                     'relation_type' => $params['relation_type'],
                                     //'level'         => $params['level'],
                     );
                     $skill_rel_skill->update_by_skill($attributes);
+                }
+            }
 
             $skill_rel_gradebook->update_gradebooks_by_skill($skill_id, $params['gradebook_id']);
             return $skill_id;

main/inc/lib/userportal.lib.php

@@ -289,7 +289,12 @@ class IndexManager {
         $html = '';
         if (api_get_setting('allow_skills_tool') == 'true') {
             $content = '<ul class="nav nav-list">';      
-            $content .= Display::tag('li', Display::url(get_lang('MySkills'), api_get_path(WEB_CODE_PATH).'social/skills_tree.php'));
+            
+            $content .= Display::tag('li', Display::url(get_lang('MySkills'), api_get_path(WEB_CODE_PATH).'social/skills_wheel.php&load_user='.$this->user_id));
+            
+            if (api_get_setting('allow_hr_skills_management') == 'true' || api_is_platform_admin()) {
+                $content .= Display::tag('li', Display::url(get_lang('ManageSkills'), api_get_path(WEB_CODE_PATH).'admin/skills_wheel.php'));
+            }
             $content .= '</ul>';        
             $html = self::show_right_block(get_lang("Skills"), $content, 'skill_block');
         }

main/template/default/skill/skill_wheel.tpl

@@ -1,14 +1,241 @@
 <script>
 /* For licensing terms, see /license.txt */
 
+var url = '{{ url }}';
+
+function get_skill_info(my_id) {
+    var skill = false;
+    $.ajax({
+        url: url+'&a=get_skill_info&id='+my_id,
+        async: false,        
+        success: function(json) {
+            skill = jQuery.parseJSON(json);
+            return skill;
+        }
+    });    
+    return skill;
+}
+
+function get_gradebook_info(id) {
+    var item = false;
+    $.ajax({
+        url: url+'&a=get_gradebook_info&id='+id,
+        async: false,        
+        success: function(json) {
+            item = jQuery.parseJSON(json);
+            return item;
+        }
+    });    
+    return item;
+}
+
+function add_skill(params) {
+    $.ajax({
+        async: false,
+        url: url+'&a=add&'+params,
+        success:function(my_id) {
+            //Close dialog
+            $("#dialog-form").dialog("close");                                      
+        }                           
+    });
+}
+    
+function check_skills_sidebar() {
+    //selecting only selected users
+    $("#skill_id option:selected").each(function() {
+        var skill_id = $(this).val();                
+        if (skill_id != "" ) {
+            $.ajax({
+                url: "{{ url }}&a=skill_exists", 
+                data: "skill_id="+skill_id,
+//                async: false, 
+                success: function(return_value) {                   
+                    if (return_value == 0 ) {
+                        alert("{{ 'SkillDoesNotExist'|get_lang }}");                                                
+                        //Deleting select option tag
+                        $("#skill_id option[value="+skill_id+"]").remove();                    
+                       
+                        //Deleting holder
+                        $("#skill_search .holder li").each(function () {
+                            if ($(this).attr("rel") == skill_id) {
+                                $(this).remove();
+                            }
+                        });                        
+                    } else {
+                        $("#skill_id option[value="+skill_id+"]").remove();
+                          
+                        //Deleting holder
+                        $("#skill_search .holder li").each(function () {
+                            if ($(this).attr("rel") == skill_id) {
+                                $(this).remove();
+                            }
+                        });
+                        
+                        skill_info = get_skill_info(skill_id);                       
+                        $("#skill_holder").append('<li><label><input id="checkbox_'+skill_id+'" class="skill_to_select" type="checkbox" value=""> '+skill_info.name+'</label></li>');                        
+                    }
+                },            
+            });                
+        }
+    });
+}
+
+   
+function check_skills_edit_form() {
+    //selecting only selected users
+    $("#parent_id option:selected").each(function() {
+        var skill_id = $(this).val();
+        
+        if (skill_id != "" ) {
+            $.ajax({ 
+                async: false,
+                url: "{{ url }}&a=skill_exists", 
+                data: "skill_id="+skill_id,
+                success: function(return_value) {                  
+                    if (return_value == 0 ) {
+                        alert("{{ 'SkillDoesNotExist'|get_lang }}");                                                
+                        //Deleting select option tag
+                        $("#parent_id").find('option').remove();
+                        //Deleting holder
+                        $("#skill_row .holder li").each(function () {
+                            if ($(this).attr("rel") == skill_id) {
+                                $(this).remove();
+                            }
+                        });                        
+                    } else {
+                        $("#parent_id").empty();                        
+                        $("#skill_edit_holder").find('li').remove();
+                        
+                        //Deleting holder
+                        $("#skill_row .holder li").each(function () {
+                            if ($(this).attr("rel") == skill_id) {
+                                $(this).remove();
+                            }
+                        });
+                        
+                        skill = get_skill_info(skill_id);                        
+                                                                         
+                        $("#skill_edit_holder").append('<li class="bit-box" id="skill_option_'+skill_id+'"> '+skill.name+'</li>');
+                        $("#parent_id").append('<option class="selected" selected="selected" value="'+skill_id+'"></option>');
+                    }
+                },            
+            });                
+        }
+    });
+}
+
+function check_gradebook() {
+    //selecting only selected users
+    $("#gradebook_id option:selected").each(function() {
+        var gradebook_id = $(this).val();
+        
+        if (gradebook_id != "" ) {
+            $.ajax({ 
+                url: "{{ url }}&a=gradebook_exists", 
+                data: "gradebook_id="+gradebook_id,
+                success: function(return_value) {                    
+                    if (return_value == 0 ) {
+                        alert("{{ 'GradebookDoesNotExist'|get_lang }}");                                                
+                        //Deleting select option tag
+                        $("#gradebook_id option[value="+gradebook_id+"]").remove();                        
+                        //Deleting holder
+                        $("#gradebook_row .holder li").each(function () {
+                            if ($(this).attr("rel") == gradebook_id) {
+                                $(this).remove();
+                            }
+                        });                        
+                    } else {                        
+                        //Deleting holder                        
+                        $("#gradebook_row .holder li").each(function () {
+                            if ($(this).attr("rel") == gradebook_id) {
+                                $(this).remove();
+                            }
+                        });
+                        
+                        if ($('#gradebook_item_'+gradebook_id).length == 0) {
+                            gradebook = get_gradebook_info(gradebook_id);                            
+                            if (gradebook) {
+                                $("#gradebook_holder").append('<li id="gradebook_item_'+gradebook_id+'" class="bit-box"> '+gradebook.name+' <a rel="'+gradebook_id+'" class="closebutton" href="#"></a></li>');
+                            }                            
+                        }
+                    }
+                },            
+            });                
+        }
+    });
+}
+
+function delete_gradebook_from_skill(skill_id, gradebook_id) {
+    $.ajax({
+        url: url+'&a=delete_gradebook_from_skill&skill_id='+skill_id+'&gradebook_id='+gradebook_id,
+        async: false,        
+        success: function(result) {
+            //if (result == 1) {
+                $('#gradebook_item_'+gradebook_id).remove();
+                 $("#gradebook_id option").each(function () {
+                    if ($(this).attr("value") == gradebook_id) {
+                        $(this).remove();
+                    }
+                });
+            //}
+        }
+    });
+}
+
+
 $(document).ready(function() {
+    $("#gradebook_holder").on("click", "a.closebutton", function() {
+        gradebook_id = $(this).attr('rel');
+        skill_id = $('#id').attr('value');         
+        delete_gradebook_from_skill(skill_id, gradebook_id);        
+    });
+    
+    $("#skill_id").fcbkcomplete({
+        json_url: "{{ url }}&a=find_skills",
+        cache: false,
+        filter_case: false,
+        filter_hide: true,
+        complete_text:"{{ 'StartToType' | get_lang }}",
+        firstselected: true,
+        //onremove: "testme",
+        onselect:"check_skills_sidebar",
+        filter_selected: true,
+        newel: true
+    });    
+    
+    $("#parent_id").fcbkcomplete({
+        json_url: "{{ url }}&a=find_skills",
+        cache: false,
+        filter_case: false,
+        filter_hide: true,
+        complete_text:"{{ 'StartToType' | get_lang }}",
+        firstselected: true,
+        //onremove: "testme",
+        onselect:"check_skills_edit_form",
+        filter_selected: true,
+        newel: true
+    });
+    
+    
+    $("#gradebook_id").fcbkcomplete({
+        json_url: "{{ url }}&a=find_gradebooks",
+        cache: false,
+        filter_case: false,
+        filter_hide: true,
+        complete_text:"{{ 'StartToType' | get_lang }}",
+        firstselected: true,
+        //onremove: "testme",
+        onselect:"check_gradebook",
+        filter_selected: true,
+        newel: true
+    });
 
     //Open dialog
     $("#dialog-form").dialog({
         autoOpen: false,
         modal   : true, 
-        width   : 550, 
+        width   : 600, 
-        height  : 480
+        height  : 550
     });
         
     /* ...adding "+1" to "y" function's params is really funny */
@@ -70,7 +297,7 @@ $(document).ready(function() {
         /* Locate the #div id element */
         /*$("#vis").remove();
         $("body").append('<div id="vis"></div>');*/
-        var div = d3.select("#vis");
+        var div = d3.select("#skill_wheel");
 
         /* Remove the image (make way for the dynamic stuff */
         div.select("img").remove();
@@ -133,9 +360,7 @@ $(document).ready(function() {
             /* Setting icons */
             var icon = vis.selectAll("icon").data(nodes);                  
             
-            
             /* Path settings */
-
             path.enter().append("path")
             .attr("id", function(d, i) {            
                 return "path-" + i;
@@ -156,8 +381,12 @@ $(document).ready(function() {
             .on("mouseout", function(d, i) {
                 $("#icon-" + i).hide();
             })
+            .on("mousedown", function(d, i) {
+                //Handles 2 mouse clicks
+                handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding);  
+            })            
             .on("click", function(d){
-                click_partition(d, path, text, icon, arc, x, y, r, padding);
+                //click_partition(d, path, text, icon, arc, x, y, r, padding);
             });
 
             /* End setting skills */  
@@ -187,8 +416,12 @@ $(document).ready(function() {
             .on("mouseout", function(d, i) {
                 $("#icon-" + i).hide();                
             })  
+            .on("mousedown", function(d, i) {
+                //Handles 2 mouse clicks
+                handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding);  
+            })            
             .on("click", function(d){
-                click_partition(d, path, text, icon, arc, x, y, r, padding);
+                //click_partition(d, path, text, icon, arc, x, y, r, padding);
             });
 
             /** Managing text - always maximum two words */
@@ -205,8 +438,6 @@ $(document).ready(function() {
                 return d.depth ? d.name.split(" ")[1] || "" : "";
             });
                              
-            
-                 
             /* Icon settings */
                 
             var icon_click = icon.enter().append("text")
@@ -222,7 +453,7 @@ $(document).ready(function() {
                 /** Get the text details and define the rotation and general position */                
                 angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
                 rotate = angle;
-                return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
+                return "rotate(" + rotate + ")translate(" + (y(d.y) + padding +80) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
             })
             .on("click", function(d){
                 open_popup(d);
@@ -240,12 +471,64 @@ $(document).ready(function() {
         });
     }
     
+    function handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding) {                
+        switch (d3.event.which) {
+            case 1:
+                //alert('Left mouse button pressed');
+                click_partition(d, path, text, icon, arc, x, y, r, padding);
+                break;
+            case 2:
+                //alert('Middle mouse button pressed');
+                break;                        
+            case 3:                        
+                open_popup(d);                        
+                //alert('Right mouse button pressed');
+                break;
+            default:
+                //alert('You have a strange mouse');
+        }
+    }
+    
     function open_popup(d) {
         $( "#name" ).attr('value', d.name);
+                
+        //Cleaning selected        
+        $("#gradebook_id").find('option').remove();        
+        $("#parent_id").find('option').remove();
+        
+        $("#gradebook_holder").find('li').remove();
+        $("#skill_edit_holder").find('li').remove();
+                
+        var skill = get_skill_info(d.id);       
+        
+        if (skill) {
+            var parent_info = get_skill_info(skill.extra.parent_id);
+            
+            $("#name").attr('value', skill.name);
+            $("#id").attr('value',   skill.id);                       
+            $("#description").attr('value', skill.description);                
+            
+            //Filling parent_id                        
+            $("#parent_id").append('<option class="selected" value="'+skill.extra.parent_id+'" selected="selected" >');            
+            
+            $("#skill_edit_holder").append('<li class="bit-box">'+parent_info.name+'</li>');
+            
+            //Filling the gradebook_id
+            jQuery.each(skill.gradebooks, function(index, data) {                    
+                $("#gradebook_id").append('<option class="selected" value="'+data.id+'" selected="selected" >');
+                $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');    
+            });
+        }        
+        
         //description = $( "#description" );        
         $("#dialog-form").dialog({
             buttons: {
-                 "{{ "DoSomething"|get_lang }}" : function() {
+                 "{{ "Edit"|get_lang }}" : function() {
+                     var params = $("#add_item").find(':input').serialize();
+                     add_skill(params);
+                     console.log(params);
+                  },                  
+                  "{{ "Delete"|get_lang }}" : function() {
                   },
             },
             close: function() {     
@@ -295,7 +578,6 @@ $(document).ready(function() {
     }
         
     /*      
-            
     gray tones for all skills that have no particular property ("Basic skills wheel" view)
     yellow tones for skills that are provided by courses in Chamilo ("Teachable skills" view)
     bright blue tones for personal skills already acquired by the student currently looking at the weel ("My skills" view)
@@ -385,7 +667,6 @@ $(document).ready(function() {
         
         /* Updating icon position */        
         
-        
         icon.transition().duration(duration)
         .attrTween("text-anchor", function(d) {
             return function() {
@@ -463,25 +744,53 @@ $(document).ready(function() {
     }
 
 });
-
 </script>
-<div id="menu" class="well" style="top:20px; left:20px; width:380px; z-index: 9000; opacity: 0.9;">
+
+
+<div class="container-fluid">
+    <div class="row-fluid">
+        <div class="span2">
+            <div class="well">
                 <h3>{{ 'Skills'|get_lang }}</h3>
-    <div class="btn-group">
+                
-        <a style="z-index: 1000" class="btn" id="add_item_link" href="#">{{ 'AddSkill'|get_lang }}</a>
+                <form id="skill_search" class="form-search">
-        <a style="z-index: 1000" class="btn" id="return_to_root" href="#">{{ 'Root'|get_lang }}</a>
+                    <select id="skill_id" name="skill_id" />
-        <a style="z-index: 1000" class="btn" id="return_to_admin" href="{{ _p.web_main }}admin">{{ 'BackToAdmin'|get_lang }}</a>        
+                    </select>
+                    <br />
+                    <ul id="skill_holder" class="holder holder_simple">
+                    </ul>
+                </form>
+                
+                <h3>{{ 'ProfileSearch'|get_lang }}</h3>
+                
+                {{ 'WhatSkillsAreYouLookinFor'|get_lang }}
+                
+                {{ 'RightClickOnSkillsInTheWheelToAddThemToThisProfileSearchBox'|get_lang }}
+                
+                
+                <form class="form-search">
+                    <input class="btn" type="button" value="{{ "SearchProfileMatches"|get_lang }}">
+                </form>                
+                
+                <h3>{{ 'MySkills'|get_lang }}</h3>
+                <h3>{{ 'GetNewSkills'|get_lang }}</h3>
+                <h3>{{ 'SkillInfo'|get_lang }}</h3>
+                
+                
+            </div>
+                
         </div>
-</div>
             
-<div id="vis">
+        <div class="span10">
+            <div id="skill_wheel">
                 <img src="">
+            </div>
+        </div>
 </div>
 
-
 <div id="dialog-form" style="display:none; z-index:9001;">    
     <p class="validateTips"></p>
-    <form class="form-horizontal" id="add_item" name="form">
+    <form id="add_item" class="form-horizontal"  name="form">
         <fieldset>
             <input type="hidden" name="id" id="id"/>
             <div class="control-group">            
@@ -490,6 +799,39 @@ $(document).ready(function() {
                     <input type="text" name="name" id="name" size="40" />             
                 </div>
             </div>
+            
+            <div class="control-group">            
+                <label class="control-label">{{ 'ShortCode' | get_lang }}</label>            
+                <div class="controls">
+                    <input type="text" name="short_code" id="short_code" size="40" />             
+                </div>
+            </div>
+
+             <div id="skill_row" class="control-group">            
+                <label class="control-label" for="name">{{'Parent'|get_lang}}</label>            
+                <div class="controls">
+                    <select id="parent_id" name="parent_id" />
+                    </select>
+                    <ul id="skill_edit_holder" class="holder holder_simple">
+                    </ul>
+                </div>
+            </div>
+            
+            <div id="gradebook_row" class="control-group">            
+                <label class="control-label" for="name">{{'Gradebook'|get_lang}}</label>            
+                <div class="controls">
+                    <select id="gradebook_id" name="gradebook_id" multiple="multiple"/>
+                    </select>             
+                        
+                    <ul id="gradebook_holder" class="holder holder_simple">
+                    </ul>
+                        
+                    <span class="help-block">
+                    {{ 'WithCertificate'|get_lang }}
+                    </span>           
+                </div>
+            </div>
+            
             <div class="control-group">            
                 <label class="control-label" for="name">{{ 'Description'|get_lang }}</label>            
                 <div class="controls">
@@ -498,5 +840,4 @@ $(document).ready(function() {
             </div>  
         </fieldset>
     </form>     
-     
 </div>