Make always a get request and show result in modal

app/components/common/modal_actions_component.html.erb

@@ -1,6 +1,6 @@
 <div class="flex sm:flex-row flex-col-reverse gap-4 justify-end mt-6 sm:-mx-6 sm:px-6 -mx-4 p-4 -mb-4 bg-gray-50">
-  <button data-action="click->modal#close" type="button" class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:w-auto">
+  <button data-action="click-><%= remove_content_action %>" type="button" class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:w-auto">
     Zavrieť
   </button>
   <%= submit_button %>
-</div>
+</div>

app/components/common/modal_actions_component.rb

@@ -1,5 +1,17 @@
 module Common
   class ModalActionsComponent < ViewComponent::Base
     renders_one :submit_button
+
+    def initialize(toggleable: false)
+      @toggleable = toggleable
+    end
+
+    def remove_content_action
+      if @toggleable
+        "modal#close"
+      else
+        "turbo-content#remove"
+      end
+    end
   end
 end

app/components/common/modal_component.html.erb

@@ -1,8 +1,5 @@
-<div class="relative" data-modal-disable-backdrop="true" data-controller="modal" data-action="keydown@window->modal#closeWithKeyboard">
-  <div role="button" data-action="click->modal#open">
-    <%= button %>
-  </div>
-  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" data-target="modal.container" data-action="keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 10000;">
+<div class="relative" data-modal-disable-backdrop="true" data-controller="turbo-content" data-action="keydown.esc@window-><%= remove_content_action %>">
+  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 10000;">
     <div class="max-w-lg max-h-screen w-full relative" style="z-index: 1000">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:p-6 sm:pb-4 flex flex-col">
@@ -13,6 +10,6 @@
         </div>
       </div>
     </div>
-    <div data-action="click->modal#close" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center bg-black opacity-80"></div>
+    <div data-action="click-><%= remove_content_action %>" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center bg-black opacity-80"></div>
   </div>
 </div>

app/components/common/modal_component.rb

@@ -1,7 +1,10 @@
 module Common
   class ModalComponent < ViewComponent::Base
-    renders_one :button
     renders_one :header
     renders_one :modal_content
+
+    def remove_content_action
+      "turbo-content#remove"
+    end
   end
 end

app/components/common/tag_selector_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Common::ModalComponent.new do |component| %>
+<%= render Common::ToggleableModalComponent.new do |component| %>
   <% component.with_button do %>
     <button type="button" class="rounded-md bg-blue-100 p-2" data-action="click->modal#open">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="  w-4 h-4 relative" preserveAspectRatio="xMidYMid meet">
@@ -26,6 +26,6 @@
         <%= tag.turbo_frame id: "tag-selector-popup", class: "w-100", src: search_available_tags_message_thread_path(@message_thread) %>
       </div>
     </div>
-    <%= render Common::ModalActionsComponent.new %>
+    <%= render Common::ModalActionsComponent.new(toggleable: true) %>
   <% end %>
 <% end %>

app/components/common/toggleable_modal_component.html.erb

@@ -0,0 +1,18 @@
+<div class="relative" data-modal-disable-backdrop="true" data-controller="modal" data-action="keydown@window->modal#closeWithKeyboard">
+  <div role="button" data-action="click->modal#open">
+    <%= button %>
+  </div>
+  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" data-target="modal.container" data-action="keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 10000;">
+    <div class="max-w-lg max-h-screen w-full relative" style="z-index: 1000">
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg sm:p-6 sm:pb-4 flex flex-col">
+          <% if header %>
+            <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title"><%= header %></h3>
+          <% end %>
+          <%= modal_content %>
+        </div>
+      </div>
+    </div>
+    <div data-action="click->modal#close" class="animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center bg-black opacity-80"></div>
+  </div>
+</div>

app/components/common/toggleable_modal_component.rb

@@ -0,0 +1,7 @@
+module Common
+  class ToggleableModalComponent < ViewComponent::Base
+    renders_one :button
+    renders_one :header
+    renders_one :modal_content
+  end
+end

app/components/layout/box_selector_component.html.erb

