Browse Source

Merge pull request #658 from AngelFQC/BT9583-b

Use FormValidator in skill wheel's forms - refs BT#9583
Angel Fernando Quiroz Campos 10 years ago
parent
commit
01c17272c6

+ 24 - 0
main/admin/skills_wheel.php

@@ -44,6 +44,30 @@ $url  = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
 $tpl->assign('url', $url);
 $tpl->assign('isAdministration', true);
 
+$dialogForm = new FormValidator('form', 'post', null, null, ['id' => 'add_item']);
+$dialogForm->addHidden('id', null);
+$dialogForm->addText('name', get_lang('Name'), true, ['id' => 'name']);
+$dialogForm->addText('short_code', get_lang('ShortCode'), false, ['id' => 'short_code']);
+$dialogForm->addSelect('parent_id', get_lang('Parent'), [], ['id' => 'parent_id']);
+$dialogForm->addHtml('<ul id="skill_edit_holder" class="holder holder_simple"></ul>');
+$dialogForm->addHtml('<div id="gradebook_row">');
+$dialogForm->addSelect(
+    'gradebook_id',
+    [get_lang('Gradebook'), get_lang('WithCertificate')],
+    [],
+    ['id' => 'gradebook_id']
+);
+$dialogForm->addHtml('<ul id="gradebook_holder" class="holder holder_simple"></ul>');
+$dialogForm->addHtml('</div>');
+$dialogForm->addTextarea('description', get_lang('Description'), ['id' => 'description', 'rows' => 7]);
+$tpl->assign('dialogForm', $dialogForm->returnForm());
+
+$saveProfileForm = new FormValidator('form', 'post', null, null, ['id' => 'dialog-form-profile']);
+$saveProfileForm->addHidden('profile_id', null);
+$saveProfileForm->addText('name', get_lang('Name'), true, ['id' => 'name_profile']);
+$saveProfileForm->addTextarea('description', get_lang('Description'), ['id' => 'description_profile', 'rows' => 6]);
+$tpl->assign('saveProfileForm', $saveProfileForm->returnForm());
+
 $content = $tpl->fetch('default/skill/skill_wheel.tpl');
 $tpl->assign('content', $content);
 $tpl->display_no_layout_template();

+ 13 - 0
main/social/skills_wheel.php

@@ -54,6 +54,19 @@ $tpl->assign('ranking', $ranking);
 $tpl->assign('countSkill', $countSkill);
 $tpl->assign('mySkills', $mySkills);
 
+$dialogForm = new FormValidator('form', 'post', null, null, ['id' => 'add_item']);
+$dialogForm->addHidden('id', null);
+$dialogForm->addText('name', get_lang('Name'), false, ['id' => 'name']);
+$dialogForm->addText('short_code', get_lang('ShortCode'), false, ['id' => 'short_code']);
+$dialogForm->addLabel(get_lang('ShortCode'), '<ul id="skill_edit_holder" class="holder holder_simple"></ul>');
+$dialogForm->addHtml('<div id="gradebook_row">');
+$dialogForm->addLabel([get_lang('Gradebook'), get_lang('WithCertificate')], '<ul id="gradebook_holder" class="holder holder_simple"></ul>');
+$dialogForm->addHtml('<ul id="gradebook_holder" class="holder holder_simple"></ul>');
+$dialogForm->addHtml('</div>');
+$dialogForm->addTextarea('description', get_lang('Description'), ['id' => 'description', 'rows' => 7]);
+
+$tpl->assign('dialogForm', $dialogForm->returnForm());
+
 $content = $tpl->fetch('default/skill/skill_wheel_student.tpl');
 $tpl->assign('content', $content);
 $tpl->display_no_layout_template();

+ 67 - 49
main/template/default/skill/skill_wheel.js.tpl

