use vue for form submission
This commit is contained in:
Alex Turchyn
@@ -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()
|
||||
}
|
||||
}))
|
||||
Reference in New Issue
Block a user