get drag and drop for projects running

app/views/projects/destroy.js.erb

@@ -7,6 +7,6 @@ set_page_badge(<%=@down_count%>);
 function remove_deleted_project() {
   $('div#<%=dom_id(@project, "container")%>').slideUp(1000,
     function() {
-      $('div#<%=dom_id(@project, "container")%>').remove()
+      $('div#<%=dom_id(@project, "container")%>').remove();
     });
 }

app/views/projects/update.js.erb

@@ -5,8 +5,7 @@
   <% if source_view_is :project_list -%>
 
     <% if @state_changed -%>
-      remove_project();
-      add_project();
+      remove_and_re_add_project();
     <% else -%>
       replace_project_form_with_updated_project();
     <% end -%>
@@ -46,7 +45,7 @@ function show_errors() {
 }
 
 function remove_project_edit_form() {
-  $('#<%=dom_id(@project, 'edit')%>').hide(500);
+  $('#<%=dom_id(@project, 'edit')%>').hide(500, function() {$('#<%=dom_id(@project, 'edit')%>').remove();} );
 }
 
 function update_and_show_project_settings() {
@@ -60,7 +59,7 @@ function update_sidebar() {
 
 function update_sortable() {
   <%#* page.sortable "list-#{@project.state}-projects", get_listing_sortable_options("list-#{@project.state}-projects")-%>
-  console.log("Pending: update_sortable() on update project");
+  /*console.log("Pending: update_sortable() on update project");*/
 }
 
 function replace_project_form_with_updated_project() {
@@ -70,13 +69,11 @@ function replace_project_form_with_updated_project() {
   });
 }
 
-function remove_project() {
+function remove_and_re_add_project() {
   $('#<%=dom_id(@project, 'container')%>').slideUp(500, function() {
-    $('#<%=dom_id(@project, 'container')%>').remove();});
-}
-
-function add_project() {
-  $('#list-<%=@project.state%>-projects').append(html_for_project_listing);
+    $('#<%=dom_id(@project, 'container')%>').remove();
+    $('#list-<%=@project.state%>-projects').append(html_for_project_listing);
+    });
 }
 
 <%

features/manage_list_of_projects.feature

@@ -38,7 +38,7 @@ Feature: Manage the list of projects
     And the badge should show 2
     And the project list badge for "active" projects should show 2
 
-  @selenium, @wip
+  @selenium
   Scenario: Changing project state will move project to other state list
     When I go to the projects page
     Then the project "manage me" should be in state list "active"
@@ -49,7 +49,13 @@ Feature: Manage the list of projects
     And the project list badge for "active" projects should show 2
     And the project list badge for "hidden" projects should show 1
 
+  @selenium
   Scenario: Dragging a project to change list order of projects
+    When I go to the projects page
+    Then the project "manage me" should be above the project "upgrade jquery"
+    When I drag the project "manage me" below "upgrade jquery"
+    Then the project "upgrade jquery" should be above the project "manage me"
+
   Scenario: Adding a new project
   Scenario: Adding a new project and take me to the project page
   Scenario: Hiding and unhiding the new project form

features/step_definitions/generic_steps.rb

@@ -1,5 +1,4 @@
 Then /the badge should show (.*)/ do |number|
-  # puts response.body.inspect
   badge = -1
   xpath= "//span[@id='badge_count']"
 

features/step_definitions/project_list_steps.rb

@@ -9,6 +9,31 @@ When /^I delete project "([^"]*)"$/ do |project_name|
   end
 end
 
+When /^I drag the project "([^"]*)" below "([^"]*)"$/ do |project_drag, project_drop|
+  drag_id = @current_user.projects.find_by_name(project_drag).id
+  drop_id = @current_user.projects.find_by_name(project_drop).id
+
+  container_height = selenium.get_element_height("//div[@id='container_project_#{drag_id}']").to_i
+  vertical_offset = container_height*2
+  coord_string = "10,#{vertical_offset}"
+
+  drag_project_handle_xpath = "//div[@id='project_#{drag_id}']//span[@class='handle']"
+  drop_project_container_xpath = "//div[@id='container_project_#{drop_id}']"
+
+  selenium.mouse_down_at(drag_project_handle_xpath,"2,2")
+  selenium.mouse_move_at(drop_project_container_xpath,coord_string)
+  # selenium.mouse_over(drop_project_container_xpath)
+  selenium.mouse_up_at(drop_project_container_xpath,coord_string)
+end
+
+Then /^the project "([^"]*)" should be above the project "([^"]*)"$/ do |project_high, project_low|
+  high_id = @current_user.projects.find_by_name(project_high).id
+  low_id = @current_user.projects.find_by_name(project_low).id
+  high_pos = selenium.get_element_position_top("//div[@id='project_#{high_id}']").to_i
+  low_pos = selenium.get_element_position_top("//div[@id='project_#{low_id}']").to_i
+  (high_pos < low_pos).should be_true
+end
+
 Then /^the project "([^"]*)" should not be in state list "([^"]*)"$/ do |project_name, state_name|
   project = @current_user.projects.find_by_name(project_name)
   project.should_not be_nil
@@ -24,5 +49,5 @@ Then /^the project "([^"]*)" should be in state list "([^"]*)"$/ do |project_nam
 end
 
 Then /^the project list badge for "([^"]*)" projects should show (\d+)$/ do |state_name, count|
-  selenium.get_text("css=span##{state_name}-projects-count").should == count
+  selenium.get_text("xpath=//span[@id='#{state_name}-projects-count']").should == count
 end

features/step_definitions/project_steps.rb

@@ -79,8 +79,9 @@ When /^I edit the project state of "([^"]*)" to "([^"]*)"$/ do |project_name, st
     :wait_for => :text,
     :text => /(Project saved|1 error prohibited this project from being saved)/
 
-  selenium.wait_for_element("list-#{state_name}-projects-container")
-
+  wait_for do # wait for the form to go away
+    !selenium.is_element_present("submit_project_#{project.id}")
+  end
 end
 
 Then /^I should see the bold text "([^\"]*)" in the project description$/ do |bold|

public/javascripts/application.js

@@ -51,12 +51,18 @@ var ProjectListPage = {
       $('#completed-projects-count').html(completed);
     },
     show_or_hide_state_container: function (show_active, show_hidden, show_completed) {
-      active = $('#list-active-projects-container');
-      hidden = $('#list-hidden-projects-container');
-      completed = $('#list-completed-projects-container');
-      if (show_active) { active.show(); } else { active.hide(); }
-      if (show_hidden) { hidden.show(); } else { hidden.hide(); }
-      if (show_completed) { completed.show(); } else { completed.hide(); }
+        $(["active", "hidden", "completed"]).each(function() {
+            container = $('#list-'+this+'-projects-container');
+            set_state_container_visibility(container, eval('show_'+this));
+        });
+
+      function set_state_container_visibility (container, set_visible) {
+        if (set_visible) {
+            container.slideDown("fast");
+        } else {
+            container.slideUp("fast"); 
+        }
+      }
     }
 }