Rails Drag & Drop & sort elements to a nested_form

Question

I have a Template that can have several PropertyLists, my goal is to have a form with the associated PropertyLists and the available PropertyLists. In this form I want to be able do drag & drop and sort items. I'm using Rails 5, with nested_form_fields and JQuery-ui (only the jquery-ui/sortable module).

Here are my models:

Template:

class Template < ApplicationRecord
  has_many :template_property_lists
  has_many :property_lists, through: :template_property_lists
  accepts_nested_attributes_for :property_lists
  validates_presence_of :name
end

PropertyList:

class PropertyList < ApplicationRecord
  has_many :properties, -> { order(position: :asc) }, dependent: :destroy
  has_many :template_property_lists
  has_many :templates, through: :template_property_lists

  accepts_nested_attributes_for :properties, allow_destroy: true, reject_if: :all_blank
  acts_as_list scope: :template, top_of_list: 0

  validates_presence_of :name
  validates_uniqueness_of :name
end

TemplatePropertyList:

class TemplatePropertyList < ApplicationRecord
  belongs_to :template
  belongs_to :property_list
end

And the JavaScript code:

$(function() {
    $(".sortable").sortable({
        update: function(event, ui) {
            var index = ui.item.index();
            ui.item.find('input.position').val(index);
        }
    }).disableSelection();
});


$( function() {
  $( ".used, .available" ).sortable({
    connectWith: ".connected-sortable",
        placeholder: "ui-state-highlight"
  }).disableSelection();
} );

The form partial:

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:template) %>
    </h1>
  </div>

  <div class="panel-body">
    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:name].present? %>">
        <%= f.label :name, t(:name) %>
        <%= f.text_field :name, class: 'form-control' %>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group <%= 'has-error' if @template.errors[:description].present? %>">
        <%= f.label :description, t(:description) %>
        <%= f.text_field :description, class: 'form-control' %>
      </div>
    </div>

  </div>
</div>

<!-- Template Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group used connected-sortable">
      <%= f.nested_fields_for :property_lists do |p| %>
      <li class="list-group-item">
        <%= p.hidden_field :position, class: 'position' %>
        <%= p.hidden_field :name %>
        <%= p.hidden_field :description %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
          </div>
          <div class="col-md-5">
            <%= p.object.name%>
          </div>
          <div class="col-md-5">
            <%= p.object.description%>
          </div>
          <div class="col-md-1 text-center"></div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>

</div>

<!-- Available Property Lists -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">
      <%= t(:available_property_lists) %>
    </h1>
  </div>

  <div class="panel-body">
    <ul class="list-group">
      <li class="list-group-item">
        <div class="row text-center">
          <div class="col-md-1"></div>
          <div class="col-md-5">
            <%= label_tag t(:name) %>
          </div>
          <div class="col-md-5">
            <%= label_tag t(:description) %>
          </div>
          <div class="col-md-1"></div>
        </div>
      </li>
    </ul>

    <ul class="list-group available connected-sortable">
      <% @available_property_lists.each do |property_list| %>
      <li class="list-group-item">
        <%= hidden_field_tag :position, class: 'position' %>
        <%= hidden_field_tag :id, property_list.id %>
        <div class="row text-center">
          <div class="col-md-1">
            <span class="glyphicon glyphicon-sort"></span>
            <% property_list.id %>
          </div>
          <div class="col-md-5">
            <%= property_list.name %>
          </div>
          <div class="col-md-5">
            <%= property_list.description %>
          </div>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</div>

My problem: When I submit the form I want the choosen TemplateLists associated with the Template, meaning the property_lists_attributes will have PropertyLists in the Template PropertyLists section and with the right order parameter. Note that this is a simple form submit, not an AJAX when Drag&Drop or Sort.

Answer 1

To solve this I have used a hidden fields in the available_property_lists.by adding:

<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][property_list_id]", property_list.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][position]", property_list.position, class: 'position' %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][template_id]", template.id %>
<%= hidden_field_tag "template[template_property_lists_attributes][#{property_list.id}][_destroy]", true, class: 'destroy' %>

and also hidden fields on the used:

<%= p.hidden_field :id %>
<%= p.hidden_field :position, class: 'position' %>
<%= p.hidden_field :property_list_id %>
<%= p.hidden_field :template_id %>
<%= p.hidden_field :_destroy, class: 'destroy' %>

and this Javascript to sort and enable or disable the _destroy checkbox:

$(function() {
    $(".used, .available").sortable({
        connectWith: ".connected-sortable",
        placeholder: "ui-state-highlight",
    });
    $(".available").on("sortremove", function(event, ui) {
        ui.item.find('input.destroy').val(false);
    });

    $(".used").on("sortremove", function(event, ui) {
        ui.item.find('input.destroy').val(true);
    });
});