WIP: projects page

app/views/projects/_default_context_autocomplete.rhtml

@@ -1,6 +0,0 @@
-<div class="page_name_auto_complete" id="default_context_list" style="display:none;z-index:9999"></div>
-<script type="text/javascript">
-defaultContextAutoCompleter = new Autocompleter.Local('project_default_context_name', 'default_context_list', <%= context_names_for_autocomplete %>, {choices:100,autoSelect:false});
-Event.observe($('project_default_context_name'), "focus", defaultContextAutoCompleter.activate.bind(defaultContextAutoCompleter));
-Event.observe($('project_default_context_name'), "click", defaultContextAutoCompleter.activate.bind(defaultContextAutoCompleter));
-</script>

app/views/projects/_project_form.rhtml

@@ -1,7 +1,8 @@
 <%
 project = project_form
 %>
-<% form_tag project_path(project), { :id => dom_id(project, 'edit_form'), :class => "inline-form "+dom_id(project, 'edit_form')+"-edit-project-form", :method => :put } do -%>
+
+<% form_remote_tag(:url => project_path(project), :html => { :id => dom_id(project, 'edit_form'), :class => "inline-form "+dom_id(project, 'edit_form')+"-edit-project-form", :method => :put }) do -%>
 
   <%= source_view_tag( @source_view ) -%>
 
@@ -18,7 +19,6 @@ project = project_form
 
   <label for="project[default_context_name]">Default Context</label><br/>
   <%= text_field_tag("project[default_context_name]", project.default_context.name, {:tabindex=>1,:size=> 25}) %>
-  <%= render :partial => 'default_context_autocomplete' %>
   <br/>
 
   <label for="project[default_tags]">Default Tags</label><br/>
@@ -32,7 +32,7 @@ project = project_form
         <%=image_tag("accept.png", :alt => "") %>
         Update
       </button>
-      <a href="javascript:void(0);" id="<%= dom_id(project, 'cancel') %>" onclick="Element.toggle('<%= dom_id(project) %>');Element.toggle('<%= dom_id(project, 'edit') %>');" class="negative">
+      <a href="#" id="<%= dom_id(project, 'cancel') %>" class="negative">
         <%=image_tag("cancel.png", :alt => "") %>
         Cancel
       </a>
@@ -42,7 +42,3 @@ project = project_form
 
 <% end -%>
 
-<%= apply_behavior "."+dom_id(project, 'edit_form')+"-edit-project-form", make_remote_form(
-  :before => "$('"+dom_id(project, 'submit')+"').startWaiting();",
-  :condition => "!$('"+dom_id(project, 'submit')+"').isWaiting()",
-  :external => false) %>

app/views/projects/_project_listing.rhtml

@@ -19,20 +19,15 @@ suppress_edit_button ||= false
          title="delete the project '<%= project.name %>'"><%= image_tag( "blank.png",
           :title => "Delete project",
           :class=>"delete_item") %></a>
-        <%= apply_behavior "a.delete_project_button:click", { :prevent_default => true, :external => true } do |page, element|
+
-          page.confirming "'Are you sure that you want to ' + this.title + '?'" do
-            element.up('.project').start_waiting
-            page << remote_to_href(:method => 'delete')
-          end
-        end -%>
         <% unless suppress_edit_button -%>
           <%=  link_to_remote(
             image_tag( "blank.png", :title => "Edit project", :class=>"edit_item"),
             :url => {:controller => 'projects', :action => 'edit', :id => project.id},
             :method => 'get',
             :with => "'_source_view=#{@source_view}'",
-            :before => "$('#{dom_id(project)}').startWaiting();",
+            :before => "$('#{dom_id(project)}').block({message:null});",
-            :complete => "$('#{dom_id(project)}').stopWaiting();"
+            :complete => "$('#{dom_id(project)}').unblock();"
             ) %>
         
         <% end -%>

app/views/projects/_project_state_group.rhtml

@@ -4,28 +4,13 @@
   <div class="alpha_sort">
     <%= link_to("Alphabetically", alphabetize_projects_path(:state => state),
                  :class => "alphabetize_link", :title => "Sort these projects alphabetically") %>
-    <%  apply_behavior '.alphabetize_link:click', :prevent_default => true do |page, element|
+    </div><span class="sort_separator">&nbsp;|&nbsp;</span><div class="tasks_sort">
-          page.confirming 'Are you sure that you want to sort these projects alphabetically? This will replace the existing sort order.' do
-            page << "alphaSort = this.up('.alpha_sort');
-                     alphaSort.startWaiting();"
-            page << remote_to_href(:complete => "alphaSort.stopWaiting()")
-          end
-        end
-     %></div><span class="sort_separator">&nbsp;|&nbsp;</span><div class="tasks_sort">
     <%= link_to("By number of tasks", actionize_projects_path(:state => state),
                  :class => "actionize_link", :title => "Sort these projects by number of tasks") %>
