Stimulus

app/components/search_list_component.html.erb

@@ -1,11 +1,14 @@
-<%= form if form? %>
-<% if items? %>
+<%= content_tag :div, data: { controller: "search-list" } do %>
+  <%= form if form? %>
   <div class="mt-4">
     <ul class="mb-6">
       <%= turbo_frame_tag "list_#{@resource.plural}" do %>
         <% items.each do |item| %>
           <%= item %>
         <% end %>
+        <% if items.empty? %>
+          <%= render SearchListItemComponent.new(Kit::Product.new(name: 'Not found items')) %>
+        <% end %>
       <% end %>
     </ul>
   </div>

app/components/search_list_form_component.html.erb

@@ -1,5 +1,5 @@
 <%= form_tag class: "relative", data: { turbo_frame: "list_#{@resource.plural}" } do |f| %>
-  <%= f.input_search @search_field, @search_value %>
+  <%= f.input_search @search_field, @search_value, data: { search_list_target: 'searchField' } %>
   <%= f.button do %>
     <svg class="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />

app/components/search_list_item_component.rb

@@ -9,30 +9,41 @@ def initialize(item, label: :name)
   end
 
   def active?
-    current_page?(kit_product_path(@item))
+    @item.persisted? && current_page?(kit_product_path(@item))
   end
 
   def call
     html_options = {
       aria: { label: "Edit this #{@item.model_name.singular}" },
-      data: { turbo_frame: "#{@item.model_name.singular}_form" },
+      data: {
+        turbo_frame: "#{@item.model_name.singular}_form",
+        action: 'click->search-list#selectItem',
+        search_list_target: 'item',
+      },
       class: class_names(
         'flex items-center justify-between w-full p-2 rounded', {
           'bg-indigo-100': active?,
+          'text-slate-300': @item.new_record?,
         }
       ),
     }
 
     turbo_frame_tag dom_id(@item, 'list') do
       content_tag :li, class: '-mx-2' do
-        link_to @item, html_options do
-          content_tag :div, class: 'flex items-center truncate' do
-            content_tag :div, class: 'truncate' do
-              content_tag :div, @label, class: 'text-sm font-medium text-slate-800'
-            end
-          end
+        link_to_if(@item.persisted?, item_tag, @item, html_options) do
+          content_tag :span, item_tag, html_options.except(:data)
         end
       end
     end
   end
+
+  private
+
+  def item_tag
+    content_tag :div, class: 'flex items-center truncate' do
+      content_tag :div, class: 'truncate' do
+        content_tag :div, @label, class: 'text-sm font-medium'
+      end
+    end
+  end
 end

app/javascript/controllers/index.js

@@ -3,3 +3,6 @@
 // ./bin/rails generate stimulus controllerName
 
 import { application } from "./application"
+
+import SearchListController from "./search_list_controller"
+application.register("search-list", SearchListController)

app/javascript/controllers/search_list_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+import debounce from 'lodash/debounce';
+
+// Connects to data-controller="search-list"
+export default class extends Controller {
+  static values = { url: String };
+  static targets = ['searchField', 'item'];
+
+  connect() {
+    this.searchFieldTarget.addEventListener("keyup", debounce(this.search, 300));
+  }
+
+  selectItem(event) {
+    this.itemTargets.forEach(item => item.classList.remove('bg-indigo-100'));
+    event.target.closest('a').classList.add('bg-indigo-100');
+  }
+
+  search(event) {
+    event.target.form.requestSubmit();
+  }
+}

app/views/kit/products/index.html+turbo_frame.erb

@@ -1,4 +1,3 @@
-<%= render SearchListComponent.new do |c| %>
-  <%= c.with_form(ransack: @q) %>
+<%= render SearchListComponent.new(resource: @q.object.model_name) do |c| %>
   <%= @kit_products.each { |kit_product| c.with_item(kit_product) } %>
 <% end %>

package.json

@@ -7,6 +7,7 @@
     "alpinejs": "^3.10.4",
     "autoprefixer": "^10.4.12",
     "esbuild": "^0.15.12",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.2.1"
   },

yarn.lock

@@ -435,6 +435,11 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
   integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"