remote_dialog part1

8 changed files with 54 additions and 32 deletions
--- a/app/controllers/edge_controller.rb
+++ b/app/controllers/edge_controller.rb
@ -2,6 +2,6 @@ class EdgeController < ApplicationController
  def index; end

  def turbo_edit
-    render turbo_stream: turbo_stream.console_log(text: 'Hello world server-side')
+    render turbo_stream: turbo_stream.remote_dialog(id: 'remote-dialog', title: 'my remote title', partial: 'turbo_dialog')
  end
 end
--- a/app/helpers/turbo_stream_actions_helper.rb
+++ b/app/helpers/turbo_stream_actions_helper.rb
@ -2,6 +2,10 @@ module TurboStreamActionsHelper
  def console_log(text)
    turbo_stream_action_tag :console_log, text: text
  end
+
+    def remote_dialog(dialog_id = 'remote-dialog', **rendering, &block)
+      action :remoteDialog, nil, **rendering, &block
+    end
 end

 Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper)
--- a/app/javascript/initializers/stream_actions.js
+++ b/app/javascript/initializers/stream_actions.js
@ -1,4 +1,8 @@
 Turbo.StreamActions.console_log = function () {
  const text = this.getAttribute("text")
  console.log(text)
-}
+}
+
+Turbo.StreamActions.remoteDialog = function () {
+  console.log('remote-dialog', this)
+}
--- a/app/views/edge/_turbo_dialog.html.erb
+++ b/app/views/edge/_turbo_dialog.html.erb
@ -0,0 +1,13 @@
+<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'my title' do %>
+  <p class="mb-6">
+    This is a centered dialog using the HTML dialog element with Tailwind CSS.
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
+    enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
+    Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
+  </p>
+
+  <form method="dialog" class="modal-action items-end text-center">
+    <%= content_tag :button, 'OK2', value: :confirm, class: "btn btn-primary" %>
+    <%= content_tag :button, 'Cancel2', value: :cancel, class: "btn btn-ghost" %>
+  </form>
+<% end %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -26,9 +26,9 @@
  </head>

  <body class="flex flex-col">
-    <%= render '/layouts/components/main_dialog' %>
    <%= render '/layouts/components/navbar' %>
    <main class="m-8 min-h-60"><%= yield %></main>
    <%= render '/layouts/components/footer' %>
+    <%= render '/layouts/components/dialogs' %>
  </body>
 </html>
--- a/app/views/layouts/components/_dialog.html.erb
+++ b/app/views/layouts/components/_dialog.html.erb
@ -0,0 +1,8 @@
+<%# locals: (id:, title:) %>
+
+<dialog id="<%= id %>" class="modal">
+  <div class="modal-box bg-base-200">
+    <h3 class="text-lg font-bold"><%= title %></h3>
+    <%= yield %>
+  </div>
+</dialog>
--- a/app/views/layouts/components/_dialogs.html.erb
+++ b/app/views/layouts/components/_dialogs.html.erb
@ -0,0 +1,22 @@
+<%= render 'layouts/components/dialog', id: 'front-dialog', title:'Demande de confirmation' do %>
+  <p data-dialog-content class="mb-6">CONTENT</p>
+
+  <form method="dialog" class="modal-action">
+    <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
+    <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+  </form>
+<% end %>
+
+<%= render 'layouts/components/dialog', id: 'remote-dialog', title:'Demande de confirmation' do %>
+  <p class="mb-6">
+    This is a centered dialog using the HTML dialog element with Tailwind CSS.
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
+    enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
+    Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
+  </p>
+
+  <form method="dialog" class="modal-action items-end text-center">
+    <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
+    <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
+  </form>
+<% end %>
--- a/app/views/layouts/components/_main_dialog.html.erb
+++ b/app/views/layouts/components/_main_dialog.html.erb
@ -1,29 +0,0 @@
-<dialog id="front-dialog" class="modal">
-  <div class="modal-box bg-base-200">
-    <h3 class="text-lg font-bold">Demande de confirmation</h3>
-    <p data-dialog-content class="mb-6"></p>
-
-    <form method="dialog" class="modal-action">
-      <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
-      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
-    </form>
-  </div>
-</dialog>
-
-<dialog id="remote-dialog" class="modal">
-  <div class="modal-box bg-base-200">
-    <h3 data-modal="title" class="text-lg font-bold">Remote Dialog</h3>
-
-    <p class="mb-6">
-      This is a centered dialog using the HTML dialog element with Tailwind CSS.
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro quisquam
-      enim blanditiis iusto neque accusantium minus, aspernatur ex eius at.
-      Aliquam nam ex sit vel nesciunt qui ducimus velit nulla.
-    </p>
-
-    <form method="dialog" class="modal-action items-end text-center">
-      <%= content_tag :button, 'OK', value: :confirm, class: "btn btn-primary" %>
-      <%= content_tag :button, 'Cancel', value: :cancel, class: "btn btn-ghost" %>
-    </form>
-  </div>
-</dialog>