add spreadsheet download

app/javascript/template_builder/import_list.vue

@@ -160,12 +160,14 @@
     </div>
     <div
       v-else
+    >
+      <div
         class="flex h-52 w-full"
         @dragover.prevent
         @drop.prevent="onDropFiles"
       >
         <label
-        class="w-full relative hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
+          class="w-full relative bg-base-200/20  hover:bg-base-200/30 rounded-md border border-2 border-base-content/10 border-dashed"
           for="import_list_file"
           :class="{ 'opacity-50': isLoading }"
         >
@@ -207,6 +209,14 @@
           </form>
         </label>
       </div>
+      <div class="text-center mt-2">
+        Or <a
+          :download="`${template.name}.csv`"
+          :href="`data:text/csv;base64,${csvBase64}`"
+          class="link font-medium"
+        >download</a> a spreadsheet to fill and import
+      </div>
+    </div>
   </div>
 </template>
 
@@ -274,6 +284,25 @@ export default {
 
       return submissions
     },
+    csvBase64 () {
+      const rows = []
+
+      this.submitters.forEach((submitter) => {
+        this.selectFieldsForSubmitter(submitter).forEach((field) => {
+          rows.push(this.submitters.length > 1 ? `${submitter.name} - ${field.name}` : field.name)
+        })
+      })
+
+      const csv = rows.map(item => {
+        if (/[",\n]/.test(item)) {
+          return `"${item.replace(/"/g, '""')}"`
+        } else {
+          return item
+        }
+      }).join(',')
+
+      return window.btoa(csv + '\n' + rows.map(() => '').join(',') + '\n')
+    },
     submitters () {
       return this.template.submitters
     },