@@ -1,22 +1,14 @@
-<%= render Common::ModalComponent.new do |component| %>
-  <% component.with_button do %>
-    <button type="button" class="flex items-center gap-2" <%= "disabled=true" if @disabled %> data-action="click->modal#open">
-      <div class="flex justify-start items-center relative gap-3 py-1.5 lg:pl-8 rounded-md bg-white">
-        <% if Current.box %>
-          <div class="hidden lg:flex">
-            <%= render Icons::BoxesComponent.new %>
-          </div>
-          <%= render Common::BoxLabelComponent.new(Current.box) %>
-          <p class="hidden lg:flex text-base text-left text-gray-900"><%= Current.box.name %></p>
-        <% else %>
-          <%= render Icons::BoxesComponent.new %>
-          <p class="hidden lg:flex text-base text-left text-gray-900">Všetky schránky</p>
-        <% end %>
+<%= button_to get_selector_boxes_path, method: :get, data: { turbo_frame: "modal" }, disabled: @disabled, class: "flex items-center gap-2" do %>
+  <div class="flex justify-start items-center relative gap-3 py-1.5 lg:pl-8 rounded-md bg-white">
+    <% if Current.box %>
+      <div class="hidden lg:flex">
+        <%= render Icons::BoxesComponent.new %>
       </div>
-    </button>
-  <% end %>
-  <% component.with_modal_content do %>
-    <%= tag.turbo_frame id: 'box-selector-popup', src: get_selector_boxes_path %>
-    <%= render Common::ModalActionsComponent.new %>
-  <% end %>
+      <%= render Common::BoxLabelComponent.new(Current.box) %>
+      <p class="hidden lg:flex text-base text-left text-gray-900"><%= Current.box.name %></p>
+    <% else %>
+      <%= render Icons::BoxesComponent.new %>
+      <p class="hidden lg:flex text-base text-left text-gray-900">Všetky schránky</p>
+    <% end %>
+  </div>
 <% end %>

app/components/layout/box_selector_popup_component.html.erb

@@ -1,28 +1,32 @@
-<%= tag.turbo_frame id:'box-selector-popup' do %>
-  <%= link_to select_all_boxes_path, class: "flex justify-between items-center self-stretch flex-grow-0 flex-shrink-0 py-2", data: { turbo_frame: '_top' } do %>
-    <span class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-gray-900">
+<%= render Common::ModalComponent.new do |modal| %>
+  <% modal.with_modal_content do %>
+    <%= link_to select_all_boxes_path, data: { turbo_frame: "_top" }, class: "flex justify-between items-center self-stretch flex-grow-0 flex-shrink-0 py-2" do %>
+      <span class="flex-grow-0 flex-shrink-0 text-base font-medium text-left text-gray-900">
       Všetky schránky
     </span>
-    <span class="flex-grow-0 flex-shrink-0 text-sm text-left text-gray-600 px-1.5 py-0.5 rounded-md bg-gray-50 border border-gray-300">
+      <span class="flex-grow-0 flex-shrink-0 text-sm text-left text-gray-600 px-1.5 py-0.5 rounded-md bg-gray-50 border border-gray-300">
       <%= @all_unread_messages_count %>
     </span>
-  <% end %>
-  <hr>
-  <div class="flex flex-col gap-2">
-    <%= form_with url: search_boxes_path, class: "flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 mt-4" do |form| %>
-      <div class="flex w-full items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
-        <div class="p-2">
-          <%= render Icons::SearchComponent.new %>
-        </div>
-        <%= tag.turbo_frame id:'box-search-results' %>
-        <%= form.search_field :name_search, value: params[:name_search], placeholder: "Vyhľadaj schránku",
-                              oninput: "this.form.requestSubmit()",
-                              onreset: "this.form.requestSubmit()",
-                              class: "block w-full flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
-      </div>
-    <% end %>
-    <%= tag.turbo_frame id:'box-list', class: "flex-col self-stretch mt-2" do %>
-      <%= render Layout::BoxListComponent.with_collection(@boxes) %>
     <% end %>
-  </div>
+    <hr>
+    <div class="flex flex-col gap-2">
+      <%= form_with url: search_boxes_path, class: "flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 mt-4" do |form| %>
+        <div class="flex w-full items-center rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600">
+          <div class="p-2">
+            <%= render Icons::SearchComponent.new %>
+          </div>
+          <%= tag.turbo_frame id: "box-search-results" %>
+          <%= form.search_field :name_search, value: params[:name_search], placeholder: "Vyhľadaj schránku",
+                                oninput: "this.form.requestSubmit()",
+                                onreset: "this.form.requestSubmit()",
+                                class: "block w-full flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
+        </div>
+      <% end %>
+      <%= tag.turbo_frame id: "box-list", class: "flex-col self-stretch mt-2" do %>
+        <%= render Layout::BoxListComponent.with_collection(@boxes) %>
+      <% end %>
+    </div>
+
+    <%= render Common::ModalActionsComponent.new %>
+  <% end %>
 <% end %>

