TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make changing operators work with multiselect

Browse Source
pull/5981/head
Wieland Lindenthal 7 years ago committed by Jens Ulferts
parent 22dffad38d
commit 1d779ea707
No known key found for this signature in database
GPG Key ID: 3CAA4B1182CF5308
3 changed files with 128 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 73
      app/assets/javascripts/project/filters.js
  2. 14
      app/assets/stylesheets/content/_projects_list.sass
  3. 74
      app/views/projects/index.html.erb

73
app/assets/javascripts/project/filters.js
Unescape View File

@ -32,6 +32,7 @@ jQuery(function($) {
let operatorsWithoutValues = ['*', '!*'];
let operatorsWithVaues = ['*', '!*'];
let selectFilterTypes = ['list', 'list_all', 'list_optional'];
function toggleProjectFilterForm() {
if($button.hasClass('-active')) {
@ -50,22 +51,56 @@ jQuery(function($) {
$advancedFilters.each(function(_i, filter){
let $filter = $(filter);
let filterName = $filter.attr('filter-name');
let filterType = $filter.attr('filter-type');
let operator = $('select[name="operator"]', $filter).val();
let value = $('select[name="value"],input[name="value"]', $filter).val();
let filterParam = {};
if (operatorsWithoutValues.includes(operator)) {
// operator does not expect a value
filterParam[filterName] = {
'operator': operator,
'values': []
}
filters.push(filterParam);
} else {
if (value && value.length > 0) {
filterParam[filterName] = {
'operator': operator,
'values': [value]
// Operator expects presence of value(s)
let $valueBlock = $('.advanced-filters--filter-value', $filter);
if (selectFilterTypes.includes(filterType)) {
if ($valueBlock.hasClass('multi-value')) {
// Expect values to be an Array.
let values = $('.multi-select select[name="value[]"]', $valueBlock).val();
if (values.length > 0) {
filterParam[filterName] = {
'operator': operator,
'values': values
}
// only add filter if a value is present.
filters.push(filterParam);
}
} else {
// Expect value to be a single value.
let value = $('.single-select select[name="value"]', $valueBlock).val();
if (value.length > 0) {
filterParam[filterName] = {
'operator': operator,
'values': [value]
}
// only add filter if a value is present.
filters.push(filterParam);
}
}
} else {
// not a select box
let value = $('input[name="value"]', $valueBlock).val();
if (value.length > 0) {
filterParam[filterName] = {
'operator': operator,
'values': [value]
}
// only add filter if a value is present.
filters.push(filterParam);
}
filters.push(filterParam);
}
}
})
@ -74,8 +109,34 @@ jQuery(function($) {
return false;
}
function toggleMultiselect(){
let $self = $(this);
let $valueSelector = $self.parents('.advanced-filters--filter-value');
let $singleSelect = $('.single-select select', $valueSelector);
let $multiSelect = $('.multi-select select', $valueSelector);
if ($valueSelector.hasClass('multi-value')) {
let values = $singleSelect.val();
let value = null;
if (values && values.length > 1) {
value = values[0];
} else {
value = values;
}
$singleSelect.val(value);
} else {
let value = $multiSelect.val();
$singleSelect.val(value);
}
$valueSelector.toggleClass('multi-value');
return false;
}
// Register event listeners
$filterForm.submit(sendForm)
$('.advanced-filters--filter-value span.multi-select-toggle').click(toggleMultiselect);
$button.click(toggleProjectFilterForm);
$closeIcon.click(toggleProjectFilterForm);
});

14
app/assets/stylesheets/content/_projects_list.sass
Unescape View File

@ -30,11 +30,23 @@ form.project-filters
display: none
&.-expanded
display: block
.advanced-filters--filter-value
&.hidden
display: none
.multi-select
display: none
.single-select
display: block
&.multi-value
.multi-select
display: block
.single-select
display: none
.advanced-filters--controls
margin-left: 1rem
margin-right: 1rem
margin-bottom: 1rem
#project-table
tr.basics
&.-expanded

74
app/views/projects/index.html.erb
Unescape View File

@ -63,7 +63,7 @@ See doc/COPYRIGHT.rdoc for more details.
<legend><%= t(:label_filter_plural) %></legend>
<ul class="advanced-filters--filters">
<% allowed_filters(@query).each do |filter| %>
<li class="advanced-filters--filter" filter-name="<%= filter.name %>">
<li class="advanced-filters--filter" filter-name="<%= filter.name %>" filter-type="<%= filter.type %>">
<label class='advanced-filters--filter-name' for="<%= filter.name %>">
<%= filter.human_name %>
</label>
@ -80,32 +80,54 @@ See doc/COPYRIGHT.rdoc for more details.
selected_operator),
class: 'advanced-filters--select' %>
</div>
<div class="advanced-filters--filter-value">
<% unless operators_without_values.include? selected_operator %>
<% if %i(list list_optional list_all ).include? filter.type %>
<div>
<span class="inline-label">
<%= select_tag :value,
options_from_collection_for_select(
filter.allowed_values,
:second,
:first,
@query.find_active_filter(filter.name)
.try(:values)
.try(:first)),
class: 'form--select -small' %>
<a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0">
<span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4">
<span class="hidden-for-sighted ng-binding">Enable multiselect</span>
</span>
</a>
<% is_multi_value = (@query.find_active_filter(filter.name)
.try(:values) &&
@query.find_active_filter(filter.name)
.values.try(:size) > 1) %>
<% value_visibility = operators_without_values.include?(selected_operator) ? 'hidden' : '' %>
<div class="advanced-filters--filter-value <%= value_visibility %> <%= is_multi_value ? 'multi-value' : '' %>">
<% if %i(list list_optional list_all ).include? filter.type %>
<div class="single-select">
<span class="inline-label">
<%= select_tag :value,
options_from_collection_for_select(
filter.allowed_values,
:second,
:first,
@query.find_active_filter(filter.name)
.try(:values)
.try(:first)),
class: 'form--select -small' %>
<span href="" class="form-label no-decoration-on-hover -transparent multi-select-toggle" tabindex="0">
<span class="icon-context icon-button icon-add icon4" title="<%= t(:label_enable_multi_select) %>" icon-name="add" icon-title="<%= t(:label_enable_multi_select) %>" css-class="icon4">
<span class="hidden-for-sighted"><%= t(:label_enable_multi_select) %></span>
</span>
</span>
</div>
<% elsif filter.type == :string %>
<div>
<%= text_field_tag :value, filter.values.first, class: 'advanced-filters--text-field' %>
</div>
<% end %>
</span>
</div>
<div class="multi-select">
<span class="inline-label">
<%= select_tag :value,
options_from_collection_for_select(
filter.allowed_values,
:second,
:first,
@query.find_active_filter(filter.name)
.try(:values)
),
class: 'form--select -small',
multiple: true %>
<span href="" class="form-label no-decoration-on-hover -transparent multi-select-toggle" tabindex="0">
<span class="icon-context icon-button icon-minus2 icon4" title="<%= t(:label_enable_multi_select) %>" icon-name="minus2" icon-title="<%= t(:label_enable_multi_select) %>" css-class="icon4">
<span class="hidden-for-sighted"><%= t(:label_enable_multi_select) %></span>
</span>
</span>
</span>
</div>
<% elsif filter.type == :string %>
<div>
<%= text_field_tag :value, filter.values.first, class: 'advanced-filters--text-field' %>
</div>
<% end %>
</div>
</li>

Write Preview
Loading…
Cancel
Save