2071 better create db ui

src/fauxton/app/addons/databases/templates/new_database_modal.html

@@ -0,0 +1,39 @@
+<!--
+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:https://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 hide fade">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h3>Create Database</h3>
+ </div>
+ <div class="modal-body">
+ <form id="add-db-check" class="form" method="post">
+ <p>
+ 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.
+ </p>
+ <input class="input-block-level" type="text" name="db_name" id="db_name"></input>
+ <br/>
+ <div id="modal-error" class="alert alert-error hide" style="font-size: 16px;"></div>
+ </form>
+ </div>
+ <div class="modal-footer">
+ <button data-dismiss="modal" data-bypass="true" class="btn cancel-button">
+ <i class="icon fonticon-circle-x"></i> Cancel</button>
+ <button id="add-db-btn" data-bypass="true" class="btn btn-primary save">
+ <i class="icon fonticon-circle-check"></i> Create</button>
+ </div>
+</div>
+

src/fauxton/app/addons/databases/templates/newdatabase.html

@@ -14,3 +14,4 @@
 
 <a class="btn btn-primary new" id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
 
+<div id="add-db-modal"> </div>

src/fauxton/app/addons/databases/templates/sidebar.html

@@ -29,3 +29,5 @@
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
 </div>
+
+<div id="add-db-modal"> </div>

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
+ })
  );
  },
 

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

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;