Forum list can be reordered with drag and drop (#12909).

git-svn-id: http://svn.redmine.org/redmine/trunk@15337 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/controllers/boards_controller.rb

@@ -87,9 +87,18 @@ class BoardsController < ApplicationController
   def update
     @board.safe_attributes = params[:board]
     if @board.save
-      redirect_to_settings_in_projects
+      respond_to do |format|
+        format.html {
+          flash[:notice] = l(:notice_successful_update)
+          redirect_to_settings_in_projects
+        }
+        format.js { render :nothing => true }
+      end
     else
-      render :action => 'edit'
+      respond_to do |format|
+        format.html { render :action => 'edit' }
+        format.js { render :nothing => true, :status => 422 }
+      end
     end
   end
 

app/helpers/projects_helper.rb

@@ -100,6 +100,19 @@ module ProjectsHelper
     l("label_version_sharing_#{sharing}")
   end
 
+  def render_boards_tree(boards, parent=nil, level=0, &block)
+    selection = boards.select {|b| b.parent == parent}
+    return '' if selection.empty?
+
+    s = ''.html_safe
+    selection.each do |board|
+      node = capture(board, level, &block)
+      node << render_boards_tree(boards, board, level+1, &block)
+      s << content_tag('div', node)
+    end
+    content_tag('div', s, :class => 'sort-level')
+  end
+
   def render_api_includes(project, api)
     api.array :trackers do
       project.trackers.each do |tracker|

app/helpers/routes_helper.rb

@@ -66,4 +66,8 @@ module RoutesHelper
       new_time_entry_path(*args)
     end
   end
+
+  def board_path(board, *args)
+    project_board_path(board.project, board, *args)
+  end
 end

app/models/board.rb

@@ -35,7 +35,7 @@ class Board < ActiveRecord::Base
     where(Project.allowed_to_condition(args.shift || User.current, :view_messages, *args))
   }
 
-  safe_attributes 'name', 'description', 'parent_id', 'move_to'
+  safe_attributes 'name', 'description', 'parent_id', 'position'
 
   def visible?(user=User.current)
     !user.nil? && user.allowed_to?(:view_messages, project)

app/views/projects/settings/_boards.html.erb

@@ -1,32 +1,29 @@
 <% if @project.boards.any? %>
-<table class="list">
-  <thead><tr>
-    <th><%= l(:label_board) %></th>
-    <th><%= l(:field_description) %></th>
-    <th></th>
-    <th></th>
-  </tr></thead>
-  <tbody>
-<% Board.board_tree(@project.boards) do |board, level|
-  next if board.new_record? %>
-  <tr class="<%= cycle 'odd', 'even' %>">
-    <td class="name" style="padding-left: <%= level * 18 %>px;"><%= link_to board.name, project_board_path(@project, board) %></td>
-    <td class="description"><%= board.description %></td>
-    <td class="reorder">
-    <% if authorize_for("boards", "edit") %>
-      <%= reorder_links('board', {:controller => 'boards', :action => 'update', :project_id => @project, :id => board}, :put) %>
-    <% end %>
-    </td>
-    <td class="buttons">
+<div class="table-list boards">
+  <div class="table-list-header">
+    <div class="table-list-cell"><%= l(:label_board) %></div>
+  </div>
+  <%= render_boards_tree(@project.boards) do |board, level| %>
+  <div class="table-list-row <%= cycle 'odd', 'even' %>">
+    <div class="table-list-cell name" style="padding-left: <%= 2 + level * 16 %>px">
+      <%= link_to board.name, project_board_path(@project, board) %>
+    </div>
+    <div class="table-list-cell description"><%= board.description %></div>
+    <div class="table-list-cell buttons">
     <% if User.current.allowed_to?(:manage_boards, @project) %>
+      <%= reorder_handle(board) %>
       <%= link_to l(:button_edit), edit_project_board_path(@project, board), :class => 'icon icon-edit' %>
       <%= delete_link project_board_path(@project, board) %>
     <% end %>