-    <%  apply_behavior '.actionize_link:click', :prevent_default => true do |page, element|
+    </div>
-          page.confirming 'Are you sure that you want to sort these projects by the number of tasks? This will replace the existing sort order.' do
-            page << "tasksSort = this.up('.tasks_sort');
-                     tasksSort.startWaiting();"
-            page << remote_to_href(:complete => "tasksSort.stopWaiting()")
-          end
-        end
-     %></div>
   </div>
   
   <div id="list-<%= state %>-projects" class="project-list">
     <%= render :partial => 'project_listing', :collection => project_state_group %>
   </div>
-  <%= sortable_element "list-#{state}-projects", get_listing_sortable_options("list-#{state}-projects") %>
 </div>

app/views/projects/create.js.rjs

@@ -8,10 +8,10 @@ elsif @saved
   page.replace_html "active-projects-count", @active_projects_count
   page.insert_html :bottom, "list-active-projects", :partial => 'project_listing', :locals => { :project_listing => @project }
   page.sortable "list-active-projects", get_listing_sortable_options('list-active-projects')
-  page.call "Form.reset", "project-form"
+  page << "$('#project-form').clearForm();"
-  page.call "Form.focusFirstElement", "project-form"
+  page << "$('#project-form input:first').focus();"
 else
   page.show 'status'
   page.replace_html 'status', "#{error_messages_for('project')}"
 end
-page.hide "busy"
+page.hide "busy"

app/views/projects/edit.js.rjs

@@ -1,4 +1,4 @@
 page[dom_id(@project, 'edit')].replace_html :partial => 'project_form', :locals => { :project_form => @project }
 page[@project].hide
 page[dom_id(@project, 'edit')].show
-page[dom_id(@project, 'edit_form')].down('input.project-name').focus
+page[dom_id(@project, 'edit_form')].find('input.project-name').focus

app/views/projects/index.html.erb

@@ -14,20 +14,13 @@
       
       <div id="toggle_project_new" class="hide_form">
         <a title="Hide new project form" accesskey="n">&laquo; Hide form</a>
-        <%  apply_behavior '#toggle_project_new a:click', :prevent_default => true do |page|
-              page << "TracksForm.toggle('toggle_project_new', 'project_new', 'project-form',
-                                         '&laquo; Hide form', 'Hide new project form',
-                                         'Create a new project &#187;', 'Add a project');"
-            end
-        %>
       </div>
 
       <div id="project_new" class="project_new" style="display:block">
         <% form_remote_tag(:url => projects_path, :method => :post,
           :html=> { :id=>'project-form', :name=>'project', :class => 'inline-form'},
-          :before => "$('project_new_project_submit').startWaiting()",
+          :before => "$('#project_new_project_submit').block({message:null})",
-          :complete => "$('project_new_project_submit').stopWaiting()",
+          :complete => "$('#project_new_project_submit').unblock()") do -%>
-          :condition => "!$('project_new_project_submit').isWaiting()") do -%>
         
           <div id="status"><%= error_messages_for('project') %></div>
         
@@ -40,7 +33,6 @@
           <% unless @contexts.empty? -%>
             <label for="default_context_name">Default Context (optional):</label><br />
             <%= text_field_tag("project[default_context_name]", @project.default_context.name, :tabindex => 3) %>
-            <%= render :partial => 'default_context_autocomplete' %>
             <br />
           <% end -%>
           

app/views/shared/_add_new_item_form.rhtml

@@ -15,8 +15,8 @@
     <% form_remote_tag(
       :url => todos_path, :method => :post,
       :html=> { :id=>'todo-form-new-action', :name=>'todo', :class => 'inline-form' },
-      :before => "$('todo_new_action_submit').block({message:null})",
+      :before => "$('#todo_new_action_submit').block({message:null})",
-      :complete => "$('todo_new_action_submit').unblock()",
+      :complete => "$('#todo_new_action_submit').unblock()",
       :condition => "askIfNewContextProvided()") do -%>
 
       <div id="status"><%= error_messages_for("item", :object_name => 'action') %></div>

public/javascripts/application.js

