From e84be523c6719045bc0db9e0576c8da6d68de0d1 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 24 Jan 2024 23:20:53 +0200
Subject: [PATCH] add show field names prop

---
 app/javascript/submission_form/date_step.vue  |  7 ++++-
 app/javascript/submission_form/form.vue       | 28 +++++++++++++------
 app/javascript/submission_form/i18n.js        | 10 +++++++
 app/javascript/submission_form/image_step.vue |  8 +++++-
 .../submission_form/initials_step.vue         |  7 ++++-
 .../submission_form/multi_select_step.vue     | 20 +++++++++----
 app/javascript/submission_form/phone_step.vue |  7 ++++-
 .../submission_form/signature_step.vue        |  7 ++++-
 app/javascript/submission_form/text_step.vue  |  7 ++++-
 9 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/app/javascript/submission_form/date_step.vue b/app/javascript/submission_form/date_step.vue
index d4646676..751a9247 100644
--- a/app/javascript/submission_form/date_step.vue
+++ b/app/javascript/submission_form/date_step.vue
@@ -4,7 +4,7 @@
       <label
         :for="field.uuid"
         class="label text-2xl"
-      >{{ field.name || t('date') }}
+      >{{ field.name && showFieldNames ? field.name : t('date') }}
         <template v-if="!field.required">({{ t('optional') }})</template>
       </label>
       <button
@@ -46,6 +46,11 @@ export default {
       type: Object,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 8e740f14..441cfb09 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -4,7 +4,7 @@
     :steps="stepFields"
     :values="values"
     :attachments-index="attachmentsIndex"
-    :with-label="!isAnonymousChecboxes"
+    :with-label="!isAnonymousChecboxes && showFieldNames"
     :current-step="currentStepFields"
     @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
   />
@@ -64,6 +64,7 @@
             <TextStep
               :key="currentField.uuid"
               v-model="values[currentField.uuid]"
+              :show-field-names="showFieldNames"
               :field="currentField"
               @focus="scrollIntoField(currentField)"
             />
@@ -72,12 +73,13 @@
             v-else-if="currentField.type === 'date'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
             :field="currentField"
             @focus="scrollIntoField(currentField)"
           />
           <div v-else-if="currentField.type === 'select'">
             <label
-              v-if="currentField.name"
+              v-if="showFieldNames && currentField.name"
               :for="currentField.uuid"
               dir="auto"
               class="label text-2xl mb-2"
@@ -116,17 +118,17 @@
           </div>
           <div v-else-if="currentField.type === 'radio'">
             <label
-              v-if="currentField.name"
+              v-if="showFieldNames && currentField.name"
               :for="currentField.uuid"
               dir="auto"
               class="label text-2xl mb-2"
             >{{ currentField.name }}
               <template v-if="!currentField.required">({{ t('optional') }})</template>
             </label>
-            <div class="flex w-full">
+            <div class="flex w-full max-h-44 overflow-y-auto">
               <div
-                v-if="currentField.options.length > 5"
-                class="text-xl text-center w-full"
+                v-if="!showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4)"
+                class="text-xl px-1"
               >
                 <span
                   @click="scrollIntoField(currentField)"
@@ -136,7 +138,7 @@
               </div>
               <div
                 class="space-y-3.5 mx-auto"
-                :class="{ hidden: currentField.options.length > 5 }"
+                :class="{ hidden: !showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4) }"
               >
                 <div
                   v-for="(option, index) in currentField.options"
@@ -167,6 +169,7 @@
             v-else-if="currentField.type === 'multiple'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
+            :show-field-names="showFieldNames"
             :is-last-step="stepFields.length === currentStep + 1"
             :field="currentField"
           />
@@ -182,7 +185,7 @@
             <div
               class="space-y-3.5 mx-auto"
             >
-              <template v-if="isAnonymousChecboxes">
+              <template v-if="isAnonymousChecboxes || !showFieldNames">
                 <span class="text-xl">
                   {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ stepFields.length === currentStep + 1 ? t('submit') : t('next') }}</span>.
                 </span>
@@ -242,6 +245,7 @@
             :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
+            :show-field-names="showFieldNames"
             @attached="[attachments.push($event), scrollIntoField(currentField)]"
           />
           <SignatureStep
@@ -255,6 +259,7 @@
             :with-typed-signature="withTypedSignature"
             :attachments-index="attachmentsIndex"
             :submitter-slug="submitterSlug"
