migrate edit update and destroy to jQuery and refactor it

test for changing state is wip, forgot to mark it with @wip

app/controllers/projects_controller.rb

@@ -125,9 +125,7 @@ class ProjectsController < ApplicationController
           @project_not_done_counts[@project.id] = @project.reload().not_done_todos_including_hidden.count
         end
         @contexts = current_user.contexts
-        @active_projects_count = current_user.projects.active.count
-        @hidden_projects_count = current_user.projects.hidden.count
-        @completed_projects_count = current_user.projects.completed.count
+        update_state_counts
         init_data_for_sidebar
         render :template => 'projects/update.js.erb'
         return
@@ -166,11 +164,12 @@ class ProjectsController < ApplicationController
   def destroy
     @project.recurring_todos.each {|rt| rt.remove_from_project!}
     @project.destroy
-    @active_projects_count = current_user.projects.active.count
-    @hidden_projects_count = current_user.projects.hidden.count
-    @completed_projects_count = current_user.projects.completed.count
+
     respond_to do |format|
-      format.js { @down_count = current_user.projects.size }
+      format.js {
+        @down_count = current_user.projects.size
+        update_state_counts
+      }
       format.xml { render :text => "Deleted project #{@project.name}" }
     end
   end
@@ -201,7 +200,16 @@ class ProjectsController < ApplicationController
   end
   
   protected
-    
+
+  def update_state_counts
+    @active_projects_count = current_user.projects.active.count
+    @hidden_projects_count = current_user.projects.hidden.count
+    @completed_projects_count = current_user.projects.completed.count
+    @show_active_projects = @active_projects_count > 0
+    @show_hidden_projects = @hidden_projects_count > 0
+    @show_completed_projects = @completed_projects_count > 0
+  end
+
   def render_projects_html
     lambda do
       @page_title = t('projects.list_projects')

app/helpers/application_helper.rb

@@ -110,6 +110,12 @@ module ApplicationHelper
   def link_to_project(project, descriptor = sanitize(project.name))
     link_to( descriptor, project_path(project), :title => "View project: #{project.name}" )
   end
+
+  def link_to_edit_project (project, descriptor = sanitize(project.name))
+    link_to(descriptor,
+      url_for({:controller => 'projects', :action => 'edit', :id => project.id}),
+      {:id => "link_edit_#{dom_id(project)}", :class => "project_edit_settings"})
+  end
   
   def link_to_project_mobile(project, accesskey, descriptor = sanitize(project.name))
     link_to( descriptor, project_path(project, :format => 'm'), {:title => "View project: #{project.name}", :accesskey => accesskey} )

app/views/projects/_project_listing.rhtml

@@ -13,24 +13,15 @@ suppress_edit_button ||= false
       <%= link_to_project( project ) %><%= " (" + count_undone_todos_and_notes_phrase(project,"actions") + ")" %>
     </div>
     <div class="buttons">
-      <span class="grey"><%= t('states.' + project.current_state.to_s).upcase %></span>
-      <a class="delete_project_button"
-         href="<%= project_path(project, :format => 'js') %>"
-         title="<%= t('projects.delete_project_title') %> '<%= project.name %>'"><%= image_tag( "blank.png",
-             :title => t('projects.delete_project'),
-          :class=>"delete_item") %></a>
+      <span class="grey"><%= project.current_state.to_s.upcase %></span>
+
+      <a class="delete_project_button" id="delete_project_<%= project.id%> " href="<%= project_path(project, :format => 'js') %>"
+         title="<%= t('projects.delete_project_title') %> '<%= project.name %>'">
+           <%= image_tag( "blank.png", :title => t('projects.delete_project'), :class=>"delete_item") %>
+      </a>
 
       <% unless suppress_edit_button -%>
-        <%=  link_to_remote(
-          image_tag( "blank.png", :title => t('projects.edit_project_title'), :class=>"edit_item"),
-          :url => {:controller => 'projects', :action => 'edit', :id => project.id},
-          :method => 'get',
-          :with => "'_source_view=#{@source_view}'",
-          :before => "$('#{dom_id(project)}').block({message:null});",
-          :complete => "$('#{dom_id(project)}').unblock();enable_rich_interaction();",
-          :html => {:id => "link_edit_#{dom_id(project)}"}
-        ) %>
-
+        <%= link_to_edit_project(project, image_tag( "blank.png", :title => t('projects.edit_project_title'), :class=>"edit_item")) %>
       <% end -%>
     </div>
   </div>

app/views/projects/_project_settings.rhtml

@@ -14,16 +14,7 @@
     <% else -%>
       '<%= project.default_tags -%>' as the default tags.
     <% end -%>
