Make changing operators work with multiselect

app/assets/javascripts/project/filters.js

@@ -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) {
+        // Operator expects presence of value(s)
-          filterParam[filterName] = {
+        let $valueBlock = $('.advanced-filters--filter-value', $filter);
-            'operator': operator,
+        if (selectFilterTypes.includes(filterType)) {
-            'values': [value]
+          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);
 });

app/assets/stylesheets/content/_projects_list.sass

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

app/views/projects/index.html.erb

@@ -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">
+          <% is_multi_value = (@query.find_active_filter(filter.name)
-            <% unless operators_without_values.include? selected_operator %>
+                                     .try(:values) &&
-              <% if %i(list list_optional list_all ).include? filter.type %>
+                               @query.find_active_filter(filter.name)
-                <div>
+                                     .values.try(:size) > 1) %>
-                  <span class="inline-label">
+          <% value_visibility = operators_without_values.include?(selected_operator) ? 'hidden' : '' %>
-                    <%= select_tag :value,
+          <div class="advanced-filters--filter-value <%= value_visibility %> <%= is_multi_value ? 'multi-value' : '' %>">
-                                   options_from_collection_for_select(
+            <% if %i(list list_optional list_all ).include? filter.type %>
-                                     filter.allowed_values,
+              <div class="single-select">
-                                     :second,
+                <span class="inline-label">
-                                     :first,
+                  <%= select_tag :value,
-                                     @query.find_active_filter(filter.name)
+                                 options_from_collection_for_select(
-                                           .try(:values)
+                                   filter.allowed_values,
-                                           .try(:first)),
+                                   :second,
-                                   class: 'form--select -small' %>
+                                   :first,
-                    <a href="" class="form-label no-decoration-on-hover -transparent" ng-click="toggleMultiselect()" tabindex="0">
+                                   @query.find_active_filter(filter.name)
-                      <span class="icon-context icon-button icon-add icon4" title="Enable multiselect" icon-name="add" icon-title="Enable multiselect" css-class="icon4">
+                                         .try(:values)
-                        <span class="hidden-for-sighted ng-binding">Enable multiselect</span>
+                                         .try(:first)),
-                      </span>
+                                 class: 'form--select -small' %>
-                    </a>
+                  <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>
+                </span>
-              <% elsif filter.type == :string %>
+              </div>
-                <div>
+              <div class="multi-select">
-                  <%= text_field_tag :value, filter.values.first, class: 'advanced-filters--text-field' %>
+                <span class="inline-label">
-                </div>
+                  <%= select_tag :value,
-              <% end %>
+                                 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>