Order in TextInput and Image widget types

6 files changed, 181 insertions, 22 deletions

diff --git a/webapp/js_tests/fixtures/container.html b/webapp/js_tests/fixtures/container.html
index cf1fb9a..d1b1cc1 100644
--- a/webapp/js_tests/fixtures/container.html
+++ b/webapp/js_tests/fixtures/container.html
@@ -6,14 +6,14 @@
 
 <script>
     var container = $('#WGroupContainer'),
-        WIDGET_TYPES = [{
+        WIDGET_TYPES = {
         	'0': {'key': 'TextInput', 'value': 'Texto'},
         	'1': {'key': 'MultipleCheckBox', 'value': 'Checklist (multiple opción)'},
         	'2': {'key': 'RadioButton', 'value': 'Checklist (única respuesta)'},
         	'3': {'key': 'DropDownList', 'value': 'Despliegue de lista (única respuesta)'},
         	'4': {'key': 'ImageCheckBox', 'value': 'Checklist con imágenes (multiple opción)'},
         	'5': {'key': 'ImageRadioButton', 'value': 'Checklist con imágenes (única respuesta)'},
-        }],
+        },
         WITH_OPTIONS = [
 		    "MultipleCheckBox",
 		    "DropDownList",
@@ -21,6 +21,8 @@
 		    "ImageCheckBox",
 		    "ImageRadioButton",
 		],
-        OFFSET_OPTION_ID = 0;
-        WITH_IMAGES = [];
+        OFFSET_OPTION_ID = 0,
+        WITH_IMAGES = ["ImageCheckBox", "ImageRadioButton"],
+        IMAGE_OPTIONS_TMP_MEDIA_URL,
+        POLL_ID;
 </script>