-      <a class ="project_edit_settings" id="link_edit_<%=dom_id(project)-%>" href="<%=url_for(:controller => 'projects', :action => 'edit', :id => project.id)%>">Edit Project Settings</a>
-    <%#=  link_to_remote(
-      "",
-      :url => {:controller => 'projects', :action => 'edit', :id => project.id},
-      :method => 'get',
-      :with => "'_source_view=#{@source_view}'",
-      :before => "$('#{dom_id(project)}').block({message: null});",
-      :complete => "$('#{dom_id(project)}').unblock();enable_rich_interaction();",
-      :html => {:id => "link_edit_#{dom_id(project)}"}
-    ) %>
+    <%= link_to_edit_project(project, "Edit Project Settings") %>
   </div>
   <% unless project.description.blank? -%>
     <div class="project_description"><%= format_note(project.description) %></div>

app/views/projects/destroy.js.erb

@@ -0,0 +1,12 @@
+remove_deleted_project();
+ProjectListPage.update_state_count(<%=@active_projects_count%>, <%=@hidden_projects_count%>, <%=@completed_projects_count%>)
+ProjectListPage.show_or_hide_state_container(<%= @show_active_projects %>, <%= @show_hidden_projects %>, <%= @show_completed_projects %>);
+page_notify('notice', "Deleted project '#{@project.name}'", 5);
+set_page_badge(<%=@down_count%>);
+
+function remove_deleted_project() {
+  $('div#<%=dom_id(@project, "container")%>').slideUp(1000,
+    function() {
+      $('div#<%=dom_id(@project, "container")%>').remove()
+    });
+}

app/views/projects/destroy.js.rjs

@@ -1,13 +0,0 @@
-page.visual_effect :fade, dom_id(@project, "container"), :duration => 0.5
-page.delay(0.5) do
-  page[dom_id(@project, "container")].remove
-  page.replace_html "active-projects-count", @active_projects_count
-  page.replace_html "hidden-projects-count", @hidden_projects_count
-  page.replace_html "completed-projects-count", @completed_projects_count
-  page.set_element_visible("list-hidden-projects-container", @hidden_projects_count > 0)
-  page.set_element_visible("list-active-projects-container", @active_projects_count > 0)
-  page.set_element_visible("list-completed-projects-container", @completed_projects_count > 0)
-end
-page.notify :notice, "Deleted project '#{@project.name}'", 5.0
-page['badge_count'].replace_html @down_count
-page.hide "busy"

app/views/projects/edit.js.erb

@@ -1,5 +1,5 @@
 newHtml = "<%= escape_javascript(render(:partial => 'project_form', :locals => { :project_form => @project })) %>"
 $('div#<%=dom_id(@project, 'edit')%>').html(newHtml);
 $('div#<%=dom_id(@project)%>').hide();
-$('div#<%=dom_id(@project, 'edit')%>').show();
+$('div#<%=dom_id(@project, 'edit')%>').show(500);
 $('input.project-name').focus();

app/views/projects/update.js.erb

@@ -1,69 +1,101 @@
 <% if @saved -%>
+
   pageNotify('notice', '<%=t('projects.project_saved_status')%>', 5);
+
   <% if source_view_is :project_list -%>
+
     <% if @state_changed -%>
-    <% else # TODO!!!-%>
+      remove_project();
+      add_project();
+    <% else -%>
+      replace_project();
     <% end -%>
-  <% else # source_view must be :project %>
-    $('#<%=dom_id(@project, 'edit')%>').hide();
-    $('#<%=dom_id(@project, 'container')%>').html("<%= escape_javascript(render(:partial => 'project_settings', :locals => { :project => @project })) %> ");
-    $('#<%=dom_id(@project)%>').show();
-    $('input#todo_project_name').val("<%= escape_javascript(@project.name)%>");
+
+    update_sortable();
+    ProjectListPage.update_state_count(<%=@active_projects_count%>, <%=@hidden_projects_count%>, <%=@completed_projects_count%>)
+    ProjectListPage.show_or_hide_state_container(<%= @show_active_projects %>, <%= @show_hidden_projects %>, <%= @show_completed_projects %>);
+
+  <% else # assume source_view :project %>
+
+    remove_project_edit_form();
+    update_and_show_project_settings();
+
+    TracksForm.set_project_name("<%= escape_javascript(@project.name)%>");
     <% if @project.default_context %>
-      $('input#todo_context_name').val("<%= escape_javascript(@project.default_context.name)%>");
-      $('input[name=default_context_name]').val('<%= escape_javascript(@project.default_context.name)%>');
+      TracksForm.set_context_name_and_default_context_name("<%= escape_javascript(@project.default_context.name)%>");
     <% end %>
     <% if @project.default_tags %>
-      $('input#tag_list').val("<%= escape_javascript(@project.default_tags)%>");
+      TracksForm.set_tag_list("<%= escape_javascript(@project.default_tags)%>");
     <% end %>
+
+    update_sidebar();
+
   <% end %>
