Build issue filters using javascript.

git-svn-id: svn+ssh://rubyforge.org/var/svn/redmine/trunk@10162 e93f8b46-1217-0410-a6f0-8f06a7374b81
This commit is contained in:
Jean-Philippe Lang 2012-08-07 16:41:46 +00:00
parent e9de6c1415
commit 1749fbf3e6
6 changed files with 163 additions and 83 deletions

View File

@ -18,9 +18,12 @@
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
module QueriesHelper
def operators_for_select(filter_type)
Query.operators_by_filter_type[filter_type].collect {|o| [l(Query.operators[o]), o]}
def filters_options_for_select(query)
options = [[]]
options += query.available_filters.sort {|a,b| a[1][:order] <=> b[1][:order]}.map do |field, field_options|
[field_options[:name], field]
end
options_for_select(options)
end
def column_header(column)

View File

@ -214,6 +214,11 @@ class Query < ActiveRecord::Base
@trackers ||= project.nil? ? Tracker.find(:all, :order => 'position') : project.rolled_up_trackers
end
# Returns a hash of localized labels for all filter operators
def self.operators_labels
operators.inject({}) {|h, operator| h[operator.first] = l(operator.last); h}
end
def available_filters
return @available_filters if @available_filters
@ -309,9 +314,22 @@ class Query < ActiveRecord::Base
@available_filters.delete field
}
@available_filters.each do |field, options|
options[:name] ||= l("field_#{field}".gsub(/_id$/, ''))
end
@available_filters
end
# Returns a representation of the available filters for JSON serialization
def available_filters_as_json
json = {}
available_filters.each do |field, options|
json[field] = options.slice(:type, :name, :values).stringify_keys
end
json
end
def add_filter(field, operator, values)
# values must be an array
return unless values.nil? || values.is_a?(Array)

View File

@ -1,53 +1,27 @@
<%= javascript_tag do %>
var operatorLabels = <%= raw Query.operators_labels.to_json %>;
var operatorByType = <%= raw Query.operators_by_filter_type.to_json %>;
var availableFilters = <%= raw query.available_filters_as_json.to_json %>;
var labelDayPlural = "<%= raw escape_javascript(l(:label_day_plural)) %>";
$(document).ready(function(){
initFilters();
<% query.filters.each do |field, options| %>
addFilter("<%= field %>", <%= raw query.operator_for(field).to_json %>, <%= raw query.values_for(field).to_json %>);
<% end %>
});
<% end %>
<table style="width:100%">
<tr>
<td>
<table>
<% query.available_filters.sort{|a,b| a[1][:order]<=>b[1][:order]}.each do |filter| %>
<% field = filter[0]
options = filter[1] %>
<tr <%= 'style="display:none;"'.html_safe unless query.has_filter?(field) %> id="tr_<%= field %>" class="filter">
<td class="field">
<%= check_box_tag 'f[]', field, query.has_filter?(field), :onclick => "toggle_filter('#{field}');", :id => "cb_#{field}" %>
<label for="cb_<%= field %>"><%= filter[1][:name] || l(("field_"+field.to_s.gsub(/\_id$/, "")).to_sym) %></label>
</td>
<td class="operator">
<%= label_tag "operators_#{field}", l(:description_filter), :class => "hidden-for-sighted" %>
<%= select_tag "op[#{field}]", options_for_select(operators_for_select(options[:type]),
query.operator_for(field)), :id => "operators_#{field}",
:onchange => "toggle_operator('#{field}');" %>
</td>
<td class="values">
<div id="div_values_<%= field %>" style="display:none;">
<% case options[:type]
when :list, :list_optional, :list_status, :list_subprojects %>
<span class="span_values_<%= field %>">
<%= select_tag "v[#{field}][]", options_for_select(options[:values], query.values_for(field)), :class => "values_#{field}", :id => "values_#{field}_1", :multiple => (query.values_for(field) && query.values_for(field).length > 1) %>
<%= link_to_function image_tag('bullet_toggle_plus.png'), "toggle_multi_select('values_#{field}_1');" %>
</span>
<% when :date, :date_past %>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field), :size => 10, :class => "values_#{field}", :id => "values_#{field}_1" %> <%= calendar_for "values_#{field}_1" %></span>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field, 1), :size => 10, :class => "values_#{field}", :id => "values_#{field}_2" %> <%= calendar_for "values_#{field}_2" %></span>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field), :size => 3, :class => "values_#{field}" %> <%= l(:label_day_plural) %></span>
<% when :string, :text %>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field), :class => "values_#{field}", :id => "values_#{field}", :size => 30 %></span>
<% when :integer, :float %>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field), :class => "values_#{field}", :id => "values_#{field}_1", :size => 6 %></span>
<span class="span_values_<%= field %>"><%= text_field_tag "v[#{field}][]", query.value_for(field, 1), :class => "values_#{field}", :id => "values_#{field}_2", :size => 6 %></span>
<% end %>
</div>
<script type="text/javascript">toggle_filter('<%= field %>');</script>
</td>
</tr>
<% end %>
<table id="filters-table">
</table>
</td>
<td class="add-filter">
<%= label_tag('add_filter_select', l(:label_filter_add)) %>
<%= select_tag 'add_filter_select', options_for_select([["",""]] + query.available_filters.sort{|a,b| a[1][:order]<=>b[1][:order]}.collect{|field| [ field[1][:name] || l(("field_"+field[0].to_s.gsub(/_id$/, "")).to_sym), field[0]] unless query.has_filter?(field[0])}.compact),
:onchange => "add_filter();",
:name => nil %>
<%= select_tag 'add_filter_select', filters_options_for_select(query), :name => nil %>
</td>
</tr>
</table>
<%= hidden_field_tag 'f[]', '' %>
<%= javascript_tag '$(document).ready(function(){observeIssueFilters();});' %>
<% include_calendar_headers_tags %>

