[Delivers #98157690] add client-side form validation

Gemfile

@@ -53,6 +53,7 @@ gem 'workflow'
 group :test, :development do
  gem 'bullet', require: false # use BULLET_ENABLED=true
  gem 'database_cleaner'
+ gem 'konacha'
  gem 'pry-byebug'
  gem 'pry-rails'
  gem 'rspec-rails'
@@ -61,6 +62,7 @@ end
 
 group :development do
  gem 'guard-rspec', require: false
+ gem 'guard-shell', require: false
  gem 'mail_view'
  gem 'railroady'
  gem 'letter_opener'

Gemfile.lock

@@ -121,6 +121,7 @@ GEM
  coffee-script-source
  execjs
  coffee-script-source (1.9.1.1)
+ colorize (0.7.7)
  columnize (0.9.0)
  css_parser (1.3.7)
  addressable
@@ -180,6 +181,9 @@ GEM
  guard (~> 2.1)
  guard-compat (~> 1.1)
  rspec (>= 2.99.0, < 4.0)
+ guard-shell (0.7.1)
+ guard (>= 2.0.0)
+ guard-compat (~> 1.0)
  haml (4.0.7)
  tilt
  has_scope (0.6.0)
@@ -213,6 +217,13 @@ GEM
  kaminari (0.16.3)
  actionpack (>= 3.0.0)
  activesupport (>= 3.0.0)
+ konacha (3.7.0)
+ actionpack (>= 3.1, < 5)
+ capybara
+ colorize
+ railties (>= 3.1, < 5)
+ sprockets (>= 2, < 4)
+ tilt
  launchy (2.4.3)
  addressable (~> 2.3)
  letter_opener (1.4.1)
@@ -466,11 +477,13 @@ DEPENDENCIES
  font-awesome-sass
  foreman
  guard-rspec
+ guard-shell
  haml
  hashdiff
  html_pipeline_rails
  jquery-rails
  jquery-turbolinks
+ konacha
  letter_opener
  letter_opener_web
  mail_view

Guardfile

@@ -15,3 +15,8 @@ guard :rspec, cmd: 'bin/rspec' do
  # Capybara features specs
  watch(%r{^app/views/(.+)/.*\.(erb|haml|slim)$}) { |m| "spec/features/#{m[1]}_spec.rb" }
 end
+
+guard :shell do
+ watch(%r{^app/assets/javascripts/(.+)\.js(\.coffee)?$}) { |m| `bin/rake konacha:run SPEC=#{m[1]}_spec` }
+ watch(%r{^spec/javascripts/(.+)\.js(\.coffee)?$}) { |m| `bin/rake konacha:run SPEC=#{m[1]}` }
+end

Rakefile

@@ -6,4 +6,6 @@ require File.expand_path('../config/application', __FILE__)
 C2::Application.load_tasks
 
 desc 'Run the test suite'
-task default: "./bin/rspec"
+# RSpec task gets included automatically
+# http:https://stackoverflow.com/a/28886514/358804
+task default: 'konacha:run'

app/assets/javascripts/field_filter.js.coffee

@@ -0,0 +1,30 @@
+class @FieldFilter
+ constructor: (@$fieldOrWrappers) ->
+
+ isInput: ->
+ @$fieldOrWrappers.is(':input')
+
+ toggleVisibility: (showOrHide) ->
+ # https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
+ @$fieldOrWrappers.attr('aria-hidden', !showOrHide)
+
+ toggleEnabled: (enableOrDisable) ->
+ @$fieldOrWrappers.attr('disabled', !enableOrDisable)
+
+ toggleChildInputs: (enableOrDisable) ->
+ @$fieldOrWrappers.find(':input').attr('disabled', !enableOrDisable)
+
+ toggle: (showOrHide) ->
+ @toggleVisibility(showOrHide)
+
+ # hidden inputs need to be disabled, so they aren't submitted with the form
+ if @isInput()
+ @toggleEnabled(showOrHide)
+ else
+ @toggleChildInputs(showOrHide)
+
+ show: ->
+ @toggle(true)
+
+ hide: ->
+ @toggle(false)

app/assets/javascripts/filter.js.coffee

@@ -1,45 +1,28 @@
-class Filter
- constructor: ($root, @key) ->
- @$ = (selector) -> $root.find(selector)
+class @Filter
+ constructor: (@$root, @$control) ->
+ key = @$control.data('filter-control')
+ val = @$control.val()
+ @set = new FilterSet(@$root, key, val)
 
- addInput: ($el) ->
- $el.click () => @filter($el)
- # Initial state
- if $el.is(":checked")
- @filter($el)
+ isSelected: ->
+ @$control.is(':checked')
 
- addRadios: () ->
- @$("input:radio[data-filter-control=#{ @key }]").each (idx, control) =>
- @addInput($(control))
+ update: ->
+ if @isSelected()
+ @set.show()
+ else
+ @set.hide()
 
- addChkBoxes: () ->
- @$("input:checkbox[data-filter-control=#{ @key }]").each (idx, control) =>
- @addInput($(control))
-
- filter: ($el) ->
- value = $el.val()
- if !$el.is(":checked")
- value = "!" + value
- @$("[data-filter-key=#{ @key }]").each (idx, el) ->
- hidden = el.getAttribute("data-filter-value") != value
- el.setAttribute("aria-hidden", hidden.toString())
-
- hideAll: () ->
- @$("[data-filter-key=#{ @key }]").attr("aria-hidden", true)
+ enable: ->
+ @update()
+ @$control.change => @update()
 
  @generateIn = ($scope) ->
- filters = {}
- $scope.find("[data-filter-control]").each (idx, el) ->
- key = el.getAttribute('data-filter-control')
- if !filters.hasOwnProperty(key)
- filters[key] = new Filter($scope, key)
- filters
+ $scope.find('[data-filter-control]').map (idx, control) ->
+ new Filter($scope, $(control))
 
 $ ->
- # @todo - better scope
- $scope = $(document)
+ $scope = $(document.body)
  filters = Filter.generateIn($scope)
- for key, filter of filters
- filter.hideAll()
- filter.addRadios()
- filter.addChkBoxes()
+ for filter in filters
+ filter.enable()

app/assets/javascripts/filter_set.js.coffee

@@ -0,0 +1,27 @@
+class @FilterSet
+ constructor: (@$root, @key, @val) ->
+
+ $: (selector) ->
+ @$root.find(selector)
+
+ children: ->
+ @$("[data-filter-key=#{ @key }][data-filter-value=#{ @val }]")
+
+ cousins: ->
+ @$("[data-filter-key=#{ @key }][data-filter-value!=#{ @val }]")
+
+ showChildren: ->
+ filter = new FieldFilter(@children())
+ filter.show()
+
+ hideCousins: ->
+ filter = new FieldFilter(@cousins())
+ filter.hide()
+
+ show: ->
+ @showChildren()
+ @hideCousins()
+
+ hide: ->
+ filter = new FieldFilter(@children())
+ filter.hide()

app/assets/javascripts/required_for_submit.js.coffee

@@ -10,7 +10,6 @@ class RequiredForSubmit
  @$submit.prop 'disabled', !@$controller.val()
 
 $ ->
- # @todo - better scope
- $scope = $(document)
+ $scope = $(document.body)
  $scope.find("[data-disable-if-empty]").each (idx, el) ->
  new RequiredForSubmit($scope, $(el))

app/assets/javascripts/selectizer.js.coffee

@@ -3,6 +3,10 @@ class Selectizer
  @$el = $(el)
  @dataAttr = @$el.attr('data-attr') || 'default_field'
 
+ # `required` inputs don't work with Selectize
+ # https://github.com/brianreavis/selectize.js/issues/733
+ @$el.removeAttr('required')
+
  isFreeForm: ->
  @$el.is('input')
 

app/helpers/ncr/work_orders_helper.rb

@@ -24,7 +24,7 @@ def vendor_options(vendor = nil)
  def expense_type_radio_button(form, expense_type)
  content_tag :div, class: 'radio' do
  form.label :expense_type, value: expense_type do
- radio = form.radio_button(:expense_type, expense_type, 'data-filter-control' => 'expense-type')
+ radio = form.radio_button(:expense_type, expense_type, 'data-filter-control' => 'expense-type', required: true)
  radio + expense_type
  end
  end

app/views/ncr/work_orders/form.html.haml

@@ -8,7 +8,7 @@
  = simple_form_for @model_instance, html: { multipart: true } do |f|
  = f.input :project_title
  = f.input :description
- = field_set_tag "Expense type", class: "required" do
+ = field_set_tag "Expense type", class: 'required' do
  = expense_type_radio_button(f, 'BA60')
  = expense_type_radio_button(f, 'BA61')
  = f.input :emergency, disabled: @model_instance.persisted?, wrapper_html: { data: { filter_key: 'expense-type', filter_value: 'BA61' } }
@@ -21,7 +21,7 @@
  = f.input :amount, as: :currency, label_html: { class: 'sr-only' }, input_html: { data: popover_data_attrs('ncr_amount') }
  = f.input :not_to_exceed, as: :radio_buttons, collection: [['Exact', false], ['Not to exceed', true]], label: false
  = f.input :direct_pay
- = f.input :approving_official_email, collection: approver_options, include_blank: true, disabled: @model_instance.approver_email_frozen?, prompt: :translate, input_html: { class: 'js-selectize' }
+ = f.input :approving_official_email, collection: approver_options, include_blank: true, disabled: @model_instance.approver_email_frozen?, prompt: :translate, input_html: { class: 'js-selectize' }, required: true
  - if @model_instance.new_record?
  = render partial: 'attachments'
  - else

config/initializers/konacha.rb

@@ -0,0 +1,6 @@
+if defined?(Konacha)
+ Konacha.configure do |config|
+ require 'capybara/poltergeist'
+ config.driver = :poltergeist
+ end
+end

config/initializers/simple_form.rb

@@ -27,6 +27,5 @@
  # The asterisk for required fields is added by CSS - make it simply be the label text
  config.label_text = ->(label, _required, _explicit_label) { label }
 
- # TODO enable, but make sure the filtered fields are only required when visible
- config.browser_validations = false
+ config.browser_validations = true
 end

doc/setup.md

@@ -79,7 +79,7 @@ have it in your PATH. This is used for javascript and interface testing.
 ### Running the entire suite once
 
 ```bash
-rake
+./bin/rake
 ```
 
 ### Running tests as corresponding files are changed

spec/javascripts/field_filter_spec.js.coffee

@@ -0,0 +1,73 @@
+#= require jquery
+#= require field_filter
+
+describe 'FieldFilter', ->
+ describe '#show()', ->
+ it "enables inputs", ->
+ $input = $('<input disabled="disabled">')
+
+ filter = new FieldFilter($input)
+ filter.show()
+
+ expect($input.is(':disabled')).to.be.false
+
+ it "enables text areas", ->
+ $textarea = $('<textarea disabled="disabled">')
+
+ filter = new FieldFilter($textarea)
+ filter.show()
+
+ expect($textarea.is(':disabled')).to.be.false
+
+ it "enables nested inputs", ->
+ $content = $('<div><input disabled="disabled"></div>')
+
+ filter = new FieldFilter($content)
+ filter.show()
+
+ $input = $content.find('input')
+ expect($input.is(':disabled')).to.be.false
+
+ it "enables nested text areas", ->
+ $content = $('<div><textarea disabled="disabled"></div>')
+
+ filter = new FieldFilter($content)
+ filter.show()
+
+ $textarea = $content.find('textarea')
+ expect($textarea.is(':disabled')).to.be.false
+
+ describe '#hide()', ->
+ it "disables inputs", ->
+ $input = $('<input>')
+
+ filter = new FieldFilter($input)
+ filter.hide()
+
+ expect($input.is(':disabled')).to.be.true
+
+ it "disables text areas", ->
+ $textarea = $('<textarea>')
+
+ filter = new FieldFilter($textarea)
+ filter.hide()
+
+ expect($textarea.is(':disabled')).to.be.true
+
+ it "disables nested inputs", ->
+ $content = $('<div><input></div>')
+
+ filter = new FieldFilter($content)
+ filter.hide()
+
+ $input = $content.find('input')
+ expect($input.is(':disabled')).to.be.true
+
+ it "disables nested text areas", ->
+ $content = $('<div><textarea></div>')
+
+ filter = new FieldFilter($content)
+ filter.hide()
+
+ $textarea = $content.find('textarea')
+ expect($textarea.is(':disabled')).to.be.true