+            :show-field-names="showFieldNames"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
             @minimize="isFormVisible = false"
@@ -268,6 +273,7 @@
             :previous-value="previousInitialsValue"
             :is-direct-upload="isDirectUpload"
             :attachments-index="attachmentsIndex"
+            :show-field-names="showFieldNames"
             :submitter-slug="submitterSlug"
             @attached="attachments.push($event)"
             @start="scrollIntoField(currentField)"
@@ -290,6 +296,7 @@
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"
+            :show-field-names="showFieldNames"
             :default-value="submitter.phone"
             :submitter-slug="submitterSlug"
             @focus="scrollIntoField(currentField)"
@@ -446,6 +453,11 @@ export default {
       required: false,
       default: false
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     withTypedSignature: {
       type: Boolean,
       required: false,
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 19b94434..3d6f41ad 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -17,6 +17,7 @@ const en = {
   initials: 'Initials',
   clear: 'Clear',
   redraw: 'Redraw',
+  image: 'Image',
   draw_initials: 'Draw initials',
   type_signature_here: 'Type signature here',
   type_initial_here: 'Type initials here',
@@ -64,6 +65,7 @@ const es = {
   initials: 'Iniciales',
   clear: 'Borrar',
   redraw: 'Redibujar',
+  image: 'Imagen',
   draw_initials: 'Dibujar iniciales',
   type_signature_here: 'Escribe la firma aquí',
   type_initial_here: 'Escribe las iniciales aquí',
@@ -111,6 +113,7 @@ const it = {
   initials: 'Iniziali',
   clear: 'Cancella',
   redraw: 'Ridisegna',
+  image: 'Immagine',
   draw_initials: 'Disegna iniziali',
   type_signature_here: 'Scrivi la firma qui',
   type_initial_here: 'Scrivi le iniziali qui',
@@ -158,6 +161,7 @@ const de = {
   initials: 'Initialen',
   clear: 'Löschen',
   redraw: 'Neu zeichnen',
+  image: 'Bild',
   draw_initials: 'Initialen zeichnen',
   type_signature_here: 'Unterschrift hier eingeben',
   type_initial_here: 'Initialen hier eingeben',
@@ -205,6 +209,7 @@ const fr = {
   initials: 'Initiales',
   clear: 'Effacer',
   redraw: 'Redessiner',
+  image: 'Image',
   draw_initials: 'Dessiner les initiales',
   type_signature_here: 'Tapez la signature ici',
   type_initial_here: 'Tapez les initiales ici',
@@ -252,6 +257,7 @@ const pl = {
   initials: 'Inicjały',
   clear: 'Wyczyść',
   redraw: 'Przerysuj',
+  image: 'Obraz',
   draw_initials: 'Narysuj inicjały',
   type_signature_here: 'Wpisz podpis tutaj',
   type_initial_here: 'Wpisz inicjały tutaj',
@@ -299,6 +305,7 @@ const uk = {
   initials: 'Ініціали',
   clear: 'Очистити',
   redraw: 'Перемалювати',
+  image: 'Зображення',
   draw_initials: 'Намалювати ініціали',
   type_signature_here: 'Введіть підпис тут',
   type_initial_here: 'Введіть ініціали тут',
@@ -346,6 +353,7 @@ const cs = {
   initials: 'Iniciály',
   clear: 'Smazat',
   redraw: 'Překreslit',
+  image: 'Obrázek',
   draw_initials: 'Nakreslit iniciály',
   type_signature_here: 'Sem zadejte podpis',
   type_initial_here: 'Sem zadejte iniciály',
@@ -393,6 +401,7 @@ const pt = {
   initials: 'Iniciais',
   clear: 'Limpar',
   redraw: 'Redesenhar',
+  image: 'Imagem',
   draw_initials: 'Desenhar iniciais',
   type_signature_here: 'Digite a assinatura aqui',
   type_initial_here: 'Digite as iniciais aqui',
@@ -441,6 +450,7 @@ const he = {
   initials: 'ציוני ראשי תיבות',
   clear: 'נקה',
   redraw: 'צייר מחדש',
+  image: 'תמונה',
   draw_initials: 'צייר ציוני ראשי תיבות',
   type_signature_here: 'הקלד חתימה כאן',
   type_initial_here: 'הקלד ציוני ראשי תיבות כאן',
diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue
index ecc31f63..c9784c4f 100644
--- a/app/javascript/submission_form/image_step.vue
+++ b/app/javascript/submission_form/image_step.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || 'Image' }}</label>
+      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
       <button
         class="btn btn-outline btn-sm"
         @click.prevent="remove"
@@ -46,6 +46,7 @@ export default {
     FileDropzone,
     IconReload
   },
+  inject: ['t'],
   props: {
     field: {
       type: Object,
@@ -56,6 +57,11 @@ export default {
       required: true,
       default: false
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitterSlug: {
       type: String,
       required: true
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index 2e64feb0..84eed8c4 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/app/javascript/submission_form/initials_step.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || t('initials') }}</label>
+      >{{ showFieldNames && field.name ? field.name : t('initials') }}</label>
       <div class="space-x-2 flex">
         <span
           v-if="isDrawInitials"
@@ -125,6 +125,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
diff --git a/app/javascript/submission_form/multi_select_step.vue b/app/javascript/submission_form/multi_select_step.vue
index dafa5fb9..b3368e04 100644
--- a/app/javascript/submission_form/multi_select_step.vue
+++ b/app/javascript/submission_form/multi_select_step.vue
@@ -1,11 +1,11 @@
 <template>
   <label
-    v-if="field.name"
+    v-if="showFieldNames && field.name"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl mb-2"
   >{{ field.name }}</label>
-  <div class="flex w-full">
+  <div class="flex w-full max-h-44 overflow-y-auto">
     <input
       v-if="modelValue.length === 0"
       type="text"
@@ -14,8 +14,8 @@
       class="hidden"
     >
     <div
-      v-if="field.options.length > 5"
-      class="text-xl text-center w-full"
+      v-if="!showOptions"
+      class="text-xl px-1"
     >
       <span @click="scrollIntoField(field)">
         {{ t('complete_hightlighted_checkboxes_and_click') }} <span class="font-semibold">{{ isLastStep ? t('submit') : t('next') }}</span>.
@@ -23,7 +23,7 @@
     </div>
     <div
       class="space-y-3.5 mx-auto"
-      :class="{ hidden: field.options.length > 5 }"
+      :class="{ hidden: !showOptions }"
     >
       <div
         v-for="(option, index) in field.options"
@@ -66,6 +66,11 @@ export default {
       required: true,
       default: false
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: Array,
       required: false,
@@ -78,6 +83,11 @@ export default {
       inputRefs: []
     }
   },
+  computed: {
+    showOptions () {
+      return this.showFieldNames && (this.field.options.some((e) => e.value) || this.field.options.length < 5)
+    }
+  },
   beforeUpdate () {
     this.inputRefs = []
   },
diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index ba9f0c97..01281351 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/app/javascript/submission_form/phone_step.vue
@@ -3,7 +3,7 @@
     <label
       :for="isCodeSent ? 'one_time_code' : field.uuid"
       class="label text-2xl mb-2"
-    >{{ field.name || t('verified_phone_number') }}
+    >{{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
       <template v-if="!field.required">({{ t('optional') }})</template>
     </label>
     <div>
@@ -93,6 +93,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index 6a45618b..4905af48 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -3,7 +3,7 @@
     <div class="flex justify-between items-center w-full mb-2">
       <label
         class="label text-2xl"
-      >{{ field.name || t('signature') }}</label>
+      >{{ showFieldNames && field.name ? field.name : t('signature') }}</label>
       <div class="space-x-2 flex">
         <span
           v-if="isTextSignature"
@@ -147,6 +147,11 @@ export default {
       type: String,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isDirectUpload: {
       type: Boolean,
       required: true,
diff --git a/app/javascript/submission_form/text_step.vue b/app/javascript/submission_form/text_step.vue
index f9a1712f..c58e8afd 100644
--- a/app/javascript/submission_form/text_step.vue
+++ b/app/javascript/submission_form/text_step.vue
@@ -1,6 +1,6 @@
 <template>
   <label
-    v-if="field.name"
+    v-if="showFieldNames && field.name"
     :for="field.uuid"
     dir="auto"
     class="label text-2xl"
@@ -81,6 +81,11 @@ export default {
       type: Object,
       required: true
     },
+    showFieldNames: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     modelValue: {
       type: String,
       required: false,