Initial Commit

Author: kobaltz

app/controllers/searches/products_controller.rb

@@ -0,0 +1,16 @@
+module Searches
+  class ProductsController < ApplicationController
+    def index
+      @products = Product.where(filter_by_company)
+      render json: @products.to_json
+    end
+
+    private
+
+    def filter_by_company
+      return {} unless params[:company_id].present?
+
+      { company_id: params[:company_id] }
+    end
+  end
+end

app/javascript/controllers/select_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from "tom-select"
+
+// Connects to data-controller="select"
+export default class extends Controller {
+  connect() {
+    new TomSelect(this.element)
+  }
+
+  disconnect() {
+    if (this.element.tomselect) {
+      this.element.tomselect.destroy()
+    }
+  }
+}

app/javascript/controllers/select_with_dependent_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+import TomSelect from "tom-select"
+
+// Connects to data-controller="select-with-dependent"
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    param: "id",
+    target: String,
+    target_name: "name",
+    target_value: "id"
+  }
+
+  connect() {
+    new TomSelect(this.element)
+  }
+
+  disconnect() {
+    if (this.element.tomselect) {
+      this.element.tomselect.destroy()
+    }
+  }
+
+  update() {
+    const url = new URL(this.urlValue, window.location.origin)
+    url.searchParams.set(this.paramValue, this.element.value)
+    fetch(url, {
+      headers: { Accept: "application/json" }
+    })
+      .then(response => response.json())
+      .then(data => {
+        const target = document.getElementById(this.targetValue)
+        if (target) {
+          const valueKey = this.targetValueValue
+          const nameKey = this.targetNameValue
+          if (target.tomselect) {
+            target.tomselect.clearOptions()
+            data.forEach(option => {
+              target.tomselect.addOption({ value: option[valueKey], text: option[nameKey] })
+            })
+            target.tomselect.refreshOptions(false)
+          } else {
+            target.innerHTML = ""
+            data.forEach(option => {
+              const opt = document.createElement("option")
+              opt.value = option[valueKey]
+              opt.textContent = option[nameKey]
+              target.appendChild(opt)
+            })
+          }
+        }
+      })
+  }
+}

app/models/company.rb

@@ -0,0 +1,3 @@
+class Company < ApplicationRecord
+  has_many :products, dependent: :destroy
+end

app/models/product.rb

@@ -0,0 +1,3 @@
+class Product < ApplicationRecord
+  belongs_to :company
+end

app/views/layouts/application.html.erb

@@ -19,6 +19,7 @@
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
     <%= javascript_importmap_tags %>
   </head>
 

app/views/welcome/index.html.erb

@@ -1,4 +1,27 @@
 <div>
   <h1 class="font-bold text-4xl">Welcome#index</h1>
   <p>Find me in app/views/welcome/index.html.erb</p>
+
+  <%= form_with url: root_path do |form| %>
+    <%= form.label :company, "Search companies", class: "font-bold" %>
+
+    <%= form.select :company, Company.all.collect { |c| [c.name, c.id] },
+      { prompt: "Select a company" },
+      "data-controller": "select-with-dependent",
+      "data-action": "change->select-with-dependent#update",
+      "data-select-with-dependent-url-value": searches_products_path,
+      "data-select-with-dependent-target-value": "product_select",
+      "data-select-with-dependent-param-value": :company_id,
+      class: "mb-3" %>
+
+    <%= form.label :product, "Search products", class: "font-bold" %>
+
+    <%= form.select :product, Product.all.collect { |c| [c.name, c.id] },
+      { prompt: "Select a product" },
+      "data-controller": "select",
+      id: :product_select,
+      class: "mb-3" %>
+
+    <%= form.submit "Search", class: "bg-blue-500 text-white p-2 rounded" %>
+  <% end %>
 </div>

config/importmap.rb

@@ -5,3 +5,4 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "tom-select", to: "https://cdn.jsdelivr.net/npm/tom-select@2.4.3/+esm"

config/routes.rb

@@ -1,5 +1,9 @@
 Rails.application.routes.draw do
-  root to: 'welcome#index'
+  namespace :searches do
+    resources :products, only: :index
+  end
+
+  root to: "welcome#index"
   get "welcome/index"
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
 

db/migrate/20250706010938_create_companies.rb

@@ -0,0 +1,9 @@
+class CreateCompanies < ActiveRecord::Migration[8.0]
+  def change
+    create_table :companies do |t|
+      t.string :name
+
+      t.timestamps
+    end
+  end
+end