simple_form custom wrapper with a plain radio button - ruby-on-rails

I am trying to make custom wrapper for a hybrid form like this:
The idea here is that there are the radio buttons that enable either the date picker, occurrences or indefinite. I currently have these manually created and I am trying to make a custom Simple Form wrapper to avoid all the hassle of adding tons of code to a simple input. The second occurrence input is the one that I can't get quite right. Here is the HTML for the form shown:
<div class="form-group radio_buttons required work_order_end_task">
<label class="radio_buttons required col-sm-2 control-label"><i class="fa fa-check-circle text-danger"></i> End Date</label>
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="date" name="work_order[end_task]" id="work_order_end_task_date">
</span>
<input disabled="" type="text" value="" name="work_order[end_date]" id="work_order_end_date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true" data-date-today-btn="linked" data-date-orientation="auto right" data-date-today-highlight="true" class="date required form-control left-border-rounded">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="number" name="work_order[end_task]" id="work_order_end_task_number">
</span>
<input class="numeric integer form-control" type="string" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">
Occurrence(s)
</span>
</div>
<br>
<div class="input-group integer optional work_order_count">
<span class="input-group-addon border-none radio_buttons optional work_order_end_task">
<span class="radio">
<label for="work_order_end_task_none">
<input class="radio_buttons optional radio_buttons" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">
</label>
</span>
</span>
<input class="string optional form-control" type="text" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">Occurrence(s)</span>
</div>
<br>
<div class="form-group radio_buttons optional work_order_end_task"><div class="col-sm-10"><span class="radio"><label class="static-radio" for="work_order_end_task_none"><input class="radio_buttons optional" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">Indefinite</label></span></div></div>
</div>
</div>
The issue is all the extra spans and labels being added. Here is my code:
<%= f.input :count, wrapper: :input_group do %>
<%= f.input :end_task, as: :radio_buttons, wrapper: :radio_addon, collection: [['','none']], label: false %>
<%= f.input_field :count, as: :string, class: "form-control" %>
<span class="input-group-addon">Occurrence(s)</span>
<% end %>
and wrappers:
config.wrappers :input_group, tag: 'div', class: 'input-group', error_class: 'has-error' do |b|
b.use :html5
b.use :input, class: 'form-control'
end
config.wrappers :radio_addon, tag: 'span', class: 'input-group-addon border-none' do |b|
b.use :html5
b.optional :readonly
b.use :input, class: 'radio_buttons'
end
So how do I get rid of the <span class="radio">
and <label for="work_order_end_task_none"> on the radio buttons and then all the extra classes ( integer optional work_order_count for example) being inserted into the wrappers and inputs?

I think I figured this out (sort of):
<span class="input-group-addon border-none">
<%= f.radio_button :end_task, 'number', label: false %>
</span>
Works like a charm. I would still like to add a custom wrapper to this to avoid having to manually add the wrapper span but that does not seem to work.

Related

Display error message on invalid special field

I would know how display a error message on my invalid field
I have a simple form
<%= simple_form_for #bien do |f| %>
<div class="col-md-6 col-md-offset-3 text-center">
<div class="row">
<div class="form-group">
<%= f.input :adress, :input_html =>{:id => 'address'}, placeholder: 'Adresse', label: "Adresse" %>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="form-group">
<h5><b>Type de mandat</b></h5>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-danger active" style="margin-right: 10px;">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Simple"/> Simple
</label>
<label class="btn btn-danger" style="margin-right: 10px;">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Exclusif" /> Exclusif
</label>
<label class="btn btn-danger">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Délégation" /> Délégation
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 text-center">
<%= f.button :submit, "Valider", class: "btn btn-fill callpremium btn-danger btn-lg" %>
</div>
<% end %>
And i would display a error message when my input is empty like i do with the normal adress field, i wont use flash messages
Simple form error messages are driven by your model's validations. Add a presence validation to the fields you want to have errors when empty and simple form will respond accordingly automatically. For example, you could add this to your model to give an error when address is empty:
validates :address, presence: true

Simple Form format without custom CSS in rails

