Better table filter tags.

Before the table filter tags shown below a filtered table did not show what attribute is filtered. This is somehow confusing, if there are a lot of filters active (especially in the orders listing).

This also takes into account, that a attribute filtered by a select uses the text and not the value for the tag display.

Fixes #6169

backend/app/assets/javascripts/spree/backend/admin.js.erb

@@ -128,14 +128,24 @@ jQuery(function($) {
     $("#table-filter form").submit();
   });
 
-  $(".js-filterable").each(function(){
-    if($(this).val()){
-      var ransack_field = $(this).attr("id");
-      var ransack_value = $(this).val();
-      var filter = '<span class="js-filter label label-default" data-ransack-field="' + ransack_field + '">' + ransack_value + '<span class="icon icon-delete js-delete-filter"></span></span>';
-
-      $(".js-filters").show();
-      $(".js-filters").append(filter);
+  $(".js-filterable").each(function() {
+    var $this = $(this);
+
+    if ($this.val()) {
+      var ransack_value, filter;
+      var ransack_field = $this.attr("id");
+      var label = $('label[for="' + ransack_field + '"]');
+
+      if ($this.is("select")) {
+        ransack_value = $this.find('option:selected').text();
+      } else {
+        ransack_value = $this.val();
+      }
+
+      label = label.text() + ': ' + ransack_value;
+      filter = '<span class="js-filter label label-default" data-ransack-field="' + ransack_field + '">' + label + '<span class="icon icon-delete js-delete-filter"></span></span>';
+
+      $(".js-filters").append(filter).show();
     }
   });
 

backend/app/assets/stylesheets/spree/backend/components/_tables.scss

@@ -36,12 +36,17 @@ table.table {
 .table-active-filters {
   display: none;
   margin: -0.5em 0 0.9em 0;
+
   .label {
+    display: inline-block;
     margin-right: 0.5em;
+    margin-bottom: 0.5em;
     font-size: 85%;
+
     &:hover {
       opacity: 0.8;
     }
+
     span.icon {
       margin: 0.3em 0 0 0.6em;
       font-size: 80%;