didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add form preview

Browse Source
This commit is contained in:
Pete Matsyburka
2024-07-02 20:27:25 +03:00
parent 73423a6f44
commit 377244f948
17 changed files with 274 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/form.js
+3
View File
@@ -19,6 +19,9 @@ safeRegisterElement('submission-form', class extends HTMLElement {
goToLast: this.dataset.goToLast === 'true',
isDemo: this.dataset.isDemo === 'true',
attribution: this.dataset.attribution !== 'false',
scrollPadding: this.dataset.scrollPadding || '-80px',
dryRun: this.dataset.dryRun === 'true',
expand: ['true', 'false'].includes(this.dataset.expand) ? this.dataset.expand === 'true' : null,
withConfetti: this.dataset.withConfetti !== 'false',
withDisclosure: this.dataset.withDisclosure === 'true',
withTypedSignature: this.dataset.withTypedSignature !== 'false',
app/javascript/submission_form/area.vue
+7 -1
View File
@@ -41,7 +41,8 @@
<div
v-if="isActive"
ref="scrollToElem"
class="absolute -top-20"
class="absolute"
:style="{ top: scrollPadding }"
/>
<img
v-if="field.type === 'image' && image"
@@ -197,6 +198,11 @@ export default {
required: false,
default: false
},
scrollPadding: {
type: String,
required: false,
default: '-80px'
},
submittable: {
type: Boolean,
required: false,
app/javascript/submission_form/areas.vue
+6
View File
@@ -22,6 +22,7 @@
:area="area"
:submittable="true"
:field-index="fieldIndex"
:scroll-padding="scrollPadding"
:is-active="currentStep === step"
:with-label="withLabel"
:is-value-set="step.some((f) => f.uuid in values)"
@@ -53,6 +54,11 @@ export default {
required: false,
default: () => ({})
},
scrollPadding: {
type: String,
required: false,
default: '-80px'
},
attachmentsIndex: {
type: Object,
required: false,
app/javascript/submission_form/attachment_step.vue
+6
View File
@@ -52,6 +52,7 @@
:message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
:submitter-slug="submitterSlug"
:multiple="true"
:dry-run="dryRun"
@upload="onUpload"
/>
</div>
@@ -80,6 +81,11 @@ export default {
type: String,
required: true
},
dryRun: {
type: Boolean,
required: false,
default: false
},
attachmentsIndex: {
type: Object,
required: false,
app/javascript/submission_form/dropzone.vue
+34 -13
View File
@@ -65,6 +65,11 @@ export default {
type: String,
required: true
},
dryRun: {
type: Boolean,
required: false,
default: false
},
accept: {
type: String,
required: false,
@@ -107,20 +112,36 @@ export default {
Array.from(files).map(async (file) => {
const formData = new FormData()
if (file.type === 'image/bmp') {
file = await this.convertBmpToPng(file)
if (this.dryRun) {
return new Promise((resolve) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = () => {
resolve({
url: reader.result,
uuid: Math.random().toString(),
filename: file.name
})
}
})
} else {
if (file.type === 'image/bmp') {
file = await this.convertBmpToPng(file)
}
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
formData.append('name', 'attachments')
return fetch(this.baseUrl + '/api/attachments', {
method: 'POST',
body: formData
}).then(resp => resp.json()).then((data) => {
return data
})
}
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
formData.append('name', 'attachments')
return fetch(this.baseUrl + '/api/attachments', {
method: 'POST',
body: formData
}).then(resp => resp.json()).then((data) => {
return data
})
})).then((result) => {
this.$emit('upload', result)
}).finally(() => {
app/javascript/submission_form/form.vue
+28 -10
View File
@@ -6,7 +6,8 @@
:attachments-index="attachmentsIndex"
:with-label="!isAnonymousChecboxes && showFieldNames"
:current-step="currentStepFields"
@focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
:scroll-padding="scrollPadding"
@focus-step="[saveStep(), currentField.type !== 'checkbox' ? isFormVisible = true : '', goToStep($event, false, true)]"
/>
<FormulaFieldAreas
v-if="formulaFields.length"
@@ -310,6 +311,7 @@
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:field="currentField"
:dry-run="dryRun"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
:show-field-names="showFieldNames"
@@ -326,6 +328,7 @@
:remember-signature="rememberSignature"
:attachments-index="attachmentsIndex"
:button-text="buttonText"
:dry-run="dryRun"
:with-disclosure="withDisclosure"
:with-qr-button="withQrButton"
:submitter="submitter"
@@ -340,6 +343,7 @@
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:field="currentField"
:dry-run="dryRun"
:previous-value="previousInitialsValue"
:attachments-index="attachmentsIndex"
:show-field-names="showFieldNames"
@@ -353,6 +357,7 @@
v-else-if="currentField.type === 'file'"
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:dry-run="dryRun"
:field="currentField"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@@ -423,7 +428,7 @@
:completed-button="completedRedirectUrl ? {} : completedButton"
:completed-message="completedRedirectUrl ? {} : completedMessage"
:with-send-copy-button="withSendCopyButton && !completedRedirectUrl"
:with-download-button="withDownloadButton && !completedRedirectUrl"
:with-download-button="withDownloadButton && !completedRedirectUrl && !dryRun"
:with-confetti="withConfetti"
:can-send-email="canSendEmail && !!submitter.email"
:submitter-slug="submitterSlug"
@@ -528,6 +533,11 @@ export default {
type: Object,
required: true
},
scrollPadding: {
type: String,
required: false,
default: '-80px'
},
canSendEmail: {
type: Boolean,
required: false,
@@ -864,12 +874,14 @@ export default {
this.$nextTick(() => {
this.recalculateButtonDisabledKey = Math.random()
Promise.all([
this.maybeTrackEmailClick(),
this.maybeTrackSmsClick()
]).finally(() => {
this.trackViewForm()
})
if (!this.dryRun) {
Promise.all([
this.maybeTrackEmailClick(),
this.maybeTrackSmsClick()
]).finally(() => {
this.trackViewForm()
})
}
})
},
methods: {
@@ -1009,7 +1021,13 @@ export default {
const currentFieldUuids = this.currentStepFields.map((f) => f.uuid)
const currentFieldType = this.currentField.type
if (this.isCompleted) {
if (this.dryRun) {
currentFieldUuids.forEach((fieldUuid) => {
this.submittedValues[fieldUuid] = this.values[fieldUuid]
})
return Promise.resolve({})
} else if (this.isCompleted) {
return Promise.resolve({})
} else {
return fetch(this.baseUrl + this.submitPath, {
@@ -1059,7 +1077,7 @@ export default {
const formData = new FormData(this.$refs.form)
const isLastStep = this.currentStep === this.stepFields.length - 1
if (isLastStep && !emptyRequiredField && !this.dryRun) {
if (isLastStep && !emptyRequiredField) {
formData.append('completed', 'true')
}
app/javascript/submission_form/image_step.vue
+6
View File
@@ -37,6 +37,7 @@
<FileDropzone
:message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
:submitter-slug="submitterSlug"
:dry-run="dryRun"
:accept="'image/*'"
@upload="onImageUpload"
/>
@@ -66,6 +67,11 @@ export default {
required: false,
default: true
},
dryRun: {
type: Boolean,
required: false,
default: false
},
submitterSlug: {
type: String,
required: true
app/javascript/submission_form/initials_step.vue
+32 -12
View File
@@ -143,6 +143,11 @@ export default {
type: Object,
required: true
},
dryRun: {
type: Boolean,
required: false,
default: false
},
submitterSlug: {
type: String,
required: true
@@ -282,21 +287,36 @@ export default {
cropCanvasAndExportToPNG(this.$refs.canvas).then(async (blob) => {
const file = new File([blob], 'initials.png', { type: 'image/png' })
const formData = new FormData()
if (this.dryRun) {
const reader = new FileReader()
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
formData.append('name', 'attachments')
reader.readAsDataURL(file)
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)
reader.onloadend = () => {
const attachment = { url: reader.result, uuid: Math.random().toString() }
return resolve(attachment)
})
this.$emit('attached', attachment)
this.$emit('update:model-value', attachment.uuid)
resolve(attachment)
}
} else {
const formData = new FormData()
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
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)
})
}
})
})
}
app/javascript/submission_form/signature_step.vue
+34 -14
View File
@@ -264,6 +264,11 @@ export default {
required: false,
default: true
},
dryRun: {
type: Boolean,
required: false,
default: false
},
withDisclosure: {
type: Boolean,
required: false,
@@ -563,24 +568,39 @@ export default {
cropCanvasAndExportToPNG(this.$refs.canvas, { errorOnTooSmall: true }).then(async (blob) => {
const file = new File([blob], 'signature.png', { type: 'image/png' })
const formData = new FormData()
if (this.dryRun) {
const reader = new FileReader()
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
formData.append('name', 'attachments')
formData.append('remember_signature', this.rememberSignature)
reader.readAsDataURL(file)
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)
reader.onloadend = () => {
const attachment = { url: reader.result, uuid: Math.random().toString() }
this.maybeSetSignedUuid(attachment.signed_uuid)
this.$emit('attached', attachment)
this.$emit('update:model-value', attachment.uuid)
return resolve(attachment)
})
resolve(attachment)
}
} else {
const formData = new FormData()
formData.append('file', file)
formData.append('submitter_slug', this.submitterSlug)
formData.append('name', 'attachments')
formData.append('remember_signature', this.rememberSignature)
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)
this.maybeSetSignedUuid(attachment.signed_uuid)
return resolve(attachment)
})
}
}).catch((error) => {
if (error.message === 'Image too small' && this.field.required === false) {
return resolve({})
app/javascript/template_builder/builder.vue
+50 -19
View File
@@ -86,26 +86,55 @@
{{ t('send') }}
</span>
</a>
<button
<span
v-if="editable"
class="base-button"
:class="{ disabled: isSaving }"
v-bind="isSaving ? { disabled: true } : {}"
@click.prevent="onSaveClick"
class="flex"
>
<IconInnerShadowTop
v-if="isSaving"
width="22"
class="animate-spin"
/>
<IconDeviceFloppy
v-else
width="22"
/>
<span class="hidden md:inline">
{{ t('save') }}
</span>
</button>
<button
class="base-button !rounded-r-none !pr-2"
:class="{ disabled: isSaving }"
v-bind="isSaving ? { disabled: true } : {}"
@click.prevent="onSaveClick"
>
<IconInnerShadowTop
v-if="isSaving"
width="22"
class="animate-spin"
/>
<IconDeviceFloppy
v-else
width="22"
/>
<span class="hidden md:inline">
{{ t('save') }}
</span>
</button>
<div class="dropdown dropdown-end">
<label
tabindex="0"
class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
>
<span class="text-sm align-text-top">
<IconChevronDown class="w-5 h-5 flex-shrink-0" />
</span>
</label>
<ul
tabindex="0"
class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
>
<li>
<a
:href="`/templates/${template.id}/form`"
data-turbo="false"
class="flex items-center justify-center space-x-2"
>
<IconEye class="w-6 h-6 flex-shrink-0" />
<span class="whitespace-nowrap">Save and Preview</span>
</a>
</li>
</ul>
</div>
</span>
<a
v-else
:href="`/templates/${template.id}`"
@@ -321,7 +350,7 @@ import Contenteditable from './contenteditable'
import DocumentPreview from './preview'
import DocumentControls from './controls'
import MobileFields from './mobile_fields'
import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
import { IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle } from '@tabler/icons-vue'
import { v4 } from 'uuid'
import { ref, computed } from 'vue'
import { en as i18nEn } from './i18n'
@@ -343,6 +372,8 @@ export default {
IconInnerShadowTop,
Contenteditable,
IconUsersPlus,
IconChevronDown,
IconEye,
IconDeviceFloppy
},
provide () {
app/javascript/template_builder/fields.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
<div :class="withStickySubmitters ? 'sticky top-0 z-[1]' : ''">
<FieldSubmitter
:model-value="selectedSubmitter.uuid"
class="roles-dropdown w-full rounded-lg"