with signature id

app/javascript/submission_form/area.vue

@@ -56,11 +56,11 @@
     <div
       v-else-if="field.type === 'signature' && signature"
       class="flex justify-between h-full gap-1 overflow-hidden w-full"
-      :class="isNarrow && (withSignatureId || field.preferences?.reason_field_uuid) ? 'flex-row' : 'flex-col'"
+      :class="isNarrow && (isShowSignatureId || field.preferences?.reason_field_uuid) ? 'flex-row' : 'flex-col'"
     >
       <div
         class="flex overflow-hidden"
-        :class="isNarrow && (withSignatureId || field.preferences?.reason_field_uuid) ? 'w-1/2' : 'flex-grow'"
+        :class="isNarrow && (isShowSignatureId || field.preferences?.reason_field_uuid) ? 'w-1/2' : 'flex-grow'"
         style="min-height: 50%"
       >
         <img
@@ -69,7 +69,7 @@
         >
       </div>
       <div
-        v-if="withSignatureId || field.preferences?.reason_field_uuid"
+        v-if="isShowSignatureId || field.preferences?.reason_field_uuid"
         class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
         :class="isNarrow ? 'w-1/2' : 'w-full'"
       >
@@ -333,6 +333,13 @@ export default {
         verification: this.t('verify_id')
       }
     },
