refactor sidebar and finish migration of notes

app/controllers/notes_controller.rb

@@ -26,24 +26,18 @@ class NotesController < ApplicationController
   end
 
   def create
-    note = current_user.notes.build
-    note.attributes = params["note"]
+    @note = current_user.notes.build
+    @note.attributes = params["note"]
 
-    saved = note.save
+    @saved = @note.save
 
     respond_to do |format|
-      format.js do
-        if note.save
-          render :partial => 'notes_summary', :object => note
-        else
-          render :text => ''
-        end
-      end
+      format.js 
       format.xml do
-        if saved
-          head :created, :location => note_url(note), :text => "new note with id #{note.id}"
+        if @saved
+          head :created, :location => note_url(@note), :text => "new note with id #{@note.id}"
         else
-          render_failure note.errors.full_messages.join(', ')
+          render_failure @note.errors.full_messages.join(', ')
         end
       end
       format.html do

app/controllers/projects_controller.rb

@@ -56,6 +56,8 @@ class ProjectsController < ApplicationController
     @next_project = current_user.projects.next_from(@project)
     @previous_project = current_user.projects.previous_from(@project)
     @default_tags = @project.default_tags
+    @new_note = current_user.notes.build
+    @new_note.project_id = @project.id
     respond_to do |format|
       format.html
       format.m     &render_project_mobile

app/helpers/application_helper.rb

@@ -246,4 +246,21 @@ module ApplicationHelper
     note = Sanitize.clean(note, Sanitize::Config::RELAXED)
     return note
   end
+
+  def sidebar_html_for_titled_list (list, title)
+    return content_tag(:h3, title+" (#{list.length})") +
+      content_tag(:ul, sidebar_html_for_list(list))
+  end
+
+  def sidebar_html_for_list(list)
+    if list.empty?
+      return content_tag(:li, t('sidebar.list_empty'))
+    else
+      return list.inject("") do |html, item|
+        link = (item.class == "Project") ? link_to_project( item ) : link_to_context(item)
+        html << content_tag(:li, link + " (" + count_undone_todos_phrase(item,"actions")+")")
+      end
+    end
+  end
+
 end

app/views/notes/_note_edit_form.rhtml

@@ -1,7 +1,8 @@
+<% submit_text ||= t('common.update') -%>
 <% form_for(note_edit_form, :html => {
     :id => dom_id(note_edit_form, 'edit_form'),
     :class => "inline-form edit-note-form",
-    :method => :put }) do |f|
+    :method => :post }) do |f|
   -%>
 
   <div id="error_status"><%= error_messages_for("note") %></div>
@@ -13,7 +14,7 @@
     <div class="widgets">
       <button type="submit" class="positive" id="<%= dom_id(note_edit_form, 'submit') %>" tabindex="15">
         <%=image_tag("accept.png", :alt => "") %>
-        <%= t 'common.update' %>
+        <%= submit_text %>
       </button>
       <a href="" class="negative" id="neg_<%=dom_id(note_edit_form, 'edit_form')%>">
         <%=image_tag("cancel.png", :alt => "") %>

app/views/notes/_notes_summary.rhtml

@@ -1,6 +1,11 @@
 <% note = notes_summary -%>
 <div class="note_wrapper" id="<%= dom_id(note) %>">
-<%= link_to( image_tag("blank.png", :border => 0), note_path(note), :title => t('notes.show_note_title'), :class => "link_to_notes icon") %>&nbsp;
+<%= link_to( 
+  image_tag("blank.png", :border => 0),
+  note_path(note),
+  :title => t('notes.show_note_title'),
+  :class => "link_to_notes icon",
+  :id => dom_id(note, "link")) %>&nbsp;
 <%= rendered_note(note) %>
 </div>
 <% note = nil -%>

app/views/notes/create.js.erb

