Stock filter (#1376)

* Initial pass at stock filtering

* Rough in filter

* Cleaning up security listing

* Tweak to search function

* Combobox tweaks

* Clean up search query

* Update trades test with combobox

* Update securities.yml

app/assets/stylesheets/application.tailwind.css

@@ -19,7 +19,8 @@
     @apply focus-within:border-gray-900 focus-within:shadow-none focus-within:ring-4 focus-within:ring-gray-100;
   }
 
-  .form-field__label {
+
+  .form-field__label, .hw-combobox__label {
     @apply block text-xs text-gray-500 peer-disabled:text-gray-400;
   }
 
@@ -120,6 +121,33 @@
   }
 }
 
+.combobox {
+  .hw-combobox__main__wrapper, .hw-combobox__input {
+    @apply w-full;
+  }
+
+  .hw-combobox__main__wrapper {
+    @apply border-0 p-0 focus:border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none focus-within:shadow-none;
+  }
+
+  .hw-combobox__listbox {
+    @apply absolute top-[160%] right-0 w-full bg-transparent rounded z-30;
+  }
+
+  .hw_combobox__pagination__wrapper {
+    @apply h-px;
+
+    &:only-child {
+      @apply bg-transparent;
+    }
+  }
+
+  --hw-border-color: rgba(0, 0, 0, 0.2);
+  --hw-handle-width: 20px;
+  --hw-handle-height: 20px;
+  --hw-handle-offset-right: 0px;
+}
+
 /* Small, single purpose classes that should take precedence over other styles */
 @layer utilities {
   .scrollbar::-webkit-scrollbar {

app/controllers/account/trades_controller.rb

@@ -33,6 +33,10 @@ class Account::TradesController < ApplicationController
     end
   end
 
+  def securities
+    @pagy, @securities = pagy(Security.order(:name).search(params[:q]), limit: 20)
+  end
+
   private
 
     def set_account

app/models/account/trade_builder.rb

@@ -31,6 +31,7 @@ class Account::TradeBuilder < Account::EntryBuilder
     end
 
     def security
+      return Security.find(ticker) if ticker.match?(/\A[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\z/i)
       Security.find_or_create_by(ticker: ticker)
     end
 

app/models/security.rb

@@ -6,12 +6,36 @@ class Security < ApplicationRecord
   validates :ticker, presence: true
   validates :ticker, uniqueness: { scope: :exchange_mic, case_sensitive: false }
 
+  scope :search, ->(query) {
+    return none if query.blank? || query.length < 2
+
+    # Clean and normalize the search terms
+    sanitized_query = query.split.map do |term|
+      cleaned_term = term.gsub(/[^a-zA-Z0-9]/, " ").strip
+      next if cleaned_term.blank?
+      cleaned_term
+    end.compact.join(" | ")
+
+    return none if sanitized_query.blank?
+
+    sanitized_query = ActiveRecord::Base.connection.quote(sanitized_query)
+
+    where("search_vector @@ to_tsquery('simple', #{sanitized_query}) AND exchange_mic IS NOT NULL")
+      .select("securities.*, ts_rank_cd(search_vector, to_tsquery('simple', #{sanitized_query})) AS rank")
+      .reorder("rank DESC")
+  }
+
   def current_price
     @current_price ||= Security::Price.find_price(ticker:, date: Date.current)
     return nil if @current_price.nil?
     Money.new(@current_price.price, @current_price.currency)
   end
 
+  def to_combobox_display
+    "#{ticker} - #{name} (#{exchange_acronym})"
+  end
+
+
   private
 
     def upcase_ticker

app/views/account/trades/_form.html.erb

@@ -7,10 +7,12 @@
     <div class="space-y-2">
       <%= form.select :type, options_for_select([%w[Buy buy], %w[Sell sell], %w[Deposit transfer_in], %w[Withdrawal transfer_out], %w[Interest interest]], "buy"), { label: t(".type") }, { data: { "trade-form-target": "typeInput" } } %>
       <div data-trade-form-target="tickerInput">
-        <%= form.text_field :ticker, value: nil, label: t(".holding"), placeholder: t(".ticker_placeholder") %>
+        <div class="form-field combobox">
+          <%= form.combobox :ticker, securities_account_trades_path(entry.account), label: t(".holding"), placeholder: t(".ticker_placeholder"), autocomplete: :list, free_text: true %>
+        </div>
       </div>
 
-      <%= form.date_field :date, label: true %>
+      <%= form.date_field :date, label: true, value: Date.current %>
 
       <div data-trade-form-target="amountInput" hidden>
         <%= form.money_field :amount, label: t(".amount"), disable_currency: true %>

app/views/account/trades/_tickers.turbo_stream.erb

@@ -0,0 +1,7 @@
+<div class="flex items-center">
+  <%= image_tag("https://logo.synthfinance.com/ticker/#{tickers&.ticker}", class: "rounded-full h-8 w-8 inline-block mr-2") %>
+  <div class="flex flex-col">
+    <span class="text-sm font-medium"><%= tickers&.name.presence || tickers&.ticker %></span>
+    <span class="text-xs text-gray-500"><%= "#{tickers&.ticker} (#{tickers&.exchange_acronym})" %></span>
+  </div>
+</div>

app/views/account/trades/securities.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= async_combobox_options @securities,
+      render_in: { partial: "account/trades/tickers" },
+      next_page: @pagy.next %>

app/views/layouts/application.html.erb

@@ -9,6 +9,8 @@
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
+    <%= combobox_style_tag %>
+
     <%= javascript_importmap_tags %>
     <%= hotwire_livereload_tags if Rails.env.development? %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>