-    </td>
-  </tr>
+    </div>
+  </div>
+  <% end %>
+</div>
+
+<%= javascript_tag do %>
+  $(function() { $("div.sort-level").positionedItems(); });
 <% end %>
-  </tbody>
-</table>
+
 <% else %>
 <p class="nodata"><%= l(:label_no_data) %></p>
 <% end %>

public/javascripts/application.js

@@ -599,7 +599,7 @@ function beforeShowDatePicker(input, inst) {
     return this.sortable($.extend({
       handle: ".sort-handle",
       helper: function(event, ui){
-        ui.children().each(function(){
+        ui.children('td').each(function(){
           $(this).width($(this).width());
         });
         return ui;

public/stylesheets/application.css

@@ -138,21 +138,23 @@ a#toggle-completed-versions {color:#999;}
 a.toggle-checkboxes { margin-left: 5px; padding-left: 12px; background: url(../images/toggle_check.png) no-repeat 0% 50%; }
 
 /***** Tables *****/
-table.list { border: 1px solid #e4e4e4;  border-collapse: collapse; width: 100%; margin-bottom: 4px; }
-table.list th {  background-color:#EEEEEE; padding: 4px; white-space:nowrap; }
+table.list, .table-list { border: 1px solid #e4e4e4;  border-collapse: collapse; width: 100%; margin-bottom: 4px; }
+table.list th, .table-list-header { background-color:#EEEEEE; padding: 4px; white-space:nowrap; font-weight:bold; }
 table.list td {text-align:center; vertical-align:top; padding-right:10px;}
 table.list td.id { width: 2%; text-align: center;}
 table.list td.name, table.list td.description, table.list td.subject, table.list td.comments, table.list td.roles {text-align: left;}
 table.list td.tick {width:15%}
 table.list td.checkbox { width: 15px; padding: 2px 0 0 0; }
 table.list td.checkbox input {padding:0px;}
-table.list td.buttons { width: 15%; white-space:nowrap; text-align: right; }
-table.list td.buttons a { margin-right: 0.6em; }
-table.list td.buttons img {vertical-align:middle;}
+table.list td.buttons, div.buttons { width: 15%; white-space:nowrap; text-align: right; }
+table.list td.buttons a, div.buttons a { margin-right: 0.6em; }
+table.list td.buttons img, div.buttons img {vertical-align:middle;}
 table.list td.reorder {width:15%; white-space:nowrap; text-align:center; }
 table.list table.progress td {padding-right:0px;}
 table.list caption { text-align: left; padding: 0.5em 0.5em 0.5em 0; }
 
+.table-list-cell {display: table-cell; vertical-align: top; padding:2px; }
+
 tr.project td.name a { white-space:nowrap; }
 tr.project.closed, tr.project.archived { color: #aaa; }
 tr.project.closed a, tr.project.archived a { color: #aaa; }
@@ -272,6 +274,8 @@ a.sort.desc { background-image: url(../images/sort_desc.png); }
 table.boards a.board, h3.comments { background: url(../images/comment.png) no-repeat 0% 50%; padding-left: 20px; }
 table.boards td.last-message {text-align:left;font-size:80%;}
 
+div.table-list.boards .table-list-cell.name {width: 30%;}
+
 table.messages td.last_message {text-align:left;}
 
 #query_form_content {font-size:90%;}

test/functional/boards_controller_test.rb

@@ -197,7 +197,7 @@ class BoardsControllerTest < ActionController::TestCase
 
   def test_update_position
     @request.session[:user_id] = 2
-    put :update, :project_id => 1, :id => 2, :board => { :move_to => 'highest'}
+    put :update, :project_id => 1, :id => 2, :board => { :position => 1}
     assert_redirected_to '/projects/ecookbook/settings/boards'
     board = Board.find(2)
     assert_equal 1, board.position