replaced old group_by-view with new drag'n'drop view

git-svn-id: https://dev.finn.de/svn/cockpit/branches/reporting_merge@1756 7926756e-e54e-46e6-9721-ed318f58905e

app/views/cost_reports/_group_by.rhtml

@@ -4,69 +4,15 @@
     query   A CostQuery object
 %>
 
-<%#TODO: replace me with a drag&drop group_by selector %>
+<div id="group_by_area">
-
+  <%= l(:label_available_group_bys) %>:
-<table style="border-collapse: collapse; border: 0pt none;" id="group_by_table">
+  <div id="available_groups" class="drag_source drag_container">
-  <tbody><tr>
+    <%CostQuery::GroupBy.all.each do |group_by| %>
-    <td colspan="2">
+      <span id="<%= group_by.underscore_name %>" class="drag_element group_by"><%= l(group_by.label) %></span>
-      &nbsp;
+    <% end %>
-    </td>
+  </div>
-    <td align="center" valign="right">
+  <%= l(:label_columns) %>:
-      <input type="button" class="buttons group_by sort sortUp" onclick="moveOptionUp(this.form.group_by_columns);"/><br />
+  <div id="groups[columns]" class="drag_target drag_container"></div>
-      <input type="button" class="buttons group_by sort sortDown" onclick="moveOptionDown(this.form.group_by_columns);"/>
+  <%= l(:label_rows) %>:
-    </td>
+  <div id="groups[rows]" class="drag_target drag_container"></div>
-    <td valign="middle">
+</div>
-      <h3>Columns</h3>
-      <select style="width: 180px;" size="4" name="groups[columns][]" multiple="multiple" id="group_by_columns">
-      </select>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      &nbsp;
-    </td>
-    <td valign="bottom" style="padding-bottom: 0;">
-      <h3>Rows</h3>
-    </td>
-    <td>
-      &nbsp;
-    </td>
-    <td align="left" valign="left">
-      <input type="button" class="buttons group_by move moveUp" onclick="moveOptions(this.form.group_by_container, this.form.group_by_columns);"/>
-      <input type="button" class="buttons group_by move moveDown" onclick="moveOptions(this.form.group_by_columns, this.form.group_by_container);"/>
-    </td>
-  </tr>
-  <tr>
-    <td align="center" valign="top">
-      <input type="button" class="buttons group_by sort sortUp" onclick="moveOptionUp(this.form.group_by_rows);" /><br />
-      <input type="button" class="buttons group_by sort sortDown" onclick="moveOptionDown(this.form.group_by_rows);"/>
-    </td>
-    <td style="padding-left: 0pt;" valign="top">
-      <select style="width: 180px;" size="4" name="groups[rows][]" multiple="multiple" id="group_by_rows">
-      </select>
-    </td>  
-    <td align="center" valign="top">
-      <input type="button" class="buttons group_by move moveLeft" onclick="moveOptions(this.form.group_by_container, this.form.group_by_rows);"/><br />
-      <input type="button" class="buttons group_by move moveRight" onclick="moveOptions(this.form.group_by_rows, this.form.group_by_container);"/>
-    </td>
-    <td>
-      <select style="width: 180px;" size="9" multiple="multiple" id="group_by_container">
-      <% CostQuery::GroupBy.all_grouped.sort_by { |label, group_by_ary| l(label) }.each do |label, group_by_ary| %>
-        <optgroup label="<%= l(label) %>" data-category="<%= label.to_s %>">
-        <% group_by_ary.sort_by { |g| l(g.label)}.each do |group_by| %>
-          <% next unless group_by.selectable? %>
-          <option value="<%= group_by.underscore_name %>" data-category="<%= label.to_s %>"><%= l(group_by.label) %></option>
-        <% end %>
-        </optgroup>
-      <% end %>
-      </select>
-    </td>
-  </tr></tbody>
-</table>
-
-<%#
-up     &#8593;
-down   &#8595;
-left   &#8592;
-right  &#8594;
-%>

