effective_bootstrap 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4366d401ed983ede60b16c9e82fbb76e393975be
-  data.tar.gz: e33da495ac5d246d803444c8ed3726250ad45416
+  metadata.gz: 6159bfe9bf5e58af814e2d446ee907d3a456a54b
+  data.tar.gz: 2b232d59b9e6904c6b6358e07631294673a0fa78
 SHA512:
-  metadata.gz: 1983cdb4104022d4dc1f24987b418222fcf12688f7c6cf6c1e4553b09f0071e16ef75bc7d98506eb85d1c299183259bf75ec6caf9e6b633327f1ee087c454b22
-  data.tar.gz: 413e36f0d728563fe5eb845fc236dd086c3dc6581bd51729e57b2d62f160ce73d13ec671d80f63e358583f2b0ea78745a040708682dcd9506a22717499e04ee7
+  metadata.gz: 9111638ac3d4eb19d1ed5b2abd43404300f88af4925460c6fca5980b66e2337d6cdf9c245a6378207fa6c3d809509134c9d264b58f3b40d3c5cec7f65ed16a53
+  data.tar.gz: ade79312e2e0c17f9eabbeff7a2ce2f954b068e0cab86e2d63b9b478f6b97fda4ab96019f47504b17ea0814ba9476a52a732f74947ccab56a164b7c870f02e64

data/app/assets/javascripts/effective_bootstrap/base.js.coffee

@@ -1,7 +1,6 @@
 this.EffectiveBootstrap ||= new class
   remote_form_payload: ''         # A fresh form
   remote_form_flash: ''           # Array of Arrays
-  remote_form_flash_payload: ''   # $('<div alert>...</div>')
 
   initialize: (target) ->
     $(target || document).find('[data-input-js-options]:not(.initialized)').each (i, element) ->
@@ -20,22 +19,28 @@ this.EffectiveBootstrap ||= new class
   validate: (form) ->
     $form = $(form)
 
-    # Clear any server side validation on individual inputs
-    $form.find('.alert.is-invalid').remove()
-    $form.find('.is-invalid').removeClass('is-invalid')
-    $form.find('.is-valid').removeClass('is-valid')
+    @reset($form)
 
     valid = form.checkValidity()
 
     if valid
-      $form.addClass('form-is-valid').removeClass('form-is-invalid')
+      $form.addClass('form-is-valid')
       setTimeout((-> EffectiveBootstrap.disable($form)), 0)
     else
-      $form.addClass('was-validated').addClass('form-is-invalid').removeClass('form-is-valid')
+      $form.addClass('was-validated').addClass('form-is-invalid')
+
+      $('.effective-radios:not(.no-feedback),.effective-checks:not(.no-feedback)').each -> # These controls need a little bit of help with client side validations
+        $(@).addClass(if $(@).find('input:invalid').length > 0 then 'is-invalid' else 'is-valid')
+
+      @flash($form, 'danger')
 
     if valid and $form.data('remote')
       $form.one 'ajax:success', (event) -> EffectiveBootstrap.loadRemoteForm($(event.target))
 
+      $form.one 'ajax:error', (event, _, status, message) ->
+        EffectiveBootstrap.reset($(event.target))
+        EffectiveBootstrap.flash($(event.target), 'danger', "Ajax #{status}: #{message}")
+
     valid
 
   submitting: ($form) ->
@@ -45,28 +50,49 @@ this.EffectiveBootstrap ||= new class
   disable: ($form) ->
     $form.find('[type=submit]').prop('disabled', true)
 
-  enable: ($form) ->
-    $form.removeClass('form-is-valid').find('[type=submit]').removeAttr('disabled')
+  reset: ($form) ->
+    $form.removeClass('was-validated').removeClass('form-is-invalid').removeClass('form-is-valid')
 