@@ -22,17 +22,17 @@ var Login = {
 
 var TracksForm = {
     toggle: function(toggleDivId, formContainerId, formId, hideLinkText, hideLinkTitle, showLinkText, showLinkTitle) {
-        $(formContainerId).toggle();
+        $('#'+formContainerId).toggle();
-        toggleDiv = $(toggleDivId);
+        toggleDiv = $('#'+toggleDivId);
-        toggleLink = toggleDiv.down('a');
+        toggleLink = toggleDiv.find('a');
-        if (toggleDiv.hasClassName('hide_form')) {
+        if (toggleDiv.hasClass('hide_form')) {
-            toggleLink.update(showLinkText).setAttribute('title', showLinkTitle);
+            toggleLink.text(showLinkText).attr('title', showLinkTitle);
         }
         else {
-            toggleLink.update(hideLinkText).setAttribute('title', hideLinkTitle);
+            toggleLink.text(hideLinkText).attr('title', hideLinkTitle);
-            Form.focusFirstElement(formId);
+            $('#'+formId+' input:first').focus();
         }
-        toggleDiv.toggleClassName('hide_form');
+        toggleDiv.toggleClass('hide_form');
     }, 
     get_period: function() {
         if ($('recurring_todo_recurring_period_daily').checked) {
@@ -252,11 +252,11 @@ $(document).ready(function() {
 
   $('#toggle_action_new').click(function(){
     TracksForm.toggle('toggle_action_new', 'todo_new_action', 'todo-form-new-action',
-      '« Hide form', 'Hide next action form',
+      '« Hide form', 'Hide next action form',
-      'Add a next action »', 'Add a next action');
+      'Add a next action »', 'Add a next action');
     });
 
-  $('.edit-form a.negative').live('click', function(){
+  $('.item-container .edit-form a.negative').live('click', function(){
       $(this).parents('.container').find('.item-show').show();
       $(this).parents('.edit-form').hide();
       });
@@ -319,4 +319,61 @@ $(document).ready(function() {
         });
       $('#recurring_edit_'+this.id.split('_')[5]).show();
     });
+
+  /* Projects behavior */
+  $('.alphabetize_link').click(function(evt){
+      evt.preventDefault();
+      if(confirm('Are you sure that you want to sort these projects alphabetically? This will replace the existing sort order.')){
+        alphaSort = $(this).parents('.alpha_sort');
+        alphaSort.block({message:null});
+        $.post(this.href, {}, function(){alphaSort.unblock()}, 'script');
+      }
+    });
+
+  $('.actionize_link').click(function(evt){
+      evt.preventDefault();
+      if(confirm('Are you sure that you want to sort these projects by the number of tasks? This will replace the existing sort order.')){
+        taskSort = $(this).parents('.tasks_sort');
+        taskSort.block({message:null});
+        $.post(this.href, {}, function(){taskSort.unblock()}, 'script');
+      }
+    });
+
+  $('a.delete_project_button').live('click', function(evt){
+      evt.preventDefault();
+      if(confirm("Are you sure that you want to "+this.title+"?")){
+        $(this).parents('.project').block({message: null});
+        params = {_method: 'delete'};
+        $.post(this.href, params, null, 'script');
+      }
+      });
+
+  $('#toggle_project_new').click(function(evt){
+      TracksForm.toggle('toggle_project_new', 'project_new', 'project-form',
+        '« Hide form', 'Hide new project form',
+        'Create a new project »', 'Add a project');
+      });
+
+  $(".project-list .edit-form a.negative").live('click', function(evt){
+      evt.preventDefault();
+      $(this).parents('.list').find('.project').show();
+      $(this).parents('.edit-form').hide();
+      $(this).parents('.edit-form').find('form').clearForm();
+  });
+
+  $("#list-active-projects").sortable({handle: '.handle',
+      /*
+"#list-active-projects": function(event) {
+Sortable.create("list-active-projects", {handle:'handle', onUpdate:function(){new Ajax.Request('/projects/order', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-active-projects",{});}, parameters:Sortable.serialize("list-active-projects") + '&authenticity_token=' + encodeURIComponent('1e046f4f2a85aa09451c6e17f902bf9a254868c6')})}, tag:'div'})
+},
+"#list-hidden-projects": function(event) {
+Sortable.create("list-hidden-projects", {handle:'handle', onUpdate:function(){new Ajax.Request('/projects/order', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-hidden-projects",{});}, parameters:Sortable.serialize("list-hidden-projects") + '&authenticity_token=' + encodeURIComponent('1e046f4f2a85aa09451c6e17f902bf9a254868c6')})}, tag:'div'})
+},
+"#list-completed-projects": function(event) {
+Sortable.create("list-completed-projects", {handle:'handle', onUpdate:function(){new Ajax.Request('/projects/order', {asynchronous:true, evalScripts:true, onComplete:function(request){new Effect.Highlight("list-completed-projects",{});}, parameters:Sortable.serialize("list-completed-projects") + '&authenticity_token=' + encodeURIComponent('1e046f4f2a85aa09451c6e17f902bf9a254868c6')})}, tag:'div'})
+},
+       */
+      update: function(event, ui){
+        console.log(ui);
+      }});
 });