Use strings for filter values in backend and frontend

When initializing a query from id, ID values (e.g., version) are
integers, with query_props (and thus, URL params), they are returned as
strings.

This causes an invalid selected value starting with Angular 1.4 due to
the correct typing of ngoptions.

app/models/queries/filter.rb

@@ -90,6 +90,8 @@ class Queries::Filter
     @@filter_params.each do |param_field|
       send("#{param_field}=", options[param_field])
     end
+
+    stringify_values
   end
 
   # (de-)serialization
@@ -133,6 +135,12 @@ class Queries::Filter
 
   private
 
+  def stringify_values
+    unless values.nil?
+      values.map!(&:to_s)
+    end
+  end
+
   def validate_presence_of_values
     errors.add(:values, I18n.t('activerecord.errors.messages.blank')) if values.nil? || values.reject(&:blank?).empty?
   end

frontend/app/components/filters/query-filter/query-filter.directive.ts

@@ -95,7 +95,7 @@ function queryFilterDirective($timeout,
 
       function buildOptions(values) {
         return values.map(function (value) {
-          return [value.name, value.id];
+          return [value.name, value.id.toString()];
         });
       }
 

frontend/app/components/filters/toggled-multiselect/toggled-multiselect.directive.ts

@@ -50,26 +50,12 @@ export class ToggledMultiselectController {
     }
 
     this.text = {
+      placeholder: I18n.t('js.placeholders.selection'),
       enableMulti: I18n.t('js.work_packages.label_enable_multi_select'),
       disableMulti: I18n.t('js.work_packages.label_disable_multi_select'),
     };
   }
 
-  /**
-   * The filter values we receive from the API are correctly typed
-   * (e.g., User ID number:1).
-   *
-   * Values from the query props however are returned as string.
-   * Prior to Angular 1.4., this check was identical but now we compare strings explicitly.
-   */
-  public filterValue(val) {
-    if (val == null) {
-      return val;
-    }
-
-    return val.toString();
-  }
-
   public get value() {
     return this.filter.values;
   }

frontend/app/components/filters/toggled-multiselect/toggled_multiselect.html

@@ -7,8 +7,8 @@
           ng-attr-id="values-{{$ctrl.filter.name}}"
           class="form--select -small"
           style="vertical-align: top;"
-          ng-options="$ctrl.filterValue(value[1]) as value[0] for value in $ctrl.availableOptions">
-    <option value="" ng-show="false"></option>
+          ng-options="value[1] as value[0] for value in $ctrl.availableOptions">
+    <option value="" disabled ng-bind="::$ctrl.text.placeholder"></option>
   </select>
 
   <select multiple
@@ -20,8 +20,8 @@
           ng-attr-id="values-{{$ctrl.filter.name}}"
           class="form--select -small"
           style="vertical-align: top;"
-          ng-options="$ctrl.filterValue(value[1]) as value[0] for value in $ctrl.availableOptions">
-    <option value="" ng-show="false"></option>
+          ng-options="value[1] as value[0] for value in $ctrl.availableOptions">
+    <option value="" disabled ng-bind="::$ctrl.text.placeholder"></option>
   </select>
 
   <a href class="form-label no-decoration-on-hover -transparent" ng-click="$ctrl.toggleMultiselect()">