Rename topics_controller.js to more generic name

This is because the methods in this controller could be re-used on the
other views where we want to implement search functionalities.

Author: Oli0li

app/javascript/controllers/search_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+import { useDebounce } from "stimulus-use";
+
+export default class extends Controller {
+  static targets = ["search", "choose"];
+  static debounces = ["submit"];
+
+  connect() {
+    useDebounce(this, { wait: 300 });
+  }
+
+  submit() {
+    this.searchTarget.requestSubmit();
+  }
+
+  chooseOption() {
+    this.chooseTarget.requestSubmit();
+  }
+}

app/javascript/controllers/topics_controller.js

@@ -1,10 +1,10 @@
-<%= form_for :provider , url: provider_settings_path, method: :put, data: { controller: "topics", topics_target: "chooseForm", turbo_frame: "topics", turbo_action: "advance" } do |f| %>
+<%= form_for :provider , url: provider_settings_path, method: :put, data: { controller: "search", search_target: "choose", turbo_frame: "topics", turbo_action: "advance" } do |f| %>
   <div class="form-body">
     <div class="row">
       <div class="col-md-6 col-12">
         <div class="form-group">
           <%= f.label :provider %>
-          <%= f.select :id, options_from_collection_for_select(providers, :id, :name), { prompt: "Change provider" }, class: "form-select", data: { action: "change->topics#chooseProvider" } %>
+          <%= f.select :id, options_from_collection_for_select(providers, :id, :name), { prompt: "Change provider" }, class: "form-select", data: { action: "change->search#chooseOption" } %>
         </div>
       </div>
     </div>

app/views/topics/_choose_provider.html.erb

@@ -4,43 +4,43 @@
   </div>
   <div class="card-content">
     <div class="card-body">
-      <%= form_for :search, url: topics_path, method: :get, data: { controller: "topics", topics_target: "searchForm", turbo_frame: "topic-list", turbo_action: "advance" } do |f| %>
+      <%= form_for :search, url: topics_path, method: :get, data: { controller: "search", search_target: "search", turbo_frame: "topic-list", turbo_action: "advance" } do |f| %>
         <div class="form-body">
           <div class="row">
             <div class="col-12">
               <div class="form-group">
                 <%= f.label :query %>
-                <%= f.text_field :query, value: params[:query], class: "form-control", data: { action: "input->topics#searchTopics" } %>
+                <%= f.text_field :query, value: params[:query], class: "form-control", data: { action: "input->search#submit" } %>
               </div>
             </div>
             <div class="col-md-6 col-12">
               <div class="form-group">
                 <%= f.label :language %>
-                <%= f.select :language_id, options_from_collection_for_select(languages, :id, :name, params[:provider_id]),  { prompt: "Select language" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+                <%= f.select :language_id, options_from_collection_for_select(languages, :id, :name, params[:provider_id]),  { prompt: "Select language" }, class: "form-select", data: { action: "change->search#submit" } %>
               </div>
             </div>
             <div class="col-md-3 col-12">
               <div class="form-group">
                 <%= f.label :year %>
-                <%= f.select :year, options_for_select((Date.today.year-10..Date.today.year).to_a, params[:year]), { prompt: "Select year" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+                <%= f.select :year, options_for_select((Date.today.year-10..Date.today.year).to_a, params[:year]), { prompt: "Select year" }, class: "form-select", data: { action: "change->search#submit" } %>
               </div>
             </div>
             <div class="col-md-3 col-12">
               <div class="form-group">
                 <%= f.label :month %>
-                <%= f.select :month, options_for_select((1..12).to_a, params[:month]), { prompt: "Select month" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+                <%= f.select :month, options_for_select((1..12).to_a, params[:month]), { prompt: "Select month" }, class: "form-select", data: { action: "change->search#submit" } %>
               </div>
             </div>
             <div class="col-md-6 col-12">
               <div class="form-group">
                 <%= f.label :state %>
-                <%= f.select :state, options_for_select(Topic::STATES.index_with(&:itself), params[:state]), { prompt: "Select state" }, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+                <%= f.select :state, options_for_select(Topic::STATES.index_with(&:itself), params[:state]), { prompt: "Select state" }, class: "form-select", data: { action: "change->search#submit" } %>
               </div>
             </div>
             <div class="col-md-6 col-12">
               <div class="form-group">
                 <%= f.label :order %>
-                <%= f.select :order, options_for_select(Topic::SORTS.reverse.index_with(&:itself), params[:order]), {}, class: "form-select", data: { action: "change->topics#searchTopics" } %>
+                <%= f.select :order, options_for_select(Topic::SORTS.reverse.index_with(&:itself), params[:order]), {}, class: "form-select", data: { action: "change->search#submit" } %>
               </div>
             </div>
             <div class="col-12 d-flex justify-content-end">