draw field on field type click

app/javascript/template_builder/builder.vue

@@ -217,14 +217,22 @@
             <p>
               {{ t('draw_field_on_the_document').replace('{field}', drawField.name) }}
             </p>
-            <p>
+            <div>
               <button
                 class="base-button"
-                @click="[drawField = null, drawOption = null]"
+                @click="clearDrawField"
               >
                 {{ t('cancel') }}
               </button>
-            </p>
+              <a
+                v-if="!drawOption && !drawField.areas.length && !['stamp', 'signature', 'initials'].includes(drawField.type)"
+                href="#"
+                class="link block mt-3 text-sm"
+                @click.prevent="[drawField = null, drawOption = null]"
+              >
+                {{ t('or_add_field_without_drawing') }}
+              </a>
+            </div>
           </div>
         </div>
         <div>
@@ -577,10 +585,21 @@ export default {
 
       ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
-    onKeyUp (e) {
-      if (e.code === 'Escape') {
+    clearDrawField () {
+      if (this.drawField && !this.drawOption && this.drawField.areas.length === 0) {
+        const fieldIndex = this.template.fields.indexOf(this.drawField)
+
+        if (fieldIndex !== -1) {
+          this.template.fields.splice(fieldIndex, 1)
+        }
+      }
       this.drawField = null
       this.drawOption = null
+    },
+    onKeyUp (e) {
+      if (e.code === 'Escape') {
+        this.clearDrawField()
+
         this.selectedAreaRef.value = null
       }
 

app/javascript/template_builder/fields.vue

@@ -131,7 +131,7 @@
         Drag & drop any other field type on the page
       </li>
       <li>
-        Click on the field type above to add it to the form without drawing it on the document
+        Click on the field type above to start drawing it
       </li>
     </ul>
   </div>
@@ -295,7 +295,7 @@ export default {
 
       this.fields.push(field)
 
-      if (['signature', 'initials', 'cells', 'stamp'].includes(type)) {
+      if (!['payment', 'file'].includes(type)) {
         this.$emit('set-draw', { field })
       }
 

app/javascript/template_builder/i18n.js

@@ -30,6 +30,7 @@ const en = {
   ninth_party: 'Ninth Party',
   tenth_party: 'Tenth Party',
   add: 'Add',
+  or_add_field_without_drawing: 'Or add field without drawing',
   text: 'Text',
   signature: 'Signature',
   initials: 'Initials',