Added Autocomplete for config sections

Form Validation
Updating selectors with the js-prefix
Added modal to makefile.
Removed debugging alert.
Cleaned up error messaging to be consistent.

8 files changed, 179 insertions, 81 deletions

diff --git a/src/Makefile.am b/src/Makefile.am
index a5eea390d..89a6afdfc 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -70,6 +70,8 @@ FAUXTON_FILES = \
     fauxton/app/addons/config/resources.js \
     fauxton/app/addons/config/views.js \
     fauxton/app/addons/config/routes.js \
+    fauxton/app/addons/config/views.js \
+    fauxton/app/addons/config/templates/modal.html \
     fauxton/app/addons/config/templates/dashboard.html \
     fauxton/app/addons/config/templates/item.html \
     fauxton/app/addons/config/tests/resourcesSpec.js \
diff --git a/src/fauxton/app/addons/config/assets/less/config.less b/src/fauxton/app/addons/config/assets/less/config.less
index 44311deb8..2807708d7 100644
--- a/src/fauxton/app/addons/config/assets/less/config.less
+++ b/src/fauxton/app/addons/config/assets/less/config.less
@@ -27,7 +27,7 @@
   button {width: 7%;}
 }
 
-#add-section-modal {
+#add-section-modal .modal {
   width: 400px;
 }
 
diff --git a/src/fauxton/app/addons/config/resources.js b/src/fauxton/app/addons/config/resources.js
index ec8cc98e9..317e35569 100644
--- a/src/fauxton/app/addons/config/resources.js
+++ b/src/fauxton/app/addons/config/resources.js
@@ -13,12 +13,14 @@
 define([
   "app",
   "api"
+
 ],
 
 function (app, FauxtonAPI) {
 
   var Config = FauxtonAPI.addon();
 
+
   Config.Model = Backbone.Model.extend({});
   Config.OptionModel = Backbone.Model.extend({
     documentation: "config",
@@ -75,5 +77,7 @@ function (app, FauxtonAPI) {
     }
   });
 
+ 
+
   return Config;
 });
