Implementation for forms that associate (un)existing parent-child relationships

_form.html.erb

<div class="row">
  <div id="specification-value-name" class="col-md-12 with-tip", data-original-title="<%= t('admin.tooltips.specification_value') %>" >
    <div class="form-group">
      <%= f.label :value %>
      <%= f.hidden_field :value, value: f.object.value, class: "js-specification-value-picker" %>
      <%= hidden_field_tag :specification_key_id, product_specification.specification_key_id %>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12" data-hook="admin_product_specification_form_variant">
    <%= f.label :variants %>
    <%= f.collection_select(:variant_ids, product.variants, :id, :variant_name, {}, { class: 'select2 js-variant-picker', multiple: true }) %>
  </div>
</div>
<div class="row">
  <div class="js-all-variants col-md-2" data-variants="<%= product.variant_ids %>">
    <%= button_tag Spree.t('add_all_variants'), type: :button, class: 'btn btn-primary js-add-all-variants' %>
  </div>
</div>
<div class="row">
  <div class="form-actions col-md-2" data-hook="buttons">
    <% if @specification_value.persisted? %>
      <%= button Spree.t('actions.update'), 'ok', 'submit', {class: 'btn-success'} %>
    <% else %>
      <%= button Spree.t('actions.create'), 'ok', 'submit', {class: 'btn-success'} %>
    <% end %>
  </div>
</div>

edit.html.erb

<%= render partial: 'spree/admin/shared/product_tabs', locals: { current: 'Specification' } %>

<%= csrf_meta_tag %>

<div id="add-line-item">
  <fieldset>
    <legend><%= @product_specification.specification_key.name  %></legend>
    <%= simple_form_for @specification_value, url: admin_product_specification_specification_value_url(@product_specification, @specification_value) do |f| %>
      <%= render 'form', product: @product, product_specification: @product_specification, f: f%>
    <% end %>
  </fieldset>
</div>

index.v1.rabl

collection(@resources)
attributes :value, :id

new.html.erb

<%= render partial: 'spree/admin/shared/product_tabs', locals: { current: 'Specification' } %>

<%= csrf_meta_tag %>

<div id="add-line-item">
  <fieldset>
    <legend><%= @product_specification.specification_key.name  %></legend>
    <%= simple_form_for @specification_value, url: admin_product_specification_specification_values_url(@product_specification) do |f| %>
      <%= render 'form', product: @product, product_specification: @product_specification, f: f %>
    <% end %>
  </fieldset>
</div>

show.v1.rabl

object @resource
attributes :value, :id

specification_picker.js

$.fn.specificationKeyPicker = function () {
  'use strict';

  this.select2({
    multiple: false,
    initSelection: function (element, callback) {
    },
    selectOnBlur: true,
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.name.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                name: term
            };
        }
    },
    ajax: {
      url: Spree.pathFor('api/specification_keys'),
      datatype: 'json',
      data: function (term) {
        return {
          q: term,
          token: Spree.api_key,
        };
      },
      results: function (data) {
        return {
          results: data
        };
      }
    },
    formatResult: function (specification_key) {
      return specification_key.name;
    },
    formatSelection: function (specification_key) {
      return specification_key.name;
    }
  });
};

$.fn.specificationValuePicker = function () {
  'use strict';

  this.select2({
    multiple: false,
    initSelection: function (element, callback) {
      $.get(Spree.pathFor('api/specification_keys/' + $('#specification_key_id').val() + '/specification_values/' + element.val()), {
        token: Spree.api_key
      }, function (data) {
        callback(data);
      });
    },
    selectOnBlur: true,
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.name.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                value: term
            };
        }
    },
    ajax: {
      url: Spree.pathFor('api/specification_keys/' + $('#specification_key_id').val() + '/specification_values'),
      datatype: 'json',
      data: function (term) {
        return {
          q: term,
          token: Spree.api_key,
        };
      },
      results: function (data) {
        return {
          results: data
        };
      }
    },
    id: function(specification_value) {
      return specification_value.value;
    },
    formatResult: function (specification_value) {
      return specification_value.value;
    },
    formatSelection: function (specification_value) {
      return specification_value.value;
    }
  });
};

$(document).ready(function () {
  $('.js-specification-key-picker').specificationKeyPicker();
  $('.js-specification-value-picker').specificationValuePicker();

  var $variantPicker = $('select.js-variant-picker').select2();
  if ($('.js-all-variants').length > 0) {
    var allVariants = JSON.parse("[" + $('.js-all-variants').attr('data-variants') + "]")[0];
  }


  $('.js-add-all-variants').on('click', function() {
    $variantPicker.val(allVariants).trigger('change');
  })
});

specification_values_controller.rb

module Spree
  module Api
    class SpecificationValuesController < Spree::Api::BaseController
      def index
        if params[:ids]
          @resources = specification_values.where(id: params[:ids].split(','))
        else
          @resources = specification_values.ransack(value_start: params[:q]).result
        end
        @resources = @resources.page(params[:page]).per(params[:per_page])
        respond_with(@resources)
      end

      def show
        @resource = resource_class.find_by(value: params[:id]) if params[:id]

        respond_with(@resource)
      end

      private

      def resource_class
        Spree::SpecificationValue
      end

      def specification_values
        Spree::SpecificationKey.find(params[:id]).specification_values
      end
    end
  end
end