feat: add modal for creating new donation sites

Author: hagiya0121

app/controllers/donation_sites_controller.rb

@@ -18,13 +18,18 @@ def create
     @donation_site = current_organization.donation_sites.new(donation_site_params)
     respond_to do |format|
       if @donation_site.save
+        format.turbo_stream
         format.html do
           redirect_to donation_sites_path,
                       notice: "Donation site #{@donation_site.name} added!"
         end
       else
+        flash.now[:error] = "Something didn't work quite right -- try again?"
+        if request.format.turbo_stream?
+          format.html { render partial: "donation_sites/new_modal", status: :unprocessable_entity }
+        end
+
         format.html do
-          flash.now[:error] = "Something didn't work quite right -- try again?"
           render action: :new
         end
       end
@@ -33,6 +38,11 @@ def create
 
   def new
     @donation_site = current_organization.donation_sites.new
+    if turbo_frame_request?
+      render partial: "donation_sites/new_modal", layout: false
+    else
+      render :new
+    end
   end
 
   def edit

app/javascript/controllers/donations_modal_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    document.addEventListener("turbo:frame-render", this.openModalHandler)
+    document.addEventListener("turbo:submit-end", this.closeModalHandler)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:frame-render", this.openModalHandler)
+    document.removeEventListener("turbo:submit-end", this.closeModalHandler)
+  }
+
+  handleNewSelect(event) {
+    const value = event.target.value
+    if (value === "new") {
+      const url = event.target.dataset.url
+      Turbo.visit(url, { frame: 'modal-new' })
+    }
+  }
+
+  openModalHandler = () => {
+    const modal = document.getElementById("modal-new")
+    const instance = bootstrap.Modal.getOrCreateInstance(modal)
+    instance.show()
+  }
+
+  closeModalHandler = (event) => {
+    if (event.detail.success) {
+      const modal = document.getElementById("modal-new")
+      const instance = bootstrap.Modal.getOrCreateInstance(modal)
+      instance.hide()
+    }
+  }
+}

app/views/donation_sites/_new_modal.html.erb

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag "modal-new" do %>
+  <div class="modal-dialog">
+
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="mainModalLabel">New Donation Site</h4>
+        <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
+      </div>
+      <div class="modal-body">
+        <% flash.each do |key, value| %>
+          <div class="<%= flash_class(key) %> alert-dismissible">
+            <a href="#" class="close btn-close" data-bs-dismiss="alert" aria-label="close" style="text-decoration: none;"><%= fa_icon('times') %></a>
+            <%= value %>
+          </div>
+        <% end %>
+
+        <%= render partial: "form", object: @donation_site %>
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+
+  </div>
+<% end %>

app/views/donation_sites/create.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.append "donation_donation_site_id" do %>
+  <option value="<%= @donation_site.id %>" selected>
+    <%= @donation_site.name %>
+  </option>
+<% end %>

app/views/donations/_donation_form.html.erb

@@ -1,6 +1,7 @@
 <%= simple_form_for @donation, data: { controller: "form-input" } do |f| %>
 
-  <div class="box-body">
+  <div class="box-body" data-controller="donations-modal">
+    <%= turbo_frame_tag "modal-new", class: "modal fade", role: 'dialog' %>
 
     <div class="row">
       <div class="col-xs-8 col-md-6 col-lg-3">
@@ -16,14 +17,14 @@
 
     <div class="row">
       <div class="col-xs-8 col-md-6 col-lg-3">
-        <%= f.input :donation_site_id,
-            as: :select,
+        <%= f.association :donation_site,
             collection: options_with_new(@donation_sites),
             selected: donation_form.donation_site_id,
             include_blank: true,
             label: "Donation Site",
             error: "Where was this donation dropped off?",
-            wrapper: :input_group %>
+            wrapper: :input_group,
+            input_html: { data: { action: "change->donations-modal#handleNewSelect", url: new_donation_site_path } } %>
       </div>
     </div>
     <div class="row">