use vue for form submission
This commit is contained in:
Alex Turchyn
@@ -4,18 +4,23 @@ class SendSubmissionEmailController < ApplicationController
|
||||
layout 'flow'
|
||||
|
||||
skip_before_action :authenticate_user!
|
||||
skip_before_action :verify_authenticity_token
|
||||
|
||||
def success; end
|
||||
|
||||
def create
|
||||
@submission = if params[:flow_slug]
|
||||
Submission.joins(:flow).find_by!(email: params[:email], flow: { slug: params[:flow_slug] })
|
||||
else
|
||||
Submission.find_by!(slug: params[:submission_slug])
|
||||
end
|
||||
@submission =
|
||||
if params[:flow_slug]
|
||||
Submission.joins(:flow).find_by!(email: params[:email], flow: { slug: params[:flow_slug] })
|
||||
else
|
||||
Submission.find_by!(slug: params[:submission_slug])
|
||||
end
|
||||
|
||||
SubmissionMailer.copy_to_submitter(@submission).deliver_later!
|
||||
|
||||
redirect_to success_send_submission_email_index_path
|
||||
respond_to do |f|
|
||||
f.html { redirect_to success_send_submission_email_index_path }
|
||||
f.json { head :ok }
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -14,7 +14,7 @@ class SubmitFlowController < ApplicationController
|
||||
|
||||
def update
|
||||
submission = Submission.find_by!(slug: params[:slug])
|
||||
submission.values.merge!(params[:values].to_unsafe_h)
|
||||
submission.values.merge!(normalized_values)
|
||||
submission.completed_at = Time.current if params[:completed] == 'true'
|
||||
|
||||
submission.save
|
||||
@@ -25,4 +25,10 @@ class SubmitFlowController < ApplicationController
|
||||
def completed
|
||||
@submission = Submission.find_by!(slug: params[:submit_flow_slug])
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def normalized_values
|
||||
params[:values].to_unsafe_h.transform_values { |v| v.is_a?(Array) ? v.compact_blank : v }
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
import '@hotwired/turbo-rails'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createApp, reactive } from 'vue'
|
||||
|
||||
import ToggleVisible from './elements/toggle_visible'
|
||||
import DisableHidden from './elements/disable_hidden'
|
||||
import TurboModal from './elements/turbo_modal'
|
||||
import FlowArea from './elements/flow_area'
|
||||
import FlowView from './elements/flow_view'
|
||||
|
||||
import Builder from './components/builder'
|
||||
import FlowBuilder from './flow_builder/builder'
|
||||
|
||||
window.customElements.define('toggle-visible', ToggleVisible)
|
||||
window.customElements.define('disable-hidden', DisableHidden)
|
||||
window.customElements.define('turbo-modal', TurboModal)
|
||||
window.customElements.define('flow-view', FlowView)
|
||||
window.customElements.define('flow-area', FlowArea)
|
||||
|
||||
window.customElements.define('flow-builder', class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.appElem = document.createElement('div')
|
||||
|
||||
this.app = createApp(Builder, {
|
||||
dataFlow: this.dataset.flow
|
||||
this.app = createApp(FlowBuilder, {
|
||||
flow: reactive(JSON.parse(this.dataset.flow))
|
||||
})
|
||||
|
||||
this.app.mount(this.appElem)
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import { DirectUpload } from '@rails/activestorage'
|
||||
|
||||
import { actionable } from '@github/catalyst/lib/actionable'
|
||||
import { target, targetable } from '@github/catalyst/lib/targetable'
|
||||
|
||||
export default actionable(targetable(class extends HTMLElement {
|
||||
static [target.static] = [
|
||||
'loading',
|
||||
'input'
|
||||
]
|
||||
|
||||
connectedCallback () {
|
||||
this.addEventListener('drop', this.onDrop)
|
||||
|
||||
this.addEventListener('dragover', (e) => e.preventDefault())
|
||||
}
|
||||
|
||||
onDrop (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.uploadFiles(e.dataTransfer.files)
|
||||
}
|
||||
|
||||
onSelectFiles (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.uploadFiles(this.input.files).then(() => {
|
||||
this.input.value = ''
|
||||
})
|
||||
}
|
||||
|
||||
async uploadFiles (files) {
|
||||
const blobs = await Promise.all(
|
||||
Array.from(files).map(async (file) => {
|
||||
const upload = new DirectUpload(
|
||||
file,
|
||||
'/direct_uploads',
|
||||
this.input
|
||||
)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
upload.create((error, blob) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
|
||||
return reject(error)
|
||||
} else {
|
||||
return resolve(blob)
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
})
|
||||
)
|
||||
|
||||
await Promise.all(
|
||||
blobs.map((blob) => {
|
||||
return fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: 'attachments',
|
||||
blob_signed_id: blob.signed_id,
|
||||
submission_slug: this.dataset.submissionSlug
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then(resp => resp.json()).then((data) => {
|
||||
return data
|
||||
})
|
||||
})).then((result) => {
|
||||
result.forEach((attachment) => {
|
||||
this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
|
||||
})
|
||||
})
|
||||
}
|
||||
}))
|
||||
@@ -1,16 +0,0 @@
|
||||
import { actionable } from '@github/catalyst/lib/actionable'
|
||||
import { targets, targetable } from '@github/catalyst/lib/targetable'
|
||||
|
||||
export default actionable(targetable(class extends HTMLElement {
|
||||
static [targets.static] = [
|
||||
'items'
|
||||
]
|
||||
|
||||
add (e) {
|
||||
const elem = document.createElement('input')
|
||||
elem.value = e.detail.uuid
|
||||
elem.name = `values[${this.dataset.fieldUuid}][]`
|
||||
|
||||
this.prepend(elem)
|
||||
}
|
||||
}))
|
||||
@@ -1,18 +0,0 @@
|
||||
export default class extends HTMLElement {
|
||||
setValue (value) {
|
||||
const { fieldType } = this.dataset
|
||||
|
||||
if (fieldType === 'signature') {
|
||||
[...this.children].forEach(e => e.remove())
|
||||
|
||||
const img = document.createElement('img')
|
||||
|
||||
img.classList.add('w-full', 'h-full', 'object-contain')
|
||||
img.src = value.url
|
||||
|
||||
this.append(img)
|
||||
} else {
|
||||
this.innerHTML = value
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import { targets, target, targetable } from '@github/catalyst/lib/targetable'
|
||||
import { actionable } from '@github/catalyst/lib/actionable'
|
||||
|
||||
export default actionable(targetable(class extends HTMLElement {
|
||||
static [target.static] = [
|
||||
'form',
|
||||
'completed'
|
||||
]
|
||||
|
||||
static [targets.static] = [
|
||||
'areas',
|
||||
'fields',
|
||||
'steps'
|
||||
]
|
||||
|
||||
passValueToArea (e) {
|
||||
this.areasSetValue(e.target.id, e.target.value)
|
||||
}
|
||||
|
||||
areasSetValue (fieldUuid, value) {
|
||||
return (this.areas || []).forEach((area) => {
|
||||
if (area.dataset.fieldUuid === fieldUuid) {
|
||||
area.setValue(value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setVisibleStep (uuid) {
|
||||
this.steps.forEach((step) => {
|
||||
step.classList.toggle('hidden', step.dataset.fieldUuid !== uuid)
|
||||
})
|
||||
|
||||
this.fields.find(f => f.id === uuid)?.focus()
|
||||
}
|
||||
|
||||
submitSignature (e) {
|
||||
e.target.okButton.disabled = true
|
||||
|
||||
fetch(this.form.action, {
|
||||
method: this.form.method,
|
||||
body: new FormData(this.form)
|
||||
}).then(response => {
|
||||
console.log('Form submitted successfully!', response)
|
||||
this.moveNextStep()
|
||||
}).catch(error => {
|
||||
console.error('Error submitting form:', error)
|
||||
}).finally(() => {
|
||||
e.target.okButton.disabled = false
|
||||
|
||||
this.areasSetValue(e.target.closest('disable-hidden').dataset.fieldUuid, e.detail)
|
||||
})
|
||||
}
|
||||
|
||||
submitForm (e) {
|
||||
e.preventDefault()
|
||||
|
||||
e.submitter.setAttribute('disabled', true)
|
||||
|
||||
fetch(this.form.action, {
|
||||
method: this.form.method,
|
||||
body: new FormData(this.form)
|
||||
}).then(response => {
|
||||
console.log('Form submitted successfully!', response)
|
||||
this.moveNextStep()
|
||||
}).catch(error => {
|
||||
console.error('Error submitting form:', error)
|
||||
}).finally(() => {
|
||||
e.submitter.removeAttribute('disabled')
|
||||
})
|
||||
}
|
||||
|
||||
moveStepBack (e) {
|
||||
e?.preventDefault()
|
||||
|
||||
const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
|
||||
|
||||
const previousStep = this.steps[currentStepIndex - 1]
|
||||
|
||||
if (previousStep) {
|
||||
this.setVisibleStep(previousStep.dataset.fieldUuid)
|
||||
}
|
||||
}
|
||||
|
||||
moveNextStep (e) {
|
||||
e?.preventDefault()
|
||||
|
||||
const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
|
||||
|
||||
const nextStep = this.steps[currentStepIndex + 1]
|
||||
|
||||
if (nextStep) {
|
||||
this.setVisibleStep(nextStep.dataset.fieldUuid)
|
||||
} else {
|
||||
this.form.classList.add('hidden')
|
||||
this.completed.classList.remove('hidden')
|
||||
}
|
||||
}
|
||||
|
||||
focusField ({ target }) {
|
||||
this.setVisibleStep(target.closest('flow-area').dataset.fieldUuid)
|
||||
}
|
||||
|
||||
focusArea ({ target }) {
|
||||
const area = this.areas.find(a => target.id === a.dataset.fieldUuid)
|
||||
|
||||
if (area) {
|
||||
area.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
}
|
||||
}))
|
||||
@@ -1,68 +0,0 @@
|
||||
import SignaturePad from 'signature_pad'
|
||||
import { target, targetable } from '@github/catalyst/lib/targetable'
|
||||
import { actionable } from '@github/catalyst/lib/actionable'
|
||||
|
||||
import { DirectUpload } from '@rails/activestorage'
|
||||
|
||||
export default actionable(targetable(class extends HTMLElement {
|
||||
static [target.static] = [
|
||||
'canvas',
|
||||
'input',
|
||||
'okButton',
|
||||
'image',
|
||||
'clearButton',
|
||||
'redrawButton',
|
||||
'nextButton'
|
||||
]
|
||||
|
||||
connectedCallback () {
|
||||
this.pad = new SignaturePad(this.canvas)
|
||||
}
|
||||
|
||||
submit (e) {
|
||||
e?.preventDefault()
|
||||
|
||||
this.okButton.disabled = true
|
||||
|
||||
this.canvas.toBlob((blob) => {
|
||||
const file = new File([blob], 'signature.png', { type: 'image/png' })
|
||||
|
||||
new DirectUpload(
|
||||
file,
|
||||
'/direct_uploads'
|
||||
).create((_error, data) => {
|
||||
fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submission_slug: this.dataset.submissionSlug,
|
||||
blob_signed_id: data.signed_id,
|
||||
name: 'signatures'
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then((resp) => resp.json()).then((attachment) => {
|
||||
this.input.value = attachment.uuid
|
||||
this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
|
||||
})
|
||||
})
|
||||
}, 'image/png')
|
||||
}
|
||||
|
||||
redraw (e) {
|
||||
e?.preventDefault()
|
||||
|
||||
this.input.value = ''
|
||||
|
||||
this.canvas.classList.remove('hidden')
|
||||
this.clearButton.classList.remove('hidden')
|
||||
this.okButton.classList.remove('hidden')
|
||||
this.image.remove()
|
||||
this.redrawButton.remove()
|
||||
this.nextButton.remove()
|
||||
}
|
||||
|
||||
clear (e) {
|
||||
e?.preventDefault()
|
||||
|
||||
this.pad.clear()
|
||||
}
|
||||
}))
|
||||
+25
-12
@@ -1,13 +1,26 @@
|
||||
import FlowArea from './elements/flow_area'
|
||||
import FlowView from './elements/flow_view'
|
||||
import DisableHidden from './elements/disable_hidden'
|
||||
import FileDropzone from './elements/file_dropzone'
|
||||
import SignaturePad from './elements/signature_pad'
|
||||
import FilesList from './elements/files_list'
|
||||
import { createApp, reactive } from 'vue'
|
||||
|
||||
window.customElements.define('flow-view', FlowView)
|
||||
window.customElements.define('flow-area', FlowArea)
|
||||
window.customElements.define('disable-hidden', DisableHidden)
|
||||
window.customElements.define('file-dropzone', FileDropzone)
|
||||
window.customElements.define('signature-pad', SignaturePad)
|
||||
window.customElements.define('files-list', FilesList)
|
||||
import Flow from './flow_form/form'
|
||||
|
||||
window.customElements.define('flow-form', class extends HTMLElement {
|
||||
connectedCallback () {
|
||||
this.appElem = document.createElement('div')
|
||||
|
||||
this.app = createApp(Flow, {
|
||||
submissionSlug: this.dataset.submissionSlug,
|
||||
authenticityToken: this.dataset.authenticityToken,
|
||||
values: reactive(JSON.parse(this.dataset.values)),
|
||||
attachments: reactive(JSON.parse(this.dataset.attachments)),
|
||||
fields: JSON.parse(this.dataset.fields)
|
||||
})
|
||||
|
||||
this.app.mount(this.appElem)
|
||||
|
||||
this.appendChild(this.appElem)
|
||||
}
|
||||
|
||||
disconnectedCallback () {
|
||||
this.app?.unmount()
|
||||
this.appElem?.remove()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -81,21 +81,15 @@ export default {
|
||||
Fields
|
||||
},
|
||||
props: {
|
||||
dataFlow: {
|
||||
type: String,
|
||||
default: '{}'
|
||||
flow: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
drawField: null,
|
||||
dragFieldType: null,
|
||||
flow: {
|
||||
name: '',
|
||||
schema: [],
|
||||
documents: [],
|
||||
fields: []
|
||||
}
|
||||
dragFieldType: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -121,8 +115,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.flow = JSON.parse(this.dataFlow)
|
||||
|
||||
document.addEventListener('keyup', this.disableDrawOnEsc)
|
||||
},
|
||||
unmounted () {
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex cursor-pointer bg-red-100 absolute"
|
||||
:style="computedStyle"
|
||||
>
|
||||
<img
|
||||
v-if="field.type === 'image' && image"
|
||||
:src="image.url"
|
||||
>
|
||||
<img
|
||||
v-else-if="field.type === 'signature' && signature"
|
||||
:src="signature.url"
|
||||
>
|
||||
<div v-else-if="field.type === 'attachment'">
|
||||
<a
|
||||
v-for="(attachment, index) in attachments"
|
||||
:key="index"
|
||||
:href="attachment.url"
|
||||
>
|
||||
{{ attachment.filename }}
|
||||
</a>
|
||||
</div>
|
||||
<span v-else>
|
||||
{{ value }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FieldArea',
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number, Object],
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
area: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
image () {
|
||||
if (this.field.type === 'image') {
|
||||
return this.attachmentsIndex[this.value]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
signature () {
|
||||
if (this.field.type === 'signature') {
|
||||
return this.attachmentsIndex[this.value]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
attachments () {
|
||||
if (this.field.type === 'attachment') {
|
||||
return (this.value || []).map((uuid) => this.attachmentsIndex[uuid])
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
computedStyle () {
|
||||
const { x, y, w, h } = this.area
|
||||
|
||||
return {
|
||||
top: y * 100 + '%',
|
||||
left: x * 100 + '%',
|
||||
width: w * 100 + '%',
|
||||
height: h * 100 + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<template
|
||||
v-for="field in fields"
|
||||
:key="field.uuid"
|
||||
>
|
||||
<template
|
||||
v-for="(area, index) in field.areas"
|
||||
:key="index"
|
||||
>
|
||||
<Teleport :to="`#page-${area.attachment_uuid}-${area.page}`">
|
||||
<FieldArea
|
||||
:ref="setAreaRef"
|
||||
:field="field"
|
||||
:area="area"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:value="values[field.uuid]"
|
||||
@click="$emit('focus-field', field)"
|
||||
/>
|
||||
</Teleport>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FieldArea from './area'
|
||||
|
||||
export default {
|
||||
name: 'FieldAreas',
|
||||
components: {
|
||||
FieldArea
|
||||
},
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['focus-field'],
|
||||
data () {
|
||||
return {
|
||||
areaRefs: []
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
this.areaRefs = []
|
||||
},
|
||||
methods: {
|
||||
scrollIntoField (field) {
|
||||
this.areaRefs.find((area) => {
|
||||
if (area.field === field) {
|
||||
area.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
|
||||
return true
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
},
|
||||
setAreaRef (el) {
|
||||
if (el) {
|
||||
this.areaRefs.push(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="modelValue.length">
|
||||
<div
|
||||
v-for="(val, index) in modelValue"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
v-if="val"
|
||||
:href="attachmentsIndex[val].url"
|
||||
>
|
||||
{{ attachmentsIndex[val].filename }}
|
||||
</a>
|
||||
<input
|
||||
:value="val"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}][]`"
|
||||
>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
@click.prevent="removeAttachment(val)"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<input
|
||||
value=""
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}][]`"
|
||||
>
|
||||
</template>
|
||||
<FileDropzone
|
||||
:message="'Attachments'"
|
||||
:submission-slug="submissionSlug"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileDropzone from './dropzone'
|
||||
|
||||
export default {
|
||||
name: 'AttachmentStep',
|
||||
components: {
|
||||
FileDropzone
|
||||
},
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value'],
|
||||
methods: {
|
||||
removeAttachment (uuid) {
|
||||
this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
|
||||
|
||||
this.$emit('update:model-value', this.modelValue)
|
||||
},
|
||||
onUpload (attachments) {
|
||||
attachments.forEach((attachment) => {
|
||||
this.$emit('attached', attachment)
|
||||
})
|
||||
|
||||
this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div
|
||||
v-for="(option, index) in field.options"
|
||||
:key="index"
|
||||
>
|
||||
<label :for="field.uuid + option">
|
||||
<input
|
||||
:id="field.uuid + option"
|
||||
:ref="setInputRef"
|
||||
type="checkbox"
|
||||
:name="`values[${field.uuid}][]`"
|
||||
:value="option"
|
||||
:checked="modelValue.includes(option)"
|
||||
@change="onChange"
|
||||
>
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SheckboxStep',
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['update:model-value'],
|
||||
data () {
|
||||
return {
|
||||
inputRefs: []
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
this.inputRefs = []
|
||||
},
|
||||
methods: {
|
||||
setInputRef (el) {
|
||||
if (el) {
|
||||
this.inputRefs.push(el)
|
||||
}
|
||||
},
|
||||
onChange () {
|
||||
this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map(e => e.value))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>
|
||||
Form completed - thanks!
|
||||
</p>
|
||||
<button @click.prevent="sendCopyToEmail">
|
||||
<span v-if="isSendingCopy">
|
||||
Sending
|
||||
</span>
|
||||
<span>
|
||||
Send copy to email
|
||||
</span>
|
||||
</button>
|
||||
<button @click.prevent="download">
|
||||
<span v-if="isDownloading">
|
||||
Downloading
|
||||
</span>
|
||||
<span>
|
||||
Download copy
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormCompleted',
|
||||
props: {
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isSendingCopy: false,
|
||||
isDownloading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendCopyToEmail () {
|
||||
this.isSendingCopy = true
|
||||
|
||||
fetch(`/send_submission_email.json?submission_slug=${this.submissionSlug}`, {
|
||||
method: 'POST'
|
||||
}).finally(() => {
|
||||
this.isSendingCopy = false
|
||||
})
|
||||
},
|
||||
download () {
|
||||
this.isDownloading = true
|
||||
|
||||
fetch(`/submissions/${this.submissionSlug}/download`).then(async (response) => {
|
||||
const blob = new Blob([await response.text()], { type: `${response.headers.get('content-type')};charset=utf-8;` })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
|
||||
link.href = url
|
||||
link.setAttribute('download', response.headers.get('content-disposition').split('"')[1])
|
||||
|
||||
link.click()
|
||||
|
||||
URL.revokeObjectURL(url)
|
||||
}).finally(() => {
|
||||
this.isDownloading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex h-20 w-full"
|
||||
@dragover.prevent
|
||||
@drop.prevent="onDropFiles"
|
||||
>
|
||||
<label
|
||||
:for="inputId"
|
||||
class="w-full"
|
||||
>
|
||||
Upload
|
||||
{{ message }}
|
||||
</label>
|
||||
<input
|
||||
:id="inputId"
|
||||
ref="input"
|
||||
:multiple="multiple"
|
||||
:accept="accept"
|
||||
type="file"
|
||||
class="hidden"
|
||||
@change="onSelectFiles"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DirectUpload } from '@rails/activestorage'
|
||||
|
||||
export default {
|
||||
name: 'FileDropzone',
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '*/*'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['upload'],
|
||||
computed: {
|
||||
inputId () {
|
||||
return 'el' + Math.random().toString(32).split('.')[1]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDropFiles (e) {
|
||||
this.uploadFiles(e.dataTransfer.files)
|
||||
},
|
||||
onSelectFiles (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.uploadFiles(this.$refs.input.files).then(() => {
|
||||
this.$refs.input.value = ''
|
||||
})
|
||||
},
|
||||
async uploadFiles (files) {
|
||||
const blobs = await Promise.all(
|
||||
Array.from(files).map(async (file) => {
|
||||
const upload = new DirectUpload(
|
||||
file,
|
||||
'/direct_uploads',
|
||||
this.$refs.input
|
||||
)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
upload.create((error, blob) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
|
||||
return reject(error)
|
||||
} else {
|
||||
return resolve(blob)
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
})
|
||||
)
|
||||
|
||||
return await Promise.all(
|
||||
blobs.map((blob) => {
|
||||
return fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: 'attachments',
|
||||
blob_signed_id: blob.signed_id,
|
||||
submission_slug: this.submissionSlug
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then(resp => resp.json()).then((data) => {
|
||||
return data
|
||||
})
|
||||
})).then((result) => {
|
||||
this.$emit('upload', result)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<FieldAreas
|
||||
ref="areas"
|
||||
:fields="fields"
|
||||
:values="values"
|
||||
:attachments-index="attachmentsIndex"
|
||||
@focus-field="goToField"
|
||||
/>
|
||||
<button
|
||||
v-if="currentStep !== 0"
|
||||
@click="goToField(fields[currentStep - 1], true)"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
{{ currentField.type }}
|
||||
<form
|
||||
v-if="!isCompleted"
|
||||
ref="form"
|
||||
:action="submitPath"
|
||||
method="post"
|
||||
@submit.prevent="submitStep"
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="authenticity_token"
|
||||
:value="authenticityToken"
|
||||
>
|
||||
<input
|
||||
v-if="currentStep === fields.length - 1"
|
||||
type="hidden"
|
||||
name="completed"
|
||||
value="true"
|
||||
>
|
||||
<input
|
||||
value="put"
|
||||
name="_method"
|
||||
type="hidden"
|
||||
>
|
||||
<div>
|
||||
<template v-if="currentField.type === 'text'">
|
||||
<label :for="currentField.uuid">{{ currentField.name || 'Text' }}</label>
|
||||
<div>
|
||||
<input
|
||||
:id="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
autofocus
|
||||
class="text-xl"
|
||||
:required="currentField.required"
|
||||
type="text"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="currentField.type === 'date'">
|
||||
<label :for="currentField.uuid">{{ currentField.name || 'Date' }}</label>
|
||||
<div>
|
||||
<input
|
||||
:id="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
class="text-xl"
|
||||
autofocus
|
||||
:required="currentField.required"
|
||||
type="date"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="currentField.type === 'select'">
|
||||
<label :for="currentField.uuid">{{ currentField.name || 'Date' }}</label>
|
||||
<select
|
||||
:id="currentField.uuid"
|
||||
v-model="values[currentField.uuid]"
|
||||
:required="currentField.required"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
>
|
||||
<option
|
||||
value=""
|
||||
disabled
|
||||
:selected="!values[currentField.uuid]"
|
||||
>
|
||||
Select your option
|
||||
</option>
|
||||
<option
|
||||
v-for="(option, index) in currentField.options"
|
||||
:key="index"
|
||||
:select="values[currentField.uuid] == option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
<template v-else-if="currentField.type === 'radio'">
|
||||
<div
|
||||
v-for="(option, index) in currentField.options"
|
||||
:key="index"
|
||||
>
|
||||
<label :for="currentField.uuid + option">
|
||||
<input
|
||||
:id="currentField.uuid + option"
|
||||
v-model="values[currentField.uuid]"
|
||||
type="radio"
|
||||
:name="`values[${currentField.uuid}]`"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
<CheckboxStep
|
||||
v-else-if="currentField.type === 'checkbox'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
/>
|
||||
<ImageStep
|
||||
v-else-if="currentField.type === 'image'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submission-slug="submissionSlug"
|
||||
@attached="attachments.push($event)"
|
||||
/>
|
||||
<SignatureStep
|
||||
v-else-if="currentField.type === 'signature'"
|
||||
ref="currentStep"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submission-slug="submissionSlug"
|
||||
@attached="attachments.push($event)"
|
||||
/>
|
||||
<AttachmentStep
|
||||
v-else-if="currentField.type === 'attachment'"
|
||||
v-model="values[currentField.uuid]"
|
||||
:field="currentField"
|
||||
:attachments-index="attachmentsIndex"
|
||||
:submission-slug="submissionSlug"
|
||||
@attached="attachments.push($event)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">
|
||||
<span v-if="isSubmitting">
|
||||
Submitting...
|
||||
</span>
|
||||
<span v-else>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<FormCompleted
|
||||
v-else
|
||||
:submission-slug="submissionSlug"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FieldAreas from './areas'
|
||||
import ImageStep from './image_step'
|
||||
import SignatureStep from './signature_step'
|
||||
import AttachmentStep from './attachment_step'
|
||||
import CheckboxStep from './checkbox_step'
|
||||
import FormCompleted from './completed'
|
||||
|
||||
export default {
|
||||
name: 'FlowForm',
|
||||
components: {
|
||||
FieldAreas,
|
||||
ImageStep,
|
||||
SignatureStep,
|
||||
AttachmentStep,
|
||||
CheckboxStep,
|
||||
FormCompleted
|
||||
},
|
||||
props: {
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
attachments: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
authenticityToken: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
values: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isCompleted: false,
|
||||
currentStep: 0,
|
||||
isSubmitting: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentField () {
|
||||
return this.fields[this.currentStep]
|
||||
},
|
||||
attachmentsIndex () {
|
||||
return this.attachments.reduce((acc, a) => {
|
||||
acc[a.uuid] = a
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
submitPath () {
|
||||
return `/l/${this.submissionSlug}`
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.currentStep = Math.min(
|
||||
this.fields.indexOf([...this.fields].reverse().find((field) => !!this.values[field.uuid])) + 1,
|
||||
this.fields.length - 1
|
||||
)
|
||||
},
|
||||
methods: {
|
||||
goToField (field, scrollToArea = false) {
|
||||
this.currentStep = this.fields.indexOf(field)
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (scrollToArea) {
|
||||
this.$refs.areas.scrollIntoField(field)
|
||||
}
|
||||
|
||||
this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
|
||||
})
|
||||
},
|
||||
async submitStep () {
|
||||
this.isSubmitting = true
|
||||
|
||||
const stepPromise = this.currentField.type === 'signature'
|
||||
? this.$refs.currentStep.submit
|
||||
: () => Promise.resolve({})
|
||||
|
||||
await stepPromise()
|
||||
|
||||
return fetch(this.submitPath, {
|
||||
method: 'POST',
|
||||
body: new FormData(this.$refs.form)
|
||||
}).then(response => {
|
||||
const nextField = this.fields[this.currentStep + 1]
|
||||
|
||||
if (nextField) {
|
||||
this.goToField(this.fields[this.currentStep + 1], true)
|
||||
} else {
|
||||
this.isCompleted = true
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Error submitting form:', error)
|
||||
}).finally(() => {
|
||||
this.isSubmitting = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
v-if="modelValue"
|
||||
class="w-80"
|
||||
:src="attachmentsIndex[modelValue].url"
|
||||
>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
@click.prevent="remove"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<input
|
||||
:value="modelValue"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
>
|
||||
<FileDropzone
|
||||
:message="'Image'"
|
||||
:submission-slug="submissionSlug"
|
||||
:accept="'image/*'"
|
||||
@upload="onImageUpload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileDropzone from './dropzone'
|
||||
export default {
|
||||
name: 'ImageStep',
|
||||
components: {
|
||||
FileDropzone
|
||||
},
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value'],
|
||||
methods: {
|
||||
remove () {
|
||||
this.$emit('update:model-value', '')
|
||||
},
|
||||
onImageUpload (attachments) {
|
||||
this.$emit('attached', attachments[0])
|
||||
|
||||
this.$emit('update:model-value', attachments[0].uuid)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<input
|
||||
:value="modelValue"
|
||||
type="hidden"
|
||||
:name="`values[${field.uuid}]`"
|
||||
>
|
||||
<img
|
||||
v-if="modelValue"
|
||||
:src="attachmentsIndex[modelValue].url"
|
||||
>
|
||||
<canvas
|
||||
v-show="!modelValue"
|
||||
ref="canvas"
|
||||
/>
|
||||
<button
|
||||
v-if="modelValue"
|
||||
@click.prevent="remove"
|
||||
>
|
||||
Redraw
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@click.prevent="clear"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SignaturePad from 'signature_pad'
|
||||
import { DirectUpload } from '@rails/activestorage'
|
||||
|
||||
export default {
|
||||
name: 'SignatureStep',
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
submissionSlug: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
attachmentsIndex: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
emits: ['attached', 'update:model-value'],
|
||||
mounted () {
|
||||
this.pad = new SignaturePad(this.$refs.canvas)
|
||||
},
|
||||
methods: {
|
||||
remove () {
|
||||
this.$emit('update:model-value', '')
|
||||
},
|
||||
clear () {
|
||||
this.pad.clear()
|
||||
},
|
||||
submit () {
|
||||
if (this.modelValue) {
|
||||
return Promise.resolve({})
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
this.$refs.canvas.toBlob((blob) => {
|
||||
const file = new File([blob], 'signature.png', { type: 'image/png' })
|
||||
|
||||
new DirectUpload(
|
||||
file,
|
||||
'/direct_uploads'
|
||||
).create((_error, data) => {
|
||||
fetch('/api/attachments', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
submission_slug: this.submissionSlug,
|
||||
blob_signed_id: data.signed_id,
|
||||
name: 'signatures'
|
||||
}),
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).then((resp) => resp.json()).then((attachment) => {
|
||||
this.$emit('update:model-value', attachment.uuid)
|
||||
this.$emit('attached', attachment)
|
||||
|
||||
return resolve(attachment)
|
||||
})
|
||||
})
|
||||
}, 'image/png')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,8 +0,0 @@
|
||||
<% value = submission.values[field['uuid']] %>
|
||||
<flow-area data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class="flex cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
|
||||
<% if field['type'] == 'signature' && attachment = attachments.find { |a| a.uuid == value } %>
|
||||
<img class="w-full h-full object-contain" src="<%= attachment.url %>" width="<%= attachment.metadata['width'] %>px" height="<%= attachment.metadata['height'] %>px">
|
||||
<% else %>
|
||||
<%= value %>
|
||||
<% end %>
|
||||
</flow-area>
|
||||
@@ -1,4 +1,3 @@
|
||||
<% fields_index = Flows.build_field_areas_index(@submission.flow) %>
|
||||
<% attachment_field_uuids = @submission.flow.fields.select { |f| f['type'].in?(%w[image signature attachment]) }.pluck('uuid') %>
|
||||
<% attachments = ActiveStorage::Attachment.where(uuid: @submission.values.values_at(*attachment_field_uuids).flatten).preload(:blob) %>
|
||||
<flow-view class="mx-auto block" style="max-width: 1000px">
|
||||
@@ -7,123 +6,13 @@
|
||||
<% document.preview_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
|
||||
<div class="relative">
|
||||
<img src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>" loading="lazy">
|
||||
<div class="top-0 bottom-0 left-0 right-0 absolute">
|
||||
<% fields_index.dig(document.uuid, index)&.each do |values| %>
|
||||
<%= render 'area', submission: @submission, attachments:, page:, **values %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<div class="sticky bottom-8 w-full">
|
||||
<div class="bg-white mx-8 md:mx-32 border p-4 rounded">
|
||||
<form data-target="flow-view.form" data-action="submit:flow-view#submitForm" action="<%= submit_flow_path(slug: @submission.slug) %>" method="post">
|
||||
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
|
||||
<input value="put" name="_method" type="hidden">
|
||||
<% visible_step_index = nil %>
|
||||
<% @submission.flow.fields.each_with_index do |field, index| %>
|
||||
<% visible_step_index ||= index if @submission.values[field['uuid']].blank? %>
|
||||
<disable-hidden data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-targets="flow-view.steps" class="block <%= 'hidden' if index != visible_step_index %>">
|
||||
<% if index != 0 %>
|
||||
<button data-action="click:flow-view#moveStepBack">
|
||||
Back
|
||||
</button>
|
||||
<% end %>
|
||||
<label for="<%= field['uuid'] %>"><%= field['name'].presence || 'FIeld' %></label>
|
||||
<br>
|
||||
<% if index == @submission.flow.fields.size - 1 %>
|
||||
<input type="hidden" name="completed" value="true">
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if field['type'].in?(['text', 'date']) %>
|
||||
<input class="text-xl" <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" value="<%= @submission.values[field['uuid']] %>" type="<%= field['type'] %>" name="values[<%= field['uuid'] %>]">
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% elsif field['type'] == 'select' %>
|
||||
<select <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" name="values[<%= field['uuid'] %>]">
|
||||
<option value="" disabled selected>Select your option</option>
|
||||
<% field['options'].each do |option| %>
|
||||
<option <%= html_attributes(selected: 'true') if @submission.values[field['uuid']] == option %> value="<%= option %>"><%= option %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% elsif field['type'] == 'image' || field['type'] == 'attachment' %>
|
||||
<br>
|
||||
<files-list data-field-uuid="<%= field['uuid'] %>">
|
||||
<file-dropzone data-action="upload:files-list#add" data-submission-slug="<%= @submission.slug %>">
|
||||
<% uuid = SecureRandom.uuid %>
|
||||
<label for="<%= uuid %>">
|
||||
Upload
|
||||
<%= field['name'] || 'Attach' %>
|
||||
</label>
|
||||
<input multiple data-target="file-dropzone.input" data-action="change:file-dropzone#onSelectFiles" id="<%= uuid %>" type="file" class="hidden">
|
||||
</file-dropzone>
|
||||
</files-list>
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% elsif field['type'] == 'signature' %>
|
||||
<% attachment = attachments.find { |a| a.uuid == @submission.values[field['uuid']] } %>
|
||||
<signature-pad data-submission-slug="<%= @submission.slug %>" data-action="upload:flow-view#submitSignature">
|
||||
<input data-target="signature-pad.input" type="hidden" name="values[<%= field['uuid'] %>]" value="<%= @submission.values[field['uuid']] %>">
|
||||
<canvas class="<%= 'hidden' if attachment %>" data-target="signature-pad.canvas"></canvas>
|
||||
<% if attachment %>
|
||||
<img data-target="signature-pad.image" src="<%= attachment.url %>">
|
||||
<button data-target="signature-pad.redrawButton" data-action="click:signature-pad#redraw">
|
||||
Redraw
|
||||
</button>
|
||||
<button data-target="signature-pad.nextButton" data-action="click:flow-view#moveNextStep">
|
||||
Submit
|
||||
</button>
|
||||
<% end %>
|
||||
<button class="<%= 'hidden' if attachment %>" data-target="signature-pad.clearButton" data-action="click:signature-pad#clear">
|
||||
Clear
|
||||
</button>
|
||||
<br>
|
||||
<button class="<%= 'hidden' if attachment %>" data-target="signature-pad.okButton" data-action="click:signature-pad#submit">
|
||||
<%= button_title %>
|
||||
</button>
|
||||
</signature-pad>
|
||||
<% elsif field['type'] == 'radio' %>
|
||||
<% field['options'].each do |option| %>
|
||||
<div>
|
||||
<input <%= html_attributes(checked: true) if @submission.values[field['uuid']] == option %> id="<%= field['uuid'] + option %>" type="radio" name="values[<%= field['uuid'] %>]" value="<%= option %>">
|
||||
<label for="<%= field['uuid'] + option %>">
|
||||
<%= option %>
|
||||
</label>
|
||||
</div>
|
||||
<% end %>
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% elsif field['type'] == 'checkbox' %>
|
||||
<% field['options'].each do |option| %>
|
||||
<div>
|
||||
<input <%= html_attributes(checked: true) if @submission.values[field['uuid']]&.include?(option) %> id="<%= field['uuid'] + option %>" type="checkbox" name="values[<%= field['uuid'] %>]" value="<%= option %>">
|
||||
<label for="<%= field['uuid'] + option %>">
|
||||
<%= option %>
|
||||
</label>
|
||||
</div>
|
||||
<% end %>
|
||||
<div>
|
||||
<button type="submit"><%= button_title %></button>
|
||||
</div>
|
||||
<% end %>
|
||||
</disable-hidden>
|
||||
<% end %>
|
||||
</form>
|
||||
<div data-target="flow-view.completed" class="hidden">
|
||||
<p>
|
||||
Form completed - thanks!
|
||||
</p>
|
||||
<%= button_to 'Send copy to Email', send_submission_email_index_path, params: { submission_slug: @submission.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %>
|
||||
<%= button_to button_title('Download documents'), submission_download_index_path(@submission.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %>
|
||||
</div>
|
||||
<flow-form data-submission-slug="<%= @submission.slug %>" data-attachments="<%= attachments.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submission.flow.fields.to_json %>" data-values="<%= @submission.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></flow-form>
|
||||
</div>
|
||||
</div>
|
||||
</flow-view>
|
||||
|
||||
@@ -3,6 +3,7 @@ const baseConfigs = require('./tailwind.config.js')
|
||||
module.exports = {
|
||||
...baseConfigs,
|
||||
content: [
|
||||
'./app/javascript/flow_form/**/*.vue',
|
||||
'./app/views/submit_flow/**/*.erb',
|
||||
'./app/views/start_flow/**/*.erb',
|
||||
'./app/views/send_submission_copy/**/*.erb'
|
||||
|
||||
Reference in New Issue
Block a user