/parliament

Nested fields using vanilla JavaScript

Primary LanguageRubyMIT LicenseMIT

Parliament 🔨

Vanilla JavaScript nested form builder. Its name is derived from ProctorU's mascot, which is an owl. A group of owls when assembled is called a parliament, and it was in fact a parliament that created this gem.

Table of contents

Installation

Add this line to your application's Gemfile:

gem 'parliament'

And then execute:

$ bundle

Or install it yourself as:

$ gem install parliament

Note: If you use turbolinks, this should be placed after loading turbolinks.

In your application.js:

//= require parliament

Usage

Models

  • Add accepts_nested_attributes_for to your parent.
  • Add belongs_to to your association.

Controllers

Add the parameters to your controllers for strong params

  • id and _destroy are required for Strong Params.

Example:

# Projects Controller
# app/controllers/projects_controller.rb

private

def project_params
  params.require(:project).permit(:name, :description, tasks_attributes: [:id, :description, :done, :_destroy])
end

Form

  • Add a fields_for loop that you render your fields partial from, passing each object to it.
  • Ensure you call the f.add_association helper where you want the link displayed that a user will press to inject another field onto the DOM.

In the case of a Project/Tasks association:

Example:

# Rest of file omitted
<div class="form-group">
  <%= f.label(:tasks) %>

  <%= f.fields_for :tasks do |task| %>
    <%= render 'task_fields', f: task %>
  <% end %>

  <%= f.add_association 'Add Task',
    'tasks',
    class: 'btn btn-secondary btn-sm' %>
</div>

# Rest of file omitted

Inside of your record's fields partial:

  • Use the f.remove_association helper. This will execute JavaScript to remove the proper element from the page.
  • Ensure the contents of the fields are wrapped in a div with the nested-fields CSS class.

_task_fields.html.erb

<div class="nested-fields">
  <%= f.text_field :description, class: "form-control" %>

  <%= f.check_box :done %>
  <%= f.label :done %>

  <%= f.remove_association 'Remove', { class: 'btn btn-outline-danger' } %>
</div>

Developing

  1. Thank you! We love our contributors!
  2. Clone the repository.
  3. Make your changes in a thoughtfully-named branch.
  4. Ensure 1:1 test coverage.
  5. Submit a Pull Request!
  6. Celebrate! 🎉

License

This project uses MIT-LICENSE.

Credits

Parliament is maintained and funded by ProctorU, a simple online proctoring service that allows you to take exams or certification tests at home.


ProctorU Engineering & Design