Add product dropdown on Order and Fulfillment reports

It includes loading the selected product to populate the dropdown
when needed.

app/controllers/admin/reports_controller.rb

@@ -55,6 +55,15 @@ module Admin
       @report_title = report_title
       @rendering_options = rendering_options
       @data = Reporting::FrontendData.new(spree_current_user)
+
+      variant_id_in = params[:variant_id_in].reject(&:blank?)
+      load_selected_variant if variant_id_in.present?
+    end
+
+    # Orders and Fulfillment Reports include a per product filter, load any selected product
+    def load_selected_variant
+      variant = Spree::Variant.find(params[:variant_id_in][0])
+      @variant_serialized = Api::Admin::VariantSerializer.new(variant)
     end
 
     def render_data?

app/views/admin/reports/filters/_orders_and_fulfillment.html.haml

@@ -12,3 +12,9 @@
   .alpha.two.columns= label_tag nil, t(:report_customers_cycle)
   .omega.fourteen.columns
     = f.select(:order_cycle_id_in, report_order_cycle_options(@data.order_cycles), {selected: params.dig(:q, :order_cycle_id_in)}, {class: "select2 fullwidth", multiple: true})
+.row
+  .alpha.two.columns= label_tag :add_variant_id, Spree.t(:name_or_sku)
+  .omega.fourteen.columns
+    - variant_json = @variant_serialized.present? ? @variant_serialized.to_json() : {}
+    = select_tag(:variant_id_in, params[:variant_id_in], { class: "fullwidth", multiple: true , data: { controller: "select-variant", "select-variant-selected-value": "#{variant_json}" } })
+

app/webpacker/controllers/select_variant_controller.js

@@ -1,15 +1,15 @@
 import TomSelectController from "./tom_select_controller";
 
-// This is simalar to the "variantAutocomplete" directive that uses "select2", but it doesn't 
+// This is simalar to the "variantAutocomplete" directive that uses "select2", but it doesn't
 // have all the same feature
 //
 export default class extends TomSelectController {
-  static values = { options: Object, distributor: Number };
+  static values = { options: Object, distributor: Number, selected: Object };
 
   connect() {
     const options = {
-      valueField: 'id',
-      searchField: ['name', 'sku'],
+      valueField: "id",
+      searchField: ["name", "sku"],
       load: this.#load.bind(this),
       shouldLoad: (query) => query.length > 2,
       render: {
@@ -18,17 +18,33 @@ export default class extends TomSelectController {
       },
     };
     super.connect(options);
+    // Add the selected value if any and select it.
+    // It will need to include data used in the templates below:
+    // - id
+    // - image
+    // - name
+    // - producer_name
+    // - sku
+    // - on_demand
+    // - on_hand
+    // - options_text
+    //
+    if (this.hasSelectedValue && Object.keys(this.selectedValue).length > 0) {
+      this.control.addOption(this.selectedValue);
+      this.control.addItem(this.selectedValue.id);
+    }
   }
 
   // private
 
   #load(query, callback) {
-    const url = '/admin/variants/search.json?q=' + encodeURIComponent(query);
+    const url = "/admin/variants/search.json?q=" + encodeURIComponent(query);
     fetch(url)
-      .then(response => response.json())
-      .then(json => {
+      .then((response) => response.json())
+      .then((json) => {
         callback(json);
-      }).catch((error) => {
+      })
+      .catch((error) => {
         console.log(error);
         callback();
       });
@@ -37,30 +53,38 @@ export default class extends TomSelectController {
   #renderOption(variant, escape) {
     return `<div class='variant-autocomplete-item'>
         <figure class='variant-image'>
-          ${ variant.image ? `<img src='${variant.image}' />` : "<img src='/noimage/mini.png' />" }
+          ${variant.image ? `<img src='${variant.image}' />` : "<img src='/noimage/mini.png' />"}
         </figure>
         <div class='variant-details'>
-          <h6 class="variant-name">${ escape(variant.name)}</h6>
+          <h6 class="variant-name">${escape(variant.name)}</h6>
           <ul>
-            <li><strong>${ I18n.t('spree.admin.variants.autocomplete.producer_name') }:</strong> ${ escape(variant.producer_name) }</li>
+            <li>
+              <strong> ${I18n.t("spree.admin.variants.autocomplete.producer_name")}: </strong>
+              ${escape(variant.producer_name)}
+            </li>
           </ul>
           <ul class='variant-data'>
-            <li class='variant-sku'><strong>${ I18n.t('admin.sku') }:</strong> ${ escape(variant.sku)}</li>
-            ${ 
+            <li class='variant-sku'>
+              <strong>${I18n.t("admin.sku")}: </strong>
+              ${escape(variant.sku)}
+            </li>
+            ${
               variant.on_demand
                 ? `<li class='variant-on_demand'><strong>${I18n.t("on_demand")}</strong></li>`
                 : `<li class='variant-on_hand'>
                      <strong>${I18n.t("on_hand")}:</strong> ${escape(variant.on_hand)}
                    </li>`
             }
-            <li class='variant-options_text'><strong>${ I18n.t('spree.admin.variants.autocomplete.unit') }:</strong> ${ escape(variant.options_text) }</li>
+            <li class='variant-options_text'>
+              <strong> ${I18n.t("spree.admin.variants.autocomplete.unit")}: </strong>
+              ${escape(variant.options_text)}
+            </li>
           </ul>
         </div>
       </div>`;
-   }
+  }
 
   #renderItem(variant, escape) {
-    return `<span>${ escape(variant.name) }</span>`
+    return `<span>${escape(variant.name)}</span>`;
   }
 }
-