feature: combobox field

Appraisals

@@ -1,6 +1,11 @@
 ["3.1.4", "3.3.0"].each do |ruby_version|
   ["6.1", "7.1", "7.2.0.beta2"].each do |rails_version|
     appraise "rails-#{rails_version}-ruby-#{ruby_version}" do
+      if rails_version == "6.1"
+        # hotwire_combobox it's not compatible with Rails 6.1
+        remove_gem "hotwire_combobox"
+      end
+
       gem "psych", "< 4"
       gem "rails", "~> #{rails_version}"
       gem "activestorage", "~> #{rails_version}"

Gemfile

@@ -72,7 +72,7 @@ group :development do
 
   # gem 'pry-rails'
 
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
 
   gem "hotwire-livereload", "~> 1.3.0"
 
@@ -193,3 +193,5 @@ gem "avo-record_link_field"
 gem "pagy", "> 8"
 
 gem "csv"
+
+gem "hotwire_combobox"

Gemfile.lock

@@ -348,6 +348,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     htmlbeautifier (1.4.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -621,6 +625,8 @@ GEM
     standard-performance (1.4.0)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.21.0)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     stringio (3.1.1)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
@@ -715,6 +721,7 @@ DEPENDENCIES
   hashid-rails (~> 1.4, >= 1.4.1)
   hightop
   hotwire-livereload (~> 1.3.0)
+  hotwire_combobox
   htmlbeautifier
   i18n-tasks (~> 1.0.12)
   image_processing (~> 1.12)

app/assets/stylesheets/avo.base.css

@@ -22,6 +22,7 @@
 
 @import './css/fields/status.css';
 @import './css/fields/code.css';
+@import './css/fields/combobox.css';
 @import './css/fields/progress.css';
 @import './css/fields/trix.css';
 @import './css/fields/tags.css';

app/assets/stylesheets/css/fields/combobox.css

@@ -0,0 +1,25 @@
+root {
+  --hw-border-radius: 0.25rem;
+}
+
+.hw-combobox .hw-combobox__main__wrapper,
+.hw-combobox__input {
+  @apply bg-gray-25;
+}
+.hw-combobox .hw-combobox__main__wrapper {
+  @apply rounded;
+
+  &:focus-within {
+    @apply border-gray-600 shadow-none;
+  }
+}
+
+
+[data-field-type="combobox"] {
+  .hw-combobox {
+    @apply w-full;
+  }
+  .hw-combobox .hw-combobox__main__wrapper {
+    @apply w-full;
+  }
+}

app/components/avo/fields/combobox_field/edit_component.html.erb

@@ -0,0 +1,6 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <%= @form.combobox @field.for_attribute,
+    helpers.combobox_results_path(resource_class: @resource.class, field_id: @field.id),
+    name_when_new:
+  %>
+<% end %>

app/components/avo/fields/combobox_field/edit_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Avo::Fields::ComboboxField::EditComponent < Avo::Fields::EditComponent
+  def name_when_new
+    if @field.accept_free_text
+     "#{@resource.form_scope}[#{@field.for_attribute}]"
+    end
+  end
+end

app/components/avo/fields/combobox_field/index_component.html.erb

@@ -0,0 +1,3 @@
+<%= index_field_wrapper **field_wrapper_args do %>
+  <%= @field.value %>
+<% end %>

app/components/avo/fields/combobox_field/index_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::ComboboxField::IndexComponent < Avo::Fields::IndexComponent
+end

app/components/avo/fields/combobox_field/show_component.html.erb

@@ -0,0 +1,3 @@
+<%= field_wrapper **field_wrapper_args do %>
+  <%= @field.value %>
+<% end %>

app/components/avo/fields/combobox_field/show_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::ComboboxField::ShowComponent < Avo::Fields::ShowComponent
+end

app/components/avo/items/panel_component.html.erb

@@ -7,7 +7,7 @@
     <% end %>
   <% end %>
    <% c.with_body do %>
-    <% content_tag :div, class: "divide-y overflow-auto" do %>
+    <% content_tag :div, class: "divide-y" do %>
       <%= render Avo::Items::VisibleItemsComponent.new resource: @resource, item: @item, view: @view, form: @form %>
     <% end %>
   <% end %>

app/controllers/avo/combobox_results_controller.rb

@@ -0,0 +1,26 @@
+class Avo::ComboboxResultsController < Avo::ApplicationController
+  def show
+    # find resource
+    resource_class = Avo.resource_manager.get_resource(params[:resource_class])
+    resource = resource_class.new(params: params, view: :edit, user: Avo::Current.user).tap do |r|
+      r.detect_fields
+    end
+
+    # find field
+    field = resource.get_fields.find { |f| f.is_a?(Avo::Fields::ComboboxField) && f.id.to_sym == params[:field_id].to_sym }
+
+    # get query
+    query = field.query
+
+    # run query in the execution context
+    @results = Avo::ExecutionContext.new(
+      target: query,
+      resource: resource,
+      field: field,
+      params: params,
+      q: params[:q]
+    ).handle
+
+    render turbo_stream: helpers.async_combobox_options(@results)
+  end
+end

app/javascript/js/application.js

@@ -1,7 +1,8 @@
 import { Alert, Popover } from 'tailwindcss-stimulus-components'
 import { Application } from '@hotwired/stimulus'
-import TextareaAutogrow from 'stimulus-textarea-autogrow'
+import HwComboboxController from '@josefarias/hotwire_combobox'
 import PasswordVisibility from '@stimulus-components/password-visibility'
+import TextareaAutogrow from 'stimulus-textarea-autogrow'
 import TurboPower from 'turbo_power'
 
 TurboPower.initialize(window.Turbo.StreamActions)
