Use select2 ajax search for EssenceSpreeTaxon

As with the product and variant essences we also make use
of the select2 ajax feature to query the Solidus API for
selecting taxons.

app/assets/javascripts/alchemy/solidus/admin.js

@@ -1,2 +1,3 @@
 //= require alchemy/solidus/admin/product_select
 //= require alchemy/solidus/admin/variant_select
+//= require alchemy/solidus/admin/taxon_select

app/assets/javascripts/alchemy/solidus/admin/taxon_select.js

@@ -0,0 +1,32 @@
+//= require alchemy/solidus/admin/select2_config
+
+$.fn.alchemyTaxonSelect = function(options) {
+  var config = Alchemy.Solidus.getSelect2Config(options)
+
+  this.select2($.extend(true, config, {
+    ajax: {
+      data: function(term, page) {
+        return {
+          q: $.extend({
+            name_cont: term
+          }, options.query_params),
+          page: page
+        }
+      },
+      results: function(data, page) {
+        return {
+          results: data.taxons.map(function(taxon) {
+            return {
+              id: taxon.id,
+              text: taxon.name
+            }
+          }),
+          more: page * data.per_page < data.total_count
+        }
+      }
+    },
+    formatSelection: function(taxon) {
+      return taxon.text || taxon.name
+    }
+  }))
+}

app/views/alchemy/essences/_essence_spree_taxon_editor.html.erb

@@ -1,15 +1,24 @@
-<div class="content_editor essence_spree_taxon essence_select">
+<div class="content_editor essence_spree_taxon" id="<%= content.dom_id %>" data-content-id="<%= content.id %>">
   <%= content_label(content) %>
-  <%= select_tag(
+  <%= text_field_tag(
     content.form_field_name,
-    options_from_collection_for_select(
-      local_assigns.fetch(:options, {})[:taxons] || Spree::Taxon.all,
-      :id,
-      :pretty_name,
-      content.essence.taxon_id
-    ),
-    include_blank: t(".none"),
-    class: ["alchemy_selectbox", "essence_editor_select", html_options[:class]].join(' '),
-    style: html_options[:style]
+    content.essence.taxon_id,
+    id: content.form_field_id,
+    class: 'alchemy_selectbox full_width'
   ) %>
 </div>
+
+<script>
+  $('#<%= content.form_field_id %>').alchemyTaxonSelect({
+    placeholder: "<%= Alchemy.t(:search_taxon, scope: 'solidus') %>",
+    apiToken: "<%= current_alchemy_user.spree_api_key %>",
+    baseUrl: "<%= spree.api_taxons_path %>",
+    query_params: <%== content.settings[:query_params].to_json %>,
+    <% if content.essence.taxon %>
+    initialSelection: {
+      id: <%= content.essence.taxon_id %>,
+      text: "<%= content.essence.taxon.name %>"
+    }
+    <% end %>
+  })
+</script>

config/locales/alchemy_solidus_en.yml

@@ -3,6 +3,7 @@ en:
     solidus:
       search_variant: Search a variant by name or sku
       search_product: Search a product by name
+      search_taxon: Search a taxon by name
   spree:
     admin:
       tab:

spec/views/alchemy/essences/essence_spree_taxon_editor_spec.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'alchemy/essences/_essence_spree_taxon_editor' do
+  let(:content) { Alchemy::Content.new(essence: essence) }
+  let(:essence) { Alchemy::EssenceSpreeTaxon.new }
+
+  before do
+    view.class.send(:include, Alchemy::Admin::EssencesHelper)
+    allow(view).to receive(:content_label) { content.name }
+  end
+
+  subject do
+    render 'alchemy/essences/essence_spree_taxon_editor',
+      content: content,
+      spree: double(api_taxons_path: '/api/taxons'),
+      current_alchemy_user: double(spree_api_key: '123')
+    rendered
+  end
+
+  it "renders a taxon input" do
+    is_expected.to have_css('input.alchemy_selectbox.full_width')
+  end
+
+  context 'with a taxon related to essence' do
+    let(:taxon) { Spree::Taxon.new(id: 1) }
+    let(:essence) { Alchemy::EssenceSpreeTaxon.new(taxon_id: taxon.id) }
+
+    it "sets taxon id as value" do
+      is_expected.to have_css('input.alchemy_selectbox[value="1"]')
+    end
+  end
+end