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

show field area pages list inthe form

Browse Source
This commit is contained in:
Pete Matsyburka
2024-01-06 17:21:15 +02:00
parent a478112b07
commit e7ef7b552f
8 changed files with 120 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/appears_on.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<div
v-if="uniqueAreas.length > 1"
class="mb-2"
>
<div class="flex space-x-1 text-sm ml-1 -mt-3">
<span>
{{ t('appears_on') }}:
</span>
<a
v-for="area in uniqueAreas"
:key="area.uuid"
href="#"
class="link pr-0.5"
@click.prevent="scrollIntoArea(area)"
>
{{ t('page') }} <template v-if="isMultipleDocs">{{ attachmentUuids.indexOf(area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
</a>
</div>
</div>
</template>
<script>
export default {
name: 'AppearsOn',
inject: ['t', 'scrollIntoArea'],
props: {
field: {
type: Object,
required: true
}
},
computed: {
isMultipleDocs () {
return this.attachmentUuids.length > 1
},
attachmentUuids () {
return [...new Set(this.uniqueAreas.map((e) => e.attachment_uuid))]
},
uniqueAreas () {
const areas = {}
this.field.areas.forEach((area) => {
areas[area.attachment_uuid + area.page] ||= area
})
return Object.values(areas).slice(0, 6)
}
}
}
</script>
app/javascript/submission_form/areas.vue
+15 -12
View File
@@ -83,22 +83,25 @@ export default {
return (this.$root.$el?.parentNode?.getRootNode() || document).getElementById(`page-${area.attachment_uuid}-${area.page}`)
},
scrollIntoField (field) {
this.areaRefs.find((area) => {
if (area.field === field) {
const root = this.$root.$el.parentNode.getRootNode()
const container = root.body || root.querySelector('div')
if (field?.areas) {
this.scrollIntoArea(field.areas[0])
}
},
scrollIntoArea (area) {
const areaRef = this.areaRefs.find((a) => a.area === area)
if (container.style.overflow === 'hidden') {
this.scrollInContainer(area.$el)
} else {
area.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
if (areaRef) {
const root = this.$root.$el.parentNode.getRootNode()
const container = root.body || root.querySelector('div')
return true
if (container.style.overflow === 'hidden') {
this.scrollInContainer(areaRef.$el)
} else {
return null
areaRef.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
})
return true
}
},
scrollInContainer (target) {
const root = this.$root.$el.parentNode.getRootNode()
app/javascript/submission_form/date_step.vue
+4 -1
View File
@@ -15,6 +15,7 @@
{{ t('set_today') }}
</button>
</div>
<AppearsOn :field="field" />
<div class="text-center">
<input
ref="input"
@@ -31,11 +32,13 @@
<script>
import { IconCalendarCheck } from '@tabler/icons-vue'
import AppearsOn from './appears_on'
export default {
name: 'DateStep',
components: {
IconCalendarCheck
IconCalendarCheck,
AppearsOn
},
inject: ['t'],
props: {
app/javascript/submission_form/form.vue
+22 -12
View File
@@ -65,7 +65,7 @@
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:field="currentField"
@focus="$refs.areas.scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
/>
</div>
<DateStep
@@ -73,7 +73,7 @@
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:field="currentField"
@focus="$refs.areas.scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
/>
<div v-else-if="currentField.type === 'select'">
<label
@@ -87,13 +87,14 @@
v-else
class="py-1"
/>
<AppearsOn :field="currentField" />
<select
:id="currentField.uuid"
:required="currentField.required"
class="select base-input !text-2xl w-full text-center font-normal"
:name="`values[${currentField.uuid}]`"
@change="values[currentField.uuid] = $event.target.value"
@focus="$refs.areas.scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
>
<option
value=""
@@ -198,7 +199,7 @@
:onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
:required="field.required"
:checked="!!values[field.uuid]"
@click="[$refs.areas.scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
@click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
>
<span class="text-xl">
{{ field.name || field.type + ' ' + (index + 1) }}
@@ -216,7 +217,7 @@
:is-direct-upload="isDirectUpload"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
@attached="[attachments.push($event), scrollIntoField(currentField)]"
/>
<SignatureStep
v-else-if="currentField.type === 'signature'"
@@ -230,7 +231,7 @@
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="attachments.push($event)"
@start="$refs.areas.scrollIntoField(currentField)"
@start="scrollIntoField(currentField)"
@minimize="isFormVisible = false"
/>
<InitialsStep
@@ -244,8 +245,8 @@
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="attachments.push($event)"
@start="$refs.areas.scrollIntoField(currentField)"
@focus="$refs.areas.scrollIntoField(currentField)"
@start="scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
@minimize="isFormVisible = false"
/>
<AttachmentStep
@@ -256,7 +257,7 @@
:field="currentField"
:attachments-index="attachmentsIndex"
:submitter-slug="submitterSlug"
@attached="[attachments.push($event), $refs.areas.scrollIntoField(currentField)]"
@attached="[attachments.push($event), scrollIntoField(currentField)]"
/>
<PhoneStep
v-else-if="currentField.type === 'phone'"
@@ -266,7 +267,7 @@
:field="currentField"
:default-value="submitter.phone"
:submitter-slug="submitterSlug"
@focus="$refs.areas.scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
@submit="submitStep"
/>
<PaymentStep
@@ -277,7 +278,7 @@
:field="currentField"
:submitter-slug="submitterSlug"
@attached="attachments.push($event)"
@focus="$refs.areas.scrollIntoField(currentField)"
@focus="scrollIntoField(currentField)"
@submit="submitStep"
/>
</div>
@@ -363,6 +364,7 @@ import TextStep from './text_step'
import DateStep from './date_step'
import FormCompleted from './completed'
import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
import AppearsOn from './appears_on'
import { t } from './i18n'
export default {
@@ -371,6 +373,7 @@ export default {
FieldAreas,
ImageStep,
SignatureStep,
AppearsOn,
AttachmentStep,
InitialsStep,
MultiSelectStep,
@@ -386,6 +389,7 @@ export default {
provide () {
return {
baseUrl: this.baseUrl,
scrollIntoArea: this.scrollIntoArea,
t: this.t
}
},
@@ -687,7 +691,7 @@ export default {
this.recalculateButtonDisabledKey = Math.random()
if (scrollToArea) {
this.$refs.areas.scrollIntoField(step[0])
this.scrollIntoField(step[0])
}
this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
@@ -715,6 +719,12 @@ export default {
})
}
},
scrollIntoField (field) {
return this.$refs.areas.scrollIntoField(field)
},
scrollIntoArea (area) {
return this.$refs.areas.scrollIntoArea(area)
},
async submitStep () {
this.isSubmitting = true
app/javascript/submission_form/i18n.js
+18
View File
@@ -3,6 +3,8 @@ const en = {
type_here: 'Type here',
optional: 'optional',
option: 'Option',
appears_on: 'Appears on',
page: 'Page',
select_your_option: 'Select your option',
complete_hightlighted_checkboxes_and_click: 'Complete hightlighted checkboxes and click',
submit: 'submit',
@@ -48,6 +50,8 @@ const es = {
submit_form: 'Enviar Formulario',
type_here: 'Escribe aquí',
optional: 'opcional',
appears_on: 'Aparece en',
page: 'Página',
select_your_option: 'Selecciona tu opción',
complete_hightlighted_checkboxes_and_click: 'Completa las casillas resaltadas y haz clic',
submit: 'enviar',
@@ -93,6 +97,8 @@ const it = {
submit_form: 'Invia Modulo',
type_here: 'Digita qui',
optional: 'opzionale',
appears_on: 'Compare su',
page: 'Pagina',
select_your_option: 'Seleziona la tua opzione',
complete_hightlighted_checkboxes_and_click: 'Completa le caselle evidenziate e fai clic',
submit: 'invia',
@@ -138,6 +144,8 @@ const de = {
submit_form: 'Formular absenden',
type_here: 'Hier eingeben',
optional: 'optional',
appears_on: 'Erscheint auf',
page: 'Seite',
select_your_option: 'Wähle deine Option',
complete_hightlighted_checkboxes_and_click: 'Markierte Kontrollkästchen ausfüllen und klicken',
submit: 'absenden',
@@ -183,6 +191,8 @@ const fr = {
submit_form: 'Envoyer le Formulaire',
type_here: 'Tapez ici',
optional: 'facultatif',
appears_on: 'Apparaît sur',
page: 'Page',
select_your_option: 'Sélectionnez votre option',
complete_hightlighted_checkboxes_and_click: 'Complétez les cases à cocher en surbrillance et cliquez',
submit: 'envoyer',
@@ -228,6 +238,8 @@ const pl = {
submit_form: 'Wyślij Formularz',
type_here: 'Wpisz tutaj',
optional: 'opcjonalny',
appears_on: 'Pojawia się na',
page: 'Strona',
select_your_option: 'Wybierz swoją opcję',
complete_hightlighted_checkboxes_and_click: 'Wypełnij zaznaczone pola wyboru i kliknij',
submit: 'wyślij',
@@ -273,6 +285,8 @@ const uk = {
submit_form: 'Надіслати Форму',
type_here: 'Введіть тут',
optional: 'необов’язково',
appears_on: "З'являється на",
page: 'Сторінка',
select_your_option: 'Виберіть варіант',
complete_hightlighted_checkboxes_and_click: 'Заповніть позначені прапорці та натисніть',
submit: 'надіслати',
@@ -318,6 +332,8 @@ const cs = {
submit_form: 'Odeslat formulář',
type_here: 'Zadejte zde',
optional: 'volitelné',
appears_on: 'Zobrazuje se na',
page: 'Stránka',
select_your_option: 'Vyberte svou volbu',
complete_hightlighted_checkboxes_and_click: 'Označte zvýrazněné zaškrtávací políčka a klikněte na',
submit: 'odeslat',
@@ -363,6 +379,8 @@ const pt = {
submit_form: 'Enviar Formulário',
type_here: 'Digite aqui',
optional: 'opcional',
appears_on: 'Aparece em',
page: 'Página',
select_your_option: 'Selecione sua opção',
complete_hightlighted_checkboxes_and_click: 'Complete as caixas de seleção destacadas e clique',
submit: 'enviar',
app/javascript/submission_form/initials_step.vue
+3
View File
@@ -70,6 +70,7 @@
</a>
</div>
</div>
<AppearsOn :field="field" />
<input
:value="modelValue || computedPreviousValue"
type="hidden"
@@ -103,10 +104,12 @@
import { cropCanvasAndExportToPNG } from './crop_canvas'
import { IconReload, IconTextSize, IconSignature, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
import SignaturePad from 'signature_pad'
import AppearsOn from './appears_on'
export default {
name: 'InitialsStep',
components: {
AppearsOn,
IconReload,
IconTextSize,
IconSignature,
app/javascript/submission_form/signature_step.vue
+3
View File
@@ -89,6 +89,7 @@
</a>
</div>
</div>
<AppearsOn :field="field" />
<input
:value="modelValue || computedPreviousValue"
type="hidden"
@@ -122,12 +123,14 @@
import { IconReload, IconCamera, IconSignature, IconTextSize, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
import { cropCanvasAndExportToPNG } from './crop_canvas'
import SignaturePad from 'signature_pad'
import AppearsOn from './appears_on'
let isFontLoaded = false
export default {
name: 'SignatureStep',
components: {
AppearsOn,
IconReload,
IconCamera,
IconTextSize,
app/javascript/submission_form/text_step.vue
+4 -1
View File
@@ -10,6 +10,7 @@
v-else
class="py-1"
/>
<AppearsOn :field="field" />
<div class="items-center flex">
<input
v-if="!isTextArea"
@@ -56,11 +57,13 @@
<script>
import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
import AppearsOn from './appears_on'
export default {
name: 'TextStep',
components: {
IconAlignBoxLeftTop
IconAlignBoxLeftTop,
AppearsOn
},
inject: ['t'],
props: {