Skip to content

Instantly share code, notes, and snippets.

@secretpray
Last active June 7, 2021 18:40
Show Gist options
  • Save secretpray/172f03043676485e70fb55e4fd51a909 to your computer and use it in GitHub Desktop.
Save secretpray/172f03043676485e70fb55e4fd51a909 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment