Return-Path: X-Original-To: apmail-couchdb-commits-archive@www.apache.org Delivered-To: apmail-couchdb-commits-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 291EB102F3 for ; Fri, 28 Feb 2014 17:45:32 +0000 (UTC) Received: (qmail 81058 invoked by uid 500); 28 Feb 2014 17:45:31 -0000 Delivered-To: apmail-couchdb-commits-archive@couchdb.apache.org Received: (qmail 81020 invoked by uid 500); 28 Feb 2014 17:45:30 -0000 Mailing-List: contact commits-help@couchdb.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@couchdb.apache.org Delivered-To: mailing list commits@couchdb.apache.org Received: (qmail 81013 invoked by uid 99); 28 Feb 2014 17:45:30 -0000 Received: from tyr.zones.apache.org (HELO tyr.zones.apache.org) (140.211.11.114) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 28 Feb 2014 17:45:30 +0000 Received: by tyr.zones.apache.org (Postfix, from userid 65534) id 84362930F6B; Fri, 28 Feb 2014 17:45:30 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: deathbear@apache.org To: commits@couchdb.apache.org Message-Id: X-Mailer: ASF-Git Admin Mailer Subject: couchdb commit: updated refs/heads/2128-autocomplete-section-name to f62790d Date: Fri, 28 Feb 2014 17:45:30 +0000 (UTC) Repository: couchdb Updated Branches: refs/heads/2128-autocomplete-section-name [created] f62790d8c Added autocomplete and form validation to the add section modal. Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/f62790d8 Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/f62790d8 Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/f62790d8 Branch: refs/heads/2128-autocomplete-section-name Commit: f62790d8c26aa0963b7defbe9f4a1494f2bf8939 Parents: 929b3a0 Author: suelockwood Authored: Fri Feb 28 11:53:04 2014 -0500 Committer: suelockwood Committed: Fri Feb 28 12:44:19 2014 -0500 ---------------------------------------------------------------------- .../app/addons/config/assets/less/config.less | 2 +- src/fauxton/app/addons/config/resources.js | 126 +++++++++++++++---- .../app/addons/config/templates/dashboard.html | 29 +---- .../app/addons/config/templates/modal.html | 33 +++++ src/fauxton/app/addons/fauxton/components.js | 53 ++++---- 5 files changed, 166 insertions(+), 77 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/f62790d8/src/fauxton/app/addons/config/assets/less/config.less ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/config/assets/less/config.less b/src/fauxton/app/addons/config/assets/less/config.less index 88bbc66..c16b45a 100644 --- a/src/fauxton/app/addons/config/assets/less/config.less +++ b/src/fauxton/app/addons/config/assets/less/config.less @@ -26,7 +26,7 @@ } } -#add-section-modal { +#add-section-modal .modal { width: 400px; } http://git-wip-us.apache.org/repos/asf/couchdb/blob/f62790d8/src/fauxton/app/addons/config/resources.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/config/resources.js b/src/fauxton/app/addons/config/resources.js index 227e80d..637177c 100644 --- a/src/fauxton/app/addons/config/resources.js +++ b/src/fauxton/app/addons/config/resources.js @@ -12,12 +12,15 @@ define([ "app", - "api" + "api", + "addons/fauxton/components" ], -function (app, FauxtonAPI) { +function (app, FauxtonAPI, Components) { var Config = FauxtonAPI.addon(); + var Events = {}; + Config.Events = _.extend(Events, Backbone.Events); Config.Model = Backbone.Model.extend({}); Config.OptionModel = Backbone.Model.extend({ @@ -121,12 +124,62 @@ function (app, FauxtonAPI) { template: "addons/config/templates/dashboard", events: { - "click #add-section": "addSection", - "submit #add-section-form": "submitForm" + "click #add-section": "addSection" }, - submitForm: function (event) { + initialize: function(){ + Config.Events.on("newSection", this.render); + }, + + addSection: function (event) { event.preventDefault(); + this.modal.show(); + }, + + beforeRender: function() { + this.modal = this.insertView("#add-section-modal", new Config.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 Config.ViewItem({ + model: new Config.OptionModel({ + section: config.get("section"), + name: option.name, + value: option.value, + index: index + }) + })); + }, this); + }, this); + }, + + establish: function() { + return [this.collection.fetch()]; + } + }); + + Config.Modal = FauxtonAPI.View.extend({ + className: "modal hide fade", + template: "addons/config/templates/modal", + events: { + "submit #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(), @@ -148,33 +201,52 @@ function (app, FauxtonAPI) { }); } - this.$("#add-section-modal").modal('hide'); - this.render(); - }, + this.hide(); + Config.Events.trigger("newSection"); - addSection: function (event) { + }, + 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(); + + if(!this.isSection()){ + var notification = FauxtonAPI.addNotification({ + msg: "You need to use an existing section.", + type: "error", + clear: true, + selector: ".form-error-config" + }); + } else if (!name) { + var notification = FauxtonAPI.addNotification({ + msg: "Add a name.", + type: "error", + clear: true, + selector: ".form-error-config" + }); + } else if (!value) { + var notification = FauxtonAPI.addNotification({ + msg: "Add a value", + type: "error", + clear: true, + selector: ".form-error-config" + }); + } else { + this.submitForm(); + } }, - - beforeRender: function() { - this.collection.each(function(config) { - _.each(config.get("options"), function (option, index) { - this.insertView("table.config tbody", new Config.ViewItem({ - model: new Config.OptionModel({ - section: config.get("section"), - name: option.name, - value: option.value, - index: index - }) - })); - }, this); - }, this); + show: function(){ + $(this.el).modal({show:true}); }, - - establish: function() { - return [this.collection.fetch()]; + hide: function(){ + $(this.el).modal('hide'); } + }); return Config; http://git-wip-us.apache.org/repos/asf/couchdb/blob/f62790d8/src/fauxton/app/addons/config/templates/dashboard.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/config/templates/dashboard.html b/src/fauxton/app/addons/config/templates/dashboard.html index b7dbc55..e569995 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. -->
- +
@@ -28,23 +28,4 @@ the License.
- +
http://git-wip-us.apache.org/repos/asf/couchdb/blob/f62790d8/src/fauxton/app/addons/config/templates/modal.html ---------------------------------------------------------------------- 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 0000000..2ba53ca --- /dev/null +++ b/src/fauxton/app/addons/config/templates/modal.html @@ -0,0 +1,33 @@ + + +
+ +

Create Config Option

+
+
+
+
+ + + Enter an existing section name to add to it. + +
+ +
+ + +
+
+
http://git-wip-us.apache.org/repos/asf/couchdb/blob/f62790d8/src/fauxton/app/addons/fauxton/components.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/fauxton/components.js b/src/fauxton/app/addons/fauxton/components.js index 71d78b1..b15e429 100644 --- a/src/fauxton/app/addons/fauxton/components.js +++ b/src/fauxton/app/addons/fauxton/components.js @@ -133,32 +133,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({ @@ -202,6 +177,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;