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
pull/6827/head
p.tessenow 14 years ago
parent b2125192e6
commit 72490149f9
  1. 76
      app/views/cost_reports/_group_by.rhtml
  2. 5
      app/views/cost_reports/_restore_query.rhtml
  3. 4
      app/views/cost_reports/index.rhtml
  4. 75
      assets/javascripts/reporting.js
  5. 1
      assets/javascripts/select_list_move_optgroup.js
  6. 85
      assets/stylesheets/reporting.css
  7. 4
      config/locales/de.yml
  8. 4
      config/locales/en.yml

@ -4,69 +4,15 @@
query A CostQuery object
%>
<%#TODO: replace me with a drag&drop group_by selector %>
<table style="border-collapse: collapse; border: 0pt none;" id="group_by_table">
<tbody><tr>
<td colspan="2">
&nbsp;
</td>
<td align="center" valign="right">
<input type="button" class="buttons group_by sort sortUp" onclick="moveOptionUp(this.form.group_by_columns);"/><br />
<input type="button" class="buttons group_by sort sortDown" onclick="moveOptionDown(this.form.group_by_columns);"/>
</td>
<td valign="middle">
<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>
<div id="group_by_area">
<%= l(:label_available_group_bys) %>:
<div id="available_groups" class="drag_source drag_container">
<%CostQuery::GroupBy.all.each do |group_by| %>
<span id="<%= group_by.underscore_name %>" class="drag_element group_by"><%= l(group_by.label) %></span>
<% end %>
</select>
</td>
</tr></tbody>
</table>
<%#
up &#8593;
down &#8595;
left &#8592;
right &#8594;
%>
</div>
<%= l(:label_columns) %>:
<div id="groups[columns]" class="drag_target drag_container"></div>
<%= l(:label_rows) %>:
<div id="groups[rows]" class="drag_target drag_container"></div>
</div>

@ -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? %>
<%= "show_group_by_row('#{group_by.class.underscore_name}');" if group_by.row? %>
<%= "group_by_as_column('#{group_by.class.underscore_name}');" if group_by.column? %>
<%= "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();

@ -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' %>

@ -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) {
show_group_by(group_by, $('group_by_columns'));
function move_group_by(group_by, target) {
group_by = $(group_by);
target = $(target);
if (group_by === null || target === null) {
return;
}
target.insert({ bottom: group_by.remove() });
}
function group_by_as_column(group_by) {
move_group_by(group_by, $('groups[columns]'));
}
function show_group_by_row(group_by) {
show_group_by(group_by, $('group_by_rows'));
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;
destination = $('group_by_container');
[$('group_by_columns'), $('group_by_rows')].each(function (origin) {
selectAllOptions(origin);
moveOptions(origin, destination);
[$('groups[columns]'), $('groups[rows]')].each(function(o) {
o.childElements().each(function(group_by){
move_group_by(group_by, $('available_groups'));
});
});
}
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)

@ -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;
}

@ -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;
}

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

@ -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

Loading…
Cancel
Save