I use simple_form gem in rails project and am going to implement a form. The form is very simple:
<%= simple_form_for admin, url: url do |f| %>
<div class="form-inputs">
<%= f.input :name %> #String
<%= f.input :email %> #String
<%= f.input :sso_only %> #Boolean
</div>
<% end %>
The generated html is:
<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/admin/admins" accept-charset="UTF-8" method="post">
<div class="form-group string required user_name">
<label class="string required col-sm-4 control-label" for="user_name">
<abbr title="required">*</abbr>
Name
</label>
<div class="col-sm-8">
<input class="string required form-control" type="text" name="user[name]" id="user_name">
</div>
</div>
<div class="form-group email required user_email">
<label class="email required col-sm-4 control-label" for="user_email">
<abbr title="required">*</abbr>
Email
</label>
<div class="col-sm-8">
<input class="string email required form-control" type="email" value="" name="user[email]" id="user_email">
</div>
</div>
<div class="form-group boolean optional user_sso_only">
<div class="col-sm-8">
<div class="checkbox">
<input value="0" type="hidden" name="user[sso_only]">
<label class="boolean optional" for="user_sso_only">
<input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
SSO Only
</label>
</div>
</div>
</div>
</form>
The display is:
From the image we can see, the name and email fields include label and input two parts. label has 4 size and input has 8.
However, the checkbox only include one part, which is 8. So it is very ugly when the checkbox in that position.
Normally, I would like the checkbox starts at the same position as the input box. And that should be the normal display for a form.
Therefore, is there any way to reach this by using simple_form itself? without customise the CSS.
I have tried wrapper but failed.
To achieve the result you want, and allow customisation, you'll need to make a modification to both your markup and the wrapper.
see: https://github.com/plataformatec/simple_form#the-wrappers-api
You can modify the existing top level wrapper to expose the div for which you want to include the offset.
Your erb markup for the sso_only field can be modified like so:
<%= f.input :sso_only, checkbox_wrapper_html: { class: 'col-sm-offset-4' } %>
Then, in order for the markup to recognise the modification, you have to change your existing initializer containing your wrapper definitions to respond to the checkbox_wrapper option (taken from the defaults).
# config/initializers/simple_form.rb
....
config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper :checkbox_wrapper, tag: 'div', class: 'col-sm-8' do |wr|
wr.wrapper tag: 'div', class: 'checkbox' do |ba|
ba.use :label_input
end
wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
wr.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
....
note the addition of :checkbox_wrapper within the block. This will allow you to use the checkbox_wrapper_html option in the markup as mentioned above.
This can also be applied to any other existing wrapper.
Im not familar with simple form but it looks like you need another column like your inputs. Try adding some kind of span with the 'col-sm-4' class.
<span class="col-sm-4 control-label" for=""></span>
<div class="col-sm-8">
<div class="checkbox">
<input value="0" type="hidden" name="user[sso_only]">
<label class="boolean optional" for="user_sso_only">
<input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
SSO Only
</label>
</div>
</div>

Capybara Unable to find field