-  $('#default_project_name_id').val('<%= escape_javascript(@project.name)%>');
-  $('input#todo_project_name').val("<%= escape_javascript(@project.name)%>");
-  $('#project_name').html("<%= escape_javascript(@project.name)%>");
-  $('#sidebar').html("<%= escape_javascript(render(:file => 'sidebar/sidebar.html.erb')) %>");
+
+  TracksForm.set_project_name_and_default_project_name("<%= escape_javascript(@project.name)%>");
+
 <% else -%>
-  $('div#error_status').html("<%= escape_javascript(error_messages_for('project')) %>");
-  $('div#error_status').show();
+  show_errors();
 <% end %>
+
 enable_rich_interaction();
 
-<%# *page << "console.log(\"hello\");"%>
-<%# *if @saved%>
-<%# *status_message = 'Project saved'%>
-<%# *page.notify :notice, status_message, 5.0%>
-<%# *if source_view_is :project_list%>
-<%# *if @state_changed%>
-<%#*page[dom_id(@project, 'container')].remove%>
-<%#*page.insert_html :bottom, "list-#{@project.state}-projects", :partial => 'project_listing', :object => @project%>
-<%# *else%>
-<%#*page.replace_html dom_id(@project, 'container'), :partial => 'project_listing', :object => @project%>
-<%# *end%>
-<%#*page.sortable "list-#{@project.state}-projects", get_listing_sortable_options("list-#{@project.state}-projects")%>
-<%#*page.replace_html "active-projects-count", @active_projects_count%>
-<%#*page.replace_html "hidden-projects-count", @hidden_projects_count%>
-<%#*page.replace_html "completed-projects-count", @completed_projects_count%>
+function show_errors() {
+  $('div#error_status').html(html_for_error_messages());
+  $('div#error_status').show();
+}
 
-<%#*page.set_element_visible("list-hidden-projects-container", @hidden_projects_count > 0)%>
-<%#*page.set_element_visible("list-active-projects-container", @active_projects_count > 0)%>
-<%#*page.set_element_visible("list-completed-projects-container", @completed_projects_count > 0)%>
-<%# *else%>
-<%# *page[dom_id(@project, 'edit')].hide%>
-<%# *page.replace_html dom_id(@project, 'container'), :partial => 'project_settings', :locals => { :project => @project }%>
-<%# *page[dom_id(@project)].show%>
+function remove_project_edit_form() {
+  $('#<%=dom_id(@project, 'edit')%>').hide(500);
+}
 
-<%# *page['todo_context_name'].value = @project.default_context.name if @project.default_context%>
-<%# *page['#todo_project_name'].value = @project.name%>
-<%# *page['tag_list'].value = @project.default_tags if @project.default_tags%>
-<%# *page << "$('input[name=default_context_name]').val('#{@project.default_context.name}');" if @project.default_context%>
-<%# *end%>
+function update_and_show_project_settings() {
+  $('#<%=dom_id(@project, 'container')%>').html(html_for_project_settings());
+  $('#<%=dom_id(@project)%>').show();
+}
 
-<%# *page['default_project_name_id'].value = @project.name%>
-<%# *page['todo_project_name'].value = @project.name%>
-<%# *page.replace_html "project_name", @project.name%>
+function update_sidebar() {
+  $('#sidebar').html();
+}
 
-<%# *page.replace_html "sidebar", :file => 'sidebar/sidebar.html.erb'%>
-<%# *else%>
-<%# *page.show 'error_status'%>
-<%# *page.replace_html 'error_status', "#{error_messages_for('project')}"%>
-<%# *end%>
-<%# *page << "enable_rich_interaction();"%>
+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");
+}
+
+function replace_project() {
+  $('#<%=dom_id(@project, 'container')%>').fadeOut(500, function() {
+    $('#<%=dom_id(@project, 'container')%>').html(html_for_project_listing());
+    $('#<%=dom_id(@project, 'container')%>').fadeIn(500);
+  });
+}
+
+function remove_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);
+}
+
+<%
+# the following functions return empty string if rendering the partial is not
+# necessary, for example the sidebar is not on the project list page, so do not
+# render it into the function. 
+-%>
+function html_for_project_listing() {
+  return "<%= source_view_is(:project_list) ? escape_javascript(render(:partial => 'project_listing', :locals => { :project_listing => @project })) : "" %>";
+}
+
+function html_for_sidebar() {
+  return "<%= source_view_is(:project) ? escape_javascript(render(:file => 'sidebar/sidebar.html.erb')) : "" %>";
+}
+
+function html_for_project_settings() {
+  return "<%= source_view_is(:project) ? escape_javascript(render(:partial => 'project_settings', :locals => { :project => @project })) : "" %>";
+}
+
+function html_for_error_messages() {
+  return "<%= escape_javascript(error_messages_for('project')) %>";
+}