turbo modal inside html dialog

app/controllers/comments_controller.rb

@@ -27,6 +27,13 @@ def create
       if @comment.save
         format.html { redirect_to comment_url(@comment), notice: "Comment was successfully created." }
         format.json { render :show, status: :created, location: @comment }
+        format.turbo_stream do
+          render turbo_stream: turbo_stream.prepend(
+            'comments',
+            partial: "comments/comment",
+            locals: { comment: @comment }
+          )
+        end
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -54,6 +61,11 @@ def destroy
     respond_to do |format|
       format.html { redirect_to comments_url, notice: "Comment was successfully destroyed." }
       format.json { head :no_content }
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.remove(
+          @comment
+        )
+      end
     end
   end
 

app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,47 @@
+// app/javascript/controllers/dialog_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dialog"
+export default class extends Controller {
+  static targets = ["modal", "frame"]
+
+  connect() {
+    this.modalTarget.addEventListener("close", this.enableBodyScroll.bind(this))
+  }
+
+  disconnect() {
+    this.modalTarget.removeEventListener("close", this.enableBodyScroll.bind(this))
+  }
+
+  // hide modal on successful form submission
+  // data-action="turbo:submit-end->turbo-modal#submitEnd"
+  submitEnd(e) {
+    if (e.detail.success) {
+      // console.log(e.detail.success)
+      this.close()
+    }
+  }
+
+  open() {
+    // this.modalTarget.show()
+    this.modalTarget.showModal()
+    document.body.classList.add('overflow-hidden')
+  }
+
+  close() {
+    this.modalTarget.close()
+    // document.body.classList.remove('overflow-hidden')
+    this.frameTarget.removeAttribute("src")
+    this.frameTarget.innerHTML = ""
+  }
+
+  enableBodyScroll() {
+    document.body.classList.remove('overflow-hidden')
+  }
+
+  clickOutside(event) {
+    if (event.target === this.modalTarget) {
+      this.close()
+    }
+  }
+}

app/views/comments/_comment.html.erb

@@ -5,8 +5,8 @@
   </p>
 
   <% if action_name != "show" %>
-    <%= link_to "Show this comment", comment, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%= link_to "Edit this comment", edit_comment_path(comment), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to "Show this comment", comment, data: {action: "click->dialog#open", turbo_frame: :modal}, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%= link_to "Edit this comment", edit_comment_path(comment), data: {action: "click->dialog#open", turbo_frame: :modal}, class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
     <hr class="mt-6">
   <% end %>
 </div>

app/views/comments/edit.html.erb

@@ -1,8 +1,5 @@
-<div class="mx-auto md:w-2/3 w-full">
+<%= turbo_frame_tag :modal do %>
   <h1 class="font-bold text-4xl">Editing comment</h1>
-
   <%= render "form", comment: @comment %>
-
   <%= link_to "Show this comment", @comment, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%= link_to "Back to comments", comments_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-</div>
+<% end %>

app/views/comments/index.html.erb

@@ -5,7 +5,7 @@
 
   <div class="flex justify-between items-center">
     <h1 class="font-bold text-4xl">Comments</h1>
-    <%= link_to "New comment", new_comment_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+    <%= link_to "New comment", new_comment_path, data: {action: "click->dialog#open", turbo_frame: :modal}, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
   </div>
 
   <div id="comments" class="min-w-full">

app/views/comments/new.html.erb

@@ -1,7 +1,6 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <h1 class="font-bold text-4xl">New comment</h1>
-
-  <%= render "form", comment: @comment %>
-
-  <%= link_to "Back to comments", comments_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-</div>
+<%= turbo_frame_tag :modal do %>
+  <div data-action="turbo:submit-end->dialog#submitEnd">
+    <h1 class="font-bold text-4xl">New comment</h1>
+    <%= render "form", comment: @comment %>
+  </div>
+<% end %>

app/views/comments/show.html.erb

@@ -1,4 +1,4 @@
-<div class="mx-auto md:w-2/3 w-full flex">
+<%= turbo_frame_tag :modal do %>
   <div class="mx-auto">
     <% if notice.present? %>
       <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
@@ -7,9 +7,8 @@
     <%= render @comment %>
 
     <%= link_to "Edit this comment", edit_comment_path(@comment), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
+    <div data-action="turbo:submit-end->dialog#submitEnd">
       <%= button_to "Destroy this comment", comment_path(@comment), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
     </div>
-    <%= link_to "Back to comments", comments_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
   </div>
-</div>
+<% end %>

app/views/layouts/application.html.erb

@@ -11,7 +11,15 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
+  <body data-controller="dialog" data-action="click->dialog#clickOutside">
+    <button data-action="click->dialog#open">Open dialog</button>
+    <dialog data-dialog-target="modal"
+            class="backdrop:bg-gray-400 backdrop:bg-opacity-90 z-10 rounded-md border-4 bg-sky-900 w-full md:w-2/3 mt-24">
+      <div class="p-8">
+        <button class="bg-slate-400" data-action="dialog#close">Cancel</button>
+        <%= turbo_frame_tag :modal, data: {dialog_target: "frame"} %>
+      </div>
+    </dialog>
     <main class="container mx-auto mt-28 px-5 flex">
       <%= yield %>
     </main>