Implement seach bar with turbo frame

admin/app/components/solidus_admin/products/index/component.html.erb

@@ -5,15 +5,24 @@
     </h1>
   </header>
 
-  <%= render component("ui/table").new(
-    page: @page,
-    columns: [
-      { header: "", data: -> { image_column(_1) }, class_name: "w-10" },
-      { header: :name, data: -> { name_column(_1) } },
-      { header: :status, data: -> { status_column(_1) } },
-      { header: :price, data: -> { price_column(_1) } },
-      { header: :stock, data: -> { stock_column(_1) } }
-     ]
-   )
-  %>
+  <%= form_with(
+        url: products_path,
+        method: :get,
+        class: "relative",
+        data: { controller: stimulus_id, turbo_frame: "products-list", turbo_action: "advance"}
+      ) do |form| %>
+
+    <div class="pt-2 mx-auto text-gray-600">
+      <%= form.text_field :query,
+            class: "border-2 border-gray-100 bg-white h-10 pl-10 pr-20 rounded-lg text-sm focus:outline-none",
+            placeholder: "Search",
+            data: { action: "input->#{stimulus_id}#search" } %>
+
+      <%= button_tag type: 'submit', disabled: true, class: "absolute left-0 top-1 mt-4 ml-3 bg-transparent border-0" do %>
+        <%= icon_tag("search-line", class: "text-gray-600 h-4 w-4 fill-current") %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= render component('products/list').new(page: @page) %>
 </div>

admin/app/components/solidus_admin/products/index/component.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  search() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.element.requestSubmit()
+    }, 200)
+  }
+}

admin/app/controllers/solidus_admin/products_controller.rb

@@ -3,10 +3,23 @@
 module SolidusAdmin
   class ProductsController < SolidusAdmin::BaseController
     def index
+      @products = if params[:query].present?
+        Spree::Product.where("name LIKE ?", "%#{params[:query]}%").order(created_at: :desc)
+      else
+        Spree::Product.order(created_at: :desc)
+      end
+
       set_page_and_extract_portion_from(
-        Spree::Product.order(created_at: :desc),
+        @products,
         per_page: SolidusAdmin::Config[:products_per_page]
       )
+
+      respond_to do |format|
+        format.turbo_stream do
+          render turbo_stream: turbo_stream.update('products-list', partial: 'components/products/list', locals: { page: @page })
+        end
+        format.html
+      end
     end
   end
 end