Edit Config name with validation.

3 files changed, 53 insertions, 14 deletions

diff --git a/src/fauxton/app/addons/config/assets/less/config.less b/src/fauxton/app/addons/config/assets/less/config.less
index 2807708d7..24bbab868 100644
--- a/src/fauxton/app/addons/config/assets/less/config.less
+++ b/src/fauxton/app/addons/config/assets/less/config.less
@@ -39,6 +39,9 @@ table.config {
   tr {
     th, td {
       vertical-align: middle;
+      .btn.btn-small {
+        padding: 10px 3px;
+      }
     }
   }
 }
diff --git a/src/fauxton/app/addons/config/templates/item.html b/src/fauxton/app/addons/config/templates/item.html
index 108fa58f7..8af9a50ed 100644
--- a/src/fauxton/app/addons/config/templates/item.html
+++ b/src/fauxton/app/addons/config/templates/item.html
@@ -17,13 +17,22 @@ the License.
 <% } else { %>
 <td></td>
 <% } %>
-<td > <%= option.name %> </td>
+<td class="js-edit-value"> 
+  <div class="js-show-value">
+    <%= option.name %>
+  </div>
+  <div class="js-edit-value-form js-hidden">
+    <input class="js-value-input" type="text" name="name" value="<%- option.name %>" />
+    <button class="js-save-value btn btn-success fonticon-circle-check btn-small"> </button>
+    <button class="js-cancel-value btn btn-small fonticon-circle-x"> </button>
+  </div>
+</td>
 <td class="js-edit-value">
   <div class="js-show-value">
     <%= option.value %>
   </div>
   <div class="js-edit-value-form js-hidden">
-    <input class="js-value-input" type="text" value="<%- option.value %>" />
+    <input class="js-value-input" type="text" name="value" value="<%- option.value %>" />
     <button class="js-save-value btn btn-success fonticon-circle-check btn-small"> </button>
     <button class="js-cancel-value btn btn-small fonticon-circle-x"> </button>
   </div>
diff --git a/src/fauxton/app/addons/config/views.js b/src/fauxton/app/addons/config/views.js
index 0468cd1b3..8453d90b4 100644
--- a/src/fauxton/app/addons/config/views.js
+++ b/src/fauxton/app/addons/config/views.js
@@ -44,39 +44,64 @@ function(app, FauxtonAPI, Config, Components) {
       this.remove();
     },
 
+    uniqueName: function(name){
+      var section = _.findWhere(this.collection.toJSON(), {"section":this.model.get("section")});
+      
+      return _.findWhere(section.options, {name: name});
+    },
+
     editValue: function (event) {
-      this.$(".js-show-value").addClass("js-hidden");
-      this.$(".js-edit-value-form").removeClass("js-hidden");
-      this.$(".js-value-input").focus();
+      this.$(event.currentTarget).find(".js-show-value").addClass("js-hidden");
+      this.$(event.currentTarget).find(".js-edit-value-form").removeClass("js-hidden");
+      this.$(event.currentTarget).find(".js-value-input").focus();
     },
 
     processKeyEvents: function (event) {
       // Enter key
       if (event.keyCode === 13) {
-        return this.saveAndRender();
+        return this.saveAndRender(event);
       }
       // Esc key
       if (event.keyCode === 27) {
-        return this.discardValue();
+        return this.discardValue(event);
       }
     },
 
     discardValue: function (event) {
-      this.$(".js-edit-value-form").addClass("js-hidden");
-      this.$(".js-show-value").removeClass("js-hidden");
+      this.$(event.currentTarget).parents('td').find(".js-edit-value-form").addClass("js-hidden");
+      this.$(event.currentTarget).parents('td').find(".js-show-value").removeClass("js-hidden");
     },
 
     cancelEdit: function (event) {
-      this.discardValue();
+      this.discardValue(event);
     },
 
     serialize: function () {
       return {option: this.model.toJSON()};
     },
-
-    saveAndRender: function () {
-      this.model.save({value: this.$(".js-value-input").val()});
-      this.render();
+    saveAndRender: function (event) {
+      var options = {};
+        $input = this.$(event.currentTarget).parents('td').find(".js-value-input");
+        options[$input.attr('name')] = $input.val();
+
+        if ($input.attr('name')==='name'){
+          if (this.uniqueName($input.val())){
+            this.error = FauxtonAPI.addNotification({
+                msg: "This config already exists, enter a unique name",
+                type: "error",
+                clear: true
+            });
+          } else {
+            var newModel = this.model.clone();
+              newModel.save(options);
+              this.model.destroy();
+              this.model = newModel;
+              this.render();
+          }
+        } else {
+        this.model.save(options);
+        this.render();
+        }
     }
 
   });
@@ -103,10 +128,12 @@ function(app, FauxtonAPI, Config, Components) {
                     }));
 
       this.modal.render();
+      var collection = this.collection;
 
       this.collection.each(function(config) {
         _.each(config.get("options"), function (option, index) {
           this.insertView("table.config tbody", new Views.TableRow({
+            collection: collection,
             model: new Config.OptionModel({
               section: config.get("section"),
               name: option.name,