allow to drag new fields into page

app/javascript/components/builder.vue

@@ -35,7 +35,9 @@
         :areas-index="fieldAreasIndex[document.uuid]"
         :document="document"
         :is-draw="!!drawField"
+        :is-drag="!!dragFieldType"
         @draw="onDraw"
+        @drop-field="onDropfield"
       />
     </div>
     <div
@@ -55,8 +57,11 @@
       <div>
         FIelds
         <Fields
+          ref="fields"
           v-model:fields="flow.fields"
           @set-draw="drawField = $event"
+          @set-drag="dragFieldType = $event"
+          @drag-end="dragFieldType = null"
         />
       </div>
     </div>
@@ -84,6 +89,7 @@ export default {
   data () {
     return {
       drawField: null,
+      dragFieldType: null,
       flow: {
         name: '',
         schema: [],
@@ -134,6 +140,9 @@ export default {
 
       this.drawField = null
     },
+    onDropfield (area) {
+      this.$refs.fields.addField(this.dragFieldType, area)
+    },
     updateFromUpload ({ schema, documents }) {
       this.flow.schema.push(...schema)
       this.flow.documents.push(...documents)

app/javascript/components/document.vue

@@ -5,8 +5,10 @@
     :number="index"
     :areas="areasIndex[index]"
     :is-draw="isDraw"
+    :is-drag="isDrag"
     :class="{ 'cursor-crosshair': isDraw }"
     :image="image"
+    @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
     @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
   />
 </template>
@@ -32,9 +34,14 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    isDrag: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ['draw'],
+  emits: ['draw', 'drop-field'],
   computed: {
     sortedPreviewImages () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))

app/javascript/components/field.vue

@@ -1,6 +1,11 @@
 <template>
+  <div>
+    <button @click="$emit('remove', field)">
+      Remove
+    </button>
     <div>
       {{ field.type }}
+    </div>
     <div v-if="field.type !== 'signature'">
       <label>Name</label>
       <input
@@ -24,7 +29,10 @@
           Remove
         </button>
       </div>
-      <button @click="field.options.push('')">
+      <button
+        v-if="field.options"
+        @click="field.options.push('')"
+      >
         Add option
       </button>
     </div>
@@ -66,7 +74,7 @@ export default {
       required: true
     }
   },
-  emits: ['set-draw'],
+  emits: ['set-draw', 'remove'],
   computed: {
     areas () {
       return this.field.areas || []

app/javascript/components/fields.vue

@@ -5,16 +5,42 @@
       :key="field.uuid"
       class="border"
       :field="field"
+      @remove="fields.splice(fields.indexOf($event), 1)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
   <button
     v-for="item in fieldTypes"
     :key="item.type"
-    class="block w-full"
+    draggable="true"
+    class="w-full flex items-center justify-center"
+    @dragstart="onDragstart(item.value)"
+    @dragend="$emit('drag-end')"
     @click="addField(item.value)"
   >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="cursor-move"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        stroke="none"
+        d="M0 0h24v24H0z"
+        fill="none"
+      />
+      <path d="M4 6l16 0" />
+      <path d="M4 12l16 0" />
+      <path d="M4 18l16 0" />
+    </svg>
     Add {{ item.label }}
+    &plus;
   </button>
 </template>
 
@@ -33,7 +59,7 @@ export default {
       required: true
     }
   },
-  emits: ['set-draw'],
+  emits: ['set-draw', 'set-drag', 'drag-end'],
   computed: {
     fieldTypes () {
       return [
@@ -49,7 +75,10 @@ export default {
     }
   },
   methods: {
-    addField (type) {
+    onDragstart (fieldType) {
+      this.$emit('set-drag', fieldType)
+    },
+    addField (type, area = null) {
       const field = {
         name: type === 'signature' ? 'Signature' : '',
         uuid: v4(),
@@ -61,6 +90,10 @@ export default {
         field.options = ['']
       }
 
+      if (area) {
+        field.areas = [area]
+      }
+
       this.fields.push(field)
     }
   }

app/javascript/components/page.vue

@@ -28,12 +28,14 @@
       />
     </div>
     <div
-      v-show="isDraw || showMask"
+      v-show="isDraw || isDrag || showMask"
       id="mask"
       ref="mask"
       class="top-0 bottom-0 left-0 right-0 absolute"
       @pointerdown="onPointerdown"
       @pointermove="onPointermove"
+      @dragover.prevent
+      @drop="onDrop"
       @pointerup="onPointerup"
     />
   </div>
@@ -62,12 +64,17 @@ export default {
       required: false,
       default: false
     },
+    isDrag: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     number: {
       type: Number,
       required: true
     }
   },
-  emits: ['draw'],
+  emits: ['draw', 'drop-field'],
   data () {
     return {
       scale: 1,
@@ -95,6 +102,15 @@ export default {
     onResize () {
       this.scale = this.$refs.image.clientWidth / this.image.metadata.width
     },
+    onDrop (e) {
+      this.$emit('drop-field', {
+        x: e.layerX / this.scale,
+        y: e.layerY / this.scale,
+        w: 200,
+        h: 40,
+        page: this.number
+      })
+    },
     onPointerdown (e) {
       if (this.isDraw) {
         this.newArea = {