+    isShowSignatureId () {
+      if ([true, false].includes(this.field.preferences?.with_signature_id)) {
+        return this.field.preferences.with_signature_id
+      } else {
+        return this.withSignatureId
+      }
+    },
     alignClasses () {
       if (!this.field.preferences) {
         return { 'items-center': true }

app/javascript/template_builder/area.vue

@@ -140,6 +140,7 @@
               :background-color="'white'"
               :with-required="false"
               :with-areas="false"
+              :with-signature-id="withSignatureId"
               @click-formula="isShowFormulaModal = true"
               @click-font="isShowFontModal = true"
               @click-description="isShowDescriptionModal = true"
@@ -347,6 +348,11 @@ export default {
       required: false,
       default: false
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     defaultSubmitters: {
       type: Array,
       required: false,

app/javascript/template_builder/builder.vue

@@ -330,6 +330,7 @@
                 :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields || drawField"
+                :with-signature-id="withSignatureId"
                 :data-document-uuid="document.uuid"
                 :default-submitters="defaultSubmitters"
                 :drag-field-placeholder="fieldsDragFieldRef.value || dragField"
@@ -436,6 +437,7 @@
             :default-required-fields="defaultRequiredFields"
             :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
+            :with-signature-id="withSignatureId"
             :only-defined-fields="onlyDefinedFields"
             :editable="editable"
             :show-tour-start-form="showTourStartForm"
@@ -541,6 +543,7 @@ export default {
       withPayment: this.withPayment,
       isPaymentConnected: this.isPaymentConnected,
       withFormula: this.withFormula,
+      withSignatureId: this.withSignatureId,
       withConditions: this.withConditions,
       isInlineSize: this.isInlineSize,
       defaultDrawFieldType: this.defaultDrawFieldType,
@@ -563,6 +566,11 @@ export default {
       required: false,
       default: false
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     backgroundColor: {
       type: String,
       required: false,
@@ -1068,6 +1076,11 @@ export default {
         }
       }
 
+      if (type === 'signature' && [true, false].includes(this.withSignatureId)) {
+        field.preferences ||= {}
+        field.preferences.with_signature_id = this.withSignatureId
+      }
+
       this.template.fields.push(field)
 
       this.save()
@@ -1474,6 +1487,11 @@ export default {
           field.preferences ||= {}
           field.preferences.format ||= this.defaultDateFormat
         }
+
+        if (field.type === 'signature' && [true, false].includes(this.withSignatureId)) {
+          field.preferences ||= {}
+          field.preferences.with_signature_id = this.withSignatureId
+        }
       }
 
       const fieldArea = {

app/javascript/template_builder/document.vue

@@ -10,6 +10,7 @@
       :data-page="index"
       :areas="areasIndex[index]"
       :allow-draw="allowDraw"
+      :with-signature-id="withSignatureId"
       :is-drag="isDrag"
       :with-field-placeholder="withFieldPlaceholder"
       :default-fields="defaultFields"
@@ -66,6 +67,11 @@ export default {
       required: false,
       default: false
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     drawFieldType: {
       type: String,
       required: false,

app/javascript/template_builder/field.vue

@@ -125,6 +125,7 @@
                 :field="field"
                 :default-field="defaultField"
                 :editable="editable"
+                :with-signature-id="withSignatureId"
                 :background-color="dropdownBgColor"
                 @click-formula="isShowFormulaModal = true"
                 @click-font="isShowFontModal = true"
@@ -302,6 +303,11 @@ export default {
       type: Object,
       required: true
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     withOptions: {
       type: Boolean,
       required: false,

app/javascript/template_builder/field_settings.vue

@@ -320,6 +320,21 @@
       {{ t('format') }}
     </label>
   </div>
+  <li
+    v-if="[true, false].includes(withSignatureId) && field.type === 'signature'"
+    @click.stop
+  >
+    <label class="cursor-pointer py-1.5">
+      <input
+        :checked="field.preferences?.with_signature_id"
+        type="checkbox"
+        :disabled="!editable || (defaultField && [true, false].includes(defaultField.required))"
+        class="toggle toggle-xs"
+        @change="[field.preferences ||= {}, field.preferences.with_signature_id = $event.target.checked, save()]"
+      >
+      <span class="label-text">{{ t('signature_id') }}</span>
+    </label>
+  </li>
   <li
     v-if="withRequired && field.type !== 'phone' && field.type !== 'stamp' && field.type !== 'verification'"
     @click.stop
@@ -525,6 +540,11 @@ export default {
       type: Object,
       required: true
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     backgroundColor: {
       type: String,
       required: false,

app/javascript/template_builder/fields.vue

@@ -26,6 +26,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable"
+      :with-signature-id="withSignatureId"
       :default-field="defaultFieldsIndex[field.name]"
       :draggable="editable"
       @dragstart="[fieldsDragFieldRef.value = field, removeDragOverlay($event), setDragPlaceholder($event)]"
@@ -253,6 +254,11 @@ export default {
       required: false,
       default: null
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     template: {
       type: Object,
       required: true

app/javascript/template_builder/i18n.js

@@ -1,4 +1,5 @@
 const en = {
+  signature_id: 'Signature ID',
   error_message: 'Error message',
   length: 'Length',
   min: 'Min',
@@ -172,6 +173,7 @@ const en = {
 }
 
 const es = {
+  signature_id: 'ID de Firma',
   error_message: 'Mensaje de error',
   length: 'Longitud',
   min: 'Mín',
@@ -345,6 +347,7 @@ const es = {
 }
 
 const it = {
+  signature_id: 'ID firma',
   error_message: 'Messaggio di errore',
   length: 'Lunghezza',
   min: 'Min',
@@ -518,6 +521,7 @@ const it = {
 }
 
 const pt = {
+  signature_id: 'ID da Assinatura',
   error_message: 'Mensagem de erro',
   length: 'Comprimento',
   min: 'Mín',
@@ -691,6 +695,7 @@ const pt = {
 }
 
 const fr = {
+  signature_id: 'ID de signature',
   error_message: 'Message d\'erreur',
   length: 'Longueur',
   min: 'Min',
@@ -864,6 +869,7 @@ const fr = {
 }
 
 const de = {
+  signature_id: 'Signatur-ID',
   error_message: 'Fehlermeldung',
   length: 'Länge',
   min: 'Min',

app/javascript/template_builder/page.vue

@@ -27,6 +27,7 @@
         :field="item.field"
         :editable="editable"
         :with-field-placeholder="withFieldPlaceholder"
+        :with-signature-id="withSignatureId"
         :default-field="defaultFieldsIndex[item.field.name]"
         :default-submitters="defaultSubmitters"
         :max-page="totalPages - 1"
@@ -78,6 +79,11 @@ export default {
       required: false,
       default: null
     },
+    withSignatureId: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
     areas: {
       type: Array,
       required: false,