Merge pull request #150 from azul/bugfix/5542-capitalize-loading

Bugfix/5542 capitalize loading

14 files changed, 104 insertions, 48 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ab07e1f..9af373d 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -20,3 +20,4 @@
 //= require platform
 //= require tickets
 //= require users
+//= require buttons
diff --git a/app/assets/javascripts/buttons.js b/app/assets/javascripts/buttons.js
new file mode 100644
index 0000000..7142957
--- /dev/null
+++ b/app/assets/javascripts/buttons.js
@@ -0,0 +1,39 @@
+/*
+ * Buttons.js
+ *
+ * Use bootstrap loading state after submitting a form.
+ *
+ * Some form inputs are validaded before the submission
+ * so triggering loading state on click events is not a
+ * good idea. If the validation fails the errors will 
+ * be displayed but the button would be in loading state.
+ *
+ * We used to trigger it based on form submission but
+ * we have a few forms that contain multiple buttons.
+ * So now we mark the buttons as clicked on click and 
+ * put the clicked button into loading state on submit.
+ *
+ */
+
+(function() {
+  markAsClicked = function () {
+    var btn = $(this)
+    btn.addClass('clicked')
+    setTimeout(function () {
+      btn.removeClass('clicked')
+    }, 1000)
+  };
+
+  markAsLoading = function(submitEvent) {
+    var form = submitEvent.target;
+    $(form).addClass('submitted')
+    // bootstrap loading state:
+    $(form).find('.btn.clicked[type="submit"]').button('loading');
+  };
+
+  $(document).ready(function() {
+    $('form').submit(markAsLoading);
+    $('.btn[type="submit"]').click(markAsClicked);
+  });
+  
+}).call(this);
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
index 8486756..4a86ef5 100644
--- a/app/assets/javascripts/users.js
+++ b/app/assets/javascripts/users.js
@@ -35,24 +35,10 @@
       data: $(form).serialize()
     });
     req.done( function() {
-      $(form).find('input[type="submit"]').button('reset');
+      $(form).find('.btn[type="submit"]').button('reset');
     });
   };
-
-  markAsSubmitted = function(submitEvent) {
-    var form = submitEvent.target;
-    $(form).addClass('submitted')
-    // bootstrap loading state:
-    $(form).find('input[type="submit"]').button('loading');
-  };
-
-  resetButtons = function(submitEvent) {
-    var form = $('form.submitted')
-    // bootstrap loading state:
-    $(form).find('input[type="submit"]').button('reset');
-    $(form).removeClass('submitted')
-  };
-
+  
   //
   // PUBLIC FUNCTIONS
   //
@@ -79,7 +65,7 @@
     clear_errors();
     var errors = extractErrors(message);
     displayErrors(errors);
