diff --git a/app/javascript/submission_form/appears_on.vue b/app/javascript/submission_form/appears_on.vue
new file mode 100644
index 00000000..780d92f2
--- /dev/null
+++ b/app/javascript/submission_form/appears_on.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
diff --git a/app/javascript/submission_form/areas.vue b/app/javascript/submission_form/areas.vue
index 2d92b781..a82ce7bf 100644
--- a/app/javascript/submission_form/areas.vue
+++ b/app/javascript/submission_form/areas.vue
@@ -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()
diff --git a/app/javascript/submission_form/date_step.vue b/app/javascript/submission_form/date_step.vue
index 1f1de115..f25a4e8f 100644
--- a/app/javascript/submission_form/date_step.vue
+++ b/app/javascript/submission_form/date_step.vue
@@ -15,6 +15,7 @@
{{ t('set_today') }}
+
import { IconCalendarCheck } from '@tabler/icons-vue'
+import AppearsOn from './appears_on'
export default {
name: 'DateStep',
components: {
- IconCalendarCheck
+ IconCalendarCheck,
+ AppearsOn
},
inject: ['t'],
props: {
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index a74ec8fc..d8a78dbb 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -65,7 +65,7 @@
:key="currentField.uuid"
v-model="values[currentField.uuid]"
:field="currentField"
- @focus="$refs.areas.scrollIntoField(currentField)"
+ @focus="scrollIntoField(currentField)"
/>
+
@@ -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
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 0280b9bd..9a5c0ccf 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -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',
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index d82ea76d..88115d33 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/app/javascript/submission_form/initials_step.vue
@@ -70,6 +70,7 @@
+
+
+
import { IconAlignBoxLeftTop } from '@tabler/icons-vue'
+import AppearsOn from './appears_on'
export default {
name: 'TextStep',
components: {
- IconAlignBoxLeftTop
+ IconAlignBoxLeftTop,
+ AppearsOn
},
inject: ['t'],
props: {