Improve forms using slim-select for more select fields

Author: rsmithlal

app/views/better_together/communities/show.html.erb

@@ -105,7 +105,7 @@
 
                         <div class="mb-3">
                           <%= form.label :role_id, "Select Role *", class: "form-label" %>
-                          <%= form.collection_select :role_id, ::BetterTogether::Role.where(resource_type: @resource.class.to_s), :id, :name, { prompt: "Select a role" }, { class: "form-select", required: true } %>
+                          <%= form.collection_select :role_id, ::BetterTogether::Role.where(resource_type: @resource.class.to_s), :id, :name, { prompt: "Select a role" }, { class: "form-select", required: true, data: { controller: 'better_together--slim-select' } } %>
                         </div>
                         <div class="mb-3">
                           <%= form.submit "Add", class: "btn btn-primary" %>

app/views/better_together/content/blocks/fields/_hero.html.erb

@@ -15,7 +15,7 @@
   <div class="mb-3 row row-cols-1 row-cols-sm-2">
     <div class="align-self-end mb-3">
       <%= label_tag "#{scope}[cta_button_style]", block.class.human_attribute_name('cta_button_style'), class: 'form-label' %>
-      <%= select_tag "#{scope}[cta_button_style]", options_for_select(block.class::AVAILABLE_BTN_CLASSES.map {|k, v| [t("better_together.content.blocks.hero.cta_button_styles.#{k}"), v]}, block.cta_button_style), class: 'form-select' %>
+      <%= select_tag "#{scope}[cta_button_style]", options_for_select(block.class::AVAILABLE_BTN_CLASSES.map {|k, v| [t("better_together.content.blocks.hero.cta_button_styles.#{k}"), v]}, block.cta_button_style), { class: 'form-select', data: { controller: 'better_together--slim-select' } } %>
     </div>
 
     <div class="cta-url-field align-self-end mb-3">

app/views/better_together/content/blocks/fields/_template.html.erb

@@ -2,5 +2,5 @@
 <%- scope = local_assigns[:scope] ? local_assigns[:scope] : BetterTogether::Content::Block.block_name %>
 <div class="template-fields">
   <%= required_label block, :template_path %>
-  <%= select_tag "#{scope}[template_path]", options_for_select(block.class::available_templates.map { |path| [ I18n.t(path.tr('/', '.')), path] }, block.template_path), class: 'form-select' %>
+  <%= select_tag "#{scope}[template_path]", options_for_select(block.class::available_templates.map { |path| [ I18n.t(path.tr('/', '.')), path] }, block.template_path), { class: 'form-select', data: { controller: 'better_together--slim-select' } } %>
 </div>

app/views/better_together/content/blocks/fields/shared/_style.html.erb

@@ -13,7 +13,7 @@
         <div class="mb-3 row row-cols-1 row-cols-sm-2">
           <div class="mb-3">
             <%= label_tag "#{scope}[container_class]", "Container Class" %>
-            <%= select_tag "#{scope}[container_class]", options_for_select(block.class::VALID_CONTAINER_CLASSES, block.container_class), include_blank: true, class: "form-select" %>
+            <%= select_tag "#{scope}[container_class]", options_for_select(block.class::VALID_CONTAINER_CLASSES, block.container_class), { include_blank: true, class: "form-select", data: { controller: 'better_together--slim-select' } } %>
           </div>
 
           <div class="mb-3">

app/views/better_together/navigation_items/_form.html.erb

@@ -42,7 +42,7 @@
 
     <div class="mb-3">
       <%= form.label :item_type %>
-      <%= form.select :item_type, options_for_select(['link', 'dropdown', 'separator'], @navigation_item.item_type), { include_blank: true }, { class: 'form-select' + (@navigation_item.errors[:item_type].any? ? ' is-invalid' : '') } %>
+      <%= form.select :item_type, options_for_select(['link', 'dropdown', 'separator'], @navigation_item.item_type), { include_blank: true }, { class: 'form-select' + (@navigation_item.errors[:item_type].any? ? ' is-invalid' : ''), data: { controller: 'better_together--slim-select' } } %>
       <% if @navigation_item.errors[:item_type].any? %>
         <div class="invalid-feedback">
           <%= @navigation_item.errors[:item_type].join(", ") %>

app/views/better_together/pages/_form.html.erb

@@ -78,7 +78,7 @@
 
     <div class="col mb-3 pb-3 border-bottom">
       <%= form.label :layout %>
-      <%= form.select :layout, options_for_select(::BetterTogether::Page::PAGE_LAYOUTS, page.layout), {}, { class: "form-select#{' is-invalid' if page.errors[:layout].any?}" } %>
+      <%= form.select :layout, options_for_select(::BetterTogether::Page::PAGE_LAYOUTS, page.layout), {}, { class: "form-select#{' is-invalid' if page.errors[:layout].any?}", data: { controller: 'better_together--slim-select' } } %>
       <% if page.errors[:layout].any? %>
         <div class="invalid-feedback">
           <%= page.errors[:layout].join(", ") %>

app/views/better_together/platforms/show.html.erb

@@ -154,12 +154,12 @@
                               <div class="row mt-3">
                                 <div class="mb-3 pb-3 col-md-6 border-bottom">
                                   <%= form.label :community_role_id, "Select Community Role *", class: "form-label" %>
-                                  <%= form.collection_select :community_role_id, ::BetterTogether::Role.where(resource_type: "BetterTogether::Community").positioned, :id, :name, { prompt: "Select a platform community role" }, { class: "form-select", required: true } %>
+                                  <%= form.collection_select :community_role_id, ::BetterTogether::Role.where(resource_type: "BetterTogether::Community").positioned, :id, :name, { prompt: "Select a platform community role" }, { class: "form-select", required: true, data: { controller: 'better_together--slim-select' } } %>
                                 </div>
 
                                 <div class="mb-3 pb-3 col-md-6 border-bottom">
                                   <%= form.label :platform_role_id, "Select Platform Role", class: "form-label" %>
-                                  <%= form.collection_select :platform_role_id, ::BetterTogether::Role.where(resource_type: "BetterTogether::Platform").positioned, :id, :name, { prompt: "Select a platform role" }, { class: "form-select", title: 'Platform Role' } %>
+                                  <%= form.collection_select :platform_role_id, ::BetterTogether::Role.where(resource_type: "BetterTogether::Platform").positioned, :id, :name, { prompt: "Select a platform role" }, { class: "form-select", title: 'Platform Role', data: { controller: 'better_together--slim-select' } } %>
                                 </div>
                               </div>
                             </div>

app/views/better_together/social_media_accounts/_social_media_account_fields.html.erb

@@ -4,7 +4,7 @@
   <%= form.hidden_field :_destroy %>
   <div class="col-md-3">
     <%= required_label form, :platform, class: "form-label" %>
-    <%= form.select :platform, BetterTogether::SocialMediaAccount::PLATFORMS.map { |p| [p, p] }, { prompt: t('better_together.select'), required: true }, class: 'form-select' %>
+    <%= form.select :platform, BetterTogether::SocialMediaAccount::PLATFORMS.map { |p| [p, p] }, { prompt: t('better_together.select'), required: true }, { class: 'form-select', data: { controller: 'better_together--slim-select' } } %>
   </div>
   <div class="col-md-3 mt-3 mt-md-0">
     <%= required_label form, :privacy, class: "form-label" %>