mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.8 KiB
120 lines
2.8 KiB
<template>
|
|
<div>
|
|
<div class="flex justify-between items-center w-full mb-2">
|
|
<label
|
|
class="label text-2xl"
|
|
>{{ field.name || 'Signature' }}</label>
|
|
<button
|
|
v-if="modelValue"
|
|
class="btn btn-outline btn-sm"
|
|
@click.prevent="remove"
|
|
>
|
|
<IconReload :width="16" />
|
|
Redraw
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="btn btn-outline btn-sm"
|
|
@click.prevent="clear"
|
|
>
|
|
<IconReload :width="16" />
|
|
Clear
|
|
</button>
|
|
</div>
|
|
<input
|
|
:value="modelValue"
|
|
type="hidden"
|
|
:name="`values[${field.uuid}]`"
|
|
>
|
|
<img
|
|
v-if="modelValue"
|
|
:src="attachmentsIndex[modelValue].url"
|
|
class="w-full bg-white border border-base-300 rounded"
|
|
>
|
|
<canvas
|
|
v-show="!modelValue"
|
|
ref="canvas"
|
|
class="bg-white border border-base-300 rounded"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SignaturePad from 'signature_pad'
|
|
import { DirectUpload } from '@rails/activestorage'
|
|
import { IconReload } from '@tabler/icons-vue'
|
|
|
|
export default {
|
|
name: 'SignatureStep',
|
|
components: {
|
|
IconReload
|
|
},
|
|
props: {
|
|
field: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
submitterSlug: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
attachmentsIndex: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({})
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
emits: ['attached', 'update:model-value'],
|
|
mounted () {
|
|
this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
|
|
this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
|
|
|
|
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({
|
|
submitter_slug: this.submitterSlug,
|
|
blob_signed_id: data.signed_id,
|
|
name: 'attachments'
|
|
}),
|
|
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>
|