@@ -0,0 +1,25 @@
+<% if @saved -%>
+  TracksForm.hide_errors();
+  add_note();
+  clear_form();
+<% else -%>
+  TracksForm.show_errors(html_for_error_messages());
+<% end -%>
+
+function add_note() {
+  $('div#notes').append(html_for_note_summary());
+  $('#empty-n').hide();
+}
+
+function clear_form() {
+  $('#new-note').hide();
+  $('#edit-note-form').clearForm();
+}
+
+function html_for_error_messages() {
+  return "<%= escape_javascript(error_messages_for('project')) %>";
+}
+
+function html_for_note_summary() {
+  return "<%= @saved ? escape_javascript(render(:partial => 'notes_summary', :object => @note)) : "" %>";
+}

app/views/notes/update.js.erb

@@ -4,14 +4,9 @@
   replace_note_form_with_updated_note();
 
 <% else -%>
-  show_errors();
+  TracksForm.show_errors(html_for_error_messages());
 <% end %>
 
-function show_errors() {
-  $('div#edit_error_status').html(html_for_error_messages());
-  $('div#edit_error_status').show();
-}
-
 function replace_note_form_with_updated_note() {
   $('#<%= dom_id(@note, 'edit')%>').fadeOut(250, function() {
     $('#<%= dom_id(@note, 'edit')%>').html(html_for_updated_note_form());

app/views/projects/show.html.erb

@@ -11,7 +11,7 @@
 
   <div class="container">
     <div id="notes">
-    <div class="add_note_link"><%= link_to t('projects.add_note'), '#' %> </div>
+      <div class="add_note_link"><%= link_to t('projects.add_note'), '#' %> </div>
       <h2>Notes</h2>
       <div id="empty-n" style="display:<%= @project.notes.empty? ? 'block' : 'none'%>;">
         <%= render :partial => "shared/empty",
@@ -22,18 +22,9 @@
   </div>
 
   <div id="new-note" style="display:none;">
-    <% form_remote_tag :url => notes_path,
-      :method => :post,
-      :update => "notes",
-      :position => "bottom",
-      :complete => "$('#notes').effect('highlight', 1000);$('#empty-n').hide();$('#new-note form').clearForm();",
-      :html => {:id=>'form-new-note', :class => 'inline-form'} do %>
-      <%= hidden_field( "note", "project_id", "value" => "#{@project.id}" ) %>
-      <%= text_area( "note", "body", "cols" => 50, "rows" => 3, "tabindex" => 1 ) %>
-      <br /><br />
-      <input type="submit" value="<%= t('projects.add_note_submit') %>" name="add-new-note" tabindex="2" />
-    <% end -%>
+    <%= render :partial => "notes/note_edit_form", :object => @new_note, :locals => {:submit_text => t('projects.add_note_submit')} %>
   </div>
+
 </div>
 
 <div id="input_box">

app/views/sidebar/_context.rhtml

@@ -1 +0,0 @@
-<li><%= link_to_context( context ) + " (" + count_undone_todos_phrase(context,"actions") + ")"%></li>

app/views/sidebar/_context_list.rhtml

@@ -1,8 +0,0 @@
-<h3><%= list_name %> (<%= contexts.length %>)</h3>
-<ul>
-  <% if contexts.empty? -%>
-    <li><%= t('sidebar.list_empty') %></li>
-  <% else -%>
-    <%= render :partial => "sidebar/context", :collection => contexts -%>
-  <% end -%>
-</ul>

app/views/sidebar/_project.rhtml

@@ -1 +0,0 @@
-<li><%= link_to_project( project ) + " (" + count_undone_todos_phrase(project,"actions") + ")" %></li>

app/views/sidebar/_project_list.rhtml

@@ -1,8 +0,0 @@
-<h3><%= list_name %> (<%= projects.length %>)</h3>
-<ul>
-  <% if projects.empty? %>
-    <li><%= t('sidebar.list_empty') %></li>
-  <% else %>
-    <%= render :partial => "sidebar/project", :collection => projects %>
-  <% end %>
-</ul>

app/views/sidebar/sidebar.html.erb

@@ -1,30 +1,13 @@
 <div id="sidebar">
-  <% # show active items before hidden / completed items -%>
-
-  <%= render :partial => "sidebar/project_list",
-    :locals => { :list_name => t('sidebar.list_name_active_projects'),
-    :projects => @active_projects } -%>
-
-  <%= render :partial => "sidebar/context_list",
-    :locals => { :list_name => t('sidebar.list_name_active_contexts'),
-    :contexts => @active_contexts } -%>
-
+  <%= sidebar_html_for_titled_list(@active_projects, t('sidebar.list_name_active_projects'))%>
+  <%= sidebar_html_for_titled_list(@active_contexts, t('sidebar.list_name_active_contexts'))%>
   <% if prefs.show_hidden_projects_in_sidebar -%>
-    <%= render :partial => "sidebar/project_list",
-      :locals => { :list_name => t('sidebar.list_name_hidden_projects'),
-      :projects => @hidden_projects } -%>
+    <%= sidebar_html_for_titled_list(@hidden_projects, t('sidebar.list_name_hidden_projects'))%>
   <% end -%>
-
   <% if prefs.show_completed_projects_in_sidebar -%>
-    <%= render :partial => "sidebar/project_list",
-      :locals => { :list_name => t('sidebar.list_name_completed_projects'),
-      :projects => @completed_projects } -%>
+    <%= sidebar_html_for_titled_list(@completed_projects, t('sidebar.list_name_completed_projects'))%>
   <% end -%>
-
   <% if prefs.show_hidden_contexts_in_sidebar -%>
-    <%= render :partial => "sidebar/context_list",
-      :locals => { :list_name => t('sidebar.list_name_hidden_contexts'),
-      :contexts => @hidden_contexts } -%>
+    <%= sidebar_html_for_titled_list(@hidden_contexts, t('sidebar.list_name_hidden_contexts'))%>
   <% end -%>
-
 </div>

features/project_edit.feature

@@ -63,26 +63,31 @@ Feature: Edit a project
     When I try to edit the project name of "manage me" to "test"
     Then I should see "Name already exists"
 
-  @selenium @wip
+  @selenium
   Scenario: I can go to the note of a project
-    Given I have a project "test" with 2 note
+    Given I have a project "test" with 2 notes
     When I visit the "test" project
-    Then I should see 2 notes
     When I click on the first note icon
     Then I should go to that note page
 
-  @selenium @wip
+  @selenium
   Scenario: I can add a note to the project
-    Given I have a project "test"
+    Given I have a project called "test"
     When I visit the "test" project
-    And I add a note "hello I'm testing"
-    Then I should see one note
+    And I add a note "hello I'm testing" to the project
+    Then I should see one note in the project
 
-  @selenium @wip
+  @selenium @focus
+  Scenario: Cancelling adding a note to the project will remove form
+    Given I have a project called "test"
+    When I visit the "test" project
+    And I cancel adding a note to the project
+    Then the form for adding a note should not be visible
+
+  @selenium 
   Scenario: Long notes in a project are shown cut off
-    Given I have a project "test"
+    Given I have a project called "test"
     When I visit the "test" project
-    And I add a note "test 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234 TOO LONG"
+    And I add a note "test 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234 TOO LONG" to the project
     Then I should not see "test 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234 TOO LONG"
-    And I should see "test 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234"
-
+    And I should see "test 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234"

features/step_definitions/project_steps.rb

@@ -86,7 +86,6 @@ When /^I try to edit the project name of "([^"]*)" to "([^"]*)"$/ do |project_cu
   When "I try to edit the project name to \"#{project_new_name}\""
 end
 
-
 When /^I edit the project name in place to be "([^"]*)"$/ do |new_project_name|
   selenium.click "project_name"
   fill_in "value", :with => new_project_name
@@ -115,6 +114,42 @@ When /^I edit the project state of "([^"]*)" to "([^"]*)"$/ do |project_name, st
   end
 end
 
+When /^I add a note "([^"]*)" to the project$/ do |note_body|
+  click_link "Add a note"
+  fill_in "note[body]", :with => note_body
+  click_button "Add note"
+end
+
+When /^I click on the first note icon$/ do
+  @project.should_not be_nil
+  @note = @project.notes.first # assume first note is also first on screen
+  @note.should_not be_nil
+
+  click_link "link_note_#{@note.id}"
+end
+
+When /^I cancel adding a note to the project$/ do
+  click_link "Add a note"
+  fill_in "note[body]", :with => "will not save this"
+  click_link "neg_edit_form_note"
+end
+
+Then /^the form for adding a note should not be visible$/ do
+  wait_for do # wait for the form to go away
+    !selenium.is_visible("edit_form_note")
+  end
+end
+
+Then /^I should go to that note page$/ do
+  current_path = URI.parse(current_url).path
+  note_path = note_path(@note)
+  current_path.should == note_path
+end
+
+Then /^I should see one note in the project$/ do
+  selenium.wait_for_element("xpath=//div[@class='note_wrapper']")
+end
+
 Then /^I should see the bold text "([^\"]*)" in the project description$/ do |bold|
   xpath="//div[@class='project_description']/p/strong"
 

