remove filters by clicking on a fancy button instead of just unchecking them

git-svn-id: https://dev.finn.de/svn/cockpit/branches/reporting_merge@1746 7926756e-e54e-46e6-9721-ed318f58905e

app/controllers/cost_reports_controller.rb

@@ -42,7 +42,7 @@ class CostReportsController < ApplicationController
   ##
   # Extract active filters from the http params
   def http_filter_parameters
-    (params[:fields] || []).inject({:operators => {}, :values => {}}) do |hash, field|
+    (params[:fields].reject { |f| f.empty? } || []).inject({:operators => {}, :values => {}}) do |hash, field|
       hash[:operators][field.to_sym] = params[:operators][field]
       hash[:values][field.to_sym] = params[:values][field]
       hash

app/views/cost_reports/filters/_activate_filter.rhtml

@@ -8,7 +8,7 @@
 %>
 
 <td width="<%= element[:width] || 200 %>">
-  <input id="cb_<%= element[:filter_name] %>" name="fields[]" onclick="toggle_filter('<%= element[:filter_name] %>');"
-         type="checkbox" value="<%= element[:filter_name] %>" />
-  <label for="cb_<%= element[:filter_name] %>"><%= element[:label] %></label>
+  <input id= "rm_<%= element[:filter_name] %>" name="fields[]" onclick="remove_filter('<%= element[:filter_name] %>');"
+         type="button" value="" class="icon filter_rem"/>
+  <label><%= element[:label] %></label>
 </td>

assets/javascripts/reporting.js

@@ -1,11 +1,10 @@
 /*global $, selectAllOptions, moveOptions */
 
 function toggle_filter(field) {
-    var check_box, to_toggle;
-    check_box = $('cb_' + field);
-    to_toggle = check_box.up().siblings();
-    
-    if (check_box.checked) {
+    var remove, to_toggle;
+    remove = $('rm_' + field);
+    to_toggle = remove.up().siblings();
+    if (remove.visible()) {
         to_toggle.invoke('show');
     }
     else {
@@ -62,23 +61,21 @@ function display_category(tr_field) {
 }
 
 function show_filter(field) {
-    var field_el = $('tr_' +  field), check_box = null;
+    var field_el = $('tr_' +  field);
     if (field_el !== null) {
         field_el.show();
-        check_box = $('cb_' + field);
-        check_box.checked = true;
         toggle_filter(field);
+        $('rm_' + field).value = field;
         operator_changed(field, $("operators_" + field));
         display_category(field_el);
     }
 }
 
 function hide_filter(field) {
-    var field_el = $('tr_' +  field), check_box = null;
+    var field_el = $('tr_' +  field);
     if (field_el !== null) {
+        $('rm_' + field).value = "";
         field_el.hide();
-        check_box = $('cb_' + field);
-        check_box.checked = false;
         toggle_filter(field);
         operator_changed(field, $("operators_" + field));
     }
@@ -110,6 +107,11 @@ function add_filter(select) {
     disable_select_option(select, field);
 }
 
+function remove_filter(field) {
+    hide_filter(field);
+    enable_select_option($("add_filter_select"), field);
+}
+
 function show_group_by(group_by, target) {
     var source, group_option, i;
     source = $("group_by_container");

assets/stylesheets/reporting.css

@@ -9,7 +9,7 @@
 
 .report {
   text-align:       center;
-  border-collapse:  collapse;  
+  border-collapse:  collapse;
   border:           solid 1px #ccc !important;
   width:            auto !important;
 }
@@ -135,7 +135,7 @@
 
 .moveLeft {
   margin-left: 0px;
-  margin-right: 0px;  
+  margin-right: 0px;
   background-image: url(../images/arrow_D_left.gif);
 }
 
@@ -157,3 +157,17 @@
   background-image: url(../images/arrow_B_down.gif);
 }
 
+.filter_rem {
+  overflow: hidden;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  cursor: pointer;
+  background-image: url(../images/filter_rem.png);
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-position: 50%;
+  height: 16px;
+  width: 16px;
+  border-style: none;
+}
+