Disable note form on submit

app/stylesheets/screen.scss

@@ -498,3 +498,13 @@ div.note {
     text-align: right;
   }
 }
+
+.note_form {
+  // The submit button while the server is saving the note.
+  input.saving {
+    padding-left: 16px;
+    background-image: url('/images/throbber.gif');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+}

public/javascripts/views/note_form.js

@@ -2,6 +2,8 @@ var NoteForm = FormView.extend({
 
   tagName: 'div',
 
+  className: 'note_form',
+
   initialize: function() {
 	  // Supply the model with a reference to it's own view object, so it can
     // remove itself from the page when destroy() gets called.
@@ -18,19 +20,17 @@ var NoteForm = FormView.extend({
 
 	saveEdit: function() {
     this.model.set(this.changed_attributes);
-    //this.disableForm();
+    this.disableForm();
 
     var view = this;
     this.model.save(null, {
       success: function(model, response) {
-        view.model.set({editing: false});
-        //view.enableForm();
+        //view.model.set({editing: false});
       },
       error: function(model, response) {
         var json = $.parseJSON(response.responseText);
         model.set({editing: true, errors: json.note.errors});
         App.notice({title: "Save error", text: model.errorMessages()});
-        //view.enableForm();
       }
     });
   },
@@ -48,5 +48,10 @@ var NoteForm = FormView.extend({
     $(this.el).html(div);
 
     return this;
+  },
+
+  disableForm: function() {
+    this.$('input,textarea').attr('disabled', 'disabled');
+    this.$('input[type="button"]').addClass('saving');
   }
 });

public/javascripts/views/story_view.js

@@ -402,7 +402,7 @@ var StoryView = FormView.extend({
 
     // Add a new unsaved note to the collection.  This will be rendered
     // as a form which will allow the user to add a new note to the story.
-    this.model.notes.add([{note: 'New note'}]);
+    this.model.notes.add();
   }
 
 });

spec/javascripts/views/note_form.spec.js

@@ -1,11 +1,43 @@
 describe("NoteForm", function() {
 
   beforeEach(function() {
-    this.view = new NoteForm({model: {}});
+    var Note = Backbone.Model.extend({name: 'note', url: '/foo'});
+    this.note = new Note();
+    this.view = new NoteForm({model: this.note});
   });
 
   it("should have a tag name of div", function() {
-    //expect(this.view.el.nodeName).toEqual('DIV');
+    expect(this.view.el.nodeName).toEqual('DIV');
   });
 
+  it("should have a class of note_form", function() {
+    expect($(this.view.el)).toHaveClass('note_form');
+  });
+
+  describe("saveEdit", function() {
+
+    it("should disable all form controls on submit", function() {
+      var disableSpy = sinon.spy(this.view, 'disableForm');
+      this.view.saveEdit();
+      expect(disableSpy).toHaveBeenCalled();
+    });
+
+  });
+
+  describe("disableForm", function() {
+
+    it("sets disabled state on form tags", function() {
+      $(this.view.el).html('<textarea></textarea><input type="submit">');
+      this.view.disableForm();
+      expect(this.view.$('textarea').attr('disabled')).toBeTruthy();
+      expect(this.view.$('input').attr('disabled')).toBeTruthy();
+    });
+
+    it("sets saving class on the submit button", function() {
+      $(this.view.el).html('<input type="button">');
+      this.view.disableForm();
+      expect(this.view.$('input[type="button"]')).toHaveClass('saving');
+    });
+
+  });
 });