Added "tag editing" admin control

server/src/uds/static/adm/js/api-tools.coffee

@@ -33,6 +33,10 @@
         remain = maxLen - mid - 2
         str = str.substr(0, first) + "..." + str.substr(sl-remain)
 
+    capitalize: (str) ->
+      str = str.toLowerCase()
+      return str.substr(0,1).toUpperCase() + str.substr(1)
+        
       return str
 
     isEmpty: (obj) ->

server/src/uds/static/adm/js/gui-form.coffee

@@ -42,8 +42,12 @@
           return
         value = newValue
 
+      # Generate an unique id so templates can use it if needed
+      id = "uniq" + Math.random().toString().split(".")[1]
+
       originalValues[f.name] = value # Store original value
       html += api.templates.evaluate("tmpl_fld_" + f.gui.type,
+        id: id
         value: value # If no value present, use default value
         minValue: f.gui.minValue
         maxValue: f.gui.maxValue
@@ -169,6 +173,10 @@
         name = $field.attr("name")
         if $field.attr("type") is "checkbox"
           res[name] = $field.is(":checked")
+        else if $field.attr("data-uds") is "list"
+          res[name] = $field.val().split('/**/')
+        else if $field.attr("data-uds") is "commaList"
+          res[name] = $field.val().split(',')
         else
           res[name] = $field.val()
           res[name] = []  if not res[name]? and $field.is("select")

server/src/uds/templates/uds/admin/tmpl/fld/taglist.html

@@ -1,16 +1,14 @@
 {% extends "uds/admin/tmpl/fld/form-group.html" %}
 {% load i18n %}
 {% block field %}{% verbatim %}
-    {{# each value }}
+    <div id="tags{{ id }}">
-        <span class="label label-default"><i class="fa fa-close closeable tag_eliminator"></i> <b class="tag">{{ this }}</b></span>
+    </div>
-    {{/ each }}
-        <span class="label label-success tag-adder">{% endverbatim %}{% trans 'Add Tag...' %}{% verbatim %}</span>
 
-    <select id="{{ name }}_field_hdn" class="{{ css }} hidden" name="{{ name }}" multiple>
+    {{# unless readonly }}
-    {{# each value }}
+    <span class="label label-success tag tagadder" id="adder{{ id }}">{% endverbatim %}{% trans 'Add Tag...' %}{% verbatim %}</span>
-        <option selected>{{ this }}</option>
+    {{/ unless }}
-    {{/ each }}
+
-    </select>
+    <input id="h{{ id }}" type="hidden" data-uds="list" name="{{ name }}" value="{{ value }}" class="{{ css }}" />
 
 {% endverbatim %}
 {% comment %}<script>/*This is a little trick to make IDE recognize sintax hightlight, will not be show on render :-)*/{% endcomment %}
@@ -18,14 +16,96 @@
 {% verbatim %}{{# javascript }}
 (function(){
     "use strict";
+
+    var $data = $('#h{{ id }}');
+    var $tags = $('#tags{{ id }}');
+
+    function tag(text) {
+        {{# if readonly }}
+        return '<span class="label label-default tag"><b class="tag">' + text + '</b></span>';
+        {{ else }}
+        return '<span class="label label-default tag"><i class="fa fa-close closeable tag_eliminator"></i> <b class="tag">' + text + '</b></span>';
+        {{/ if }}
+    }
+
+    {{# unless readonly }}
+    function setEvents() {
         $('i.tag_eliminator').on('click', function() {
             var $this = $(this);
             var val = $this.parent().find('b.tag').text();
-        if(prompt(gettext('Remove') + val) == true) {
+            gui.promptModal(val, gettext('Are you sure to remove tag?'), {
-            $(this).parent().html('');
+                onYes: function() {
+                    removeTag(val);
+                }
+            });
+        })
     }
 
+    // Tagadder never gets destroyed, so we only set the event once
+    $('#adder{{ id }}').on('click', function(){
+        var text = prompt('Enter new tag');
+        addTag(text);
+    });
+
+    {{/ unless }}
+
+    function updateVisibleTags() {
+        $tags.empty()
+        if ($data.val() != '')  // No values
+            $.each($data.val().split(','), function(idx, val) {
+                $tags.append(tag(val));
+                gui.doLog(idx, val);
+
             })
+        {{# unless readonly }}setEvents(){{/ unless }}
+    }
+
+    function addTag(text) {
+        var curr;
+        var found = false;
+
+        text = api.tools.capitalize(text);
+
+        if ($data.val() == '')  // No values
+            curr = [text];
+        else {
+            curr = $data.val().split(',');
+
+            $.each(curr, function(idx, val){
+                if( val == text) {
+                    found = true;
+                }
+            })
+            if( !found )
+                curr.push(text);
+        }
+        $data.val(curr.join(','));
+        updateVisibleTags();
+    }
+
+    function removeTag(text) {
+        var curr;
+
+        text = api.tools.capitalize(text);
+
+        if ($data.val() != '')  // No values
+            curr = $data.val().split(',');
+        else
+            curr = [];
+
+        $data.val('');
+        updateVisibleTags();
+
+        gui.doLog(curr);
+        $.each(curr, function(idx, val){
+            if( val != text )
+                addTag(val);
+        });
+    }
+
+    // Start showing current tags
+    updateVisibleTags();
+
 }());
 
 

server/templates/admin/app/css/main.scss

@@ -347,12 +347,18 @@ body {
 }
 
 // Tag add
-.adder {
+.tagadder {
   &:hover {
     cursor: pointer;
   }
 }
 
+span.tag {
+  float: left;
+  margin-bottom: 4px;
+  margin-right: 4px;
+  padding-bottom: 4px;
+}
 
 /* theme */