-    resetButtons();
+    $('.btn[type="submit"]').button('reset');
   }
 
   function extractErrors(message) {
@@ -115,7 +101,6 @@
   //
 
   $(document).ready(function() {
-    $('form').submit(markAsSubmitted);
     $('#new_user').submit(prevent_default);
     $('#new_user').submit(srp.signup);
     $('#new_session').submit(prevent_default);
diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml
index 316eec1..6f3b324 100644
--- a/app/views/sessions/new.html.haml
+++ b/app/views/sessions/new.html.haml
@@ -6,6 +6,4 @@
   = simple_form_for [:api, @session], :validate => true, :html => { :id => :new_session, :class => 'form-horizontal' } do |f|
     = f.input :login, :required => false, :label => t(:username), :input_html => { :id => :srp_username }
     = f.input :password, :required => false, :input_html => { :id => :srp_password }
-    .form-actions
-      = f.button :submit, :value => t(:login), :class => 'btn-primary'
-      = link_to t(:cancel), home_path, :class => 'btn'
+    = f.button :wrapped, value: t(:login), cancel: home_path
diff --git a/app/views/users/new.html.haml b/app/views/users/new.html.haml
index 173dd8c..3478989 100644
--- a/app/views/users/new.html.haml
+++ b/app/views/users/new.html.haml
@@ -13,7 +13,5 @@
     = f.input :login, :label => t(:username), :required => false, :input_html => { :id => :srp_username }
     = f.input :password,              :required => false, :validate => true, :input_html => { :id => :srp_password }
     = f.input :password_confirmation, :required => false, :validate => true, :input_html => { :id => :srp_password_confirmation }
-    .form-actions
-      = f.button :submit, :value => t(:signup), :class => 'btn btn-primary'
-      = link_to t(:cancel), home_path, :class => 'btn'
+    = f.button :wrapped, value: t(:signup), cancel: home_path
 
diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb
index e3f8d09..710dacc 100644
--- a/config/initializers/simple_form.rb
+++ b/config/initializers/simple_form.rb
@@ -1,3 +1,5 @@
+require 'extensions/simple_form'
+
 # Use this setup block to configure all options available in SimpleForm.
 SimpleForm.setup do |config|
   # Wrappers are used by the form builder to generate a
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 0df11fe..5d0c675 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -10,6 +10,9 @@ en:
       # html: '<abbr title="required">*</abbr>'
     error_notification:
       default_message: "Please review the problems below:"
+    buttons:
+      cancel: 'Cancel'
+      loading: 'Loading...'
     # Labels and hints examples
     # labels:
     #   defaults:
@@ -23,4 +26,11 @@ en:
     #   defaults:
     #     username: 'User name to sign in.'
     #     password: 'No special characters, please.'
+  helpers:
+    submit:
+      user:
+        create: "Sign up"
+        update: "Save"
+      session:
+        create: "Log in"
 
diff --git a/engines/support/app/controllers/tickets_controller.rb b/engines/support/app/controllers/tickets_controller.rb
index 650f628..d552209 100644
--- a/engines/support/app/controllers/tickets_controller.rb
+++ b/engines/support/app/controllers/tickets_controller.rb
@@ -43,18 +43,18 @@ class TicketsController < ApplicationController
   end
 
   def update
-    if params[:commit] == 'close'
+    if params[:button] == 'close'
       @ticket.is_open = false
       @ticket.save
       redirect_to_tickets
-    elsif params[:commit] == 'open'
+    elsif params[:button] == 'open'
       @ticket.is_open = true
       @ticket.save
       redirect_to auto_ticket_path(@ticket)
     else
       @ticket.attributes = cleanup_ticket_params(params[:ticket])
 
-      if params[:commit] == 'reply_and_close'
+      if params[:button] == 'reply_and_close'
         @ticket.close
       end
 
@@ -98,7 +98,7 @@ class TicketsController < ApplicationController
   #
   def redirect_to_tickets
     if logged_in?
-      if params[:commit] == t(:reply_and_close)
+      if params[:button] == t(:reply_and_close)
         redirect_to auto_tickets_path
       else
         redirect_to auto_ticket_path(@ticket)
diff --git a/engines/support/app/views/tickets/_edit_form.html.haml b/engines/support/app/views/tickets/_edit_form.html.haml
index 714f8ff..bf175fe 100644
--- a/engines/support/app/views/tickets/_edit_form.html.haml
+++ b/engines/support/app/views/tickets/_edit_form.html.haml
@@ -17,13 +17,17 @@
     regarding_user_link = ''
   end
 
-= form_for @ticket do |f|
+= simple_form_for @ticket do |f|
   = hidden_ticket_fields
   %p.first
     - if @ticket.is_open?
-      %span.label.label-info= t(:open)
+      %span.label.label-info
+        %b{style: 'padding:10px'}= t(:open)
+        = f.button :loading, t(:close), value: 'close', class: 'btn-mini'
     - else
-      %span.label.label-success= t(:closed)
+      %span.label.label-success
+        %b{style: 'padding:10px'}= t(:closed)
+        = f.button :loading, t(:open), value: 'open', class: 'btn-mini'
     %span.label.label-clear= t(:created_by_on, :user => created_by, :time => @ticket.created_at.to_s(:short)).html_safe
   %div= t(:subject)
   = f.text_field :subject, :class => 'large full-width'
@@ -39,10 +43,6 @@
         = t(:regarding_account)
         = regarding_user_link
       = f.text_field :regarding_user
-  = f.button t(:save), :name => 'commit', :class => 'btn', :type => 'submit', :value => 'save'
-  - if @ticket.is_open?
-    = f.button t(:close), :name => 'commit', :class => 'btn', :type => 'submit', :value => 'close'
-  - else
-    = f.button t(:open), :name => 'commit', :class => 'btn', :type => 'submit', :value => 'open'
+  = f.button :loading, t(:save), :value => 'save'
   - if admin?
     = link_to t(:destroy), auto_ticket_path(@ticket),  :confirm => t(:are_you_sure), :method => :delete, :class => 'btn'
diff --git a/engines/support/app/views/tickets/_new_comment_form.html.haml b/engines/support/app/views/tickets/_new_comment_form.html.haml
index 8418e01..40c737f 100644
--- a/engines/support/app/views/tickets/_new_comment_form.html.haml
+++ b/engines/support/app/views/tickets/_new_comment_form.html.haml
@@ -7,7 +7,7 @@
     = c.input :body, :label => false, :as => :text, :input_html => {:class => "full-width", :rows=> 5}
     - if admin?
       = c.input :private, :as => :boolean, :label => false, :inline_label => true
-  = f.button :button, t(:post_reply), :name => 'commit', :class => 'btn-primary', :type => 'submit', :value => 'post_reply'
+  = f.button :loading, t(:post_reply), class: 'btn-primary', value: 'post_reply'
   - if logged_in? && @ticket.is_open
-    = f.button :button, t(:reply_and_close), :name => 'commit', :class => 'btn', :type => 'submit', :value => 'reply_and_close'
+    = f.button :loading, t(:reply_and_close), value: 'reply_and_close'
     = link_to t(:cancel), auto_tickets_path, :class => :btn
diff --git a/engines/support/app/views/tickets/_tabs.html.haml b/engines/support/app/views/tickets/_tabs.html.haml
index b7b5d3a..445a909 100644
--- a/engines/support/app/views/tickets/_tabs.html.haml
+++ b/engines/support/app/views/tickets/_tabs.html.haml
@@ -1,7 +1,7 @@
 -#
 -# SORT ORDER TABS
 -#
-- unless action?(:new)
+- unless action?(:new) or action?(:create)
   %ul.nav.nav-pills.pull-right.slim
     %li{:class=> ("active" if search_order.start_with? 'created_at')}
       = link_to_order('created')
@@ -19,5 +19,5 @@
       = link_to_status 'closed'
     %li{:class => ("active" if search_status == 'all')}
       = link_to_status 'all'
-  %li{:class => ("active" if action?(:new))}
+  %li{:class => ("active" if action?(:new) || action?(:create))}
     = link_to icon(:plus, :black) + t(:new_ticket), auto_new_ticket_path
diff --git a/engines/support/app/views/tickets/new.html.haml b/engines/support/app/views/tickets/new.html.haml
index 65ed67b..ab008d2 100644
--- a/engines/support/app/views/tickets/new.html.haml
+++ b/engines/support/app/views/tickets/new.html.haml
@@ -14,9 +14,4 @@
     = c.input :body, :label => t(:description), :as => :text, :input_html => {:class => "full-width", :rows=> 5}
     - if admin?
       = c.input :private, :as => :boolean, :label => false, :inline_label => true
-  .form-actions
-    = f.button :submit, :class => 'btn-primary', :value => t(:create_thing, :thing => t(:ticket))
-    - if logged_in?
-      = link_to t(:cancel), auto_tickets_path, :class => :btn
-    - else
-      = link_to t(:cancel), home_path, :class => 'btn'
+  = f.button :wrapped, cancel: (logged_in? ? auto_tickets_path : home_path)
diff --git a/lib/extensions/simple_form.rb b/lib/extensions/simple_form.rb
new file mode 100644
index 0000000..f28e18f
--- /dev/null
+++ b/lib/extensions/simple_form.rb
@@ -0,0 +1,28 @@
+module WrappedButton
+  def wrapped_button(*args, &block)
+    template.content_tag :div, :class => "form-actions" do
+      options = args.extract_options!
+      options[:class] = ['btn-primary', options[:class]].compact
+      args.unshift :loading
+      args << options
+      if cancel = options.delete(:cancel)
+        cancel_link = template.link_to I18n.t('simple_form.buttons.cancel'),
+          cancel, class: :btn
+        button(*args, &block) + ' ' + cancel_link
+      else
+        button(*args, &block)
+      end
+    end
+  end
+end
+SimpleForm::FormBuilder.send :include, WrappedButton
+
+module LoadingButton
+  def loading_button(*args, &block)
+    options = args.extract_options!
+    options[:"data-loading-text"] = I18n.t('simple_form.buttons.loading')
+    args << options
+    button_button(*args, &block)
+  end
+end
+SimpleForm::FormBuilder.send :include, LoadingButton
diff --git a/test/integration/browser/account_test.rb b/test/integration/browser/account_test.rb
index a5677ad..6d5f7f9 100644
--- a/test/integration/browser/account_test.rb
+++ b/test/integration/browser/account_test.rb
@@ -131,9 +131,9 @@ class AccountTest < BrowserIntegrationTest
   end
 
   def assert_invalid_login(page)
-    assert page.has_selector? 'input.btn-primary.disabled'
+    assert page.has_selector? '.btn-primary.disabled'
     assert page.has_content? I18n.t(:invalid_user_pass)
-    assert page.has_no_selector? 'input.btn-primary.disabled'
+    assert page.has_no_selector? '.btn-primary.disabled'
   end
 
   def inject_malicious_js