First cut at rendering notes into stories

app/views/layouts/application.html.erb

@@ -21,6 +21,7 @@
     'views/form_view',
     'views/iteration_view',
     'views/note_form',
+    'views/note_view',
     'views/project_velocity_view',
     'views/project_view',
     'views/story_view',

app/views/projects/show.html.erb

@@ -63,6 +63,10 @@
   {{/if}}
 </script>
 
+<script id="note_tmpl" type="text/x-jQuery-tmpl">
+  <p class="note">${note.note}</p>
+</script>
+
 <script type="text/javascript">
 $(function() {
   var project = new Project(<%= @project.to_json.html_safe %>);

public/javascripts/collections/note_collection.js

@@ -1,6 +1,7 @@
 var NoteCollection = Backbone.Collection.extend({
   model: Note,
+
   url: function() {
-    return	this.collection.story.url() + '/notes'
+    return this.story.url() + '/notes';
   }
-});
+});

public/javascripts/models/note.js

@@ -1,8 +1,3 @@
 var Note = Backbone.Model.extend({
-  name: 'note',
-
-  initialize: function(args) {
-
-    this.maybeUnwrap(args);
-  }
-});
+  name: 'note'
+});

public/javascripts/models/story.js

@@ -3,15 +3,13 @@ var Story = Backbone.Model.extend({
 
   initialize: function(args) {
     this.bind('change:state', this.changeState);
+    this.bind('change:notes', this.populateNotes);
 
     // FIXME Call super()?
     this.maybeUnwrap(args);
 
-		if (!this.isNew()) {
-      this.notes = new NoteCollection;
-      this.notes.url = this.url() + '/notes';
-      this.notes.story = this;
-    }
+    this.initNotes();
+
   },
 
   changeState: function(model, new_value) {
@@ -215,6 +213,19 @@ var Story = Backbone.Model.extend({
     return _.map(this.get('labels').split(','), function(label) {
       return $.trim(label);
     });
+  },
+
+  // Initialize the notes collection on this story, and populate if necessary
+  initNotes: function() {
+    this.notes = new NoteCollection();
+    this.notes.story = this;
+    this.populateNotes();
+  },
+
+  // Resets this stories notes collection
+  populateNotes: function() {
+    var notes = this.get("notes") || [];
+    this.notes.reset(notes);
   }
 
 });

public/javascripts/views/note_form.js

@@ -13,45 +13,41 @@ var NoteForm = FormView.extend({
 	},
 
 	events: {
-    "click #note-submit": "save"
+    "click input": "saveEdit"
 	},
 
-	save: function() {
+	saveEdit: function() {
 		console.debug(this.model);
-		/*
     this.model.set(this.changed_attributes);
-    this.disableForm();
+    //this.disableForm();
 
-    var that = this;
+    var view = this;
     this.model.save(null, {
       success: function(model, response) {
-        that.model.set({editing: false});
-        that.enableForm();
+        view.model.set({editing: false});
+        //view.enableForm();
       },
       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()});
-        that.enableForm();
+        //view.enableForm();
       }
     });
-*/
   },
 
   render: function() {
-    $(this.el).empty();
+    var view = this;
 
     div = this.make('div');
     $(div).append(this.label("note", "Note"));
     $(div).append('<br/>');
     $(div).append(this.textArea("note"));
-    //$(this.el).append(div);
 
-    //div = this.make('div');
-    $(div).append($(this.submit()).attr('id', 'note-submit'));
-    $(this.el).append(div);
-
-		console.debug(this.el);
+    var submit = this.make('input', {id: 'note_submit', type: 'button', value: 'Add note'});
+    $(submit).bind('click', function() { view.saveEdit(); });
+    $(div).append(submit);
+    $(this.el).html(div);
 
     return this;
   }

public/javascripts/views/note_view.js

@@ -0,0 +1,10 @@
+var NoteView = Backbone.View.extend({
+  tagName: 'div',
+
+  className: 'note',
+
+  render: function() {
+    $(this.el).html($('#note_tmpl').tmpl(this.model.toJSON()));
+    return this;
+  }
+});

public/javascripts/views/story_view.js

@@ -281,11 +281,25 @@ var StoryView = FormView.extend({
       this.initTags();
 
       if (!this.model.isNew()) {
-      	div = this.make('div');
-        var note = new NoteForm({model: new Note({text: 'New Comment' })});
-				$(div).append(note.render().el);
-        $(this.el).append(div);
-    	}
+        // Add a new unsaved note to the collection.  This will be rendered
+        // as a form.
+        this.model.notes.add([{note: 'New note'}]);
+      }
+
+      if (this.model.notes.length > 0) {
+        var el = $(this.el);
+        el.append('<hr/>');
+        el.append('<h3>Notes</h3>');
+        this.model.notes.each(function(note) {
+          var view;
+          if (note.isNew()) {
+            view = new NoteForm({model: note});
+          } else {
+            view = new NoteView({model: note});
+          }
+          el.append(view.render().el);
+        });
+      }
 
     } else {
       $(this.el).html($('#story_tmpl').tmpl(this.model.toJSON(), {story: this.model, view: this}));

spec/javascripts/collections/note_collection.spec.js

@@ -2,12 +2,20 @@ describe('NoteCollection collection', function() {
 
 
   beforeEach(function() {
-    this.story = new Story({id: 1, title: "Story", position: '10.0'});
-		this.note1 = new Note({id: 1, text: "Note text 1"})
-		this.note2 = new Note({id: 1, text: "Note text 2"})
-		this.note3 = new Note({id: 1, text: "Note text 3"})
-
-    this.story.notes.add([this.note1, this.note2, this.note1]);
+    var Story = Backbone.Model.extend({name: 'story'});
+    this.story = new Story({url: '/foo'});
+    this.story.url = function() { return '/foo'; };
+
+    this.note_collection = new NoteCollection();
+    this.note_collection.story = this.story;
+  });
+
+  describe("url", function() {
+
+    it("should return the url", function() {
+      expect(this.note_collection.url()).toEqual('/foo/notes');
+    });
+
   });
 
-});
+});

spec/javascripts/collections/story_collection.spec.js

@@ -7,6 +7,7 @@ describe('StoryCollection collection', function() {
     this.story1.labels = this.story2.labels = this.story3.labels = function() { return []; };
 
     this.stories = new StoryCollection();
+    this.stories.url = '/foo';
     this.stories.add([this.story3, this.story2, this.story1]);
   });
 

spec/javascripts/models/note.spec.js

@@ -0,0 +1,5 @@
+describe("Note", function() {
+  it("should initialize a note", function() {
+    var note = new Note();
+  });
+});

spec/javascripts/models/story.spec.js

@@ -314,4 +314,24 @@ describe('Story model', function() {
 
   });
 
+  describe("notes", function() {
+
+    it("should default with an empty notes collection", function() {
+      expect(this.story.notes.length).toEqual(0);
+    });
+
+    it("should set the right notes collection url", function() {
+      expect(this.story.notes.url()).toEqual('/foo/999/notes');
+    });
+
+    it("should set a notes collection", function() {
+      var story = new Story({
+        notes: [{"note":{"text": "Dummy note"}}]
+      });
+
+      expect(story.notes.length).toEqual(1);
+    });
+
+  });
+
 });

spec/javascripts/support/jasmine.yml

@@ -25,12 +25,16 @@ src_files:
   - public/javascripts/bootstrap-popover.js
   - public/javascripts/backbone.rails.js
   - public/javascripts/models/iteration.js
+  - public/javascripts/models/note.js
   - public/javascripts/models/project.js
   - public/javascripts/models/story.js
   - public/javascripts/models/user.js
+  - public/javascripts/collections/note_collection.js
   - public/javascripts/collections/story_collection.js
   - public/javascripts/collections/user_collection.js
   - public/javascripts/views/form_view.js
+  - public/javascripts/views/note_form.js
+  - public/javascripts/views/note_view.js
   - public/javascripts/views/story_view.js
   - public/javascripts/views/iteration_view.js
 

spec/javascripts/views/note_form.spec.js

@@ -0,0 +1,11 @@
+describe("NoteForm", function() {
+
+  beforeEach(function() {
+    this.view = new NoteForm({model: {}});
+  });
+
+  it("should have a tag name of div", function() {
+    //expect(this.view.el.nodeName).toEqual('DIV');
+  });
+
+});

spec/javascripts/views/note_view.spec.js

@@ -0,0 +1,15 @@
+describe('NoteView', function() {
+
+  beforeEach(function() {
+    this.view = new NoteView();
+  });
+
+  it("has div as the tag name", function() {
+    expect(this.view.el.nodeName).toEqual('DIV');
+  });
+
+  it("has the note class", function() {
+    expect($(this.view.el)).toHaveClass('note');
+  });
+
+});

spec/javascripts/views/story_view.spec.js

@@ -4,6 +4,8 @@ describe('StoryView', function() {
     window.projectView = {
       availableTags: []
     };
+    var Note = Backbone.Model.extend({name: 'note'});
+    var NotesCollection = Backbone.Collection.extend({model: Note});
     var Story = Backbone.Model.extend({
       name: 'story', defaults: {story_type: 'feature'},
       estimable: function() { return true; },
@@ -20,6 +22,7 @@ describe('StoryView', function() {
     });
     this.story = new Story({id: 999, title: 'Story'});
     this.new_story = new Story({title: 'New Story'});
+    this.story.notes = this.new_story.notes = new NotesCollection();
     this.view = new StoryView({
       model: this.story
     });