Functional doc save and delete, also Ctrl-s support

Save and delete functionality is now working. Added in some additional
notification pieces such as a fade timer and a clear all flag.

Also, document editor now supports Ctrl-s for saving, because, hell yeah.

6 files changed, 111 insertions, 14 deletions

diff --git a/src/fauxton/app/fauxton_api.js b/src/fauxton/app/fauxton_api.js
index b73652c66..95d735be3 100644
--- a/src/fauxton/app/fauxton_api.js
+++ b/src/fauxton/app/fauxton_api.js
@@ -33,8 +33,8 @@ function(app, Dashboard, Fauxton) {
     app.router.route(route.route, route.name, route.callback);
   };
 
-  FauxtonAPI.module = function() {
-    return app.module();
+  FauxtonAPI.module = function(extra) {
+    return app.module(FauxtonAPI.moduleExtensions, extra);
   };
 
   FauxtonAPI.addNotification = function(options) {
diff --git a/src/fauxton/app/modules/databases.js b/src/fauxton/app/modules/databases.js
index 6d3157417..cc89ae94d 100644
--- a/src/fauxton/app/modules/databases.js
+++ b/src/fauxton/app/modules/databases.js
@@ -149,7 +149,7 @@ function(app, FauxtonAPI, Documents, Views) {
           "_id": docID
         })
       };