features/step_definitions/todo_steps.rb

@@ -118,7 +118,6 @@ When /^I edit the dependency of "([^"]*)" to '([^'']*)'$/ do |todo_name, deps|
   fill_in "predecessor_list_todo_#{todo.id}", :with => deps
   # submit form
   selenium.click("//div[@id='edit_todo_#{todo.id}']//button[@id='submit_todo_#{todo.id}']", :wait_for => :ajax, :javascript_framework => :jquery)
-  
 end
 
 Then /^there should not be an error$/ do
@@ -126,7 +125,6 @@ Then /^there should not be an error$/ do
   selenium.is_visible("edit_todo_#{@dep_todo.id}").should == false
 end
 
-
 Then /^the dependencies of "(.*)" should include "(.*)"$/ do |child_name, parent_name|
   parent = @current_user.todos.find_by_description(parent_name)
   parent.should_not be_nil

features/support/paths.rb

@@ -47,7 +47,8 @@ module NavigationHelpers
     when /the "([^\"]*)" project for user "([^\"]*)"/i
       project_path(User.find_by_login($2).projects.find_by_name($1))
     when /the "([^\"]*)" project/i
-      project_path(@current_user.projects.find_by_name($1))
+      @project = @current_user.projects.find_by_name($1)
+      project_path(@project)
 
       # Add more mappings here.
       # Here is an example that pulls values out of the Regexp:

