Added client side validations. Fixed shared sync.

Gemfile

@@ -9,6 +9,7 @@ gem "prawn", '<=0.6.3'
 gem 'haml'
 gem "will_paginate", "~> 3.0.pre2"
 gem 'jquery-rails'
+gem 'client_side_validations'
 gem 'simple_form'
 gem 'rails3_acts_as_paranoid'
 gem 'meta_where'

Gemfile.lock

@@ -31,6 +31,8 @@ GEM
     annotate (2.4.0)
     arel (2.0.9)
     builder (2.1.2)
+    client_side_validations (3.0.4)
+      activesupport (~> 3.0.0)
     erubis (2.6.6)
       abstract (>= 1.0.0)
     exception_notification (2.4.0)
@@ -106,6 +108,7 @@ PLATFORMS
 
 DEPENDENCIES
   annotate
+  client_side_validations
   exception_notification
   fastercsv
   haml

app/controllers/articles_controller.rb

@@ -220,16 +220,14 @@ class ArticlesController < ApplicationController
   def sync
     # check if there is an shared_supplier
     unless @supplier.shared_supplier
-      flash[:error]= "#{@supplier.name} ist nicht mit einer externen Datenbank verknüpft."
-      redirect_to supplier_articles_path(@supplier)
+      redirect_to supplier_articles_url(@supplier), :alert => "#{@supplier.name} ist nicht mit einer externen Datenbank verknüpft."
     end
     # sync articles against external database
     @updated_articles, @outlisted_articles = @supplier.sync_all
     # convert to db-compatible-string
     @updated_articles.each {|a, b| a.shared_updated_on = a.shared_updated_on.to_formatted_s(:db)}
     if @updated_articles.empty? && @outlisted_articles.empty?
-      flash[:notice] = "Der Katalog ist aktuell."
-      redirect_to supplier_articles_path(@supplier)
+      redirect_to supplier_articles_path(@supplier), :notice => "Der Katalog ist aktuell."
     end
   end
 end

app/models/supplier.rb

@@ -27,7 +27,7 @@ class Supplier < ActiveRecord::Base
   def sync_all
     updated_articles = Array.new
     outlisted_articles = Array.new
-    for article in articles.without_deleted
+    for article in articles
       # try to find the associated shared_article
       shared_article = article.shared_article
 

app/views/articles/_form.html.haml

@@ -1,4 +1,4 @@
-= simple_form_for [@supplier, @article], :remote => true do |f|
+= simple_form_for [@supplier, @article], :validate => true, :remote => true do |f|
   = f.input :availability
   = f.input :name
   = f.input :origin

app/views/layouts/application.haml

@@ -10,7 +10,7 @@
     = stylesheet_link_tag 'ie_hacks'
     <![endif]-->
     = javascript_include_tag 'jquery.min', 'jquery-ui.min', 'jquery_ujs', 'jquery.tokeninput', 'jquery.observe_field',
-      'application', 'ordering', 'jquery.fancybox-1.3.4.pack', :cache => 'all_cached'
+      'rails.validations', 'application', 'ordering', 'jquery.fancybox-1.3.4.pack', :cache => 'all_cached'
     = csrf_meta_tag
     = yield(:head)
   %body

config/initializers/client_side_validations.rb

@@ -0,0 +1,14 @@
+# ClientSideValidations Initializer
+
+require 'client_side_validations/simple_form' if defined?(::SimpleForm)
+require 'client_side_validations/formtastic' if defined?(::Formtastic)
+
+# Uncomment the following block if you want each input field to have the validation messages attached.
+# ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
+#   unless html_tag =~ /^<label/
+#     %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
+#   else
+#     %{<div class="field_with_errors">#{html_tag}</div>}.html_safe
+#   end
+# end
+

public/javascripts/rails.validations.js