-      data.doc.collection = data.database;
+      data.doc.database = data.database;
       data.designDocs = new Documents.AllDocs(null, {
         database: data.database,
         params: {startkey: '"_design"',
diff --git a/src/fauxton/app/modules/documents.js b/src/fauxton/app/modules/documents.js
index f434722c8..74b13b5cd 100644
--- a/src/fauxton/app/modules/documents.js
+++ b/src/fauxton/app/modules/documents.js
@@ -17,7 +17,13 @@ function(app, Backbone, Views) {
     idAttribute: "_id",
 
     url: function() {
-      return app.host + "/" + this.collection.id + "/" + this.id;
+      return app.host + "/" + this.getDatabase().id + "/" + this.id;
+    },
+
+    // HACK: the doc needs to know about the database, but it may be
+    // set directly or indirectly in all docs
+    getDatabase: function() {
+      return this.database ? this.database : this.collection.database;
     },
 
     docType: function() {
@@ -32,8 +38,41 @@ function(app, Backbone, Views) {
       return this.id.replace('/', '%2F');
     },
 
+    destroy: function() {
+      var url = this.url() + "?rev=" + this.get('_rev');
+      return $.ajax({
+        url: url,
+        dataType: 'json',
+        type: 'DELETE'
+      });
+    },
+
     pageUrl: function() {
-      return this.collection.database.pageUrl() + "/" + this.safeID();
+      return this.getDatabase().pageUrl() + "/" + this.safeID();
+    },
+
+    parse: function(resp) {
+      if (resp.rev) {
+        resp._rev = resp.rev;
+        delete resp.rev;
+      }
+      if (resp.id) {
+        if (typeof(this.id) === "undefined") {
+          resp._id = resp.id;
+        }
+        delete resp.id;
+      }
+      if (resp.ok) {
+        delete resp.ok;
+      }
+
+      return resp;
+    },
+
+    prettyJSON: function() {
+      var data = this.get("doc") ? this.get("doc") : this;
+
+      return JSON.stringify(data, null, "  ");
     }
   });
 
@@ -54,11 +93,10 @@ function(app, Backbone, Views) {
     },
 
     parse: function(resp) {
-      that = this;
       return _.map(resp.rows, function(row) {
         return {
-          "_id": row.id,
-          rev: row.value.rev,
+          _id: row.id,
+          _rev: row.value.rev,
           value: row.value,
           key: row.key,
           doc: row.doc || undefined
diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index b1bb86de2..cd2f21c4a 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -23,10 +23,37 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
     template: "documents/all_docs_item",
     tagName: "tr",
 
+    events: {
+      "click button.delete": "destroy"
+    },
+
     serialize: function() {
       return {
         doc: this.model
       };
+    },
+
+    destroy: function(event) {
+      event.preventDefault();
+      var that = this;
+
+      if (!window.confirm("Are you sure you want to delete this doc?")) {
+        return false;
+      }
+
+      window.theDoc = this.model;
+      this.model.destroy().then(function(resp) {
+        FauxtonAPI.addNotification({
+          msg: "Succesfully destroyed your doc"
+        });
+        that.$el.fadeOut();
+        that.model.collection.remove(that.id);
+      }, function(resp) {
+        FauxtonAPI.addNotification({
+          msg: "Failed to destroy your doc!",
+          type: "error"
+        });
+      });
     }
   });
 
@@ -87,17 +114,30 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
       "click button.save-doc": "saveDoc"
     },
 
+    initialize: function() {
+      this.model.on("sync", this.updateValues, this);
+    },
+
+    updateValues: function() {
+      notification = FauxtonAPI.addNotification({
+        msg: "Document saved successfully.",
+        type: "success",
+        clear: true
+      });
+      this.editor.setValue(this.model.prettyJSON());
+    },
+
     establish: function() {
       return [this.model.fetch()];
     },
 
     saveDoc: function(event) {
       var json, notification;
-      console.log("CONTENT IS: " + this.hasValidCode());
       if (this.hasValidCode()) {
         json = JSON.parse(this.editor.getValue());
-        console.log("SAVING: ", json);
-        notification = FauxtonAPI.addNotification({msg: "Saving document!"});
+        this.model.set(json);
+        notification = FauxtonAPI.addNotification({msg: "Saving document."});
+        this.model.save();
       } else {
         notification = FauxtonAPI.addNotification({
           msg: "Please fix the JSON errors and try again.",
@@ -151,6 +191,10 @@ function(app, FauxtonAPI, Codemirror, JSHint) {
         lineWrapping: true,
         onChange: function() {
           that.runJSHint();
+        },
+        extraKeys: {
+          "Ctrl-S": function(instance) { that.saveDoc(); },
+          "Ctrl-/": "undo"
         }
       });
     }
diff --git a/src/fauxton/app/modules/fauxton.js b/src/fauxton/app/modules/fauxton.js
index d62792f0e..65ac28e68 100644
--- a/src/fauxton/app/modules/fauxton.js
+++ b/src/fauxton/app/modules/fauxton.js
@@ -79,11 +79,14 @@ function(app, Backbone) {
 
   Fauxton.Notification = Backbone.View.extend({
     template: "fauxton/notification",
+    fadeTimer: 5000,
 
     initialize: function(options) {
       this.msg = options.msg;
       this.type = options.type || "info";
       this.selector = options.selector;
+      this.fade = options.fade === undefined ? true : options.fade;
+      this.clear = options.clear;
     },
 
     serialize: function() {
@@ -93,10 +96,22 @@ function(app, Backbone) {
       };
     },
 
+    delayedFade: function() {
+      var that = this;
+      if (this.fade) {
+        setTimeout(function() {
+          that.$el.fadeOut();
+        }, this.fadeTimer);
+      }
+    },
+
     renderNotification: function(selector) {
       selector = selector || this.selector;
-      $(selector).html('');
+      if (this.clear) {
+        $(selector).html('');
+      }
       this.render().view.$el.appendTo(selector);
+      this.delayedFade();
       return this;
     }
   });
diff --git a/src/fauxton/app/templates/documents/all_docs_item.html b/src/fauxton/app/templates/documents/all_docs_item.html
index b8d058314..379e49246 100644
--- a/src/fauxton/app/templates/documents/all_docs_item.html
+++ b/src/fauxton/app/templates/documents/all_docs_item.html
@@ -1,10 +1,10 @@
  <td class="select"><input type="checkbox"></td>
 <td>
   <div>
-    <pre class="prettyprint"><%= JSON.stringify(doc.get("doc"), null, "  ") %></pre>
+    <pre class="prettyprint"><%= doc.prettyJSON() %></pre>
     <div class="btn-group">
       <a href="#<%= doc.pageUrl() %>" class="btn btn-small edits">Edit <%= doc.docType() %></a>
-      <a href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></a>
+      <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
     </div>
   </div>
 </td>