diff --git a/src/fauxton/app/addons/databases/templates/new_database_modal.html b/src/fauxton/app/addons/databases/templates/new_database_modal.html new file mode 100644 index 00000000000..2edcd9aeb91 --- /dev/null +++ b/src/fauxton/app/addons/databases/templates/new_database_modal.html @@ -0,0 +1,39 @@ + + +
+
+ +

Create Database

+
+
+
+

+ Create a new database. Database names must begin with a leter and only + lowercase characters (a-z), digits (0-9), or any of the characters _, $, + (, ), +, -, and / are allowed. +

+ +
+ +
+
+
+ + +
+
+ diff --git a/src/fauxton/app/addons/databases/templates/newdatabase.html b/src/fauxton/app/addons/databases/templates/newdatabase.html index 1376ad57bda..b2b60f5f233 100644 --- a/src/fauxton/app/addons/databases/templates/newdatabase.html +++ b/src/fauxton/app/addons/databases/templates/newdatabase.html @@ -14,3 +14,4 @@ Add New Database +
diff --git a/src/fauxton/app/addons/databases/templates/sidebar.html b/src/fauxton/app/addons/databases/templates/sidebar.html index a8bbd89ff00..17e6932603c 100644 --- a/src/fauxton/app/addons/databases/templates/sidebar.html +++ b/src/fauxton/app/addons/databases/templates/sidebar.html @@ -29,3 +29,5 @@ + +
diff --git a/src/fauxton/app/addons/databases/views.js b/src/fauxton/app/addons/databases/views.js index 7f23d6598af..baf000fbed4 100644 --- a/src/fauxton/app/addons/databases/views.js +++ b/src/fauxton/app/addons/databases/views.js @@ -12,7 +12,7 @@ define([ "app", - + "addons/fauxton/components", "api", "addons/databases/resources" @@ -28,7 +28,7 @@ function(app, Components, FauxtonAPI, Databases) { return [this.model.fetch()]; }, serialize: function() { - + return { encoded: app.utils.safeURLName(this.model.get("name")), database: this.model, @@ -145,95 +145,89 @@ function(app, Components, FauxtonAPI, Databases) { Views.NewDatabaseButton = FauxtonAPI.View.extend({ template: "addons/databases/templates/newdatabase", + events: { "click a#new": "newDatabase" }, - newDatabase: function() { + + newDatabase: function(){ + this.newDatabaseModal.showModal(); + }, + + beforeRender: function(manage) { + this.newDatabaseModal = this.insertView( + '#add-db-modal', + new Views.NewDatabaseModal({ + collection: this.collection + }) + ); + } + }); + + Views.NewDatabaseModal = Components.ModalView.extend({ + template: "addons/databases/templates/new_database_modal", + + events: { + "click #add-db-btn": "newDatabase", + "submit #add-db-check": "newDatabase" + }, + + newDatabase: function(event) { + event.preventDefault(); var notification; var db; - // TODO: use a modal here instead of the prompt - var name = prompt('Name of database', 'newdatabase'); - if (name === null) { - return; - } else if (name.length === 0) { - notification = FauxtonAPI.addNotification({ - msg: "Please enter a valid database name", - type: "error", - clear: true - }); - return; - } - db = new this.collection.model({ - id: name, - name: name - }); - notification = FauxtonAPI.addNotification({msg: "Creating database."}); - db.save().done(function() { - notification = FauxtonAPI.addNotification({ - msg: "Database created successfully", - type: "success", - clear: true + var name = this.$('#db_name')[0].value; + + if (name === null || name.length === 0 || name.match(/^[a-z][a-z0-9\_\$\(\)\+\/\-]?/g) === null) { + msg = name + " is an invalid database name. "; + msg += "Only lower case letters (a-z), digits (0-9), and any of the "; + msg += "characters _, $, (, ), +, -, / are allowed, and the name "; + msg += "must begin with a letter."; + this.set_error_msg(msg); + } else { + db = new this.collection.model({ + id: encodeURIComponent(name), + name: name }); - var route = "#/database/" + app.utils.safeURLName(name) + "/_all_docs?limit=" + Databases.DocLimit; - app.router.navigate(route, { trigger: true }); - } - ).error(function(xhr) { - var responseText = JSON.parse(xhr.responseText).reason; - notification = FauxtonAPI.addNotification({ - msg: "Create database failed: " + responseText, - type: "error", - clear: true + notification = FauxtonAPI.addNotification({msg: "Creating database."}); + var that = this; + db.save().done(function() { + notification = FauxtonAPI.addNotification({ + msg: "Database created successfully", + type: "success", + clear: true + }); + that.hideModal(); + var route = "#/database/" + name + "/_all_docs?limit=" + Databases.DocLimit; + app.router.navigate(route, { trigger: true }); + }).error(function(xhr) { + var responseText = JSON.parse(xhr.responseText).reason; + that.set_error_msg("Create database failed: " + responseText); }); } - ); } }); Views.Sidebar = FauxtonAPI.View.extend({ template: "addons/databases/templates/sidebar", + events: { "click a#new": "newDatabase", "click a#owned": "showMine", "click a#shared": "showShared" }, - newDatabase: function() { - var notification; - var db; - // TODO: use a modal here instead of the prompt - var name = prompt('Name of database', 'newdatabase'); - if (name === null) { - return; - } else if (name.length === 0) { - notification = FauxtonAPI.addNotification({ - msg: "Please enter a valid database name", - type: "error", - clear: true - }); - return; - } - db = new this.collection.model({ - id: encodeURIComponent(name), - name: name - }); - notification = FauxtonAPI.addNotification({msg: "Creating database."}); - db.save().done(function() { - notification = FauxtonAPI.addNotification({ - msg: "Database created successfully", - type: "success", - clear: true - }); - var route = "#/database/" + name + "/_all_docs?limit=" + Databases.DocLimit; - app.router.navigate(route, { trigger: true }); - } - ).error(function(xhr) { - var responseText = JSON.parse(xhr.responseText).reason; - notification = FauxtonAPI.addNotification({ - msg: "Create database failed: " + responseText, - type: "error", - clear: true - }); - } + newDatabase: function(){ + this.newDatabaseModal.showModal(); + }, + + beforeRender: function(manage) { + // I think this should use the ensure thingy + this.newDatabaseModal = this.insertView( + '#add-db-modal', + new Views.NewDatabaseModal({ + collection: this.collection + }) ); }, diff --git a/src/fauxton/app/addons/fauxton/components.js b/src/fauxton/app/addons/fauxton/components.js index 8b21916a505..bebe8f924d9 100644 --- a/src/fauxton/app/addons/fauxton/components.js +++ b/src/fauxton/app/addons/fauxton/components.js @@ -403,7 +403,7 @@ function(app, FauxtonAPI, ace, spin) { //need to make this into a backbone view... var routeObjectSpinner; FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) { - if (!routeObject.disableLoader){ + if (!routeObject.disableLoader){ var opts = { lines: 16, // The number of lines to draw length: 8, // The length of each line @@ -449,7 +449,7 @@ function(app, FauxtonAPI, ace, spin) { FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view, selector) { removeRouteObjectSpinner(); - if (!view.disableLoader){ + if (!view.disableLoader){ var opts = { lines: 16, // The number of lines to draw length: 8, // The length of each line diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less index 4ec502a2a75..82c65bdc587 100644 --- a/src/fauxton/assets/less/fauxton.less +++ b/src/fauxton/assets/less/fauxton.less @@ -490,9 +490,8 @@ table.databases { max-width: 1500px; .box-shadow(-6px 0 rgba(0, 0, 0, 0.1)); border-left: 1px solid #999; - position: fixed; + position: absolute; left: @navWidth; - right: 0; margin-left: 0; padding-left: 0; padding-right: 0;