Merge pull request #5323 from hagiya0121/feature/donation-site-on-the-fly

4982 Enable on-the-fly creation of Donation Sites from donation form

Author: ruestitch

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/helpers/donations_helper.rb

@@ -21,6 +21,12 @@ def total_number_of_drives(range = selected_range)
     current_organization.product_drives.within_date_range(formatted_range).count
   end
 
+  def options_with_new(records)
+    model_class = records.klass
+    label = "---Create New #{model_class.model_name.human}---"
+    records.map { |record| [record.name, record.id] } << [label, "new"]
+  end
+
   private
 
   def total_received_donations_unformatted(range = selected_range)

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">
@@ -17,12 +18,13 @@
     <div class="row">
       <div class="col-xs-8 col-md-6 col-lg-3">
         <%= f.association :donation_site,
-                          collection: @donation_sites,
-                          selected: donation_form.donation_site_id,
-                          include_blank: true,
-                          label: "Donation Site",
-                          error: "Where was this donation dropped off?",
-                          wrapper: :input_group %>
+            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,
+            input_html: { data: { action: "change->donations-modal#handleNewSelect", url: new_donation_site_path } } %>
       </div>
     </div>
     <div class="row">

config/locales/en.yml

@@ -39,4 +39,5 @@ en:
       distribution:
         issued_at: "Distribution date and time"
     models:
-      product_drive: "Product Drive"
+      product_drive: "Product Drive"
+      donation_site: "Donation Site"

docs/user_guide/bank/essentials_donations.md

@@ -50,13 +50,13 @@ Here you can enter all the information for your Donation:
 - Storage Location
 - Money raised in dollars (optional)
 - Comment (optional)
-- Issued On 
+- Issued On
   - This is the date that the Donation was made.  Note that inventory changes happen as of when you enter  the information.  They are not back-dated.
 - Items in this Donation
   - If you have set up [barcodes ](inventory_barcodes.md) for the Items you are receiving,  you can use your barcode reader to enter your Items.  Otherwise, pick the Item from "Choose an item", and enter the number of that Item in "Quantity".
   - Click "Add Another Item" as needed to get room for more Items.
 
-When you are finished entering your information, click 'Save'.  
+When you are finished entering your information, click 'Save'.
 
 ### Information entered in Donations
 #### Source
@@ -67,7 +67,7 @@ For Product Drive, Manufacturer, or Donation Site, you will further specify the
 If  you specify Product drive,  you'll also need to specify the particular drive and participant for the Donation -- but you can enter them "on the fly", here. You can view summaries for the Product Drives in [Product Drives](product_drives.md), and manage the contact info for a Product Drive Participant under [Community -- Product Drive Participants](community_product_drive_participants.md).
 ##### *Donation Site
 Donation Site is meant to capture the concept of any place you have a more-or-less permanent place people can drop off donations at, such as your main office, or community locations such as fire halls, etc.
-You can see the Donations for each Donation Site and manage their contact information under [Community -- Donation Sites](community_donation_sites.md).  Unlike Product Drives, you can't create a new Donation Site 'on the fly' through the fields here
+You can see the Donations for each Donation Site and manage their contact information under [Community -- Donation Sites](community_donation_sites.md).  Like Product Drives, you can create a new Donation Site 'on the fly' through the fields here too.
 ##### *Manufacturer
 This is for the donations that come straight from a Manufacturer.  You can view a breakdown of the Donations for each Manufacturer under [Community --  Manufacturers](community_manufacturers.md)
 ##### *Misc. Donation
@@ -103,8 +103,8 @@ To view the details of a Donation, click on the "View" button beside the donatio
 ![Navigation to New Donations](images/essentials/donations/essentials_donations_4.png)
 
 Here you'll see the Donation, including:
-- Date 
-- Source 
+- Date
+- Source
 - Donation Site
 - Storage Location
 - for each Item in the donation
@@ -126,7 +126,7 @@ Donations shouldn't need to be updated very often -- you usually have all the in
 
 ![Navigation to Edit a Donation](images/essentials/donations/essentials_donations_6.png)
 
-Here, you can change all the information on the Donation, including adding and removing items.  
+Here, you can change all the information on the Donation, including adding and removing items.
 
 ##### Note that changes you make to the levels of Items will take effect as of the date you made the changes.  They will not be back-dated to the "issued on" date
 
@@ -137,4 +137,4 @@ Hopefully you won't need to delete a Donation - but it's certainly possible that
 
 ## Printing a Donation
 You can print a single Donation by either viewing it, then clicking print,  or just clicking "Print" beside it on the All Donations page. The printout is meant to be useful for parallel record keeping, or as the basis for a tax receipt.
-[Prior: Dashboard](essentials_dashboard.md)[Next: Purchases](essentials_purchases.md)
+[Prior: Dashboard](essentials_dashboard.md)[Next: Purchases](essentials_purchases.md)

spec/helpers/donations_helper_spec.rb

@@ -0,0 +1,15 @@
+RSpec.describe DonationsHelper, type: :helper do
+  describe "#options_with_new" do
+    it "returns the options array including 'new' option for DonationSite" do
+      donation_sites_relation = DonationSite.all
+      options = helper.options_with_new(donation_sites_relation)
+      expect(options.last).to eq(["---Create New Donation Site---", "new"])
+    end
+
+    it "returns the options array including 'new' option for ProductDrive" do
+      product_drives_relation = ProductDrive.all
+      options = helper.options_with_new(product_drives_relation)
+      expect(options.last).to eq(["---Create New Product Drive---", "new"])
+    end
+  end
+end

spec/system/donation_system_spec.rb

@@ -360,6 +360,19 @@
           end.to change { Donation.count }.by(1)
         end
 
+        it "Allows User to create a Donataion Site from donation" do
+          select Donation::SOURCES[:donation_site], from: "donation_source"
+          select "---Create New Donation Site---", from: "donation_donation_site_id"
+
+          find(".modal-content")
+          expect(page).to have_content("New Donation Site")
+
+          fill_in "donation_site_name", with: "Test Donation Site"
+          fill_in "donation_site_address", with: "Test Address"
+          within(".modal-content") { click_button "Save" }
+          select "Test Donation Site", from: "donation_donation_site_id"
+        end
+
         it "Allows User to create a donation with a Miscellaneous source" do
           select Donation::SOURCES[:misc], from: "donation_source"
           expect(page).not_to have_xpath("//select[@id='donation_donation_site_id']")