@@ -0,0 +1,390 @@
+/*!
+ * Rails 3 Client Side Validations - v3.0.1
+ * https://github.com/bcardarlela/client_side_validations
+ *
+ * Copyright (c) 2011 Brian Cardarella
+ * Licensed under the MIT license
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+(function($) {
+  $.fn.validate = function() {
+    return this.filter('form[data-validate]').each(function() {
+      var form = $(this);
+      var settings = window[form.attr('id')];
+
+      // Set up the events for the form
+      form
+        .submit(function() { return form.isValid(settings.validators); })
+        .bind('ajax:beforeSend',      function()          { return form.isValid(settings.validators); })
+        // Callbacks
+        .bind('form:validate:after',  function(eventData) { clientSideValidations.callbacks.form.after( form, eventData); })
+        .bind('form:validate:before', function(eventData) { clientSideValidations.callbacks.form.before(form, eventData); })
+        .bind('form:validate:fail',   function(eventData) { clientSideValidations.callbacks.form.fail(  form, eventData); })
+        .bind('form:validate:pass',   function(eventData) { clientSideValidations.callbacks.form.pass(  form, eventData); })
+
+        // Set up the events for each validatable form element
+        .find('[data-validate]:input')
+          .live('focusout',                function()          { $(this).isValid(settings.validators); })
+          .live('change',                  function()          { $(this).data('changed', true); })
+          // Callbacks
+          .live('element:validate:after',  function(eventData) { clientSideValidations.callbacks.element.after( $(this), eventData); })
+          .live('element:validate:before', function(eventData) { clientSideValidations.callbacks.element.before($(this), eventData); })
+          .live('element:validate:fail',   function(eventData, message) {
+            var element = $(this);
+            clientSideValidations.callbacks.element.fail(element, message, function() {
+              addError(element, message);
+            }, eventData) })
+          .live('element:validate:pass',   function(eventData) {
+            var element = $(this);
+            clientSideValidations.callbacks.element.pass(element, function() {
+              removeError(element);
+            }, eventData) })
+        // Checkboxes - Live events don't support filter
+        .end().find('[data-validate]:checkbox')
+          .live('click', function() { $(this).isValid(settings.validators); })
+        // Inputs for confirmations
+        .end().find('[id*=_confirmation]').each(function() {
+          var confirmationElement = $(this),
+              element = form.find('#' + this.id.match(/(.+)_confirmation/)[1] + '[data-validate]:input');
+
+          $('#' + confirmationElement.attr('id'))
+            .live('focusout', function() {
+              element.data('changed', true).isValid(settings.validators);
+            })
+            .live('keyup', function() {
+              element.data('changed', true).isValid(settings.validators);
+            })
+        });
+
+      var addError = function(element, message) {
+        clientSideValidations.formBuilders[settings.type].add(element, settings, message);
+      }
+
+      var removeError = function(element) {
+        clientSideValidations.formBuilders[settings.type].remove(element, settings);
+      }
+    });
+  }
+
+  $.fn.isValid = function(validators) {
+    if ($(this[0]).is('form')) {
+      return validateForm($(this[0]), validators);
+    } else {
+      return validateElement($(this[0]), validators[this[0].name]);
+    }
+  }
+
+  var validateForm = function(form, validators) {
+    var valid = true;
+
+    form.trigger('form:validate:before').find('[data-validate]:input').each(function() {
+      if (!$(this).isValid(validators)) { valid = false; }
+    });
+
+    if (valid) {
+      form.trigger('form:validate:pass');
+    } else {
+      form.trigger('form:validate:fail');
+    }
+
+    form.trigger('form:validate:after');
+    return valid;
+  }
+
+  var validateElement = function(element, validators) {
+    element.trigger('element:validate:before');
+
+    if (element.data('changed') !== false) {
+      var valid = true;
+      element.data('changed', false);
+
+      // Because 'length' is defined on the list of validators we cannot call jQuery.each on
+      // the clientSideValidations.validators.all() object
+      for (kind in clientSideValidations.validators.all()) {
+        if (validators[kind] && (message = clientSideValidations.validators.all()[kind](element, validators[kind]))) {
+          element.trigger('element:validate:fail', message).data('valid', false);
+          valid = false;
+          break;
+        }
+      }
+
+      if (valid) { element.data('valid', null); element.trigger('element:validate:pass'); }
+    }
+
+    element.trigger('element:validate:after');
+    return element.data('valid') === false ? false : true;
+  }
+
+  // Main hook
+  // If new forms are dynamically introduced into the DOM the .validate() method
+  // must be invoked on that form
+  $(function() { $('form[data-validate]').validate(); })
+})(jQuery);
+
+var clientSideValidations = {
+  validators: {
+    all: function() { return jQuery.extend({}, clientSideValidations.validators.local, clientSideValidations.validators.remote) },
+    local: {
+      presence: function(element, options) {
+        if (/^\s*$/.test(element.val())) {
+          return options.message;
+        }
+      },
+      acceptance: function(element, options) {
+        switch (element.attr('type')) {
+          case 'checkbox':
+            if (!element.attr('checked')) {
+              return options.message;
+            }
+            break;
+          case 'text':
+            if (element.val() != (options.accept || '1')) {
+              return options.message;
+            }
+            break;
+        }
+      },
+      format: function(element, options) {
+        if ((message = this.presence(element, options)) && options.allow_blank == true) {
+          return;
+        } else if (message) {
+          return message;
+        } else {
+          if (options['with'] && !options['with'].test(element.val())) {
+            return options.message;
+          } else if (options['without'] && options['without'].test(element.val())) {
+            return options.message;
+          }
+        }
+      },
+      numericality: function(element, options) {
+        if (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d*)?$/.test(element.val())) {
+          return options.messages.numericality;
+        }
+
+        if (options.only_integer && !/^\d+$/.test(element.val())) {
+          return options.messages.only_integer;
+        }
+
+        var CHECKS = { greater_than: '>', greater_than_or_equal_to: '>=',
+          equal_to: '==', less_than: '<', less_than_or_equal_to: '<=' }
+
+        for (var check in CHECKS) {
+          if (options[check] && !(new Function("return " + element.val() + CHECKS[check] + options[check])())) {
+            return options.messages[check];
+          }
+        }
+
+        if (options.odd && !(parseInt(element.val()) % 2)) {
+          return options.messages.odd;
+        }
+
+        if (options.even && (parseInt(element.val()) % 2)) {
+          return options.messages.even;
+        }
+      },
+      length: function(element, options) {
+        var blankOptions = {};
+        if (options.is) {
+          blankOptions.message = options.messages.is;
+        } else if (options.minimum) {
+          blankOptions.message = options.messages.minimum;
+        }
+        if ((message = this.presence(element, blankOptions)) && options.allow_blank == true && !options.maximum) {
+          return;
+        } else if (message) {
+          return message;
+        } else {
+          var CHECKS = { is: '==', minimum: '>=', maximum: '<=' }
+          var tokenizer = options.js_tokenizer || "split('')";
+          var tokenized_length = new Function("element", "return (element.val()." + tokenizer + " || '').length;")(element);
+
+          for (var check in CHECKS) {
+            if (options[check] && !(new Function("return " + tokenized_length + CHECKS[check] + options[check])())) {
+              return options.messages[check];
+            }
+          }
+        }
+      },
+      exclusion: function(element, options) {
+        if ((message = this.presence(element, options)) && options.allow_blank == true) {
+          return;
+        } else if (message) {
+          return message;
+        } else {
+          if (options['in']) {
+            for (var i = 0; i < options['in'].length; i++) {
+              if (options['in'][i] == element.val()) {
+                return options.message;
+              }
+            }
+          } else if (options['range']) {
+            var lower = options['range'][0],
+                upper = options['range'][1];
+            if (element.val() >= lower && element.val() <= upper) {
+              return options.message;
+            }
+          }
+        }
+      },
+      inclusion: function(element, options) {
+        if ((message = this.presence(element, options)) && options.allow_blank == true) {
+          return;
+        } else if (message) {
+          return message;
+        } else {
+          if (options['in']) {
+            for (var i = 0; i < options['in'].length; i++) {
+              if (options['in'][i] == element.val()) {
+                return;
+              }
+            }
+            return options.message;
+          } else if (options['range']) {
+            var lower = options['range'][0],
+                upper = options['range'][1];
+
+            if (element.val() >= lower && element.val() <= upper) {
+              return;
+            } else {
+              return options.message;
+            }
+          }
+        }
+      },
+      confirmation: function(element, options) {
+        if (element.val() != jQuery('#' + element.attr('id') + '_confirmation').val()) {
+          return options.message;
+        }
+      }
+    },
+    remote: {
+      uniqueness: function(element, options) {
+        var data = {};
+        data['case_sensitive'] = !!options.case_sensitive;
+        if (options.id) {
+          data['id'] = options.id;
+        }
+
+        if (options.scope) {
+          data.scope = {}
+          for (key in options.scope) {
+            var scoped_element = jQuery('[name="' + element.attr('name').replace(/\[\w+]$/, '[' + key + ']' + '"]'));
+            if (scoped_element[0] && scoped_element.val() != options.scope[key]) {
+              data.scope[key] = scoped_element.val();
+              scoped_element.unbind('change.' + element.id).bind('change.' + element.id, function() { element.trigger('change'); element.trigger('focusout'); });
+            } else {
+              data.scope[key] = options.scope[key];
+            }
+          }
+        }
+
+        // Kind of a hack but this will isolate the resource name and attribute.
+        // e.g. user[records_attributes][0][title] => records[title]
+        // e.g. user[record_attributes][title] => record[title]
+        // Server side handles classifying the resource properly
+        if (/_attributes]/.test(element.attr('name'))) {
+          var name = element.attr('name').match(/\[\w+_attributes]/g).pop().match(/\[(\w+)_attributes]/).pop();
+          name += /(\[\w+])$/.exec(element.attr('name'))[1];
+        } else {
+          var name = element.attr('name');
+        }
+        data[name] = element.val();
+
+        if (jQuery.ajax({
+          url: '/validators/uniqueness.json',
+          data: data,
+          async: false
+        }).status == 200) {
+          return options.message;
+        }
+      }
+    }
+  },
+  formBuilders: {
+    'ActionView::Helpers::FormBuilder': {
+      add: function(element, settings, message) {
+        if (element.data('valid') !== false) {
+          var inputErrorField = jQuery(settings.input_tag),
+              labelErrorField = jQuery(settings.label_tag),
+              label = jQuery('label[for="' + element.attr('id') + '"]:not(.message)');
+
+          if (element.attr('autofocus')) { element.attr('autofocus', false) };
+          element.before(inputErrorField);
+          inputErrorField.find('span#input_tag').replaceWith(element);
+          inputErrorField.find('label.message').attr('for', element.attr('id'));
+          labelErrorField.find('label.message').attr('for', element.attr('id'));
+          label.replaceWith(labelErrorField);
+          labelErrorField.find('label#label_tag').replaceWith(label);
+        }
+        jQuery('label.message[for="' + element.attr('id') + '"]').text(message);
+      },
+      remove: function(element, settings) {
+        var errorFieldClass = jQuery(settings.input_tag).attr('class'),
+            inputErrorField = element.closest('.' + errorFieldClass),
+            label = jQuery('label[for="' + element.attr('id') + '"]:not(.message)'),
+            labelErrorField = label.closest('.' + errorFieldClass);
+
+        if (inputErrorField[0]) {
+          inputErrorField.find('#' + element.attr('id')).detach();
+          inputErrorField.replaceWith(element);
+          label.detach();
+          labelErrorField.replaceWith(label);
+        }
+      }
+    },
+    'SimpleForm::FormBuilder': {
+      add: function(element, settings, message) {
+        if (element.data('valid') !== false) {
+          var wrapper = element.closest(settings.wrapper_tag);
+          wrapper.addClass(settings.wrapper_error_class);
+          var errorElement = $('<' + settings.error_tag + ' class="' + settings.error_class + '">' + message + '</' + settings.error_tag + '>');
+          wrapper.append(errorElement);
+        } else {
+          element.parent().find(settings.error_tag + '.' + settings.error_class).text(message);
+        }
+      },
+      remove: function(element, settings) {
+        var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_error_class);
+        wrapper.removeClass(settings.wrapper_error_class);
+        var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class);
+        errorElement.remove();
+      }
+
+    },
+    'Formtastic::SemanticFormBuilder': {
+      add: function(element, settings, message) {
+        if (element.data('valid') !== false) {
+          var wrapper = element.closest('li');
+          wrapper.addClass('error');
+          var errorElement = $('<p class="' + settings.inline_error_class + '">' + message + '</p>');
+          wrapper.append(errorElement);
+        } else {
+          element.parent().find('p.' + settings.inline_error_class).text(message);
+        }
+      },
+      remove: function(element, settings) {
+        var wrapper = element.closest('li.error');
+        wrapper.removeClass('error');
+        var errorElement = wrapper.find('p.' + settings.inline_error_class);
+        errorElement.remove();
+      }
+
+    }
+  },
+  callbacks: {
+    element: {
+      after:  function(element, eventData)                    { },
+      before: function(element, eventData)                    { },
+      fail:   function(element, message, addError, eventData) { addError() },
+      pass:   function(element, removeError, eventData)       { removeError() }
+    },
+    form: {
+      after:  function(form, eventData) { },
+      before: function(form, eventData) { },
+      fail:   function(form, eventData) { },
+      pass:   function(form, eventData) { }
+    }
+  }
+}