mirror of https://github.com/docusealco/docuseal
Merge 6d27609427 into 2562c4f432
Zee
2 years ago
committed by
GitHub
commit
e94e8d14b9
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p class="text-center">This portion is redacted</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
function cropCanvasAndExportToPNG (canvas) {
|
||||||
|
const ctx = canvas.getContext('2d')
|
||||||
|
|
||||||
|
const width = canvas.width
|
||||||
|
const height = canvas.height
|
||||||
|
|
||||||
|
let topmost = height
|
||||||
|
let bottommost = 0
|
||||||
|
let leftmost = width
|
||||||
|
let rightmost = 0
|
||||||
|
|
||||||
|
const imageData = ctx.getImageData(0, 0, width, height)
|
||||||
|
const pixels = imageData.data
|
||||||
|
|
||||||
|
for (let y = 0; y < height; y++) {
|
||||||
|
for (let x = 0; x < width; x++) {
|
||||||
|
const pixelIndex = (y * width + x) * 4
|
||||||
|
const alpha = pixels[pixelIndex + 3]
|
||||||
|
if (alpha !== 0) {
|
||||||
|
topmost = Math.min(topmost, y)
|
||||||
|
bottommost = Math.max(bottommost, y)
|
||||||
|
leftmost = Math.min(leftmost, x)
|
||||||
|
rightmost = Math.max(rightmost, x)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const croppedWidth = rightmost - leftmost + 1
|
||||||
|
const croppedHeight = bottommost - topmost + 1
|
||||||
|
|
||||||
|
const croppedCanvas = document.createElement('canvas')
|
||||||
|
croppedCanvas.width = croppedWidth
|
||||||
|
croppedCanvas.height = croppedHeight
|
||||||
|
const croppedCtx = croppedCanvas.getContext('2d')
|
||||||
|
|
||||||
|
croppedCtx.drawImage(canvas, leftmost, topmost, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight)
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
croppedCanvas.toBlob((blob) => {
|
||||||
|
if (blob) {
|
||||||
|
resolve(blob)
|
||||||
|
} else {
|
||||||
|
reject(new Error('Failed to create a PNG blob.'))
|
||||||
|
}
|
||||||
|
}, 'image/png')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export { cropCanvasAndExportToPNG }
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="flex justify-between items-center w-full mb-2"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
:for="field.uuid"
|
||||||
|
class="label text-2xl"
|
||||||
|
>{{ field.name || t('date') }}
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
class="btn btn-outline btn-sm !normal-case font-normal"
|
||||||
|
@click.prevent="setCurrentDate"
|
||||||
|
>
|
||||||
|
<IconCalendarCheck :width="16" />
|
||||||
|
{{ t('set_today') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<input
|
||||||
|
ref="input"
|
||||||
|
v-model="value"
|
||||||
|
class="base-input !text-2xl text-center w-full"
|
||||||
|
:required="field.required"
|
||||||
|
type="date"
|
||||||
|
:name="`values[${field.uuid}]`"
|
||||||
|
@focus="$emit('focus')"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { IconCalendarCheck } from '@tabler/icons-vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MyDate',
|
||||||
|
components: {
|
||||||
|
IconCalendarCheck
|
||||||
|
},
|
||||||
|
inject: ['t'],
|
||||||
|
props: {
|
||||||
|
field: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['update:model-value', 'focus'],
|
||||||
|
computed: {
|
||||||
|
value: {
|
||||||
|
set (value) {
|
||||||
|
this.$emit('update:model-value', value)
|
||||||
|
},
|
||||||
|
get () {
|
||||||
|
return this.modelValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setCurrentDate () {
|
||||||
|
const inputEl = this.$refs.input
|
||||||
|
|
||||||
|
inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
|
||||||
|
|
||||||
|
inputEl.dispatchEvent(new Event('input', { bubbles: true }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,298 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="absolute"
|
||||||
|
style="z-index: 50;"
|
||||||
|
:style="{ ...mySignatureStyle }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="min-height: 250px; min-width: 250px;"
|
||||||
|
>
|
||||||
|
<div class="flex justify-between items-center w-full mb-2">
|
||||||
|
<label
|
||||||
|
class="label text-2xl"
|
||||||
|
>{{ field.name || t('initials') }}</label>
|
||||||
|
<div class="space-x-2 flex">
|
||||||
|
<span
|
||||||
|
v-if="isDrawInitials"
|
||||||
|
class="tooltip"
|
||||||
|
:data-tip="t('type_initials')"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="type_text_button"
|
||||||
|
href="#"
|
||||||
|
class="btn btn-outline font-medium btn-sm"
|
||||||
|
@click.prevent="toggleTextInput"
|
||||||
|
>
|
||||||
|
<IconTextSize :width="16" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else
|
||||||
|
class="tooltip"
|
||||||
|
:data-tip="t('draw_initials')"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="type_text_button"
|
||||||
|
href="#"
|
||||||
|
class="btn btn-outline font-medium btn-sm"
|
||||||
|
@click.prevent="toggleTextInput"
|
||||||
|
>
|
||||||
|
<IconSignature :width="16" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
v-if="modelValue || computedPreviousValue"
|
||||||
|
href="#"
|
||||||
|
class="tooltip btn font-medium btn-outline btn-sm"
|
||||||
|
:data-tip="'redraw'"
|
||||||
|
@click.prevent="remove"
|
||||||
|
>
|
||||||
|
<IconReload :width="16" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
v-else
|
||||||
|
href="#"
|
||||||
|
class="tooltip btn font-medium btn-outline btn-sm"
|
||||||
|
:data-tip="'clear'"
|
||||||
|
@click.prevent="clear"
|
||||||
|
>
|
||||||
|
<IconReload :width="16" />
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="tooltip btn btn-outline btn-sm font-medium"
|
||||||
|
:data-tip="'close'"
|
||||||
|
@click="$emit('hide')"
|
||||||
|
>
|
||||||
|
<IconTrashX :width="16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
:value="modelValue || computedPreviousValue"
|
||||||
|
type="hidden"
|
||||||
|
:name="`values[${field.uuid}]`"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="modelValue || computedPreviousValue"
|
||||||
|
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
|
||||||
|
class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
|
||||||
|
>
|
||||||
|
<canvas
|
||||||
|
v-show="!modelValue && !computedPreviousValue"
|
||||||
|
ref="canvas"
|
||||||
|
class="bg-white border border-base-300 rounded-2xl max-h-72 w-full"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
v-if="!isDrawInitials && !modelValue && !computedPreviousValue"
|
||||||
|
id="initials_text_input"
|
||||||
|
ref="textInput"
|
||||||
|
class="base-input !text-2xl w-full mt-6 text-center"
|
||||||
|
:required="field.required && !isInitialsStarted"
|
||||||
|
:placeholder="`${t('type_initial_here')}...`"
|
||||||
|
type="text"
|
||||||
|
@focus="$emit('focus')"
|
||||||
|
@input="updateWrittenInitials"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-outline w-full mt-2"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
<span> Submit </span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { cropCanvasAndExportToPNG } from './crop_canvas'
|
||||||
|
import { IconReload, IconTextSize, IconSignature, IconTrashX } from '@tabler/icons-vue'
|
||||||
|
import SignaturePad from 'signature_pad'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MyInitials',
|
||||||
|
components: {
|
||||||
|
IconReload,
|
||||||
|
IconTextSize,
|
||||||
|
IconSignature,
|
||||||
|
IconTrashX
|
||||||
|
},
|
||||||
|
inject: ['baseUrl', 't'],
|
||||||
|
props: {
|
||||||
|
field: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isDirectUpload: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
attachmentsIndex: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
previousValue: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
template: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
mySignatureStyle: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['attached', 'update:model-value', 'start', 'hide', 'focus'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isInitialsStarted: !!this.previousValue,
|
||||||
|
isUsePreviousValue: true,
|
||||||
|
isDrawInitials: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
computedPreviousValue () {
|
||||||
|
if (this.isUsePreviousValue) {
|
||||||
|
return this.previousValue
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.canvas) {
|
||||||
|
this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
|
||||||
|
this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 5
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$refs.textInput?.focus()
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.isDirectUpload) {
|
||||||
|
import('@rails/activestorage')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.canvas) {
|
||||||
|
this.pad = new SignaturePad(this.$refs.canvas)
|
||||||
|
|
||||||
|
this.pad.addEventListener('beginStroke', () => {
|
||||||
|
this.isInitialsStarted = true
|
||||||
|
|
||||||
|
this.$emit('start')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
remove () {
|
||||||
|
this.$emit('update:model-value', '')
|
||||||
|
|
||||||
|
this.isUsePreviousValue = false
|
||||||
|
this.isInitialsStarted = false
|
||||||
|
},
|
||||||
|
clear () {
|
||||||
|
this.pad.clear()
|
||||||
|
|
||||||
|
this.isInitialsStarted = false
|
||||||
|
|
||||||
|
if (this.$refs.textInput) {
|
||||||
|
this.$refs.textInput.value = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateWrittenInitials (e) {
|
||||||
|
this.isInitialsStarted = true
|
||||||
|
|
||||||
|
const canvas = this.$refs.canvas
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
|
||||||
|
const fontFamily = 'Arial'
|
||||||
|
const fontSize = '44px'
|
||||||
|
const fontStyle = 'italic'
|
||||||
|
const fontWeight = ''
|
||||||
|
|
||||||
|
context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
|
||||||
|
context.textAlign = 'center'
|
||||||
|
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
|
||||||
|
},
|
||||||
|
toggleTextInput () {
|
||||||
|
this.remove()
|
||||||
|
this.clear()
|
||||||
|
this.isDrawInitials = !this.isDrawInitials
|
||||||
|
|
||||||
|
if (!this.isDrawInitials) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.textInput.focus()
|
||||||
|
|
||||||
|
this.$emit('start')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async submit () {
|
||||||
|
if (this.modelValue || this.computedPreviousValue) {
|
||||||
|
if (this.computedPreviousValue) {
|
||||||
|
this.$emit('update:model-value', this.computedPreviousValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve({})
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
|
||||||
|
const file = new File([blob], 'my_initials.png', { type: 'image/png' })
|
||||||
|
|
||||||
|
if (this.isDirectUpload) {
|
||||||
|
const { DirectUpload } = await import('@rails/activestorage')
|
||||||
|
|
||||||
|
new DirectUpload(
|
||||||
|
file,
|
||||||
|
'/direct_uploads'
|
||||||
|
).create((_error, data) => {
|
||||||
|
fetch(this.baseUrl + '/api/attachments', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
template_slug: this.template.slug,
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const formData = new FormData()
|
||||||
|
|
||||||
|
formData.append('file', file)
|
||||||
|
formData.append('template_slug', this.template.slug)
|
||||||
|
formData.append('name', 'attachments')
|
||||||
|
|
||||||
|
return fetch(this.baseUrl + '/api/attachments', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}).then((resp) => resp.json()).then((attachment) => {
|
||||||
|
this.$emit('attached', attachment)
|
||||||
|
this.$emit('update:model-value', attachment.uuid)
|
||||||
|
|
||||||
|
return resolve(attachment)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,371 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="absolute"
|
||||||
|
style="z-index: 50;"
|
||||||
|
:style="{ ...mySignatureStyle }"
|
||||||
|
>
|
||||||
|
<div class="flex justify-between items-center w-full mb-2">
|
||||||
|
<label
|
||||||
|
class="label text-2xl"
|
||||||
|
>{{ field.name || t('signature') }}</label>
|
||||||
|
<div class="space-x-2 flex">
|
||||||
|
<span
|
||||||
|
v-if="isTextSignature"
|
||||||
|
class="tooltip"
|
||||||
|
:data-tip="t('draw_signature')"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="type_text_button"
|
||||||
|
href="#"
|
||||||
|
class="btn btn-outline btn-sm font-medium"
|
||||||
|
@click.prevent="toggleTextInput"
|
||||||
|
>
|
||||||
|
<IconSignature :width="16" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-else
|
||||||
|
class="tooltip"
|
||||||
|
:data-tip="t('type_text')"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
id="type_text_button"
|
||||||
|
href="#"
|
||||||
|
class="btn btn-outline btn-sm font-medium"
|
||||||
|
@click.prevent="toggleTextInput"
|
||||||
|
>
|
||||||
|
<IconTextSize :width="16" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="tooltip"
|
||||||
|
data-tip="Take photo"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="btn btn-outline btn-sm font-medium"
|
||||||
|
>
|
||||||
|
<IconCamera :width="16" />
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
hidden
|
||||||
|
accept="image/*"
|
||||||
|
@change="drawImage"
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
v-if="modelValue || computedPreviousValue"
|
||||||
|
href="#"
|
||||||
|
class="tooltip btn btn-outline btn-sm font-medium"
|
||||||
|
:data-tip="'redraw'"
|
||||||
|
@click.prevent="remove"
|
||||||
|
>
|
||||||
|
<IconReload :width="16" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
v-else
|
||||||
|
href="#"
|
||||||
|
class="tooltip btn btn-outline btn-sm font-medium"
|
||||||
|
:data-tip="'clear'"
|
||||||
|
@click.prevent="clear"
|
||||||
|
>
|
||||||
|
<IconReload :width="16" />
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="tooltip btn btn-outline btn-sm font-medium"
|
||||||
|
:data-tip="'close'"
|
||||||
|
@click="$emit('hide')"
|
||||||
|
>
|
||||||
|
<IconTrashX :width="16" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
:value="modelValue || computedPreviousValue"
|
||||||
|
type="hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-if="modelValue || computedPreviousValue"
|
||||||
|
:src="attachmentsIndex[modelValue || computedPreviousValue]?.url"
|
||||||
|
class="mx-auto bg-white border border-base-300 rounded max-h-72 w-full"
|
||||||
|
>
|
||||||
|
<canvas
|
||||||
|
v-show="!modelValue && !computedPreviousValue"
|
||||||
|
ref="canvas"
|
||||||
|
style="padding: 1px; 0"
|
||||||
|
class="bg-white border border-base-300 rounded-2xl w-full"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
v-if="isTextSignature"
|
||||||
|
id="signature_text_input"
|
||||||
|
ref="textInput"
|
||||||
|
class="base-input !text-2xl w-full mt-6"
|
||||||
|
:placeholder="`${t('type_signature_here')}...`"
|
||||||
|
type="text"
|
||||||
|
@input="updateWrittenSignature"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="btn btn-outline w-full mt-2"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
<span> Submit </span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { IconReload, IconCamera, IconSignature, IconTextSize, IconTrashX } from '@tabler/icons-vue'
|
||||||
|
import { cropCanvasAndExportToPNG } from './crop_canvas'
|
||||||
|
import SignaturePad from 'signature_pad'
|
||||||
|
|
||||||
|
let isFontLoaded = false
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MySignature',
|
||||||
|
components: {
|
||||||
|
IconReload,
|
||||||
|
IconCamera,
|
||||||
|
IconTextSize,
|
||||||
|
IconSignature,
|
||||||
|
IconTrashX
|
||||||
|
},
|
||||||
|
inject: ['baseUrl', 't'],
|
||||||
|
props: {
|
||||||
|
field: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isDirectUpload: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
attachmentsIndex: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
previousValue: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
template: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
mySignatureStyle: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['attached', 'update:model-value', 'start', 'hide'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
isSignatureStarted: !!this.previousValue,
|
||||||
|
isUsePreviousValue: true,
|
||||||
|
isTextSignature: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
computedPreviousValue () {
|
||||||
|
if (this.isUsePreviousValue) {
|
||||||
|
return this.previousValue
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs.canvas) {
|
||||||
|
this.$refs.canvas.width = this.$refs.canvas?.parentNode?.clientWidth
|
||||||
|
this.$refs.canvas.height = this.$refs.canvas?.parentNode?.clientWidth / 3
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.isDirectUpload) {
|
||||||
|
import('@rails/activestorage')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.$refs.canvas) {
|
||||||
|
this.pad = new SignaturePad(this.$refs.canvas)
|
||||||
|
|
||||||
|
this.pad.addEventListener('beginStroke', () => {
|
||||||
|
this.isSignatureStarted = true
|
||||||
|
|
||||||
|
this.$emit('start')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
remove () {
|
||||||
|
this.$emit('update:model-value', '')
|
||||||
|
|
||||||
|
this.isUsePreviousValue = false
|
||||||
|
this.isSignatureStarted = false
|
||||||
|
},
|
||||||
|
loadFont () {
|
||||||
|
if (!isFontLoaded) {
|
||||||
|
const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
|
||||||
|
|
||||||
|
font.load().then((loadedFont) => {
|
||||||
|
document.fonts.add(loadedFont)
|
||||||
|
|
||||||
|
isFontLoaded = true
|
||||||
|
}).catch((error) => {
|
||||||
|
console.error('Font loading failed:', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clear () {
|
||||||
|
this.pad.clear()
|
||||||
|
|
||||||
|
this.isSignatureStarted = false
|
||||||
|
|
||||||
|
if (this.$refs.textInput) {
|
||||||
|
this.$refs.textInput.value = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateWrittenSignature (e) {
|
||||||
|
this.isSignatureStarted = true
|
||||||
|
|
||||||
|
const canvas = this.$refs.canvas
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
|
||||||
|
const fontFamily = 'Dancing Script'
|
||||||
|
const fontSize = '38px'
|
||||||
|
const fontStyle = 'italic'
|
||||||
|
const fontWeight = ''
|
||||||
|
|
||||||
|
context.font = fontStyle + ' ' + fontWeight + ' ' + fontSize + ' ' + fontFamily
|
||||||
|
context.textAlign = 'center'
|
||||||
|
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
context.fillText(e.target.value, canvas.width / 2, canvas.height / 2 + 11)
|
||||||
|
},
|
||||||
|
toggleTextInput () {
|
||||||
|
this.remove()
|
||||||
|
this.isTextSignature = !this.isTextSignature
|
||||||
|
|
||||||
|
if (this.isTextSignature) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.textInput.focus()
|
||||||
|
|
||||||
|
this.loadFont()
|
||||||
|
|
||||||
|
this.$emit('start')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drawImage (event) {
|
||||||
|
this.remove()
|
||||||
|
this.isSignatureStarted = true
|
||||||
|
|
||||||
|
const file = event.target.files[0]
|
||||||
|
|
||||||
|
if (file && file.type.match('image.*')) {
|
||||||
|
const reader = new FileReader()
|
||||||
|
|
||||||
|
reader.onload = (event) => {
|
||||||
|
const img = new Image()
|
||||||
|
|
||||||
|
img.src = event.target.result
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
const canvas = this.$refs.canvas
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
|
||||||
|
const aspectRatio = img.width / img.height
|
||||||
|
|
||||||
|
let targetWidth = canvas.width
|
||||||
|
let targetHeight = canvas.height
|
||||||
|
|
||||||
|
if (canvas.width / canvas.height > aspectRatio) {
|
||||||
|
targetWidth = canvas.height * aspectRatio
|
||||||
|
} else {
|
||||||
|
targetHeight = canvas.width / aspectRatio
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetHeight > targetWidth) {
|
||||||
|
const scale = targetHeight / targetWidth
|
||||||
|
targetWidth = targetWidth * scale
|
||||||
|
targetHeight = targetHeight * scale
|
||||||
|
}
|
||||||
|
|
||||||
|
const x = (canvas.width - targetWidth) / 2
|
||||||
|
const y = (canvas.height - targetHeight) / 2
|
||||||
|
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||||
|
context.drawImage(img, x, y, targetWidth, targetHeight)
|
||||||
|
|
||||||
|
this.$emit('start')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async submit () {
|
||||||
|
if (this.modelValue || this.computedPreviousValue) {
|
||||||
|
if (this.computedPreviousValue) {
|
||||||
|
this.$emit('update:model-value', this.computedPreviousValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve({})
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
|
||||||
|
const file = new File([blob], 'my_signature.png', { type: 'image/png' })
|
||||||
|
|
||||||
|
if (this.isDirectUpload) {
|
||||||
|
const { DirectUpload } = await import('@rails/activestorage')
|
||||||
|
|
||||||
|
new DirectUpload(
|
||||||
|
file,
|
||||||
|
'/direct_uploads'
|
||||||
|
).create((_error, data) => {
|
||||||
|
fetch(this.baseUrl + '/api/attachments', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
template_slug: this.template.slug,
|
||||||
|
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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const formData = new FormData()
|
||||||
|
|
||||||
|
formData.append('file', file)
|
||||||
|
formData.append('template_slug', this.template.slug)
|
||||||
|
formData.append('name', 'attachments')
|
||||||
|
|
||||||
|
return fetch(this.baseUrl + '/api/attachments', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
}).then((resp) => resp.json()).then((attachment) => {
|
||||||
|
this.$emit('attached', attachment)
|
||||||
|
this.$emit('update:model-value', attachment.uuid)
|
||||||
|
|
||||||
|
return resolve(attachment)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1,4 +1,9 @@
|
|||||||
<% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
|
<% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
|
||||||
<% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
|
<% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| ['my_text', 'my_signature', 'my_initials', 'my_date', 'my_check'].include?(f['type']) || f['submitter_uuid'] == submitter.uuid }.to_json %>
|
||||||
<% configs = Submitters::FormConfigs.call(submitter) %>
|
<% configs = Submitters::FormConfigs.call(submitter) %>
|
||||||
<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>"></submission-form>
|
<% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
|
||||||
|
<% templateValues = submitter.submission.template.values %>
|
||||||
|
<% template_attachments = ActiveStorage::Attachment.where(record: submitter.submission.template, name: :attachments).preload(:blob).index_by(&:uuid) %>
|
||||||
|
<% template_attachments_index = template_attachments.values.select { |e| e.record_id == submitter.submission.template.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
|
||||||
|
<submission-form data-template-attachments-index="<%= template_attachments_index %>" data-template-values="<%= templateValues.to_json %>" data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= configs[:completed_button].to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>" data-with-typed-signature="<%= configs[:with_typed_signature] %>"></submission-form>
|
||||||
|
|
||||||
|
|||||||
@ -1 +1,3 @@
|
|||||||
<template-builder class="grid" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-template="<%= @template_data %>"></template-builder>
|
<% attachments_index = ActiveStorage::Attachment.where(record: @template, name: :attachments).preload(:blob).index_by(&:uuid) %>
|
||||||
|
<% template_attachments_index = attachments_index.values.select { |e| e.record_id == @template.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
|
||||||
|
<template-builder class="grid" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-template="<%= @template_data %>" data-template-attachments-index="<%= template_attachments_index %>"></template-builder>
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
class AddValuesToTemplates < ActiveRecord::Migration[7.0]
|
||||||
|
def change
|
||||||
|
add_column :templates, :values, :text
|
||||||
|
end
|
||||||
|
end
|
||||||
Loading…
Reference in new issue