@@ -17,5 +18,6 @@ window.Stimulus = application
 // Register stimulus-components controller
 application.register('alert', Alert)
 application.register('popover', Popover)
+application.register('hw-combobox', HwComboboxController)
 
 export { application }

app/views/layouts/avo/application.html.erb

@@ -22,6 +22,7 @@
         <%= javascript_include_tag "hotwire-livereload", defer: true %>
       <% end %>
     <% end %>
+    <%= combobox_style_tag %>
     <%= render Avo::AssetManager::JavascriptComponent.new asset_manager: Avo.asset_manager %>
     <%= render partial: "avo/partials/head" %>
     <%= content_for :head %>

config/routes.rb

@@ -49,6 +49,8 @@
     post "/debug/refresh_license", to: "debug#refresh_license"
   end
 
+  resource :combobox_results
+
   if Rails.env.development? || Rails.env.staging?
     scope "/avo_private", as: "avo_private" do
       get "/design", to: "private#design"

gemfiles/rails_6.1_ruby_3.1.4.gemfile

@@ -52,7 +52,7 @@ group :development do
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_6.1_ruby_3.3.0.gemfile

@@ -52,7 +52,7 @@ group :development do
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_7.1_ruby_3.1.4.gemfile

@@ -45,14 +45,15 @@ gem "avo-money_field"
 gem "avo-record_link_field"
 gem "pagy", "> 8"
 gem "csv"
+gem "hotwire_combobox"
 gem "psych", "< 4"
 
 group :development do
   gem "standard", require: false
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_7.1_ruby_3.1.4.gemfile.lock

@@ -319,6 +319,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     htmlbeautifier (1.4.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -610,6 +614,8 @@ GEM
     standard-performance (1.4.0)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.21.0)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     terminal-table (3.0.2)
@@ -702,6 +708,7 @@ DEPENDENCIES
   hashid-rails (~> 1.4, >= 1.4.1)
   hightop
   hotwire-livereload (~> 1.3.0)
+  hotwire_combobox
   htmlbeautifier
   i18n-tasks (~> 1.0.12)
   image_processing (~> 1.12)

gemfiles/rails_7.1_ruby_3.3.0.gemfile

@@ -45,14 +45,15 @@ gem "avo-money_field"
 gem "avo-record_link_field"
 gem "pagy", "> 8"
 gem "csv"
+gem "hotwire_combobox"
 gem "psych", "< 4"
 
 group :development do
   gem "standard", require: false
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_7.1_ruby_3.3.0.gemfile.lock

@@ -292,6 +292,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     htmlbeautifier (1.4.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -583,6 +587,8 @@ GEM
     standard-performance (1.3.1)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.20.2)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     terminal-table (3.0.2)
@@ -675,6 +681,7 @@ DEPENDENCIES
   hashid-rails (~> 1.4, >= 1.4.1)
   hightop
   hotwire-livereload (~> 1.3.0)
+  hotwire_combobox
   htmlbeautifier
   i18n-tasks (~> 1.0.12)
   image_processing (~> 1.12)

gemfiles/rails_7.2.0.beta2_ruby_3.1.4.gemfile

@@ -45,14 +45,15 @@ gem "avo-money_field"
 gem "avo-record_link_field"
 gem "pagy", "> 8"
 gem "csv"
+gem "hotwire_combobox"
 gem "psych", "< 4"
 
 group :development do
   gem "standard", require: false
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_7.2.0.beta2_ruby_3.1.4.gemfile.lock

@@ -292,6 +292,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     htmlbeautifier (1.4.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -583,6 +587,8 @@ GEM
     standard-performance (1.3.1)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.20.2)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     terminal-table (3.0.2)
@@ -675,6 +681,7 @@ DEPENDENCIES
   hashid-rails (~> 1.4, >= 1.4.1)
   hightop
   hotwire-livereload (~> 1.3.0)
+  hotwire_combobox
   htmlbeautifier
   i18n-tasks (~> 1.0.12)
   image_processing (~> 1.12)

gemfiles/rails_7.2.0.beta2_ruby_3.3.0.gemfile

@@ -45,14 +45,15 @@ gem "avo-money_field"
 gem "avo-record_link_field"
 gem "pagy", "> 8"
 gem "csv"
+gem "hotwire_combobox"
 gem "psych", "< 4"
 
 group :development do
   gem "standard", require: false
   gem "bump", require: false
   gem "gem-release", require: false
   gem "annotate"
-  gem "htmlbeautifier"
+  gem "htmlbeautifier", require: false
   gem "hotwire-livereload", "~> 1.3.0"
   gem "rubocop", require: false
   gem "ripper-tags", require: false

gemfiles/rails_7.2.0.beta2_ruby_3.3.0.gemfile.lock

@@ -292,6 +292,10 @@ GEM
       actioncable (>= 6.0.0)
       listen (>= 3.0.0)
       railties (>= 6.0.0)
+    hotwire_combobox (0.3.2)
+      rails (>= 7.0.7.2)
+      stimulus-rails (>= 1.2)
+      turbo-rails (>= 1.2)
     htmlbeautifier (1.4.3)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
@@ -583,6 +587,8 @@ GEM
     standard-performance (1.3.1)
       lint_roller (~> 1.1)
       rubocop-performance (~> 1.20.2)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     terminal-table (3.0.2)
@@ -675,6 +681,7 @@ DEPENDENCIES
   hashid-rails (~> 1.4, >= 1.4.1)
   hightop
   hotwire-livereload (~> 1.3.0)
+  hotwire_combobox
   htmlbeautifier
   i18n-tasks (~> 1.0.12)
   image_processing (~> 1.12)