remote_dialog part1

1 week ago · 95b2fb4c3a
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
@ -2,3 +2,7 @@ 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>