Added functionality to add donation site on the fly

Author: neenu-chacko

app/controllers/donation_sites_controller.rb

@@ -22,17 +22,24 @@ def create
           redirect_to donation_sites_path,
                       notice: "Donation site #{@donation_site.name} added!"
         end
+        format.js
       else
         format.html do
           flash.now[:error] = "Something didn't work quite right -- try again?"
           render action: :new
         end
+        format.js { render template: "donation_sites/new_modal" }
       end
     end
   end
 
   def new
     @donation_site = current_organization.donation_sites.new
+    if request.xhr?
+      respond_to do |format|
+        format.js { render template: "donation_sites/new_modal" }
+      end
+    end
   end
 
   def edit

app/javascript/utils/donations.js

@@ -5,6 +5,7 @@ $(function() {
   const product_drive_participant_id = "#donation_product_drive_participant_id";
   const product_drive_id = "#donation_product_drive_id"
   const manufacturer_id = "#donation_manufacturer_id";
+  const donation_site_id="#donation_donation_site_id"
 
   const donation_site_container_id = "div.donation_donation_site";
   const product_drive_container_id = "div.donation_product_drive";
@@ -17,8 +18,8 @@ $(function() {
 
   const create_new_product_drive_text = "---Create new Product Drive---";
   const create_new_product_drive_participant_text = "---Create new Participant---";
-
   const create_new_manufacturer_text = "---Create new Manufacturer---";
+  const create_new_donation_site_text = "---Add New Donation Site---";
 
   $(product_drive_id).append(
 
@@ -32,6 +33,10 @@ $(function() {
     `<option value="">${create_new_manufacturer_text}</option>`
   );
 
+  $(donation_site_id).append(
+    `<option value="">${create_new_donation_site_text}</option>`
+  )
+
   $(document).on("change", product_drive_id, function(evt) {
     const selection = $(product_drive_id + " option")
       .filter(":selected")
@@ -61,6 +66,17 @@ $(function() {
     }
   });
 
+  $(document).on("change", donation_site_id, function(evt) {
+    const selection = $(donation_site_id + " option")
+      .filter(":selected")
+      .text();
+
+    if (selection === create_new_donation_site_text) {
+      document.getElementById("new_donation_site").click()
+    }
+  });
+
+
   function handleSourceSelection() {
     const selection = $(control_id + " option")
       .filter(":selected")

app/views/donation_sites/_form.html.erb

@@ -1,4 +1,4 @@
-<%= simple_form_for form, html: {role: "form"} do |f| %>
+<%= simple_form_for form, remote: request.xhr?, html: {role: "form"} do |f| %>
   <section class="content">
     <div class="container-fluid">
       <div class="row">

app/views/donation_sites/_new_modal.html.erb

@@ -0,0 +1,27 @@
+<div class="modal-dialog">
+
+  <!-- Modal content-->
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
+      <h4 class="modal-title" id="mainModalLabel">
+        New Donation Site
+      </h4>
+    </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>

app/views/donation_sites/create.js.erb

@@ -0,0 +1,6 @@
+<% flash.discard %>
+$("#modal_new").modal("hide");
+$("#donation_donation_site_id").empty();
+$("#donation_donation_site_id").html('<%= j options_from_collection_for_select(current_organization.donation_sites, :id, :name) %>');
+$("#donation_donation_site_id").append('<option value="">---Add New Donation Site---</option>');
+$("#donation_donation_site_id").val('<%= @donation_site[:id] %>');

app/views/donation_sites/new_modal.js.erb

@@ -0,0 +1,2 @@
+$("#modal_new").html("<%= j (render "donation_sites/new_modal") %>");
+$("#modal_new").modal("show");

app/views/donations/new.html.erb

@@ -37,6 +37,7 @@
             <%= link_to "Add product drive", new_product_drive_path, {:remote => true, "data-bs-target" => "#modal-window", id: "new_product_drive", "style" => "display: none;"} %>
             <%= link_to "Add product drive participant", new_product_drive_participant_path, {:remote => true, "data-bs-target" => "#modal-window", id: "new_participant", "style" => "display: none;"} %>
             <%= link_to "Add manufacturer", new_manufacturer_path, {:remote => true, "data-bs-target" => "#modal-window", id: "new_manufacturer", "style" => "display: none;"} %>
+            <%= link_to "Add donation site", new_donation_site_path, {:remote => true, "data-bs-target" => "#modal-window", id: "new_donation_site", "style" => "display: none;"} %>
           </div><!-- /.box -->
         </div>
       </div>