mirror of https://github.com/docusealco/docuseal
Pete Matsyburka
2 years ago
parent
9bdc5d4863
commit
d4940234b7
@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="selectedSheetIndex === null && spreadsheet">
|
||||
<form @submit.prevent="[selectedSheetIndex = $refs.selectWorksheet.value, buildDefaultMappings()]">
|
||||
<label class="label">
|
||||
Select Worksheet
|
||||
</label>
|
||||
<select
|
||||
ref="selectWorksheet"
|
||||
class="base-select"
|
||||
>
|
||||
<option
|
||||
v-for="(sheet, index) in spreadsheet"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
{{ sheet[0] || index }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="base-button mt-4 w-full">
|
||||
Open
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else-if="selectedSheetIndex !== null">
|
||||
<div
|
||||
v-for="submitter in submitters"
|
||||
:key="submitter.uuid"
|
||||
class="mb-4"
|
||||
>
|
||||
<div
|
||||
v-if="submitters.length > 1"
|
||||
class="px-3 border-y py-2 border-base-300 text-center w-full"
|
||||
>
|
||||
{{ submitter.name }}
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="relative w-full py-2 px-2 text-sm">
|
||||
Recipient field
|
||||
</div>
|
||||
<div class="relative w-full py-2 pl-4 text-sm">
|
||||
Spreadsheet column
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="mapping in mappings.filter((m) => m.submitter_uuid === submitter.uuid)"
|
||||
:key="mapping.uuid"
|
||||
class="mb-2"
|
||||
>
|
||||
<div class="flex">
|
||||
<select
|
||||
class="base-select !select-sm !h-10"
|
||||
required
|
||||
@change="mapping.field_name = $event.target.value"
|
||||
>
|
||||
<option
|
||||
disabled
|
||||
value=""
|
||||
:selected="!mapping.field_name"
|
||||
>
|
||||
Select Field
|
||||
</option>
|
||||
<option
|
||||
v-for="(field, index) in selectFieldsForSubmitter(submitter)"
|
||||
:key="index"
|
||||
:value="field.name"
|
||||
:selected="mapping.field_name === field.name"
|
||||
>
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="flex items-center px-1">
|
||||
<IconArrowsHorizontal style="width: 19px; height: 19px" />
|
||||
</div>
|
||||
<div class="w-full relative">
|
||||
<select
|
||||
class="base-select !select-sm !h-10"
|
||||
required
|
||||
@change="mapping.column_index = parseInt($event.target.value)"
|
||||
>
|
||||
<option
|
||||
disabled
|
||||
value=""
|
||||
:selected="mapping.column_index == null"
|
||||
>
|
||||
Select Column
|
||||
</option>
|
||||
<template
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
>
|
||||
<option
|
||||
v-if="column"
|
||||
:value="index"
|
||||
:selected="index === mapping.column_index"
|
||||
>
|
||||
{{ column }}
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
<div
|
||||
v-if="mapping.column_index != null"
|
||||
class="absolute top-0 bottom-0 right-1 flex items-center"
|
||||
>
|
||||
<span
|
||||
class="tooltip tooltip-bottom-end pr-1 tooltip-pre"
|
||||
style="padding-top: 2px"
|
||||
:data-tip="[0, 1, 2].map((i) => rows[i]?.[mapping.column_index] ?? '---').join('\n')"
|
||||
>
|
||||
<button
|
||||
class="btn btn-xs btn-circle bg-white border-0 border-gray-300"
|
||||
@click.prevent
|
||||
>
|
||||
<IconInfoCircle class="h-4 w-4" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center pl-1">
|
||||
<span
|
||||
class="tooltip tooltip-top"
|
||||
data-tip="Remove"
|
||||
>
|
||||
<button
|
||||
:disabled="mappings.filter((m) => m.submitter_uuid === submitter.uuid).length < 2"
|
||||
class="btn btn-xs btn-circle"
|
||||
@click.prevent="mappings.splice(mappings.indexOf(mapping), 1)"
|
||||
>
|
||||
<IconX class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm btn-primary w-full !normal-case font-medium"
|
||||
@click.prevent="addMapping(submitter)"
|
||||
>
|
||||
<IconPlus class="w-4 h-4" />
|
||||
New Field Mapping
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
name="submissions_json"
|
||||
hidden
|
||||
:value="JSON.stringify(submissionsData.slice(0, 1100))"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="px-3 border-y py-2 border-base-300 text-center w-full text-sm font-semibold"
|
||||
>
|
||||
Total entries: {{ submissionsData.length }}
|
||||
<template v-if="submissionsData.length >= 1000">
|
||||
/ 1000
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
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"
|
||||
for="import_list_file"
|
||||
:class="{ 'opacity-50': isLoading }"
|
||||
>
|
||||
<div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<IconInnerShadowTop
|
||||
v-if="isLoading"
|
||||
class="animate-spin"
|
||||
:width="40"
|
||||
:height="40"
|
||||
/>
|
||||
<IconCloudUpload
|
||||
v-else
|
||||
:width="40"
|
||||
:height="40"
|
||||
/>
|
||||
<div
|
||||
class="font-medium text-lg mb-1"
|
||||
>
|
||||
Upload CSV or XLSX Spreadsheet
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
<span class="font-medium">Click to Upload</span> or drag and drop files.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
ref="form"
|
||||
class="hidden"
|
||||
>
|
||||
<input
|
||||
id="import_list_file"
|
||||
ref="input"
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".xlsx, .xls, .csv"
|
||||
@change="onSelectFile"
|
||||
>
|
||||
</form>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IconCloudUpload, IconX, IconPlus, IconArrowsHorizontal, IconInfoCircle, IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
export default {
|
||||
name: 'FileDropzone',
|
||||
components: {
|
||||
IconCloudUpload,
|
||||
IconX,
|
||||
IconArrowsHorizontal,
|
||||
IconPlus,
|
||||
IconInfoCircle,
|
||||
IconInnerShadowTop
|
||||
},
|
||||
props: {
|
||||
template: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
authenticityToken: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
spreadsheet: null,
|
||||
selectedSheetIndex: null,
|
||||
mappings: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
table () {
|
||||
return this.spreadsheet[this.selectedSheetIndex][1]
|
||||
},
|
||||
submissionsData () {
|
||||
const submissions = []
|
||||
|
||||
this.rows.forEach((row) => {
|
||||
const submittersIndex = {}
|
||||
|
||||
this.mappings.forEach((mapping) => {
|
||||
if (mapping.field_name && mapping.column_index != null) {
|
||||
submittersIndex[mapping.submitter_uuid] ||= { uuid: mapping.submitter_uuid, fields: [] }
|
||||
|
||||
if (['name', 'email', 'phone'].includes(mapping.field_name.toLowerCase())) {
|
||||
submittersIndex[mapping.submitter_uuid][mapping.field_name.toLowerCase()] = row[mapping.column_index]
|
||||
} else {
|
||||
submittersIndex[mapping.submitter_uuid].fields.push({
|
||||
name: mapping.field_name, default_value: row[mapping.column_index], readonly: true
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (Object.keys(submittersIndex).length !== 0) {
|
||||
submissions.push({ submitters: Object.values(submittersIndex) })
|
||||
}
|
||||
})
|
||||
|
||||
return submissions
|
||||
},
|
||||
submitters () {
|
||||
return this.template.submitters
|
||||
},
|
||||
columns () {
|
||||
return this.table[0]
|
||||
},
|
||||
form () {
|
||||
return this.$el.closest('form')
|
||||
},
|
||||
fieldTypes () {
|
||||
return ['text', 'cells', 'date', 'number', 'radio', 'select', 'checkbox']
|
||||
},
|
||||
defaultFields () {
|
||||
return [
|
||||
{ name: 'Name' },
|
||||
{ name: 'Email' },
|
||||
{ name: 'Phone' }
|
||||
]
|
||||
},
|
||||
rows () {
|
||||
return this.table.slice(1)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedSheetIndex (value) {
|
||||
if (value !== null) {
|
||||
document.getElementById('list_form_buttons')?.classList?.remove('hidden')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDropFiles (e) {
|
||||
this.uploadFile(e.dataTransfer.files[0])
|
||||
},
|
||||
onSelectFile (e) {
|
||||
this.uploadFile(e.target.files[0])
|
||||
},
|
||||
addMapping (submitter) {
|
||||
this.mappings.push({ uuid: v4(), field_name: '', column_index: null, submitter_uuid: submitter.uuid })
|
||||
},
|
||||
selectFieldsForSubmitter (submitter) {
|
||||
const templateFields = this.template.fields.filter((field) => {
|
||||
return field.submitter_uuid === submitter.uuid &&
|
||||
field.name &&
|
||||
this.fieldTypes.includes(field.type) &&
|
||||
this.defaultFields.every((f) => field.name?.toLowerCase() !== f.name?.toLowerCase())
|
||||
})
|
||||
|
||||
return [...this.defaultFields, ...templateFields]
|
||||
},
|
||||
buildDefaultMappings () {
|
||||
this.submitters.forEach((submitter) => {
|
||||
const fields = this.selectFieldsForSubmitter(submitter)
|
||||
|
||||
fields.forEach((field) => {
|
||||
const columnIndex = this.columns.findIndex((column, index) => {
|
||||
return column &&
|
||||
column.toString().toLowerCase().includes(field.name?.toLowerCase()) &&
|
||||
this.mappings.every((m) => m.column_index !== index)
|
||||
})
|
||||
|
||||
if (columnIndex !== -1) {
|
||||
this.mappings.push({ uuid: v4(), field_name: field.name, column_index: columnIndex, submitter_uuid: submitter.uuid })
|
||||
}
|
||||
})
|
||||
|
||||
if (!this.mappings.some((m) => m.field_name.toLowerCase() === 'name' && m.submitter_uuid === submitter.uuid)) {
|
||||
this.mappings.unshift({ uuid: v4(), field_name: 'Name', submitter_uuid: submitter.uuid })
|
||||
}
|
||||
|
||||
if (!this.mappings.some((m) => m.field_name.toLowerCase() === 'email' && m.submitter_uuid === submitter.uuid)) {
|
||||
this.mappings.unshift({ uuid: v4(), field_name: 'Email', submitter_uuid: submitter.uuid })
|
||||
}
|
||||
})
|
||||
},
|
||||
uploadFile (file) {
|
||||
this.isLoading = true
|
||||
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append('file', file)
|
||||
|
||||
return fetch('/upload_spreadsheet', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-CSRF-Token': this.authenticityToken
|
||||
}
|
||||
}).then(resp => resp.json()).then((data) => {
|
||||
if (data.error) {
|
||||
return alert(data.error)
|
||||
}
|
||||
|
||||
this.spreadsheet = data
|
||||
|
||||
if (data.length === 1) {
|
||||
this.selectedSheetIndex = 0
|
||||
|
||||
this.buildDefaultMappings()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="alert">
|
||||
<%= svg_icon('info_circle', class: 'w-6 h-6') %>
|
||||
<div>
|
||||
<p class="font-bold">Bulk send from Excel XLSX or CSV</p>
|
||||
<p class="text-gray-700">
|
||||
Unlock with DocuSeal Pro
|
||||
<br>
|
||||
<a class="link font-medium" target="_blank" href="<%= Docuseal.multitenant? ? console_redirect_index_path(redir: "#{Docuseal::CONSOLE_URL}/plans") : "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premise" }.to_query}" %>" data-turbo="false">Learn More</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
<%= render 'submissions/bulk_send_placeholder' %>
|
||||
Loading…
Reference in new issue