@@ -341,14 +341,14 @@ function open_popup(skill_id, parent_id) {
         var parent_info = get_skill_info(skill.extra.parent_id);
 
         if ("{{ isAdministration }}") {
-            $("#id").attr('value', skill.id);
-            $("#name").attr('value', skill.name);
-            $("#short_code").attr('value', skill.short_code);
-            $("#description").attr('value', skill.description);
+            $('input[name="id"]').val(skill.id);
+            $("#name").val(skill.name);
+            $("#short_code").val(skill.short_code);
+            $("#description").val(skill.description);
         } else {
-            $("#name").text(skill.name);
-            $("#short_code").text(skill.short_code);
-            $("#description").text(skill.description);
+            $("#name").prop('readonly', true).val(skill.name);
+            $("#short_code").prop('readonly', true).val(skill.short_code);
+            $("#description").prop('readonly', true).val(skill.description);
         }
 
         // Filling parent_id
@@ -364,20 +364,30 @@ function open_popup(skill_id, parent_id) {
 
         if ("{{ isAdministration }}") {
             $("#dialog-form").dialog({
-                buttons: {
-                    "{{ "Save"|get_lang }}": function () {
-                        var params = $("#add_item").find(':input').serialize();
-                        add_skill(params);
+                buttons: [
+                    {
+                        text: "{{ "Save"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function() {
+                            var params = $("#add_item").find(':input').serialize();
+                            add_skill(params);
+                        }
                     },
-                    /*"{{ "Delete"|get_lang }}" : function() {
-                     },*/
-                    "{{ "CreateChildSkill"|get_lang }}": function () {
-                        open_popup(0, skill.id);
+                    {
+                        text: "{{ "CreateChildSkill"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function() {
+                            open_popup(0, skill.id);
+                        }
                     },
-                    "{{ "AddSkillToProfileSearch"|get_lang }}": function () {
-                        add_skill_in_profile_list(skill.id, skill.name);
+                    {
+                        text: "{{ "AddSkillToProfileSearch"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function () {
+                            add_skill_in_profile_list(skill.id, skill.name);
+                        }
                     }
-                }
+                ],
             });
         }
 
@@ -396,7 +406,7 @@ function open_popup(skill_id, parent_id) {
     }
 
     if (parent) {
-        $("#id").attr('value','');
+        $('input[name="id"]').attr('value','');
         $("#name").attr('value', '');
         $("#short_code").attr('value', '');
         $("#description").attr('value', '');
@@ -413,12 +423,16 @@ function open_popup(skill_id, parent_id) {
         });
 
         $("#dialog-form").dialog({
-            buttons: {
-                 "{{ "Save"|get_lang }}" : function() {
-                     var params = $("#add_item").find(':input').serialize();
-                     add_skill(params);
-                  }
-            },
+            buttons: [
+                {
+                    text: "{{ "Save"|get_lang }}",
+                    class: 'btn btn-primary',
+                    click: function() {
+                        var params = $("#add_item").find(':input').serialize();
+                        add_skill(params);
+                    }
+                }
+            ],
             close: function() {
                 $("#name").attr('value', '');
                 $("#description").attr('value', '');
@@ -651,38 +665,42 @@ function load_nodes(load_skill_id, main_depth, extra_parent_id) {
         });
 
         /** Managing text - maximum two words */
-        var insert_two_words = false;
+        textEnter.append("tspan")
+        .attr("x", 0)
+        .text(function(d) {
+            if (d.depth && d.name) {
+                var nameParts = d.name.split(' ');
+
+                if (nameParts[0].length > max_size_text_length) {
+                    return nameParts[0].substring(0, max_size_text_length - 3)  + '...';
+                }
+
+                return nameParts[0];
+            }
+
+            return d.depth ? d.name : '';
+        });
 
         textEnter.append("tspan")
         .attr("x", 0)
+        .attr("dy", "1em")
         .text(function(d) {
-            if (d.depth && d.name.length > max_size_text_length) {
-                if (d.depth) {
-                    first_part = d.name.split(" ")[0];
-                    second_part = d.name.split(" ")[1];
-                    if (first_part.length >= max_size_text_length) {
-                        insert_two_words = false;
-                        return first_part.substring(0, max_size_text_length -3)  + ' ... ';
-                    } else {
-                        return first_part;
+            if (d.depth && d.name) {
+                var nameParts = d.name.split(' ');
+
+                if (nameParts.length >= 2) {
+                    if (nameParts[1].length > max_size_text_length) {
+                        return nameParts[1].substring(0, max_size_text_length - 3)  + '...';
                     }
-                } else {
-                    return "";
+
+                    return nameParts[1];
                 }
-            } else {
-                insert_two_words = false;
-                return d.depth ? d.name : "";
+
+                return '';
             }
-        });
 
-        if (insert_two_words) {
-            textEnter.append("tspan")
-            .attr("x", 0)
-            .attr("dy", "1em")
-            .text(function(d) {
-                return d.depth && d.name.length > max_size_text_length ? d.name.split(" ")[1] || "" : "";
-            });
-        }
+            return d.depth ? d.name : '';
+        });
 
         /* Icon settings */
         /*

+ 39 - 100
main/template/default/skill/skill_wheel.tpl

@@ -280,7 +280,7 @@ $(document).ready(function() {
     /* Click in profile */
     $("#saved_profiles").on("click", "li.load_profile", function() {
         profile_id = $(this).attr('rel');
-        $('#profile_id').attr('value',profile_id);
+        $('input[name="profile_id"]').val(profile_id);
         $.ajax({
            url: '{{ url }}&a=get_skills_by_profile&profile_id='+profile_id,
            success:function(json) {
@@ -317,7 +317,7 @@ $(document).ready(function() {
     /* Close button in gradebook select */
     $("#gradebook_holder").on("click", "a.closebutton", function() {
         gradebook_id = $(this).attr('rel');
-        skill_id = $('#id').attr('value');
+        skill_id = $('input[name="id"]').attr('value');
         delete_gradebook_from_skill(skill_id, gradebook_id);
     });
 
@@ -364,7 +364,7 @@ $(document).ready(function() {
     $("#dialog-form").dialog({
         autoOpen: false,
         modal   : true,
-        width   : 600,
+        width   : 900,
         height  : 630
     });
 
@@ -372,14 +372,14 @@ $(document).ready(function() {
     $("#dialog-form-profile").dialog({
         autoOpen: false,
         modal   : true,
-        width   : 500,
+        width   : 850,
         height  : 400
     });
 
     load_nodes(0, main_depth);
 
     function open_save_profile_popup() {
-        var profileId = $("#profile_id").val();
+        var profileId = $('input[name="profile_id"]').val();
         $.ajax({
             url: '{{ url }}&a=get_profile&profile_id='+profileId,
             success:function(data) {
@@ -392,36 +392,40 @@ $(document).ready(function() {
         });
 
         $("#dialog-form-profile").dialog({
-            buttons: {
-                "{{ "Save"|get_lang }}" : function() {
-                    var name = $("#name_profile").val();
-                    var description = $("#description_profile").val();
-                    var skill_list = return_skill_list_from_profile_search();
-                    skill_list = { 'skill_id' : skill_list };
-                    skill_params = $.param(skill_list);
-
-                    $.ajax({
-                        url: '{{ url }}&a=save_profile&name='+name+'&description='+description+'&'+skill_params+'&profile='+profileId,
-                        success:function(data) {
-                            if (data == 1 ) {
-                                update_my_saved_profiles();
-                                alert("{{ "Saved"|get_lang }}");
-                            } else {
-                                alert("{{ "Error"|get_lang }}");
+            buttons: [
+                {
+                    text: "{{ "Save"|get_lang }}",
+                    class: 'btn btn-primary',
+                    click: function() {
+                        var name = $("#name_profile").val();
+                        var description = $("#description_profile").val();
+                        var skill_list = return_skill_list_from_profile_search();
+                        skill_list = { 'skill_id' : skill_list };
+                        skill_params = $.param(skill_list);
+
+                        $.ajax({
+                            url: '{{ url }}&a=save_profile&name='+name+'&description='+description+'&'+skill_params+'&profile='+profileId,
+                            success:function(data) {
+                                if (data == 1 ) {
+                                    update_my_saved_profiles();
+                                    alert("{{ "Saved"|get_lang }}");
+                                } else {
+                                    alert("{{ "Error"|get_lang }}");
+                                }
+
+                                $("#dialog-form-profile").dialog("close");
+                                $("#name_profile").attr('value', '');
+                                $("#description_profile").attr('value', '');
+                                $('input[name="profile_id"]').val(0);
                             }
-
-                            $("#dialog-form-profile").dialog("close");
-                            $("#name_profile").attr('value', '');
-                            $("#description_profile").attr('value', '');
-                            $("#profile_id").attr('value', '0');
-                         }
-                     });
-                  }
-            },
+                        });
+                    }
+                }
+            ],
             close: function() {
-                $("#name_profile").attr('value', '');
-                $("#description_profile").attr('value', '');
-                $("#profile_id").attr('value', '0');
+                $("#name_profile").val('');
+                $("#description_profile").val('');
+                $('input[name="profile_id"]').val(0);
             }
         });
         $("#dialog-form-profile").dialog("open");
@@ -581,76 +585,11 @@ $(document).ready(function() {
 
 <div id="dialog-form" style="">
     <p class="validateTips"></p>
-    <form id="add_item" class="form-horizontal"  name="form">
-        <fieldset>
-            <input type="hidden" name="id" id="id"/>
-            <div class="form-group">
-                <label class="col-sm-2 control-label" for="name">{{ 'Name' | get_lang }}</label>
-                <div class="col-sm-8">
-                    <input type="text" name="name" id="name" />
-                </div>
-            </div>
-
-            <div class="form-group">
-                <label class="col-sm-2 control-label">{{ 'ShortCode' | get_lang }}</label>
-                <div class="col-sm-8">
-                    <input type="text" name="short_code" id="short_code" />
-                </div>
-            </div>
-
-             <div id="skill_row" class="form-group">
-                <label class="col-sm-2 control-label" for="name">{{'Parent'|get_lang}}</label>
-                <div class="col-sm-8">
-                    <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="form-group">
-                <label class="col-sm-2 control-label" for="name">{{'Gradebook'|get_lang}}</label>
-                <div class="col-sm-8">
-                    <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="form-group">
-                <label class="col-sm-2 control-label" for="name">{{ 'Description'|get_lang }}</label>
-                <div class="col-sm-8">
-                    <textarea name="description" id="description" rows="7"></textarea>
-                </div>
-            </div>
-        </fieldset>
-    </form>
+    {{ dialogForm }}
 </div>
 
 <div id="dialog-form-profile" style="display:none;">
-    <form id="save_profile_form" class="form-horizontal" name="form">
-        <input type="hidden" id="profile_id" name="profile_id"/>
-        <fieldset>
-            <div class="form-group">
-                <label class="col-sm-2 control-label" for="name">{{"Name"|get_lang}}</label>
-                <div class="col-sm-8">
-                    <input type="text" name="name" id="name_profile" size="40" />
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-sm-2 control-label" for="name">{{"Description"|get_lang}}</label>
-                <div class="col-sm-8">
-                    <textarea name="description" id="description_profile" rows="7"></textarea>
-                </div>
-            </div>
-        </fieldset>
-    </form>
+    {{ saveProfileForm }}
 </div>
 </div>
 </div>

+ 28 - 64
main/template/default/skill/skill_wheel_student.tpl

@@ -133,7 +133,7 @@ $(document).ready(function() {
     /* Close button in gradebook select */
     $("#gradebook_holder").on("click", "a.closebutton", function() {
         gradebook_id = $(this).attr('rel');
-        skill_id = $('#id').attr('value');
+        skill_id = $('input[name="id"]').attr('value');
         delete_gradebook_from_skill(skill_id, gradebook_id);
     });
 
@@ -180,7 +180,7 @@ $(document).ready(function() {
     $("#dialog-form").dialog({
         autoOpen: false,
         modal   : true,
-        width   : 600,
+        width   : 900,
         height  : 550
     });
 
@@ -215,7 +215,7 @@ $(document).ready(function() {
         if (skill) {
             var parent_info = get_skill_info(skill.extra.parent_id);
 
-            $("#id").attr('value',   skill.id);
+            $('input[name="id"]').attr('value',   skill.id);
             $("#name").attr('value', skill.name);
             $("#short_code").attr('value', skill.short_code);
             $("#description").attr('value', skill.description);
@@ -232,21 +232,30 @@ $(document).ready(function() {
             });
 
             $("#dialog-form").dialog({
-                buttons: {
-                     "{{ "Edit"|get_lang }}" : function() {
-                         var params = $("#add_item").find(':input').serialize();
-                         add_skill(params);
-                      },
-                      /*"{{ "Delete"|get_lang }}" : function() {
-                      },*/
-                      "{{ "CreateChildSkill"|get_lang }}" : function() {
-                          open_popup(0, skill.id);
-
-                      },
-                      "{{ "AddSkillToProfileSearch"|get_lang }}" : function() {
-                          add_skill_in_profile_list(skill.id, skill.name);
-                      }
-                },
+                buttons: [
+                    {
+                        text: "{{ "Edit"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function() {
+                            var params = $("#add_item").find(':input').serialize();
+                            add_skill(params);
+                        }
+                    },
+                    {
+                        text: "{{ "CreateChildSkill"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function() {
+                            open_popup(0, skill.id);
+                        }
+                    },
+                    {
+                        text: "{{ "AddSkillToProfileSearch"|get_lang }}",
+                        class: 'btn btn-primary',
+                        click: function() {
+                            add_skill_in_profile_list(skill.id, skill.name);
+                        }
+                    }
+                ],
                 close: function() {
                     $("#name").attr('value','');
                     $("#description").attr('value', '');
@@ -378,50 +387,5 @@ $(document).ready(function() {
 
 <div id="dialog-form" style="">
     <p class="validateTips"></p>
-    <form id="add_item" class="form-horizontal" name="form">
-        <fieldset>
-            <div class="control-group">
-                <label class="control-label" for="name">{{ 'Name' | get_lang }}</label>
-                <div class="controls">
-                    <!--<input type="text" name="name" id="name" class="span4" readonly />-->
-                    <p id="name" class="span4">
-                    </p>
-                </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" class="span2" readonly />-->
-                    <p id="short_code" class="span4">
-                    </p>
-                </div>
-            </div>
-            <div id="skill_row" class="control-group">
-                <label class="control-label" for="name">{{'Parent'|get_lang}}</label>
-                <div class="controls">
-                    <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">
-                    <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">
-                    <!--<textarea name="description" id="description" class="span4" rows="7" readonly>
-                    </textarea>-->
-                    <p id="description" class="span4">
-                    </p>
-                </div>
-            </div>
-        </fieldset>
-    </form>
+    {{ dialogForm }}
 </div>