|
0. Gemfile: (опционально/optional) |
|
=========== |
|
gem 'hamlit-rails' |
|
gem 'erb2haml' |
|
gem 'simple_form' |
|
|
|
1. Terminal |
|
=========== |
|
yarn add choices.js |
|
|
|
2. Create file: 'app/javascript/packs/choices/init.js' |
|
======================================= |
|
import * as Choices from 'choices.js' |
|
|
|
document.addEventListener("turbolinks:load", function() { |
|
new Choices('#choices-multiple-remove-button', { |
|
delimiter: ',', |
|
maxItemCount: 5, |
|
removeItemButton: true, |
|
noChoicesText: 'Не выбран', |
|
itemSelectText: 'Пожалуйста выберите', |
|
maxItemText: (maxItemCount) => { |
|
return `Вы можете назначить задаче до $ {maxItemCount} человек`; |
|
}, |
|
}); |
|
}); |
|
|
|
3. Create file: 'app/javascript/src/choices.scss' |
|
==================================================================================== |
|
@import '~choices.js/src/styles/choices' |
|
|
|
4. Edit 'app/javascript/packs/application.js' |
|
====================================== |
|
import './choices/init.js'; |
|
import '../src/choices.scss' |
|
|
|
5. In view (app/views/tasks/_form.html.haml for simple form) |
|
============================================================ |
|
= simple_form_for @task do |f| |
|
.... |
|
.field |
|
= f.association :members, |
|
required: true, |
|
as: :select, |
|
collection: Member.pluck(:name, :id), |
|
input_html: { id:'choices-multiple-remove-button', multiple: true } |
|
|
|
or |
|
|
|
= f.input :house_name %> |
|
= f.input :number_of_family_members %> |
|
= f.input :ward %> |
|
= f.input :landmark %> |
|
= f.association :panchayat, collection: Panchayat.all(), input_html: {class: 'form-select', id: 'dropdown-choice-select'} |
|
|
|
-------------------------------------------------------------------------------------- |
|
|
|
That`s all) |
|
|
|
PS Make sure id = 'choices-multiple-remove-button' is present for the choices.js library to work correctly |