show field area pages list inthe form

app/javascript/submission_form/appears_on.vue

@@ -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

@@ -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 (field?.areas) {
-        if (area.field === field) {
+        this.scrollIntoArea(field.areas[0])
-          const root = this.$root.$el.parentNode.getRootNode()
+      }
-          const container = root.body || root.querySelector('div')
+    },
+    scrollIntoArea (area) {
+      const areaRef = this.areaRefs.find((a) => a.area === area)
 
-          if (container.style.overflow === 'hidden') {
+      if (areaRef) {
-            this.scrollInContainer(area.$el)
+        const root = this.$root.$el.parentNode.getRootNode()
-          } else {
+        const container = root.body || root.querySelector('div')
-            area.$refs.scrollToElem.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          }
 
-          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

@@ -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

@@ -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)"
+            @start="scrollIntoField(currentField)"
-            @focus="$refs.areas.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

@@ -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

@@ -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

@@ -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

@@ -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: {