app/components/t_w/create_filter_component.html.erb

@@ -1,14 +1,9 @@
-<%= render Common::ModalComponent.new do |component| %>
-  <% component.with_button do %>
-    <button type="button" data-action="click->modal#open" class="flex items-center gap-2">
-      <%= render Icons::AddFilterComponent.new(query: params[:q]) %>
-    </button>
-  <% end %>
-  <% component.with_header do %>
+<%= render Common::ModalComponent.new do |modal| %>
+  <% modal.with_header do %>
     Pridať filter
   <% end %>
-  <% component.with_modal_content do %>
-    <%= form_with model: Filter.new(query: params[:q]), url: filters_path(to: 'search'), class: "flex flex-col self-stretch flex-grow-0 flex-shrink-0 mt-4" do |f| %>
+  <% modal.with_modal_content do %>
+    <%= form_with model: @filter, url: filters_path(to: 'search'), data: { turbo_frame: "_top" }, class: "flex flex-col self-stretch flex-grow-0 flex-shrink-0 mt-4" do |f| %>
       <div>
         <%= f.label :name, "Názov", class: "block text-sm font-medium leading-6 text-gray-900" %>
         <div class="mt-2">
@@ -20,7 +15,7 @@
 
       <%= render Common::ModalActionsComponent.new do |actions| %>
         <% actions.with_submit_button do %>
-          <%= f.submit 'Vytvoriť', class: "inline-flex w-full justify-center items-center px-3 py-2 rounded-md bg-blue-600 font-medium text-left text-sm text-white hover:cursor-pointer sm:w-auto" %>
+          <%= f.submit "Vytvoriť", class: "inline-flex w-full justify-center items-center px-3 py-2 rounded-md bg-blue-600 font-medium text-left text-sm text-white hover:cursor-pointer sm:w-auto" %>
         <% end %>
       <% end %>
     <% end %>

app/components/t_w/create_filter_component.rb

@@ -1,2 +1,5 @@
 class TW::CreateFilterComponent < ViewComponent::Base
+  def initialize(filter:)
+    @filter = filter
+  end
 end

app/components/t_w/top_navigation_component.html.erb

@@ -19,7 +19,11 @@
       </svg>
       <%= f.search_field :q, value: params[:q], placeholder: 'Vyhľadaj správu', class: 'block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-base' %>
     <% end %>
-    <%= render TW::CreateFilterComponent.new if params[:q].present? %>
+    <% if params[:q].present? %>
+      <%= link_to new_filter_path(query: params[:q]), data: { turbo_frame: "modal" }, class: "flex items-center gap-2", title: "Pridať filter" do %>
+        <%= render Icons::AddFilterComponent.new %>
+      <% end %>
+    <% end %>
   </div>
 </div>
 <svg width="1" height="64" viewBox="0 0 1 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="  " preserveAspectRatio="xMidYMid meet">

app/controllers/filters_controller.rb

@@ -10,7 +10,13 @@ def index
   def new
     authorize Filter
 
-    @filter = Filter.new
+    if params[:query].present?
+      @filter = Filter.new(query: params[:query])
+      render :new_in_modal
+    else
+      @filter = Filter.new
+      render :new
+    end
   end
 
   def create

app/javascript/controllers/index.js

@@ -15,3 +15,6 @@ application.register("debounce", DebounceController)
 
 import FormController from "./form_controller"
 application.register("form", FormController)
+
+import TurboContentController from "./turbo_content_controller"
+application.register("turbo-content", TurboContentController)

app/javascript/controllers/turbo_content_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  remove() {
+    this.element.parentElement.removeAttribute("src")
+    this.element.parentElement.removeAttribute("complete")
+    this.element.remove()
+  }
+}

app/views/boxes/get_selector.html.erb

@@ -1 +1,3 @@
-<%= render Layout::BoxSelectorPopupComponent.new(@boxes, @all_unread_messages_count) %>
+<%= tag.turbo_frame id: "modal" do %>
+  <%= render Layout::BoxSelectorPopupComponent.new(@boxes, @all_unread_messages_count) %>
+<% end %>

app/views/filters/new_in_modal.html.erb

@@ -0,0 +1,3 @@
+<%= tag.turbo_frame id: "modal" do %>
+  <%= render TW::CreateFilterComponent.new(filter: @filter) %>
+<% end %>