From f74ad050b40609a331452425ac9b80b5aed41760 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 10 Jan 2024 23:18:30 +0200
Subject: [PATCH] add field types prop

---
 app/javascript/template_builder/builder.vue       | 14 +++++++++++++-
 app/javascript/template_builder/field_type.vue    |  4 ++--
 app/javascript/template_builder/fields.vue        |  9 +++++++--
 app/javascript/template_builder/mobile_fields.vue |  7 ++++++-
 app/javascript/template_builder/page.vue          | 10 +++++++++-
 5 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 6f4d005b..9a0fe75d 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -199,6 +199,7 @@
           v-if="sortedDocuments.length && !drawField && editable"
           :fields="template.fields"
           :default-fields="defaultFields"
+          :field-types="fieldTypes"
           :selected-submitter="selectedSubmitter"
           @select="startFieldDraw($event)"
         />
@@ -244,6 +245,7 @@
             :with-help="withHelp"
             :default-submitters="defaultSubmitters"
             :default-fields="defaultFields"
+            :field-types="fieldTypes"
             :with-sticky-submitters="withStickySubmitters"
             :only-defined-fields="onlyDefinedFields"
             :editable="editable"
@@ -299,6 +301,7 @@ export default {
       save: this.save,
       t: this.t,
       baseFetch: this.baseFetch,
+      fieldTypes: this.fieldTypes,
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
       withPayment: this.withPayment,
@@ -345,6 +348,11 @@ export default {
       required: false,
       default: () => []
     },
+    fieldTypes: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     defaultSubmitters: {
       type: Array,
       required: false,
@@ -724,7 +732,11 @@ export default {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
         const pageMask = documentRef.pageRefs[area.page].$refs.mask
 
-        const type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
+        let type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
+
+        if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes(type)) {
+          type = this.fieldTypes[0]
+        }
 
         if (type === 'checkbox') {
           const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 23466aac..f3370ab4 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -29,7 +29,7 @@
         v-for="(icon, type) in fieldIcons"
         :key="type"
       >
-        <li v-if="(withPhone || type != 'phone') && (withPayment || type != 'payment')">
+        <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
           <a
             href="#"
             class="text-sm py-1 px-2"
@@ -54,7 +54,7 @@ import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckb
 
 export default {
   name: 'FiledTypeDropdown',
-  inject: ['withPhone', 'withPayment', 't'],
+  inject: ['withPhone', 'withPayment', 't', 'fieldTypes'],
   props: {
     modelValue: {
       type: String,
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 79f911a5..f16e8dab 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -72,7 +72,7 @@
       :key="type"
     >
       <button
-        v-if="(withPhone || type != 'phone') && (withPayment || type != 'payment')"
+        v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
         draggable="true"
         class="group flex items-center justify-center border border-dashed border-base-300 hover:border-base-content/20 w-full rounded relative"
         :style="{ backgroundColor: backgroundColor }"
@@ -91,7 +91,7 @@
         </div>
       </button>
       <div
-        v-else-if="type == 'phone'"
+        v-else-if="type == 'phone' && (fieldTypes.length === 0 || fieldTypes.includes(type))"
         class="tooltip tooltip-bottom flex"
         :class="{'tooltip-bottom-start': !withPayment, 'tooltip-bottom': withPayment }"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
@@ -190,6 +190,11 @@ export default {
       required: false,
       default: true
     },
+    fieldTypes: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     submitters: {
       type: Array,
       required: true
diff --git a/app/javascript/template_builder/mobile_fields.vue b/app/javascript/template_builder/mobile_fields.vue
index 46c3d66d..4adbfd11 100644
--- a/app/javascript/template_builder/mobile_fields.vue
+++ b/app/javascript/template_builder/mobile_fields.vue
@@ -48,7 +48,7 @@
           v-for="(icon, type) in fieldIcons"
           :key="type"
         >
-          <li v-if="(withPhone || type != 'phone') && (withPayment || type != 'payment')">
+          <li v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')">
             <a
               href="#"
               class="text-sm py-1 px-2"
@@ -94,6 +94,11 @@ export default {
       type: Object,
       required: true
     },
+    fieldTypes: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     defaultFields: {
       type: Array,
       required: false,
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index ef6ef3cd..08b684ab 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -33,7 +33,7 @@
       <FieldArea
         v-if="newArea"
         :is-draw="true"
-        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || 'text' }"
+        :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || defaultFieldType }"
         :area="newArea"
       />
     </div>
@@ -60,6 +60,7 @@ export default {
   components: {
     FieldArea
   },
+  inject: ['fieldTypes'],
   props: {
     image: {
       type: Object,
@@ -115,6 +116,13 @@ export default {
     }
   },
   computed: {
+    defaultFieldType () {
+      if (this.fieldTypes.length !== 0 && !this.fieldTypes.includes('text')) {
+        return this.fieldTypes[0]
+      } else {
+        return 'text'
+      }
+    },
     isMobile () {
       return /android|iphone|ipad/i.test(navigator.userAgent)
     },