openfoodnetwork/app/webpacker/controllers/select_variant_controller.js

import TomSelectController from "./tom_select_controller";

// 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, selected: Object };

  connect() {
    const options = {
      valueField: "id",
      searchField: ["name", "sku"],
      load: this.#load.bind(this),
      shouldLoad: (query) => query.length > 2,
      render: {
        option: this.#renderOption.bind(this),
        item: this.#renderItem.bind(this),
      },
    };
    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);
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        callback(json);
      })
      .catch((error) => {
        console.log(error);
        callback();
      });
  }

  #renderOption(variant, escape) {
    return `<div class='variant-autocomplete-item'>
        <figure class='variant-image'>
          ${variant.image ? `<img src='${variant.image}' />` : "<img src='/noimage/mini.png' />"}
        </figure>
        <div class='variant-details'>
          <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>
          </ul>
          <ul class='variant-data'>
            <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>
          </ul>
        </div>
      </div>`;
  }

  #renderItem(variant, escape) {
    return `<span>${escape(variant.name)}</span>`;
  }
}