diff --git a/src/fauxton/app/addons/config/routes.js b/src/fauxton/app/addons/config/routes.js
index 519e25fb8..affb453ba 100644
--- a/src/fauxton/app/addons/config/routes.js
+++ b/src/fauxton/app/addons/config/routes.js
@@ -12,7 +12,6 @@
 
 define([
        "app",
-
        "api",
 
        // Modules
diff --git a/src/fauxton/app/addons/config/templates/dashboard.html b/src/fauxton/app/addons/config/templates/dashboard.html
index c14402c19..37ae634ac 100644
--- a/src/fauxton/app/addons/config/templates/dashboard.html
+++ b/src/fauxton/app/addons/config/templates/dashboard.html
@@ -13,10 +13,10 @@ the License.
 -->
 
 <div class="row">
-    <button id="add-section" href="#" class="btn btn-primary pull-right">
-      <i class="icon icon-plus icon-white"> </i>
-      Add Section
-    </button>
+  <button id="js-add-section" href="#" class="btn btn-primary pull-right">
+    <i class="icon icon-plus icon-white"> </i>
+    Add Section
+  </button>
 </div>
 <table class="config table table-striped table-bordered">
   <thead>
@@ -28,23 +28,4 @@ the License.
   <tbody>
   </tbody>
 </table>
-<div id="add-section-modal" class="modal hide fade">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Create Config Option</h3>
-  </div>
-  <div class="modal-body">
-    <form id="add-section-form" class="form well">
-      <label>Section</label>
-      <input type="text" name="section" placeholder="Section">
-      <span class="help-block">Enter an existing section name to add to it.</span>
-      <input type="text" name="name" placeholder="Name">
-      <br/>
-      <input type="text" name="value" placeholder="Value">
-      <div class="modal-footer">
-        <button type="button" class="btn" data-dismiss="modal">Cancel</button>
-        <button type="submit" class="btn btn-primary"> Save </button>
-      </div>
-    </form>
-  </div>
-</div>
+<div id="add-section-modal"></div>
diff --git a/src/fauxton/app/addons/config/templates/modal.html b/src/fauxton/app/addons/config/templates/modal.html
new file mode 100644
index 000000000..f32bd103f
--- /dev/null
+++ b/src/fauxton/app/addons/config/templates/modal.html
@@ -0,0 +1,33 @@
+  <!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+  <h3>Create Config Option</h3>
+</div>
+<div class="modal-body">
+  <div class="js-form-error-config"></div>
+  <form id="js-add-section-form" class="form well">
+    <label>Section</label>
+    <input type="text" name="section" placeholder="Section" >
+    <span class="help-block">Enter an existing section name to add to it.</span>
+    <input type="text" name="name" placeholder="Name">
+    <br/>
+    <input type="text" name="value" placeholder="Value">
+    <div class="modal-footer">
+      <button type="button" class="btn" data-dismiss="modal">Cancel</button>
+      <button type="submit" class="btn btn-primary"> Save </button>
+    </div>
+  </form>
+</div>
diff --git a/src/fauxton/app/addons/config/views.js b/src/fauxton/app/addons/config/views.js
index bd0565205..0468cd1b3 100644
--- a/src/fauxton/app/addons/config/views.js
+++ b/src/fauxton/app/addons/config/views.js
@@ -1,4 +1,4 @@
- // Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
 // use this file except in compliance with the License. You may obtain a copy of
 // the License at
 //
@@ -14,11 +14,13 @@ define([
   "app",
   "api",
   "addons/config/resources",
+  "addons/fauxton/components"
 ],
+function(app, FauxtonAPI, Config, Components) {
+  var Views ={},
+      Events = {};
 
-function (app, FauxtonAPI, Config) {
-
-  var Views = {};
+  Views.Events = _.extend(Events, Backbone.Events);
 
   Views.TableRow = FauxtonAPI.View.extend({
     tagName: "tr",
@@ -59,7 +61,6 @@ function (app, FauxtonAPI, Config) {
       }
     },
 
-
     discardValue: function (event) {
       this.$(".js-edit-value-form").addClass("js-hidden");
       this.$(".js-show-value").removeClass("js-hidden");
@@ -84,12 +85,63 @@ function (app, FauxtonAPI, Config) {
     template: "addons/config/templates/dashboard",
 
     events: {
-      "click #add-section": "addSection",
-      "submit #add-section-form": "submitForm"
+      "click #js-add-section": "addSection"
     },
 
-    submitForm: function (event) {
+    initialize: function(){
+      this.listenTo(Views.Events, "newSection", this.render);
+    },
+
+    addSection: function (event) {
       event.preventDefault();
+      this.modal.show();
+    },
+
+    beforeRender: function() {
+      this.modal = this.insertView("#add-section-modal", new Views.Modal({
+                      collection: this.collection
+                    }));
+
+      this.modal.render();
+
+      this.collection.each(function(config) {
+        _.each(config.get("options"), function (option, index) {
+          this.insertView("table.config tbody", new Views.TableRow({
+            model: new Config.OptionModel({
+              section: config.get("section"),
+              name: option.name,
+              value: option.value,
+              index: index
+            })
+          }));
+        }, this);
+      }, this);
+    },
+
+    establish: function() {
+      return [this.collection.fetch()];
+    }
+  });
+
+  Views.Modal = FauxtonAPI.View.extend({
+    className: "modal hide fade",
+    template:  "addons/config/templates/modal",
+    events: {
+      "submit #js-add-section-form": "validate"
+    },
+    initialize: function(){
+      this.sourceArray = _.map(this.collection.toJSON(), function(item, key){ 
+        return item.section; 
+      });
+    },
+    afterRender: function(){
+      this.sectionTypeAhead = new Components.Typeahead({
+        source: this.sourceArray,
+        el: 'input[name="section"]'
+      });
+      this.sectionTypeAhead.render();
+    },
+    submitForm: function (event) {
       var option = new Config.OptionModel({
         section: this.$('input[name="section"]').val(),
         name: this.$('input[name="name"]').val(),
@@ -111,34 +163,58 @@ function (app, FauxtonAPI, Config) {
         });
       }
 
-      this.$("#add-section-modal").modal('hide');
-      this.render();
-    },
+      this.hide();
+      Views.Events.trigger("newSection");
 
-    addSection: function (event) {
+    },
+    isNew: function(collection){
+      var sectionName = this.$('input[name="section"]').val(),
+          name = this.$('input[name="name"]').val();
+          var section = _.findWhere(collection.toJSON(), {"section":sectionName});
+          var options = _.findWhere(section.options, {name: name});
+          
+          return options;
+    },
+    isSection: function(){
+      var section = this.$('input[name="section"]').val();
+      return _.find(this.sourceArray, function(item){ return item === section; });
+    },
+    validate: function (event){
       event.preventDefault();
-      this.$("#add-section-modal").modal({show:true});
+      var section = this.$('input[name="section"]').val(),
+          name = this.$('input[name="name"]').val(),
+          value = this.$('input[name="value"]').val(),
+          collection = this.collection;
+
+      if(!this.isSection()){
+         this.errorMessage("You need to use an existing section");
+      } else if (!name) {
+        this.errorMessage("Add a name");
+      } else if (!value) {
+        this.errorMessage("Add a value");
+      } else if (this.isNew(collection)){
+        this.errorMessage("Must have a unique name");
+      } else {
+        this.submitForm();
+      }
     },
-
-    beforeRender: function() {
-      this.collection.each(function(config) {
-        _.each(config.get("options"), function (option, index) {
-          this.insertView("table.config tbody", new Views.TableRow({
-            model: new Config.OptionModel({
-              section: config.get("section"),
-              name: option.name,
-              value: option.value,
-              index: index
-            })
-          }));
-        }, this);
-      }, this);
+    errorMessage: function(msg){
+      this.error = FauxtonAPI.addNotification({
+          msg: msg,
+          type: "error",
+          clear: true,
+          selector: ".js-form-error-config"
+      });
     },
-
-    establish: function() {
-      return [this.collection.fetch()];
+    show: function(){
+      this.$el.modal({show:true});
+    },
+    hide: function(){
+      this.$el.modal('hide');
     }
+
   });
 
   return Views;
+
 });
diff --git a/src/fauxton/app/addons/fauxton/components.js b/src/fauxton/app/addons/fauxton/components.js
index 96af1698c..25f623c27 100644
--- a/src/fauxton/app/addons/fauxton/components.js
+++ b/src/fauxton/app/addons/fauxton/components.js
@@ -210,32 +210,7 @@ function(app, FauxtonAPI, ace, spin) {
 
   });
 
-  //TODO allow more of the typeahead options.
-  //Current this just does what we need but we
-  //need to support the other typeahead options.
-  Components.Typeahead = FauxtonAPI.View.extend({
-
-    initialize: function (options) {
-      this.source = options.source;
-      _.bindAll(this);
-    },
 
-    afterRender: function () {
-      var onUpdate = this.onUpdate;
-
-      this.$el.typeahead({
-        source: this.source,
-        updater: function (item) {
-          if (onUpdate) {
-            onUpdate(item);
-          }
-
-          return item;
-        }
-      });
-    }
-
-  });
 
   Components.ModalView = FauxtonAPI.View.extend({
 
@@ -279,6 +254,34 @@ function(app, FauxtonAPI, ace, spin) {
     }
   });
 
+  //TODO allow more of the typeahead options.
+  //Current this just does what we need but we
+  //need to support the other typeahead options.
+  Components.Typeahead = FauxtonAPI.View.extend({
+
+    initialize: function (options) {
+      this.source = options.source;
+      this.onUpdate = options.onUpdate;
+      _.bindAll(this);
+    },
+
+    afterRender: function () {
+      var onUpdate = this.onUpdate;
+
+      this.$el.typeahead({
+        source: this.source,
+        updater: function (item) {
+          if (onUpdate) {
+            onUpdate(item);
+          }
+
+          return item;
+        }
+      });
+    }
+
+  });
+
   Components.DbSearchTypeahead = Components.Typeahead.extend({
     initialize: function (options) {
       this.dbLimit = options.dbLimit || 30;