Hello I am doing my very first tests and I would need your help. I am using Rails5.
The problem is because of the nested fields I believe...(used Cocoon gem)
Capybara returns this error:
Capybara::ElementNotFound:
Unable to find field "event_participants_attributes_1489697584487_first_name"
my html looks like this:
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489697584487_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489697584487][first_name]" id="event_participants_attributes_1489697584487_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489697584487_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489697584487][salary]" id="event_participants_attributes_1489697584487_salary"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489697584487][_destroy]" id="event_participants_attributes_1489697584487__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
and here is my features/events/create_event.spec.rb
require 'spec_helper'
require 'rails_helper'
describe "Creating an event" do
it "redirects on result page on success" do
visit "/"
click_link "Create a new event"
expect(page).to have_content('Wanna share fair?')
fill_in :name, with: 'Rent a plane'
fill_in "What is the total price", with: 200
click_link "Add a participant"
fill_in "event_participants_attributes_1489697584487_first_name", with: "John"
enter code here
fill_in ":event_participants_attributes_1489697584487_salary", with: 2300
click_button "See result"
expect(page).to have_content('Your salary together:')
end
end
And here are my simple_forms:
_form.html.erb
<%= simple_form_for #event do |f| %>
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<%= f.input :name, label: "Event's name" %>
<%= f.input :total_price, label: "What is the total price" %>
<p>Add the participants.</p>
<div id="participants">
<%= f.simple_fields_for :participants do |participant| %>
<%= render "participants_fields", f: participant %>
<% end %>
<div class="links text-center">
<%= link_to_add_association "Add a participant", f, :participants, partial: "participants_fields", class:"btn btn-primary btn-sm btn-add-friend" %>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<%= f.submit "See result" , class:"btn btn-success btn-lg btn-event" %>
</div>
<% end %>
_participants_fields.html.erb
<div class="nested-fields">
<%= f.input :first_name, label: "Participant's first name" %>
<%= f.input :salary, label: "Participant's monthly pay" %>
<div class="links">
<%= link_to_remove_association "Remove this friend", f , class: "btn btn-danger btn-xs btn-remove-friend" %>
</div>
</div>
edit more html
<form novalidate="novalidate" class="simple_form new_event" id="new_event" action="/events" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="O5XM0JMiVBbpPNaKF1apw7rdtC/XEBhasZQoK6POycZQ2Zp14Td1ljoJyIUKTwtl91LlBHeDkKFtcWRnNu+iEQ==">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<div class="form-group string optional event_name"><label class="control-label string optional" for="event_name">Event's name</label><input class="form-control string optional" type="text" name="event[name]" id="event_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_total_price"><label class="control-label integer optional" for="event_total_price">What is the total price</label><input class="form-control numeric integer optional" type="number" step="1" name="event[total_price]" id="event_total_price" data-com.agilebits.onepassword.user-edited="yes"></div>
<p>Add the participants.</p>
<div id="participants">
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705438668_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705438668][first_name]" id="event_participants_attributes_1489705438668_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705438668_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705438668][salary]" id="event_participants_attributes_1489705438668_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705438668][_destroy]" id="event_participants_attributes_1489705438668__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705443842_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705443842][first_name]" id="event_participants_attributes_1489705443842_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705443842_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705443842][salary]" id="event_participants_attributes_1489705443842_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705443842][_destroy]" id="event_participants_attributes_1489705443842__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="links text-center">
<a class="btn btn-primary btn-sm btn-add-friend add_fields" data-association="participant" data-associations="participants" data-association-insertion-template="<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_new_participants_first_name">Participant&#39;s first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][new_participants][first_name]" id="event_participants_attributes_new_participants_first_name" /></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_new_participants_salary">Participant&#39;s monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][new_participants][salary]" id="event_participants_attributes_new_participants_salary" /></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][new_participants][_destroy]" id="event_participants_attributes_new_participants__destroy" value="false" /><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
" href="#">Add a participant</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<input type="submit" name="commit" value="See result" class="btn btn-success btn-lg btn-event" data-disable-with="See result">
</div>
</form>
IIRC the "1489697584487" part of the ids you show is created by Cocoon based on the current timestamp. That means every time you run your test the number will be different so you're not going to be able to select those elements by id.
Instead if you're only adding one participant you should be able to do something like
fill_in "Participant's first name", with: "John"
fill_in "Participant's monthly pay", with: "2300"
If you are adding multiple participants then depending on the exact layout you can use nth-child/nth-of-type CSS selectors to scope the fill_in or use all and select the one you want, etc.
find('.nested-fields:nth-child(2)').fill_in ...
all(:field, "Participant's first name", minimum: 2)[1].set("John") # 0 based index so minimum should be 1 more than the index you want
Also - For any of this to work you need to be using a JS capable driver (Cocoon requires JS). You haven't tagged your spec with js: true metadata so either you've overridden the default driver, or you're not currently using a JS capable driver - see https://github.com/teamcapybara/capybara#selecting-the-driver. Also see https://github.com/teamcapybara/capybara#transactions-and-database-setup and https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example if you haven't yet configure database_cleaner for use with JS capable drivers

Checkboxes in horizontal form, and on the right side of the label

Is it possible to have the checkbox labels on the left like the others, and the checkbox on the right like the other inputs with a horizontal form?
My current setup
It looks pretty awful.
EDIT:
<%= simple_form_for :apartment, :html => {:multipart => true, :class => 'form-horizontal'}, wrapper: :horizontal_form do |f| %>
<%= f.input :pets, as: :boolean, label: 'Husdyr tilladt' %>
<% end %>
which generates the following html in the view:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets"><input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets">
Husdyr tilladt
</label>
</div>
</div>
You can add pull-right to the class of your checkbox element like so:
<input name="uh" id="uhhuh" type="checkbox" class="pull-right" />
Updated answer with user provided code:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets">Husdyr tilladt</label>
<input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets" class="pull-right">
</div>
</div>
I never used simple_form but from browsing the documentation, it looks like you should use a combination of :label => false and :inline_label => true to position your label.

Inline Radio Buttons using simple form and twitter bootstrap

I am trying to create a form that displays the radio options inline like this:
O Apple O Microsoft O Twitter O Square
Currently I have this line:
<%= f.association :company, as: :radio, label: false %>
But my form looks like this:
O Apple
O Microsoft
O Twitter
O Square
I have tried <div class="form-inline"></div> around that input and also adding
<%= f.association :company, as: :radio, label: false, :item_wrapper_class => 'inline' %>
Do I need to change the input to collection?
with regular rails you can do
<div class="radio">
<label>
<%= radio_button_tag "Product Type", "Retail Product or Service", true %>
Retail Product or Service
</label>
<label>
<%= radio_button_tag "Product Type", "Tax Code", false %>
Tax Code
</label>
<label>
<%= radio_button_tag "Product Type", "Discount Amount", false %>
Discount Amount
</label>
<label>
<%= radio_button_tag "Product Type", "Discount Percent", false %>
Discount Percent
</label>
</div>
You can use this:
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
Or this one (tag form only):
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>

Resources