Merge pull request #180 from foodcoop-rostock/search-article-list-modified

Search articles in group_orders form

Gemfile

@@ -19,7 +19,7 @@ end
 gem 'jquery-rails'
 gem 'select2-rails'
 gem 'bootstrap-datepicker-rails'
-
+gem 'rails-assets-listjs', '0.2.0.beta.4' # remember to maintain list.*.js plugins and template engines on update
 
 gem 'mysql2'
 gem 'prawn'

Gemfile.lock

@@ -192,6 +192,8 @@ GEM
       activesupport (= 3.2.13)
       bundler (~> 1.0)
       railties (= 3.2.13)
+    rails-assets-listjs (0.2.0.beta.4)
+      railties (>= 3.1)
     rails-settings-cached (0.2.4)
       rails (>= 3.0.0)
     railties (3.2.13)
@@ -332,6 +334,7 @@ DEPENDENCIES
   prawn
   quiet_assets
   rails (~> 3.2.9)
+  rails-assets-listjs (= 0.2.0.beta.4)
   rails-settings-cached (= 0.2.4)
   resque
   rspec-core

app/assets/javascripts/application.js

@@ -8,6 +8,10 @@
 //= require bootstrap-datepicker/locales/bootstrap-datepicker.de
 //= require bootstrap-datepicker/locales/bootstrap-datepicker.nl
 //= require jquery.observe_field
+//= require list
+//= require list.unlist
+//= require list.delay
+//= require list.reset
 //= require rails.validations
 //= require_self
 //= require ordering

app/assets/javascripts/list.delay.js

@@ -0,0 +1,50 @@
+// for use with listjs 0.2.0
+// https://github.com/javve/list.js
+
+(function(window, undefined) {
+
+window.List.prototype.plugins.delay = function(locals, options) {
+  var list = this;
+  
+  this.searchTimeout = undefined;
+  
+  var init = {
+    start: function(options) {
+      this.defaults(options);
+      this.callbacks(options);
+      this.onload(options);
+    },
+    defaults: function(options) {
+      options.delayedSearchClass = options.delayedSearchClass || 'delayed-search';
+      options.delayedSearchTime = options.delayedSearchTime || 500;
+    },
+    callbacks: function(options) {
+      $('.' + options.delayedSearchClass, list.listContainer).keyup(list.searchDelayStart);
+    },
+    onload: function(options) {
+      var initialSearchTerm = $('.' + options.delayedSearchClass, list.listContainer).val();
+      if('' != initialSearchTerm) {
+        list.search(initialSearchTerm);
+      }
+    }
+  };
+  
+  this.searchDelayStart = function(searchString, columns) {
+    // TODO: if keycode corresponds to 'ENTER' ? skip delay
+    clearTimeout(list.searchTimeout);
+    list.searchTimeout = window.setTimeout(
+      function() {list.searchDelayEnd(searchString, columns)},
+      options.delayedSearchTime
+    );
+    
+    $(list.listContainer).trigger('updateComing');
+  };
+  
+  this.searchDelayEnd = function(searchString, columns) {
+    list.search(searchString, columns);
+  };
+  
+  init.start(options);
+}
+
+})(window);

app/assets/javascripts/list.reset.js

@@ -0,0 +1,42 @@
+// for use with listjs 0.2.0
+// https://github.com/javve/list.js
+
+(function(window, undefined) {
+
+window.List.prototype.plugins.reset = function(locals, options) {
+  var list = this;
+  
+  var init = {
+    start: function(options) {
+      this.defaults(options);
+      this.callbacks(options);
+    },
+    defaults: function(options) {
+      options.highlightClass = options.highlightClass || 'btn-primary';
+      options.resetSearchClass = options.resetSearchClass || 'reset-search';
+      options.resettableClass = options.resettableClass || 'resettable';
+    },
+    callbacks: function(options) {
+      $('.' + options.resetSearchClass, list.listContainer).click(list.resetSearch);
+      list.on('updated', list.highlightResetButton);
+      
+      $(list.listContainer).on('updateComing', function() {
+        list.highlightResetButton(false);
+      });
+    }
+  };
+  
+  this.highlightResetButton = function(highlightEnabled) {
+    highlightEnabled = (undefined === highlightEnabled) ? (list.searched) : (highlightEnabled);
+    $('.' + options.resetSearchClass, list.listContainer).toggleClass(options.highlightClass, highlightEnabled);
+  };
+  
+  this.resetSearch = function() {
+    $('.' + options.resettableClass, list.listContainer).val('');
+    list.search('');
+  };
+  
+  init.start(options);
+}
+
+})(window);

app/assets/javascripts/list.unlist.js

