add stamp field type

app/javascript/submission_form/area.vue

@@ -42,6 +42,11 @@
       class="object-contain mx-auto"
       :src="image.url"
     >
+    <img
+      v-else-if="field.type === 'stamp' && stamp"
+      class="object-contain mx-auto"
+      :src="stamp.url"
+    >
     <img
       v-else-if="field.type === 'signature' && signature"
       class="object-contain mx-auto"
@@ -158,7 +163,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -225,6 +230,7 @@ export default {
         signature: 'Signature',
         date: 'Date',
         image: 'Image',
+        stamp: 'Stamp',
         initials: 'Initials',
         file: 'File',
         select: 'Select',
@@ -246,6 +252,7 @@ export default {
         select: IconSelect,
         checkbox: IconCheckbox,
         radio: IconCircleDot,
+        stamp: IconRubberStamp,
         cells: IconColumns3,
         multiple: IconChecks,
         phone: IconPhoneCheck,
@@ -259,6 +266,13 @@ export default {
         return null
       }
     },
+    stamp () {
+      if (this.field.type === 'stamp') {
+        return this.attachmentsIndex[this.modelValue]
+      } else {
+        return null
+      }
+    },
     signature () {
       if (this.field.type === 'signature') {
         return this.attachmentsIndex[this.modelValue]

app/javascript/submission_form/form.vue

@@ -206,7 +206,7 @@
             </div>
           </div>
           <ImageStep
-            v-else-if="currentField.type === 'image'"
+            v-else-if="currentField.type === 'image' || currentField.type === 'stamp'"
             :key="currentField.uuid"
             v-model="values[currentField.uuid]"
             :field="currentField"

app/javascript/template_builder/builder.vue

@@ -493,6 +493,10 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (type === 'stamp') {
+        field.readonly = true
+      }
+
       if (type === 'date') {
         field.preferences = {
           format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
@@ -675,6 +679,10 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (field.type === 'stamp') {
+        field.readonly = true
+      }
+
       if (field.type === 'date') {
         field.preferences = {
           format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'
@@ -707,7 +715,7 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
-        } else if (field.type === 'signature') {
+        } else if (field.type === 'signature' || field.type === 'stamp') {
           baseArea = {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2

app/javascript/template_builder/field_type.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -92,8 +92,9 @@ export default {
         multiple: 'Multiple',
         radio: 'Radio',
         cells: 'Cells',
-        phone: 'Phone',
-        payment: 'Payment'
+        stamp: 'Stamp',
+        payment: 'Payment',
+        phone: 'Phone'
       }
     },
     fieldIcons () {
@@ -104,13 +105,14 @@ export default {
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,
-        select: IconSelect,
         checkbox: IconCheckbox,
         radio: IconCircleDot,
+        select: IconSelect,
         multiple: IconChecks,
         cells: IconColumns3,
-        phone: IconPhoneCheck,
-        payment: IconCreditCard
+        stamp: IconRubberStamp,
+        payment: IconCreditCard,
+        phone: IconPhoneCheck
       }
     }
   },

app/javascript/template_builder/fields.vue

@@ -261,6 +261,10 @@ export default {
         field.options = [{ value: '', uuid: v4() }]
       }
 
+      if (type === 'stamp') {
+        field.readonly = true
+      }
+
       if (type === 'date') {
         field.preferences = {
           format: Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US') ? 'MM/DD/YYYY' : 'DD/MM/YYYY'