\ No newline at end of file
diff --git a/webapp/js_tests/spec/DynamicStructureSpec.js b/webapp/js_tests/spec/DynamicStructureSpec.js
index d52ba13..edf0d66 100644
--- a/webapp/js_tests/spec/DynamicStructureSpec.js
+++ b/webapp/js_tests/spec/DynamicStructureSpec.js
@@ -237,6 +237,125 @@ describe("", function() {
 
         describe("Options except TextInput and image widget types", function() {
 
+            it("option widget has an order", function() {
+
+                jasmine.getFixtures().fixturesPath = "fixtures/";
+                loadFixtures("container.html");
+
+                var option_mustache_template = $.ajax({
+                    type: "GET",
+                    url: '/jasmine/mustache_templates/option.html',
+                    cache: false,
+                    async: false
+                }).responseText;
+                $("#jasmine-fixtures").append(option_mustache_template);
+
+                Mustache.tags = ['[[', ']]'];
+
+                // Preparing mustache TEMPLATES
+                $('script[type="text/x-mustache-template"]').each(function(i, obj){
+                    TEMPLATES[$(obj).attr('name')] = $(obj).text();
+                });
+
+                factoryOption("1", "", container, "0", "0");
+
+                options = container.children();
+
+                option_1_order = options.find(
+                    "[name='groups.0.fields.0.options.1.order']")[0];
+
+                expect(option_1_order).not.toBeUndefined();
+
+            });
+
+        });
+
+        describe("TextInput widget type options", function() {
+
+            it("option widget has an order", function() {
+
+                jasmine.getFixtures().fixturesPath = "fixtures/";
+                loadFixtures("container.html");
+
+                var option_default_mustache_template = $.ajax({
+                    type: "GET",
+                    url: '/jasmine/mustache_templates/option_default.html',
+                    cache: false,
+                    async: false
+                }).responseText;
+                $("#jasmine-fixtures").append(option_default_mustache_template);
+
+                Mustache.tags = ['[[', ']]'];
+
+                // Preparing mustache TEMPLATES
+                $('script[type="text/x-mustache-template"]').each(function(i, obj){
+                    TEMPLATES[$(obj).attr('name')] = $(obj).text();
+                });
+
+                factoryField("0", {"container": container, "widget_type": "TextInput"});
+
+                var field_widget = container.children();
+
+                factoryOptionDefault("0", field_widget, "1", "");
+
+                options = container.children();
+
+                option_1_order = options.find(
+                    "[name='groups.0.fields.0.options.1.order']")[0];
+
+                expect(option_1_order).not.toBeUndefined();
+
+                expect($(option_1_order).val()).toBe("0");
+
+            });
+
+        });
+
+        describe("Image thumbnail widget type options", function() {
+
+            it("option widget has an order", function() {
+
+                jasmine.getFixtures().fixturesPath = "fixtures/";
+                loadFixtures("container.html");
+
+                var option_image_thumbnail_mustache_template = $.ajax({
+                    type: "GET",
+                    url: '/jasmine/mustache_templates/option_image_thumbnail.html',
+                    cache: false,
+                    async: false
+                }).responseText;
+                $("#jasmine-fixtures").append(option_image_thumbnail_mustache_template);
+
+                Mustache.tags = ['[[', ']]'];
+
+                // Preparing mustache TEMPLATES
+                $('script[type="text/x-mustache-template"]').each(function(i, obj){
+                    TEMPLATES[$(obj).attr('name')] = $(obj).text();
+                });
+
+                factoryField("0", {"container": container, "widget_type": "ImageCheckBox"});
+
+                var field_widget = container.children();
+
+                jQuery.fn.popover = function(){};
+
+                factoryImageOptionThumbnail("1", {}, container, "0", "0", "0");
+
+                options = container.children();
+
+                option_1_order = options.find(
+                    "[name='groups.0.fields.0.options.1.order']")[0];
+
+                expect(option_1_order).not.toBeUndefined();
+
+                expect($(option_1_order).val()).toBe("0");
+
+            });
+
+        });
+
+        describe("Image upload widget type options", function() {
+
             beforeEach(function() {
 
                 jasmine.getFixtures().fixturesPath = "fixtures/";
@@ -250,6 +369,14 @@ describe("", function() {
                 }).responseText;
                 $("#jasmine-fixtures").append(option_mustache_template);
 
+                var option_image_upload_mustache_template = $.ajax({
+                    type: "GET",
+                    url: '/jasmine/mustache_templates/option_image_upload.html',
+                    cache: false,
+                    async: false
+                }).responseText;
+                $("#jasmine-fixtures").append(option_image_upload_mustache_template);
+
                 Mustache.tags = ['[[', ']]'];
 
                 // Preparing mustache TEMPLATES
@@ -261,7 +388,7 @@ describe("", function() {
 
             it("option widget has an order", function() {
 
-                factoryOption("1", "", container, "0", "0");
+                factoryImageOptionUpload("1", {}, container, "0", "0", "0");
 
                 options = container.children();
 
@@ -270,6 +397,8 @@ describe("", function() {
 
                 expect(option_1_order).not.toBeUndefined();
 
+                expect($(option_1_order).val()).toBe("0");
+
             });
 
         });
diff --git a/webapp/polls/templates/mustache/option_default.html b/webapp/polls/templates/mustache/option_default.html
index 130acbf..21efb83 100644
--- a/webapp/polls/templates/mustache/option_default.html
+++ b/webapp/polls/templates/mustache/option_default.html
@@ -7,6 +7,12 @@
         name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].text"
         value="[[ value ]]"
         placeholder="(opcional)" />
+    <input
+        class="input-small"
+        type="hidden"
+        name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].order"
+        value="[[ order ]]"
+        placeholder="order" />
     <span>
         Si ingresa un texto default, estar&aacute; escrito en la respuesta a esta pregunta.
     </span>
diff --git a/webapp/polls/templates/mustache/option_image_thumbnail.html b/webapp/polls/templates/mustache/option_image_thumbnail.html
index efb44b6..ddcdc49 100644
--- a/webapp/polls/templates/mustache/option_image_thumbnail.html
+++ b/webapp/polls/templates/mustache/option_image_thumbnail.html
@@ -27,6 +27,12 @@
                 name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].weight"
                 value="[[ weight ]]"
                 placeholder="peso" />
+            <input
+                class="input-small"
+                type="hidden"
+                name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].order"
+                value="[[ order ]]"
+                placeholder="order" />
         </center>
     </div>
 </script>
\ No newline at end of file
diff --git a/webapp/polls/templates/mustache/option_image_upload.html b/webapp/polls/templates/mustache/option_image_upload.html
index dd4dfbe..67b54c8 100644
--- a/webapp/polls/templates/mustache/option_image_upload.html
+++ b/webapp/polls/templates/mustache/option_image_upload.html
@@ -26,6 +26,12 @@
                 name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].weight"
                 value="[[ weight ]]"
                 placeholder="peso" />
+            <input
+                class="input-small"
+                type="hidden"
+                name="groups.[[ group_order ]].fields.[[ field_order ]].options.[[ id ]].order"
+                value="[[ order ]]"
+                placeholder="order" />
         </center>
             <span class="btn btn-file">
                 <span class="fileupload-new">Elegir</span>
diff --git a/webapp/webapp/static/js/dynamic_structure.js b/webapp/webapp/static/js/dynamic_structure.js
index 373c9ed..57e3609 100644
--- a/webapp/webapp/static/js/dynamic_structure.js
+++ b/webapp/webapp/static/js/dynamic_structure.js
@@ -55,6 +55,20 @@ jQuery.fn.selText = function() {
     return this;
 }
 
+var _prev_order = function(field_widget){
+    var order;
+    var options_container = $(field_widget.find('.WFieldOptions_container')[0]);
+    var prev_option = $(options_container).children().last();
+    var prev_order = $(prev_option.find("[name*='.order']")[0]).val();
+    if (prev_order == null){
+        order = 0
+    } else {
+        order = parseInt(prev_order) + 1;
+    }
+
+    return order;
+}
+
 var factoryOptionDefault = function(group_order, field_widget, id, default_value) {
     var field_order = parseInt(field_widget.find(".field_order").attr("value"));
 
@@ -71,7 +85,8 @@ var factoryOptionDefault = function(group_order, field_widget, id, default_value
             "id": id,
             "value": default_value || '',
             "group_order": group_order,
-            "field_order": field_order
+            "field_order": field_order,
+            "order": 0
         })
     );
 
@@ -80,7 +95,7 @@ var factoryOptionDefault = function(group_order, field_widget, id, default_value
 };
 
 
-var factoryImageOptionUpload = function(id, value, container, group_order, field_order) {
+var factoryImageOptionUpload = function(id, value, container, group_order, field_order, order) {
 
     var option = $(
             Mustache.render(TEMPLATES['field_option_image_upload'], {
@@ -88,7 +103,8 @@ var factoryImageOptionUpload = function(id, value, container, group_order, field
                 "text": value['text'],
                 "weight": value['weight'],
                 "group_order": group_order,
-                "field_order": field_order
+                "field_order": field_order,
+                "order": order
             })
         ),
         row_fluid = container.find('.row-fluid');
@@ -119,7 +135,7 @@ var get_opt_thumb = function(poll_id, img_name){
     return thumb;
 }
 
-var factoryImageOptionThumbnail = function(id, value, container, group_order, field_order) {
+var factoryImageOptionThumbnail = function(id, value, container, group_order, field_order, order) {
 
     var option = $(
             Mustache.render(TEMPLATES['field_option_image_thumbnail'], {
@@ -129,7 +145,8 @@ var factoryImageOptionThumbnail = function(id, value, container, group_order, fi
                 "img_name": value['img_name'],
                 "weight": value['weight'],
                 "group_order": group_order,
-                "field_order": field_order
+                "field_order": field_order,
+                "order": order
             })
         ),
         row_fluid = container.find('.row-fluid');
@@ -277,19 +294,11 @@ var bindFieldAddOptionButton = function(add_option_button) {
         // Get current selected widget type for current field
         var current_widget_type = field_widget.find(".WFieldWidgetType").attr('value');
 
+        var order = _prev_order(field_widget);
         if ($.inArray(current_widget_type, WITH_IMAGES) == -1){
-            var order;
-            var options_container = $(field_widget.find('.WFieldOptions_container')[0]);
-            var prev_option = $(options_container).children().last();
-            var prev_order = $(prev_option.find("[name*='.order']")[0]).val();
-            if (prev_order == null){
-                order = 0
-            } else {
-                order = parseInt(prev_order) + 1;
-            }
             factoryOption(OFFSET_OPTION_ID, empty_option_widget, options_container, group_order, field_order, order);
         } else {
-            factoryImageOptionUpload(OFFSET_OPTION_ID, empty_option_widget, options_container, group_order, field_order );
+            factoryImageOptionUpload(OFFSET_OPTION_ID, empty_option_widget, options_container, group_order, field_order, order);
         }
     });
 }
@@ -462,10 +471,11 @@ var factoryField = function(order, value) {
             // Image option
             $.each(value['options'] || [], function(id, opt_value){
                 options_container = field_widget.find('.WFieldOptions_container');
+                var option_order = _prev_order(field_widget);
                 if (opt_value.hasOwnProperty('img_name')){
-                    factoryImageOptionThumbnail(id, opt_value, options_container, group_order, order);
+                    factoryImageOptionThumbnail(id, opt_value, options_container, group_order, order, option_order);
                 } else {
-                    factoryImageOptionUpload(id, opt_value, options_container, group_order, order);
+                    factoryImageOptionUpload(id, opt_value, options_container, group_order, order, option_order);
                 }
             });
         }