public/javascripts/application.js

@@ -106,6 +106,13 @@ var IntegrationsPage = {
 
 var NotesPage = {
   setup_behavior: function() {
+    /* Add note */
+    $(".add_note_link a").live('click', function(){
+      $('#new-note').show();
+      $('textarea#note_body').val('');
+      $('textarea#note_body').focus();
+    });
+
     /* delete button for note */
     $('a.delete_note_button').live('click', function(evt){
       evt.preventDefault();
@@ -126,7 +133,13 @@ var NotesPage = {
     /* cancel button when editing a note */
     $('.edit-note-form a.negative').live('click', function(){
       dom_id = this.id.substr(14);
-      $('#'+dom_id).toggle(); $('#edit_'+dom_id).hide();
+      /* dom_id == 'note_XX' on notes page and just 'note' on project page */
+      if (dom_id == 'note') {
+        $('#new-note').hide();
+      } else {
+        $('#'+dom_id).toggle();
+        $('#edit_'+dom_id).hide();
+      }
       return false;
     });
 
@@ -753,12 +766,6 @@ $(document).ready(function() {
         'Create a new project »', 'Add a project');
       });
 
-  $(".add_note_link a").live('click', function(){
-      $('#new-note').show();
-      $('#new-note form').clearForm();
-      $('#new-note form input:text:first').focus();
-    });
-
   $("#list-active-projects").sortable({handle: '.handle', update: update_order});
   $("#list-hidden-projects").sortable({handle: '.handle', update: update_order});
   $("#list-completed-projects").sortable({handle: '.handle', update: update_order});