Bug #3882: Improve CustomTags UI

src/sunstone/public/app/utils/custom-tags-table.js

@@ -2,6 +2,7 @@ define(function(require) {
 
   var Locale = require('utils/locale');
   var TemplateHTML = require('hbs!./custom-tags-table/html');
+  var RowTemplateHTML = require('hbs!./custom-tags-table/row');
   var TemplateUtils = require('utils/template-utils');
 
   function _html(){
@@ -9,31 +10,16 @@ define(function(require) {
   }
 
   function _setup(context){
-    $('#add_custom', context).click(function() {
-      var table = $('#custom_tags', context)[0];
-      var rowCount = table.rows.length;
-      var row = table.insertRow(rowCount);
-
-      var cell1 = row.insertCell(0);
-      var element1 = document.createElement("input");
-      element1.id = "KEY";
-      element1.type = "text";
-      element1.value = $('input#KEY', context).val();
-      cell1.appendChild(element1);
-
-      var cell2 = row.insertCell(1);
-      var element2 = document.createElement("input");
-      element2.id = "VALUE";
-      element2.type = "text";
-      element2.value = $('input#VALUE', context).val();
-      cell2.appendChild(element2);
-
-      var cell3 = row.insertCell(2);
-      cell3.innerHTML = "<i class='fa fa-times-circle fa fa-lg remove-tab'></i>";
+    context.off("click", ".add_custom_tag");
+    context.on("click", ".add_custom_tag", function(){
+      $(".custom_tags tbody", context).append(RowTemplateHTML());
     });
 
-    context.on("click", "i.remove-tab", function() {
-      $(this).closest("tr").remove();
+    $(".add_custom_tag", context).trigger("click");
+
+    context.on("click", ".custom_tags i.remove-tab", function(){
+      var tr = $(this).closest('tr');
+      tr.remove();
     });
   }
 
@@ -41,9 +27,9 @@ define(function(require) {
   function _retrieveCustomTags(context){
     var template_json = {};
 
-    $('#custom_tags tr', context).each(function(){
-      if ($('#KEY', $(this)).val()) {
-        template_json[$('#KEY', $(this)).val()] = $('#VALUE', $(this)).val();
+    $('.custom_tags tr', context).each(function(){
+      if ($('.custom_tag_key', $(this)).val()) {
+        template_json[$('.custom_tag_key', $(this)).val()] = $('.custom_tag_value', $(this)).val();
       }
     });
 
@@ -53,27 +39,11 @@ define(function(require) {
   // context is the container div of customTagsHtml()
   // template_json are the key:values that will be put into the table
   function _fillCustomTags(context, template_json){
+    $(".custom_tags i.remove-tab", context).trigger("click");
+
     $.each(template_json, function(key, value){
-      var table = $('#custom_tags', context)[0];
-      var rowCount = table.rows.length;
-      var row = table.insertRow(rowCount);
-
-      var cell1 = row.insertCell(0);
-      var element1 = document.createElement("input");
-      element1.id = "KEY";
-      element1.type = "text";
-      element1.value = TemplateUtils.htmlDecode(key);
-      cell1.appendChild(element1);
-
-      var cell2 = row.insertCell(1);
-      var element2 = document.createElement("input");
-      element2.id = "VALUE";
-      element2.type = "text";
-      element2.value = TemplateUtils.htmlDecode(value);
-      cell2.appendChild(element2);
-
-      var cell3 = row.insertCell(2);
-      cell3.innerHTML = "<i class='fa fa-times-circle fa fa-lg remove-tab'></i>";
+      $(".custom_tags tbody", context).append(
+                                    RowTemplateHTML({key: key, value: value}));
     });
   }
 

src/sunstone/public/app/utils/custom-tags-table/html.hbs

@@ -1,19 +1,6 @@
-<div class="row">
-  <div class="large-4 columns">
-    <input type="text" id="KEY" name="key" />
-  </div>
-  <div class="large-6 columns">
-    <input type="text" id="VALUE" name="value" />
-  </div>
-  <div class="large-2 columns">
-    <button type="button" class="button secondary small radius" id="add_custom">
-      {{tr "Add"}}
-    </button>
-  </div>
-</div>
 <div class="row">
   <div class="large-12 columns">
-    <table id="custom_tags" class="dataTable policies_table">
+    <table class="custom_tags dataTable policies_table">
       <thead>
         <tr>
           <th>{{tr "KEY"}}</th>
@@ -21,12 +8,17 @@
           <th></th>
         </tr>
       </thead>
-      <tbody id="tbodyinput">
-        <tr>
-        </tr>
-        <tr>
-        </tr>
+      <tbody>
       </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="3">
+            <a type="button" class="add_custom_tag button small large-12 secondary radius">
+              <i class="fa fa-plus"></i> {{tr "Add another attribute"}}
+            </a>
+          </td>
+        </tr>
+      </tfoot>
     </table>
   </div>
 </div>

src/sunstone/public/app/utils/custom-tags-table/row.hbs

@@ -0,0 +1,13 @@
+<tr>
+  <td>
+    <input class="custom_tag_key" type="text" name="key" value="{{key}}">
+</td>
+<td>
+  <textarea class="custom_tag_value" name="value">
+    {{~value~}}
+  </textarea>
+</td>
+<td>
+  <a href="#"><i class="fa fa-times-circle remove-tab"></i></a>
+</td>
+</tr>