-  # Loads remote for payload that was placed here by effective_resources create.js.erb and update.js.erb
-  loadRemoteForm: ($target) ->
-    $form = @remote_form_payload.find('form')
-    $target.replaceWith($form)
-
-    for flash in @remote_form_flash
-      @flash($form, flash[0], @remote_form_flash_payload)
+    # Clear any server side validation on individual inputs
+    $form.find('.alert.is-invalid').remove()
+    $form.find('.is-invalid').removeClass('is-invalid')
+    $form.find('.is-valid').removeClass('is-valid')
 
-    @remote_form_payload = ''; @remote_form_flash = ''; @remote_form_flash_payload = '';
+    $form.find('[type=submit]').removeAttr('disabled')
 
-  flash: ($form, status, $alert) ->
-    $submit = $form.children('.form-actions')
+  flash: ($form, status, message, skip_success = false) ->
+    $actions = $form.children('.form-actions')
 
     if status == 'danger' || status == 'error'
-      $submit.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
+      $actions.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
     else
-      $submit.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
+      $actions.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
+
+    if message? && !(status == 'success' && skip_success)
+      $actions.prepend(@buildFlash(status, message))
 
-    $submit.prepend($alert) if $alert.length > 0
+  # Loads remote for payload that was placed here by effective_resources create.js.erb and update.js.erb
+  loadRemoteForm: ($target) ->
+    if @remote_form_payload?
+      $form = @remote_form_payload.find("form[data-remote-index='#{$target.data('remote-index')}']")
+      $form = @remote_form_payload.find('form') if $form.length == 0
+      $target.replaceWith($form)
+
+    if @remote_form_flash?
+      for flash in @remote_form_flash
+        @flash($form, flash[0], flash[1], true)
+
+    @remote_form_payload = ''; @remote_form_flash = '';
+
+  buildFlash: (status, message) ->
+    $("
+      <div class='alert alert-dismissable alert-#{status} fade show' role='alert'>
+        #{message}
+        <button class='close' type='button' aria-label='Close' data-dismiss='alert'>
+          <span aria-hidden='true'>&times;</span>
+        </button>
+      </div>
+    ")
 
 $ -> EffectiveBootstrap.initialize()
 $(document).on 'turbolinks:load', -> EffectiveBootstrap.initialize()

data/app/assets/javascripts/effective_radio/initialize.js.coffee

@@ -22,3 +22,15 @@ $(document).on 'click', '[data-toggle=cards] [data-toggle=card]', (event) ->
   val = $card.find('input:radio').val()
   $card.find('input:radio').val([val]).trigger('change')
   false
+
+$(document).on 'change', '.effective-radios input', (event) ->
+  $input = $(event.currentTarget)
+  $group = $input.closest('.effective-radios')
+
+  return unless ($group.hasClass('is-valid') || $group.hasClass('is-invalid'))
+
+  if $input.is(':valid')
+    $group.addClass('is-valid').removeClass('is-invalid')
+  else
+    $group.addClass('is-invalid').removeClass('is-valid')
+

data/app/assets/stylesheets/effective_bootstrap/forms.scss

@@ -33,15 +33,6 @@
 .form-actions .eb-icon-spinner { display: none; }
 .form-is-valid .form-actions .eb-icon-spinner { display: inline; }
 
-// Custom submit button feedback
-.was-validated.form-is-valid .form-actions {
-  .valid-feedback { display: block; }
-}
-
-.was-validated.form-is-invalid .form-actions {
-  .invalid-feedback { display: block; }
-}
-
 // Radio and Checkbox fieldsets
 fieldset.form-group > label {
   display: block;
@@ -50,3 +41,9 @@ fieldset.form-group > label {
 div.form-group > label + .btn-group {
   display: block;
 }
+
+.effective-radios.is-invalid ~ .invalid-feedback { display: block }
+.effective-radios.is-valid ~ .valid-feedback { display: block }
+
+.effective-checks.is-invalid .invalid-feedback { display: block }
+.effective-checks.is-valid .valid-feedback { display: block }

data/app/assets/stylesheets/effective_radio/input.scss

@@ -16,3 +16,11 @@ div.btn-group > .btn.first-button {
     .visible-when-unselected { display: none; }
   }
 }
+
+.effective-radios.is-valid {
+  label { border-color: #28a745; }
+}
+
+.effective-radios.is-invalid {
+  label { border-color: #dc3545; }
+}

data/app/helpers/effective_form_builder_helper.rb

@@ -4,10 +4,14 @@ module EffectiveFormBuilderHelper
     options[:html] = (options[:html] || {}).merge(novalidate: true, onsubmit: 'return EffectiveBootstrap.validate(this);')
 
     if options.delete(:remote) == true
+      @_effective_remote_index ||= 0
+
       if options[:html][:data].kind_of?(Hash)
         options[:html][:data][:remote] = true
+        options[:html][:data]['data-remote-index'] = (@_effective_remote_index += 1)
       else
         options[:html]['data-remote'] = true
+        options[:html]['data-remote-index'] = (@_effective_remote_index += 1)
       end
     end
 

data/app/models/effective/form_builder.rb

@@ -1,13 +1,19 @@
 module Effective
   class FormBuilder < ActionView::Helpers::FormBuilder
 
-    attr_accessor :layout, :template
+    attr_accessor :template, :layout, :action, :readonly, :disabled, :remote
 
     delegate :content_tag, to: :template
 
     def initialize(object_name, object, template, options)
       @template = template
+
       @layout = (options.delete(:layout) || :vertical).to_sym
+      @action = options.delete(:action)
+      @readonly = options.delete(:readonly)
+      @disabled = options.delete(:disabled)
+      @remote = options[:remote]
+
       super
     end
 

data/app/models/effective/form_input.rb

@@ -164,7 +164,12 @@ module Effective
 
     def has_error?(name = nil)
       return false unless object.respond_to?(:errors)
-      name ? object.errors[name].present? : object.errors.present?
+
+      if name
+        object.errors[name].present? || (parent_object && parent_object.errors[name].present?)
+      else
+        object.errors.present? || parent_object&.errors&.present?
+      end
     end
 
     def required?(name)
@@ -265,9 +270,16 @@ module Effective
         options[:input][:required] = 'required'
       end
 
-      if options[:input][:readonly]
+      if options[:input][:readonly] || form_readonly?
         options[:input][:readonly] = 'readonly'
-        options[:input][:class] = options[:input][:class].to_s.sub('form-control', 'form-control-plaintext')
+
+        unless options[:input][:class].to_s.include?('form-control-plaintext')
+          options[:input][:class] = options[:input][:class].to_s.sub('form-control', 'form-control-plaintext')
+        end
+      end
+
+      if options[:input][:disabled] || form_disabled?
+        options[:input][:disabled] = 'disabled'
       end
 
       if options[:hint] && options[:hint][:text] && options[:hint][:id]
@@ -311,6 +323,22 @@ module Effective
       options[:layout] || @builder.layout
     end
 
+    def form_readonly?
+      @builder.readonly
+    end
+
+    def form_disabled?
+      @builder.disabled
+    end
+
+    def form_remote?
+      @builder.remote
+    end
+
+    def parent_object
+      @builder.options[:parent_builder]&.object
+    end
+
     # https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/tags/base.rb#L120
     def tag_id(index = nil)
       case

data/app/models/effective/form_inputs/checks.rb

@@ -15,15 +15,22 @@ module Effective
       end
 
       def wrapper_options
-        { class: "form-group #{tag_id}" }
+        { class: [
+            'form-group effective-checks',
+            ('no-feedback' unless feedback_options),
+            tag_id,
+            ('is-invalid' if feedback_options && has_error?(name)),
+            ('is-valid' if feedback_options && has_error? && !has_error?(name))
+          ].compact.join(' ')
+        }
       end
 
       def feedback_options
         return false if layout == :inline
 
         {
-          valid: { class: 'valid-feedback', style: ('display: block;' if has_error? && !has_error?(name)) }.compact,
-          invalid: { class: 'invalid-feedback', style: ('display: block;' if has_error?(name)) }.compact
+          valid: { class: 'valid-feedback' }.compact,
+          invalid: { class: 'invalid-feedback' }.compact
         }
       end
 
@@ -58,7 +65,7 @@ module Effective
       end
 
       def item_input_options
-        options[:input].except(:inline, :custom)
+        options[:input].except(:inline, :custom, :required)
       end
 
       def item_label_options

data/app/models/effective/form_inputs/email_field.rb

@@ -10,6 +10,11 @@ module Effective
         { input_group: { class: 'input-group' }, prepend: content_tag(:span, icon('at-sign'), class: 'input-group-text') }
       end
 
+      # This has gotta be a valid pattern
+      def validated?(name)
+        true
+      end
+
     end
   end
 end

data/app/models/effective/form_inputs/phone_field.rb

@@ -17,6 +17,11 @@ module Effective
         { input_group: { class: 'input-group' }, prepend: content_tag(:span, icon('phone'), class: 'input-group-text') }
       end
 
+      # This has gotta be a valid pattern
+      def validated?(name)
+        true
+      end
+
       private
 
       def fax?

data/app/models/effective/form_inputs/radios.rb

@@ -26,9 +26,9 @@ module Effective
 
       def build_button_group(&block)
         if buttons?
-          content_tag(:div, yield, id: button_group_id, class: 'btn-group btn-group-toggle effective-radios', 'data-toggle': 'buttons')
+          content_tag(:div, yield, id: button_group_id, class: button_group_class, 'data-toggle': 'buttons')
         elsif cards?
-          content_tag(:div, yield, id: button_group_id, class: 'card-deck effective-radios', 'data-toggle': 'cards')
+          content_tag(:div, yield, id: button_group_id, class: button_group_class, 'data-toggle': 'cards')
         else
           yield
         end
@@ -38,12 +38,23 @@ module Effective
         { class: "form-group #{tag_id}" }
       end
 
+      def button_group_class
+        [
+          'effective-radios',
+          ('no-feedback' if options[:feedback] == false),
+          ('btn-group btn-group-toggle' if buttons?),
+          ('card-deck' if cards?),
+          ('is-invalid' if options[:feedback] && has_error?(name)),
+          ('is-valid' if options[:feedback] && has_error? && !has_error?(name))
+        ].compact.join(' ')
+      end
+
       def feedback_options
         return false if layout == :inline
 
         {
-          valid: { class: 'valid-feedback', style: ('display: block;' if has_error? && !has_error?(name)) }.compact,
-          invalid: { class: 'invalid-feedback', style: ('display: block;' if has_error?(name)) }.compact
+          valid: { class: 'valid-feedback' }.compact,
+          invalid: { class: 'invalid-feedback' }.compact
         }
       end
 

data/app/models/effective/form_inputs/submit.rb

@@ -2,6 +2,10 @@ module Effective
   module FormInputs
     class Submit < Effective::FormInput
 
+      def to_html(&block)
+        return super unless (form_readonly? || form_disabled?)
+      end
+
       def build_input(&block)
         tags = [
           icon('check', style: 'display: none;'),

data/app/models/effective/form_inputs/url_field.rb

@@ -10,6 +10,11 @@ module Effective
         { input_group: { class: 'input-group' }, prepend: content_tag(:span, icon('link'), class: 'input-group-text') }
       end
 
+      # This has gotta be a valid pattern
+      def validated?(name)
+        true
+      end
+
     end
   end
 end

data/app/views/effective/style_guide/_effective_form_with.html.haml

@@ -4,6 +4,9 @@
 = effective_form_with model: Effective::StyleGuide.new, url: url do |f|
   = render '_fields', f: f, uid: 1
 %hr
+= effective_form_with model: Effective::StyleGuide.new, url: url, readonly: true do |f|
+  = render '_fields', f: f, uid: 1
+%hr
 = effective_form_with model: Effective::StyleGuide.new.tap { |s| s.valid? }, url: url do |f|
   = render '_fields', f: f, uid: 2
 %hr

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.0.7'.freeze
+  VERSION = '0.0.8'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Code and Effect