Lot of improvements of the survey edition form.

Signed-off-by: Florent Bruneau <florent.bruneau@polytechnique.org>

diff --git a/htdocs/javascript/survey.js b/htdocs/javascript/survey.js
index 15ae19e..834b9e5 100644 (file)
--- a/htdocs/javascript/survey.js
+++ b/htdocs/javascript/survey.js
@@ -19,6 +19,54 @@
  ***************************************************************************/
 
 (function($) {
+    $.extend({
+        questions: function() {
+            return $('.q_edit:not(#questions)');
+        },
+
+        lastQuestion: function() {
+            return $.questions().last();
+        },
+
+        renumberQuestions: function() {
+            var q = $.questions();
+            q.each(function(idx) {
+                var elt = $(this);
+                var old_id = elt.attr('id');
+                var new_id = 'q_edit[' + idx + ']';
+                if (old_id == new_id) {
+                    return;
+                }
+
+                var children = elt.children(':not(.q_edit)');
+                while (children.length > 0) {
+                    children.filter('.q_edit_label').text('Question ' + (idx + 1));
+                    children.children('[name*="' + old_id + '"]').each(function() {
+                        function replace(attr) {
+                            var cid = $(this).attr(attr);
+                            if (cid.substr(0, id.length) == old_id) {
+                               $(this).attr(attr, new_id + cid.substring(old_id.length, cid.length));
+                            }
+                        }
+                        replace('id');
+                        replace('name');
+                    });
+                    children = children.children(':not(.q_edit)');
+                }
+                elt.attr('id', new_id);
+            });
+        },
+
+        debugPrintQuestions: function() {
+            var q = $.questions();
+            var str = '';
+            q.each(function() {
+                str += $(this).attr('id') + '\n';
+            });
+            alert(str);
+        }
+    });
+
     $.fn.extend({
         showQuestions: function(questions) {
             var data = $('#question_base').tmpl(questions);
@@ -27,7 +75,55 @@
             return this;
         },
 
-        addQuestion: function(id) {
+        /* Edition form */
+        isQuestion: function() {
+            return this.hasClass('q_edit');
+        },
+
+        isRootSection: function() {
+            return this.attr('id') == 'questions';
+        },
+
+        question: function() {
+            return this.isQuestion() ? this : this.parentQuestion();
+        },
+
+        qid: function() {
+            var question = this.question();
+            if (question.get(0) == undefined) {
+                return undefined;
+            }
+            var id = question.attr('id');
+            if (id.substr(0, 7) != 'q_edit[') {
+                return undefined;
+            }
+            if (id.charAt(id.length - 1) != ']') {
+                return undefined;
+            }
+            id = id.substr(7, id.length - 8);
+            return parseInt(id);
+        },
+
+        parentQuestion: function() {
+            return this.closest('.q_edit');
+        },
+
+        childrenContainer: function() {
+            var question = this.question();
+            return question.isRootSection() ? question : question.children('.q_edit_form').children();
+        },
+
+        childrenQuestion: function() {
+            return this.childrenContainer().children('.q_edit');
+        },
+
+        addQuestion: function() {
+            var id = $.lastQuestion().qid();
+            if (id == undefined) {
+                id = 0;
+            } else {
+                id++;
+            }
             var question = $("#q_edit_new").tmpl([{ qid: id } ]);
             question
                 .children('select')
@@ -38,9 +134,29 @@
                     $("#q_edit_base").tmpl([ { qid: id, type: type } ]).appendTo(form);
                     return true;
                 });
-            question.appendTo(this);
-            return this;
-        }
+            var dest = this.question();
+            var res = this.childrenContainer().children('.add_question').before(question);
+            $.renumberQuestions();
+            return res;
+        },
+
+        removeQuestion: function(force) {
+            var question = this.parentQuestion();
+            if (!force && question.children('.q_edit_form').children().children('.q_edit').length > 0) {
+                if (!alert('Vous avez demander la suppression d\'une section contenant des questions. '
+                         + 'Ces questions seront supprimées. Etes-vous sur de vouloir continuer ?')) {
+                    return this;
+                }
+            }
+            var res;
+            if (question.isRootSection()) {
+                res = question.empty();
+            } else {
+                res = question.remove();
+            }
+            $.renumberQuestions();
+            return res;
+        },
     });
 })(jQuery);
 

diff --git a/templates/survey/edit.questions.tpl b/templates/survey/edit.questions.tpl
index f938971..8182563 100644 (file)
--- a/templates/survey/edit.questions.tpl
+++ b/templates/survey/edit.questions.tpl
@@ -22,14 +22,21 @@
 
 {literal}
 <script id="q_edit_new" type="text/x-jquery-tmpl">
-  <div>
-    <div><strong>Question ${qid + 1}</strong></div>
+  <div style="clear: both" class="q_edit" id="q_edit[${qid}]">
+    <div>
+      <span class="q_edit_label" style="font-weight: bold">Question ${qid + 1}</span> 
+      (<a onclick="$(this).removeQuestion()" style="text-decoration: none">
+        {/literal}{icon name="delete"}{literal} Supprimer
+      </a>)
+    </div>
     Type de question&nbsp;: <select name="q_edit[${qid}][type]">
       <option value=""></option>
-      <option value="text">Texte</option>
-      <option value="section">Section</option>
+      <option value="text" {{if type}}{{if type == 'text'}}selected="selected"{{/if}}{{/if}}>Texte</option>
+      <option value="section" {{if type}}{{if type == 'section'}}selected="selected"{{/if}}{{/if}}>Section</option>
     </select>
-    <div class="q_edit_form"></div>
+    <div class="q_edit_form">
+      {{tmpl "#q_edit_base"}}
+    </div>
   </div>
 </script>
 
@@ -45,8 +52,8 @@
 
 <script id="q_edit_section" type="text/x-jquery-tmpl">
   <div id="section_${qid}" style="padding-left: 4ex; border-left: 1px solid white">
-    <div class="center">
-      <a href="javascript:$('#section_${qid}').addQuestion(next_qid++)">
+    <div class="add_question">
+      <a onclick="$(this).addQuestion()" style="text-decoration: none">
         {/literal}{icon name="add"}{literal} Ajouter une question
       </a>
     </div>

diff --git a/templates/survey/edit.tpl b/templates/survey/edit.tpl
index 04de2a0..6a3afc5 100644 (file)
--- a/templates/survey/edit.tpl
+++ b/templates/survey/edit.tpl
@@ -41,9 +41,9 @@
 
   <h2>Questions</h2>
 
-  <div id="questions">
-    <div class="center">
-      <a href="javascript:$('#questions').addQuestion(next_qid++)">
+  <div id="questions" class="q_edit">
+    <div class="add_question">
+      <a onclick="$(this).addQuestion()" style="text-decoration: none">
         {icon name="add"} Ajouter une question
       </a>
     </div>
@@ -54,12 +54,6 @@
   </div>
 </form>
 
-<script type="text/javascript">
-  //<![CDATA[
-  var next_qid = 0;
-  //]]>
-</script>
-
 {include file="survey/vote.questions.tpl"}
 {include file="survey/edit.questions.tpl"}