app/views/cost_reports/_restore_query.rhtml

@@ -13,12 +13,13 @@ set_filters = function() {
 set_group_bys = function() {
   // Activate recent group_bys on loading
   <% query.group_bys.each do |group_by| %>
-    <%= "show_group_by_column('#{group_by.class.underscore_name}');" if group_by.column? %>
+    <%= "group_by_as_column('#{group_by.class.underscore_name}');" if group_by.column? %>
-    <%= "show_group_by_row('#{group_by.class.underscore_name}');" if group_by.row? %>
+    <%= "group_by_as_row('#{group_by.class.underscore_name}');" if group_by.row? %>
   <% end %>
 }
 
 restore_query_inputs = function() {
+  init_group_bys();
   disable_all_filters();
   disable_all_group_bys();
   set_filters();

app/views/cost_reports/index.rhtml

@@ -1,5 +1,4 @@
 <% content_for :header_tags do %>
-  <%= javascript_include_tag "select_list_move_optgroup", :plugin => "redmine_reporting" %>
   <%= javascript_include_tag "reporting", :plugin => "redmine_reporting" %>
   <%= stylesheet_link_tag 'reporting', :plugin => 'redmine_reporting' %>
 <% end %>
@@ -27,9 +26,8 @@
   <p class="buttons">
   <%= link_to_remote l(:button_apply),
                      { :url => { :set_filter => 1 },
-                       :before => 'selectAllOptions("group_by_rows");selectAllOptions("group_by_columns");',
                        :update => "content",
-                       :with => "Form.serialize('query_form')",
+                       :with => "serialize_filter_and_group_by()",
                        :eval_scripts => true
                      }, :class => 'icon icon-checked' %>
 

assets/javascripts/reporting.js

@@ -133,26 +133,6 @@ function remove_filter(field) {
     enable_select_option($("add_filter_select"), field);
 }
 
-function show_group_by(group_by, target) {
-    var source, group_option, i;
-    source = $("group_by_container");
-    group_option = null;
-    // find group_by option-tag in target select-box
-    for (i = 0; i < source.options.length; i++) {
-        if (source.options[i].value == group_by) {
-            group_option = source.options[i];
-            source.options[i] = null;
-            break;
-        }
-    }
-    // die if the appropriate option-tag can not be found
-    if (group_option === null) {
-        return;
-    }
-    // move the option-tag to the taget select-box while keepings its data
-    target.options[target.length] = group_option;
-}
-
 function select_operator(field, operator) {
     var select, i;
     select = $("operators_" + field);
@@ -219,12 +199,21 @@ function restore_filter(field, operator, values) {
     }
 }
 
-function show_group_by_column(group_by) {
+function move_group_by(group_by, target) {
-    show_group_by(group_by, $('group_by_columns'));
+    group_by = $(group_by);
+    target = $(target);
+    if (group_by === null || target === null) {
+        return;
+    }
+    target.insert({ bottom: group_by.remove() });
 }
 
-function show_group_by_row(group_by) {
+function group_by_as_column(group_by) {
-    show_group_by(group_by, $('group_by_rows'));
+    move_group_by(group_by, $('groups[columns]'));
+}
+
+function group_by_as_row(group_by) {
+    move_group_by(group_by, $('groups[rows]'));
 }
 
 function disable_all_filters() {
@@ -243,14 +232,42 @@ function disable_all_filters() {
 }
 
 function disable_all_group_bys() {
-    var destination;
+    [$('groups[columns]'), $('groups[rows]')].each(function(o) {
-    destination = $('group_by_container');
+        o.childElements().each(function(group_by){
-    [$('group_by_columns'), $('group_by_rows')].each(function (origin) {
+            move_group_by(group_by, $('available_groups'));
-        selectAllOptions(origin);
+        });
-        moveOptions(origin, destination);
     });
 }
 
+function serialize_filter_and_group_by() {
+    var ret_str = Form.serialize('query_form');
+    var rows = Sortable.serialize('groups[rows]');
+    var columns = Sortable.serialize('groups[columns]');
+    if (rows !== null && rows != "") {
+        ret_str += "&" + rows;
+    }
+    if(columns !== null && columns != "") {
+        ret_str += "&" + columns;
+    }
+    return ret_str;
+}
+
+function init_group_bys() {
+    var options = {
+        tag:'span',
+        overlap:'horizontal',
+        constraint:'horizontal',
+        containment: ['groups[columns]','groups[rows]','available_groups'],
+        only: "group_by",
+        dropOnEmpty: true,
+        format: /^(.*)$/,
+        hoverclass: 'drag_container_accept'
+    };
+    Sortable.create('groups[columns]', options);
+    Sortable.create('groups[rows]', options);
+    Sortable.create('available_groups', options);
+}
+
 function defineElementGetter() {
     if (document.getElementsByClassName == undefined) {
         document.getElementsByClassName = function(className)

assets/javascripts/select_list_move_optgroup.js

@@ -94,6 +94,7 @@ function moveOptionDown(theSel) {
 function selectAllOptions(select)
 {
   select = $(select);
+  if (select === null) { return }
   for (var i=0; i<select.options.length; i++) {
     select.options[i].selected = true;
   }

assets/stylesheets/reporting.css

@@ -97,66 +97,6 @@
   border: none;
 }
 
-.group_by {
-  background-color: transparent;
-  background-position: 50%;
-  background-repeat: no-repeat;
-  border: 1px solid #900;
-  height: 10px;
-  width: 10px;
-  margin: 1px;
-}
-
-.group_by:hover {
-  background-color: #EEE;
-}
-
-.move {
-  height: 25px;
-  width: 25px;
-}
-
-.sort {
-  height: 15px;
-  width: 15px;
-}
-
-.moveUp {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  background-image: url(../images/arrow_D_up.gif);
-}
-
-.moveDown {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  background-image: url(../images/arrow_D_down.gif);
-}
-
-.moveLeft {
-  margin-left: 0px;
-  margin-right: 0px;
-  background-image: url(../images/arrow_D_left.gif);
-}
-
-.moveRight {
-  margin-left: 0px;
-  margin-right: 0px;
-  background-image: url(../images/arrow_D_right.gif);
-}
-
-.sortUp {
-  margin-left: 0px;
-  margin-right: 0px;
-  background-image: url(../images/arrow_B_up.gif);
-}
-
-.sortDown {
-  margin-left: 0px;
-  margin-right: 0px;
-  background-image: url(../images/arrow_B_down.gif);
-}
-
 .filter_rem {
   overflow: hidden;
   font-size: 0 !important;
@@ -170,3 +110,28 @@
   border-style: none;
 }
 
+.drag_element {
+  cursor: move;
+  background-color: #60D8FB;
+  padding: 2px 5px;
+  margin: 2px;
+  border: 1px solid #333333;
+  white-space: nowrap;
+}
+
+.drag_container {
+  padding: 10px;
+  background-color: #E3E3E3;
+  border: 1px dotted #CCCCCC;
+  margin-bottom: 4px;
+}
+
+.drag_target {
+  width: 250px;
+  min-height: 10px;
+}
+
+.drag_container_accept {
+  background-color: #F5F5C5;
+  boder: 1px solid #BBBBBB;
+}

config/locales/de.yml

@@ -18,3 +18,7 @@ de:
 
   label_count: Anzahl
   label_sum: Summe
+
+  label_rows: Zeilen
+  label_columns: Spalten
+  label_available_group_bys: Verfügbare Gruppierungen

config/locales/en.yml

@@ -17,3 +17,7 @@ en:
 
   label_count: Count
   label_sum: Sum
+
+  label_rows: Rows
+  label_columns: Columns
+  label_available_group_bys: Available Group By&#39s