Merge pull request #6279 from chaimann/admin-ui-select-include-blank

[Admin][UI] Allow select to include blank option

Author: tvdeyen

admin/app/components/solidus_admin/ui/forms/select/component.rb

@@ -50,6 +50,9 @@ class SolidusAdmin::UI::Forms::Select::Component < SolidusAdmin::BaseComponent
   #   loading next page of results. Default: "Loading more results".
   # @option attributes [String] :"data-no-results-message" which text to show when there are no search results returned.
   #   Default: "No results found".
+  # @option attributes [true, String] :include_blank if passed, an empty option will be prepended to the list of options.
+  #   Pass +true+ for empty option with no text, or +String+ for the text to be shown as empty option.
+  # @raise [ArgumentError] if +choices+ is not an array
   def initialize(label:, name:, choices:, src: nil, size: :m, hint: nil, tip: nil, error: nil, **attributes)
     @label = label
     @hint = hint
@@ -76,10 +79,17 @@ def before_render
   end
 
   def prepare_options(choices:, src:)
+    raise ArgumentError, "`choices` must be an array" unless choices.is_a?(Array)
+
     if src.present?
       @attributes[:"data-src"] = src
     end
 
+    if (blank_option = @attributes.delete(:include_blank))
+      blank_option = "" if blank_option == true
+      choices.unshift([blank_option, ""])
+    end
+
     @options_collection = options_for_select(choices, @attributes.delete(:value))
   end
 

admin/app/components/solidus_admin/users/store_credits/edit_amount/component.html.erb

@@ -6,8 +6,8 @@
         <%= render component("ui/forms/field").select(
           f,
           :store_credit_reason_id,
-          store_credit_reasons_select_options.html_safe,
-          include_blank: t('spree.choose_reason'),
+          @store_credit_reasons.map { [_1.name, _1.id] },
+          include_blank: t('.choose_reason'),
           html: { required: true }
         ) %>
       </div>

admin/app/components/solidus_admin/users/store_credits/edit_amount/component.rb

@@ -14,9 +14,4 @@ def form_id
   def form_url
     solidus_admin.update_amount_user_store_credit_path(@user, @store_credit, **search_filter_params)
   end
-
-  def store_credit_reasons_select_options
-    # Placeholder + Store Credit Reasons
-    "<option value>#{t('.choose_reason')}</option>" + options_from_collection_for_select(@store_credit_reasons, :id, :name)
-  end
 end

admin/app/components/solidus_admin/users/store_credits/edit_validity/component.html.erb

@@ -5,8 +5,8 @@
         <%= render component("ui/forms/field").select(
           f,
           :store_credit_reason_id,
-          store_credit_reasons_select_options.html_safe,
-          include_blank: t('spree.choose_reason'),
+          @store_credit_reasons.map { [_1.name, _1.id] },
+          include_blank: t('.choose_reason'),
           html: { required: true }
         ) %>
       </div>

admin/app/components/solidus_admin/users/store_credits/edit_validity/component.rb

@@ -14,9 +14,4 @@ def form_id
   def form_url
     solidus_admin.invalidate_user_store_credit_path(@user, @store_credit, **search_filter_params)
   end
-
-  def store_credit_reasons_select_options
-    # Placeholder + Store Credit Reasons
-    "<option value>#{t('.choose_reason')}</option>" + options_from_collection_for_select(@store_credit_reasons, :id, :name)
-  end
 end

admin/app/components/solidus_admin/users/store_credits/new/component.html.erb

@@ -6,15 +6,16 @@
         <%= render component("ui/forms/field").select(
           f,
           :currency,
-          currency_select_options.html_safe,
-          include_blank: t("spree.currency"),
+          Spree::Config.available_currencies.map { [_1.iso_code, _1.iso_code] },
+          placeholder: t("spree.currency"),
+          value: Spree::Config.currency,
           html: { required: true }
         ) %>
         <%= render component("ui/forms/field").select(
           f,
           :category_id,
-          store_credit_categories_select_options.html_safe,
-          include_blank: t("spree.category"),
+          @store_credit_categories.map { [_1.name, _1.id] },
+          include_blank: t(".choose_category"),
           html: { required: true }
         ) %>
         <%= render component("ui/forms/field").text_field(f, :memo) %>

admin/app/components/solidus_admin/users/store_credits/new/component.rb

@@ -10,13 +10,4 @@ def initialize(user:, store_credit:, categories:)
   def form_url
     solidus_admin.user_store_credits_path(@user, **search_filter_params)
   end
-
-  def currency_select_options
-    options_from_collection_for_select(Spree::Config.available_currencies, :iso_code, :iso_code, Spree::Config.currency)
-  end
-
-  def store_credit_categories_select_options
-    # Placeholder + Store Credit Categories
-    "<option value>#{t('.choose_category')}</option>" + options_from_collection_for_select(@store_credit_categories, :id, :name)
-  end
 end

admin/app/javascript/solidus_admin/web_components/solidus_select.js

@@ -44,6 +44,7 @@ class SolidusSelect extends HTMLSelectElement {
       dropdownContentClass: "dropdown-content",
       optionClass: "option",
       wrapperClass: "wrapper",
+      allowEmptyOption: true,
       maxOptions: null,
       refreshThrottle: 0,
       plugins: {

admin/spec/components/previews/solidus_admin/ui/forms/select/component_preview.rb

@@ -39,12 +39,15 @@ def remote_with_pagination(multiple: false, latency: false, loading_message: nil
   # @param disabled toggle
   # @param error toggle
   # @param include_blank toggle
+  # @param blank_option text
   # @param placeholder text
   # @param hint text
   # @param tip text
-  def playground(size: "m", options: 3, multiple: false, selected: false, disabled: false, error: false, include_blank: true, placeholder: nil, hint: nil, tip: nil)
+  def playground(size: "m", options: 3, multiple: false, selected: false, disabled: false, error: false, include_blank: false, blank_option: nil, placeholder: nil, hint: nil, tip: nil)
     options = (1..options).map { |i| ["Option #{i}", i] }
-    options.unshift(["None", ""]) if include_blank
+    if include_blank && blank_option.present?
+      include_blank = blank_option
+    end
 
     render component("ui/forms/select").new(
       label: "Label",
@@ -57,7 +60,8 @@ def playground(size: "m", options: 3, multiple: false, selected: false, disabled
       value: (multiple && [1, 2] || 1 if selected),
       multiple:,
       disabled:,
-      placeholder:
+      placeholder:,
+      include_blank:
     )
   end
 end

admin/spec/components/previews/solidus_admin/ui/forms/select/component_preview/overview.html.erb

@@ -3,7 +3,7 @@
     <div class="flex flex-col flex-grow gap-2">
       <h3>Single</h3>
 
-      <% default_params = { label: "Country", name: "country", choices: ["", "Denmark", "Sweden"] } %>
+      <% default_params = { label: "Country", name: "country", choices: %w[Denmark Sweden] } %>
 
       <div class="mb-8">
         <h6 class="text-gray-500 mb-3 mt-0">Default</h6>
@@ -51,7 +51,7 @@
     <div class="flex flex-col flex-grow gap-2">
       <h3>Multiple</h3>
 
-      <% default_params = { label: "Countries", name: "countries", choices: ["", "Denmark", "Sweden", "United Kingdom"], multiple: true } %>
+      <% default_params = { label: "Countries", name: "countries", choices: ["Denmark", "Sweden", "United Kingdom"], multiple: true } %>
 
       <div class="mb-8">
         <h6 class="text-gray-500 mb-3 mt-0">Default</h6>