add export button

app/controllers/submissions_export_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class SubmissionsExportController < ApplicationController
+  before_action :load_template
+
+  def index
+    submissions = @template.submissions.active
+                           .preload(submitters: { documents_attachments: :blob,
+                                                  attachments_attachments: :blob })
+                           .order(id: :asc)
+
+    if params[:format] == 'csv'
+      send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
+                filename: "#{@template.name}.csv"
+    elsif params[:format] == 'xlsx'
+      send_data Submissions::GenerateExportFiles.call(submissions, format: params[:format]),
+                filename: "#{@template.name}.xlsx"
+    end
+  end
+
+  def new; end
+
+  private
+
+  def load_template
+    @template = current_account.templates.find(params[:template_id])
+  end
+end

app/javascript/application.js

@@ -45,6 +45,27 @@ window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
+document.addEventListener('turbo:submit-end', async (event) => {
+  const resp = event.detail?.formSubmission?.result?.fetchResponse?.response
+
+  if (!resp?.headers?.get('content-disposition')?.includes('attachment')) {
+    return
+  }
+
+  const url = URL.createObjectURL(await resp.blob())
+  const link = document.createElement('a')
+
+  link.href = url
+  link.setAttribute('download', decodeURIComponent(resp.headers.get('content-disposition').split('"')[1]))
+
+  document.body.appendChild(link)
+
+  link.click()
+
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(url)
+})
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/turbo_modal.js

@@ -5,8 +5,12 @@ export default actionable(class extends HTMLElement {
     document.body.classList.add('overflow-hidden')
 
     document.addEventListener('keyup', this.onEscKey)
-    document.addEventListener('turbo:submit-end', this.onSubmit)
+
     document.addEventListener('turbo:before-cache', this.close)
+
+    if (this.dataset.closeAfterSubmit !== 'false') {
+      document.addEventListener('turbo:submit-end', this.onSubmit)
+    }
   }
 
   disconnectedCallback () {

app/views/shared/_clipboard_copy.html.erb

@@ -6,12 +6,22 @@
       <span class="hidden md:inline">
         <%= local_assigns[:copy_title] || 'Copy' %>
       </span>
+      <% if local_assigns[:copy_title_md] %>
+        <span class="inline md:hidden">
+          <%= local_assigns[:copy_title_md] %>
+        </span>
+      <% end %>
     </span>
     <span class="hidden peer-checked:flex items-center space-x-2">
       <%= svg_icon(local_assigns[:copied_icon] || 'clipboard_copy', class: local_assigns[:icon_class] || 'w-6 h-6 text-white') %>
       <span class="hidden md:inline">
         <%= local_assigns[:copied_title] || 'Copied' %>
       </span>
+      <% if local_assigns[:copied_title_md] %>
+        <span class="inline md:hidden">
+          <%= local_assigns[:copied_title_md] %>
+        </span>
+      <% end %>
     </span>
   </label>
 </clipboard-copy>

app/views/shared/_turbo_modal.html.erb

@@ -1,5 +1,5 @@
 <turbo-frame id="modal">
-  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto">
+  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
     <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
     <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none">
       <% if local_assigns[:title] %>

app/views/submissions_export/new.html.erb

@@ -0,0 +1,32 @@
+<%= render 'shared/turbo_modal', title: 'Export', close_after_submit: false do %>
+  <div class="space-y-2">
+    <%= button_to template_submissions_export_index_path(@template), params: { format: :xlsx }, method: :get, data: { turbo_frame: :_top } do %>
+      <div class="flex items-center p-4 text-left rounded-2xl border border-neutral-300 hover:cursor-pointer hover:bg-neutral hover:text-gray-300">
+        <div class="enabled">
+          <%= svg_icon('download', class: 'w-12 h-12 stroke-2 mr-2') %>
+        </div>
+        <div class="disabled">
+          <%= svg_icon('loader', class: 'w-12 h-12 stroke-2 mr-2 animate-spin') %>
+        </div>
+        <div class="flex flex-col">
+          <span class="mb-1 text-lg font-semibold">XLSX</span>
+          <p class="text-sm"> Primarily opened with Microsoft Excel. Other options include Google Sheets, LibreOffice Calc, and OpenOffice Calc.</p>
+        </div>
+      </div>
+    <% end %>
+    <%= button_to template_submissions_export_index_path(@template), params: { format: :csv }, method: :get, data: { turbo_frame: :_top } do %>
+      <div class="flex items-center text-left p-4 rounded-2xl border border-neutral-300 hover:cursor-pointer hover:bg-neutral hover:text-gray-300">
+        <div class="enabled">
+          <%= svg_icon('download', class: 'w-12 h-12 stroke-2 mr-2') %>
+        </div>
+        <div class="disabled">
+          <%= svg_icon('loader', class: 'w-12 h-12 stroke-2 mr-2 animate-spin') %>
+        </div>
+        <div class="flex flex-col">
+          <span class="mb-1 text-lg font-semibold">CSV</span>
+          <p class="text-sm">Can be opened with Microsoft Excel, Google Sheets, or any text editor like Notepad.</p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

app/views/templates/show.html.erb

@@ -1,4 +1,4 @@
-<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:justify-between items-start mb-8">
+<div class="flex flex-col items-start md:flex-row space-y-2 md:space-y-0 md:justify-between md:items-center mb-8">
   <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
     <%= @template.name %>
   </h1>
@@ -17,16 +17,22 @@
   </div>
 </div>
 <% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 %>
-  <div class="flex justify-between mb-6 items-end">
+  <div class="flex justify-between mb-6 md:items-end flex-col md:flex-row">
     <p class="text-3xl font-bold">Submissions</p>
-    <div class="flex space-x-2">
+    <div class="flex space-x-2 mt-3 md:mt-0">
+      <%= link_to new_template_submissions_export_path(@template), class: 'order-3 md:order-1 btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
+        <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
+        <span>Export</span>
+      <% end %>
       <% if @template.submitters.to_a.size == 1 %>
-        <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Share Link', copied_title: 'Copied to Clipboard' %>
+        <span class="order-1">
+          <%= render 'shared/clipboard_copy', text: start_form_url(slug: @template.slug), class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Share Link', copied_title: 'Copied to Clipboard', copy_title_md: 'Copy', copied_title_md: 'Copied' %>
+        </span>
       <% end %>
       <% unless @pagy.count.zero? %>
-        <%= link_to new_template_submission_path(@template), class: 'btn btn-primary text-base', data: { turbo_frame: 'modal' } do %>
+        <%= link_to new_template_submission_path(@template), class: 'order-1 btn btn-primary text-base', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <span class="hidden md:block">Add Recipients</span>
+          <span>Add <span class="hidden md:inline">Recipients</span></span>
         <% end %>
       <% end %>
     </div>