@@ -0,0 +1,124 @@
+// for use with listjs 0.2.0
+// https://github.com/javve/list.js
+
+/*******************************************************************************
+********************************************************************************
+
+The following code is a modification of list.js. It was created by copy-pasting
+the original code with the copyright notice below.
+
+********************************************************************************
+*******************************************************************************/
+
+
+
+/*******************************************************************************
+Begin copyright notice of the original code
+*******************************************************************************/
+
+/*
+ListJS Beta 0.2.0
+By Jonny Strömberg (www.jonnystromberg.com, www.listjs.com)
+
+OBS. The API is not frozen. It MAY change!
+
+License (MIT)
+
+Copyright (c) 2011 Jonny Strömberg http://jonnystromberg.com
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+/*******************************************************************************
+End copyright notice of the original code
+*******************************************************************************/
+
+
+
+(function(w, undefined) {
+/*******************************************************************************
+Begin copy-pasted and modified code
+*******************************************************************************/
+
+// * template engine which adds class 'unlisted' instead of removing from DOM
+// * especially useful in case of formulars
+// * uses jQuery's $
+w.List.prototype.templateEngines.unlist = function(list, settings) {
+  var h = w.ListJsHelpers;
+  
+  // start with standard engine, override specific methods afterwards
+  this.superClass = w.List.prototype.templateEngines.standard;
+  this.superClass(list, settings);
+  
+  // todo refer to listjs code instead of copy-pasting
+  var listSource = h.getByClass(settings.listClass, list.listContainer, true);
+  var templater = this;
+  var ensure = {
+    created: function(item) {
+      if(item.elm === undefined) {
+        templater.create(item);
+      }
+    }
+  };
+
+  var init = {
+    start: function(options) {
+      this.defaults(options);
+      this.callbacks(options);
+    },
+    defaults: function(options) {
+      options.listHeadingsClass = options.listHeadingsClass || 'list-heading';
+    },
+    callbacks: function(options) {
+      list.on('updated', templater.updateListHeadings);
+    }
+  };
+  
+  this.show = function(item) {
+    ensure.created(item);
+    listSource.appendChild(item.elm); // append item (or move it to the end)
+    $(item.elm).removeClass('unlisted');
+  };
+  this.hide = function(item) {
+    ensure.created(item);
+    $(item.elm).addClass('unlisted');
+    listSource.appendChild(item.elm);
+  };
+  this.clear = function() {
+    $(listSource.childNodes).addClass('unlisted');
+  };
+  
+  this.updateListHeadings = function() {
+    var headSel = '.' + settings.listHeadingsClass;
+    
+    $(headSel, listSource).each(function() {
+      var listedCount = $(this).nextUntil(headSel, ':not(.unlisted)').length;
+      $(this).toggleClass('unlisted', 0==listedCount);
+    });
+  };
+  
+  init.start(settings);
+};
+
+/*******************************************************************************
+End copy-pasted and modified code
+*******************************************************************************/
+})(window);

app/assets/stylesheets/application.css

@@ -3,4 +3,5 @@
 *= require select2
 *= require token-input-bootstrappy
 *= require bootstrap-datepicker
+*= require list.unlist
 */

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/assets/stylesheets/list.unlist.css

@@ -0,0 +1,3 @@
+.list .unlisted:not(.no-unlist) {
+	display: none;
+}

app/views/group_orders/_form.html.haml

@@ -7,12 +7,17 @@
       setMinimumBalance(#{FoodsoftConfig[:minimum_balance] or 0});
       setToleranceBehaviour(#{FoodsoftConfig[:tolerance_is_costly]});
       setStockit(#{@order.stockit?});
+      // create List for search-feature (using list.js, http://listjs.com)
+      var listjsResetPlugin = ['reset', {highlightClass: 'btn-primary'}];
+      var listjsDelayPlugin = ['delay', {delayedSearchTime: 500}];
+      new List(document.body, { valueNames: ['name'], engine: 'unlist', plugins: [listjsResetPlugin, listjsDelayPlugin] });
     });
 
 - title t('.title'), false
 
 .row-fluid
   .well.pull-left
+    %button{type: "button", class: "close", data: {dismiss: 'alert'}}= '×'.html_safe
     %h2= @order.name
     %dl.dl-horizontal
       - unless @order.note.blank?
@@ -35,8 +40,17 @@
       %dd= number_to_currency(@ordering_data[:available_funds])
 
   .well.pull-right
+    %button{type: "button", class: "close", data: {dismiss: 'alert'}}= '×'.html_safe
     = render 'switch_order', current_order: @order
 
+.row-fluid
+  .well.clear
+    .form-search
+      .input-append
+        = text_field_tag :article, params[:article], placeholder: t('.search_article'), class: 'search-query delayed-search resettable'
+        %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
   = f.hidden_field :order_id
@@ -59,9 +73,9 @@
           %th(style="width:20px")= t '.available'
           %th#col_required= t '.amount'
         %th{style: "width:15px;"}= t '.sum'
-    %tbody
+    %tbody.list
       - @order.articles_grouped_by_category.each do |category, order_articles|
-        %tr.article-category
+        %tr.list-heading.article-category
           %td
             = category
             %i.icon-tag

config/locales/de.yml

@@ -801,6 +801,8 @@ 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:'
       supplier: Lieferant

config/locales/en.yml

@@ -805,6 +805,8 @@ 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
       supplier: Supplier