View File

@ -23,7 +23,7 @@
<%= select 'query', 'group_by', @query.groupable_columns.collect {|c| [c.caption, c.name.to_s]}, :include_blank => true %></p>
</div>
<fieldset><legend><%= l(:label_filter_plural) %></legend>
<fieldset id="filters"><legend><%= l(:label_filter_plural) %></legend>
<%= render :partial => 'queries/filters', :locals => {:query => query}%>
</fieldset>

View File

@ -78,35 +78,131 @@ function hideFieldset(el) {
fieldset.children('div').hide();
}
function add_filter() {
var select = $('#add_filter_select');
var field = select.val();
$('#tr_'+field).show();
var check_box = $('#cb_' + field);
check_box.attr('checked', true);
toggle_filter(field);
select.val('');
function initFilters(){
$('#add_filter_select').change(function(){
addFilter($(this).val(), '', []);
});
$('#filters-table td.field input[type=checkbox]').each(function(){
toggleFilter($(this).val());
});
$('#filters-table td.field input[type=checkbox]').live('click',function(){
toggleFilter($(this).val());
});
$('#filters-table .toggle-multiselect').live('click',function(){
toggleMultiSelect($(this).siblings('select'));
});
$('#filters-table input[type=text]').live('keypress', function(e){
if (e.keyCode == 13) submit_query_form("query_form");
});
}
select.children('option').each(function(index) {
function addFilter(field, operator, values) {
var fieldId = field.replace('.', '_');
var tr = $('#tr_'+fieldId);
if (tr.length > 0) {
tr.show();
} else {
buildFilterRow(field, operator, values);
}
$('#cb_'+fieldId).attr('checked', true);
toggleFilter(field);
$('#add_filter_select').val('').children('option').each(function(){
if ($(this).attr('value') == field) {
$(this).attr('disabled', true);
}
});
}
function toggle_filter(field) {
check_box = $('#cb_' + field);
if (check_box.is(':checked')) {
$("#operators_" + field).show().removeAttr('disabled');
toggle_operator(field);
function buildFilterRow(field, operator, values) {
var fieldId = field.replace('.', '_');
var filterTable = $("#filters-table");
var filterOptions = availableFilters[field];
var operators = operatorByType[filterOptions['type']];
var filterValues = filterOptions['values'];
var i, select;
var tr = $('<tr class="filter">').attr('id', 'tr_'+fieldId).html(
'<td class="field"><input checked="checked" id="cb_'+fieldId+'" name="f[]" value="'+field+'" type="checkbox"><label for="cb_'+fieldId+'"> '+filterOptions['name']+'</label></td>' +
'<td class="operator"><select id="operators_'+fieldId+'" name="op['+field+']"></td>' +
'<td class="values"></td>'
);
filterTable.append(tr);
select = tr.find('td.operator select');
for (i=0;i<operators.length;i++){
var option = $('<option>').val(operators[i]).html(operatorLabels[operators[i]]);
if (operators[i] == operator) {option.attr('selected', true)};
select.append(option);
}
select.change(function(){toggleOperator(field)});
switch (filterOptions['type']){
case "list":
case "list_optional":
case "list_status":
case "list_subprojects":
tr.find('td.values').append(
'<span style="display:none;"><select class="value" id="values_'+fieldId+'_1" name="v['+field+'][]"></select>' +
' <span class="toggle-multiselect">&nbsp;</span></span>'
);
select = tr.find('td.values select');
if (values.length > 1) {select.attr('multiple', true)};
for (i=0;i<filterValues.length;i++){
var filterValue = filterValues[i];
var option = $('<option>');
if ($.isArray(filterValue)) {
option.val(filterValue[1]).html(filterValue[0]);
} else {
$("#operators_" + field).hide().attr('disabled', true);
option.val(filterValue).html(filterValue);
}
if (values.indexOf(filterValues[i][1]) > -1) {option.attr('selected', true)};
select.append(option);
}
break;
case "date":
case "date_past":
tr.find('td.values').append(
'<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_1" size="10" class="value date_value" value="'+values[0]+'" /></span>' +
' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" value="'+values[1]+'" /></span>' +
' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" value="'+values[0]+'" /> '+labelDayPlural+'</span>'
);
$('#values_'+fieldId+'_1').val(values[0]).datepicker(datepickerOptions);
$('#values_'+fieldId+'_2').val(values[1]).datepicker(datepickerOptions);
$('#values_'+fieldId).val(values[0]);
break;
case "string":
case "text":
tr.find('td.values').append(
'<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="30" class="value" value="'+values[0]+'" /></span>'
);
$('#values_'+fieldId).val(values[0]);
break;
case "integer":
case "float":
tr.find('td.values').append(
'<span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_1" size="6" class="value" value="'+values[0]+'" /></span>' +
' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'_2" size="6" class="value" value="'+values[1]+'" /></span>'
);
$('#values_'+fieldId+'_1').val(values[0]);
$('#values_'+fieldId+'_2').val(values[1]);
break;
}
}
function toggleFilter(field) {
var fieldId = field.replace('.', '_');
if ($('#cb_' + fieldId).is(':checked')) {
$("#operators_" + fieldId).show().removeAttr('disabled');
toggleOperator(field);
} else {
$("#operators_" + fieldId).hide().attr('disabled', true);
enableValues(field, []);
}
}
function enableValues(field, indexes) {
$(".values_" + field).each(function(index) {
var fieldId = field.replace('.', '_');
$('#tr_'+fieldId+' td.values .value').each(function(index) {
if (indexes.indexOf(index) >= 0) {
$(this).removeAttr('disabled');
$(this).parents('span').first().show();
@ -122,16 +218,11 @@ function enableValues(field, indexes) {
$(this).show();
}
});
if (indexes.length > 0) {
$("#div_values_" + field).show();
} else {
$("#div_values_" + field).hide();
}
}
function toggle_operator(field) {
operator = $("#operators_" + field);
function toggleOperator(field) {
var fieldId = field.replace('.', '_');
var operator = $("#operators_" + fieldId);
switch (operator.val()) {
case "!*":
case "*":
@ -158,12 +249,11 @@ function toggle_operator(field) {
}
}
function toggle_multi_select(id) {
var select = $('#'+id);
if (select.attr('multiple')) {
select.removeAttr('multiple');
function toggleMultiSelect(el) {
if (el.attr('multiple')) {
el.removeAttr('multiple');
} else {
select.attr('multiple', true);
el.attr('multiple', true);
}
}
@ -172,12 +262,6 @@ function submit_query_form(id) {
$('#'+id).submit();
}
function observeIssueFilters() {
$('#query_form input[type=text]').keypress(function(e){
if (e.keyCode == 13) submit_query_form("query_form");
});
}
var fileFieldCount = 1;
function addFileField() {
var fields = $('#attachments_fields');

View File

@ -338,13 +338,14 @@ fieldset.collapsible.collapsed legend { background-image: url(../images/arrow_co
fieldset#date-range p { margin: 2px 0 2px 0; }
fieldset#filters table { border-collapse: collapse; }
fieldset#filters table td { padding: 0; vertical-align: middle; }
fieldset#filters tr.filter { height: 2em; }
fieldset#filters tr.filter { height: 2.1em; }
fieldset#filters td.field { width:200px; }
fieldset#filters td.operator { width:170px; }
fieldset#filters td.values { white-space:nowrap; }
fieldset#filters td.values select {min-width:130px;}
fieldset#filters td.values img { vertical-align: middle; margin-left:1px; }
fieldset#filters td.values input {height:1em;}
fieldset#filters td.add-filter { text-align: right; vertical-align: top; }
.toggle-multiselect {background: url(../images/bullet_toggle_plus.png) no-repeat 0% 40%; padding-left:8px; margin-left:0; cursor:pointer;}
.buttons { font-size: 0.9em; margin-bottom: 1.4em; margin-top: 1em; }
div#issue-changesets {float:right; width:45%; margin-left: 1em; margin-bottom: 1em; background: #fff; padding-left: 1em; font-size: 90%;}