Add button to clear article search (list.js customization)

app/assets/javascripts/list.customized.js

@@ -11,30 +11,56 @@ var CustomizedList = function(id, options, values) {
       this.defaults(options);
       this.list(id, options, values);
       this.callbacks(options);
+      this.onload(options);
     },
     defaults: function(options) {
       options.delayedSearchClass = options.delayedSearchClass || 'delayed-search';
       options.delayedSearchTime = options.delayedSearchTime || 500;
+      options.highlightClass = options.highlightClass || 'btn-primary';
+      options.resetSearchClass = options.resetSearchClass || 'reset-search';
     },
     list: function(id, options, values) {
       self.list = new window.List(id, options, values);
     },
     callbacks: function(options) {
-      h.addEvent(h.getByClass(options.delayedSearchClass, self.list.listContainer), 'keyup', self.searchDelayStart);
+      var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
+      $(resetSearchButton).click(self.resetSearch);
+      self.list.on('updated', self.highlightResetButton);
+      
+      var delayedSearchInput = h.getByClass(options.delayedSearchClass, self.list.listContainer);
+      $(delayedSearchInput).keyup(self.searchDelayStart);
+    },
+    onload: function(options) {
+      var initialSearchTerm = $('.' + options.delayedSearchClass + ', .' + options.searchClass, self.list.listContainer).val();
+      if('' != initialSearchTerm) {
+        self.list.search(initialSearchTerm);
+      }
     }
   };
   
   this.searchDelayStart = function(searchString, columns) {
     // TODO: if keycode corresponds to 'ENTER' ? skip delay
-    // TODO: if search is about to be cleared (empty searchString) ? skip delay
     clearTimeout(self.searchTimeout);
     self.searchTimeout = window.setTimeout(function() {self.searchDelayEnd(searchString, columns)}, options.delayedSearchTime);
+    
+    var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
+    $(resetSearchButton).removeClass(options.highlightClass);
   }
   
   this.searchDelayEnd = function(searchString, columns) {
     self.list.search(searchString, columns);
   }
   
+  this.highlightResetButton = function() {
+    var resetSearchButton = h.getByClass(options.resetSearchClass, self.list.listContainer);
+    $(resetSearchButton).toggleClass(options.highlightClass, self.list.searched);
+  }
+  
+  this.resetSearch = function() {
+    $('.' + options.delayedSearchClass + ', .' + options.searchClass, self.list.listContainer).val('');
+    self.list.search('');
+  }
+  
   init.start(id, options, values);
 }
 

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -238,3 +238,8 @@ tr.unavailable {
     margin-bottom: 15px
   }
 }
+
+// allow buttons as input add-on (with proper height)
+.input-append button.add-on {
+  height: inherit;
+}

app/views/group_orders/_form.html.haml

@@ -43,7 +43,11 @@
 
 .row-fluid
   .well.clear
-    = text_field_tag :article, params[:article], placeholder: t('.search_article'), class: 'search-query input-large delayed-search'
+    .form-search
+      .input-append
+        = text_field_tag :article, params[:article], placeholder: t('.search_article'), class: 'search-query delayed-search'
+        %button.add-on.btn.reset-search{:type => :button, :title => t('.reset_article_search')}
+          %i.icon.icon-remove
 
 = form_for @group_order do |f|
   = f.hidden_field :lock_version

config/locales/de.yml

@@ -787,6 +787,7 @@ de:
       new_funds: Neuer Kontostand
       note: Notiz
       price: Preis
+      reset_article_search: Suche zurücksetzen
       search_article: Artikel suchen... 
       sum: Summe
       sum_amount: ! 'Gesamtbestellmenge bisher:'

config/locales/en.yml

@@ -791,6 +791,7 @@ en:
       new_funds: New account balance
       note: Note
       price: Price
+      reset_article_search: Reset search
       search_article: Search for article... 
       sum: Sum
       sum_amount: Current amount