style builder ui

app/javascript/template_builder/fields.vue

@@ -1,52 +1,67 @@
 <template>
-  <div class="space-y-2">
+  <div class="mb-2">
     <Field
       v-for="field in fields"
       :key="field.uuid"
-      class="border"
       :field="field"
+      :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       @remove="fields.splice(fields.indexOf($event), 1)"
+      @move-up="move(field, -1)"
+      @move-down="move(field, 1)"
+      @scroll-to="$emit('scroll-to-area', $event)"
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <button
-    v-for="item in fieldTypes"
-    :key="item.type"
-    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"
+  <div class="grid grid-cols-3 gap-1">
+    <button
+      v-for="item in fieldTypes"
+      :key="item.type"
+      draggable="true"
+      class="flex items-center justify-center border border-dashed border-gray-300 bg-base-100 w-full rounded relative"
+      @dragstart="onDragstart(item.value)"
+      @dragend="$emit('drag-end')"
+      @click="addField(item.value)"
     >
-      <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>
+      <div class="w-0 absolute left-0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="cursor-grab"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            stroke="none"
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+          <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+        </svg>
+      </div>
+      <div class="flex items-center flex-col px-2 py-2">
+        <component :is="item.icon" />
+        <span class="text-xs mt-1">
+          {{ item.label }}
+        </span>
+      </div>
+    </button>
+  </div>
 </template>
 
 <script>
 import Field from './field'
 import { v4 } from 'uuid'
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot } from '@tabler/icons-vue'
 
 export default {
   name: 'TemplateFields',
@@ -59,18 +74,18 @@ export default {
       required: true
     }
   },
-  emits: ['set-draw', 'set-drag', 'drag-end'],
+  emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area'],
   computed: {
     fieldTypes () {
       return [
-        { label: 'Text', value: 'text' },
-        { label: 'Signature', value: 'signature' },
-        { label: 'Date', value: 'date' },
-        { label: 'Image', value: 'image' },
-        { label: 'Attachment', value: 'attachment' },
-        { label: 'Select', value: 'select' },
-        { label: 'Checkbox', value: 'checkbox' },
-        { label: 'Radio Group', value: 'radio' }
+        { label: 'Text', value: 'text', icon: IconTextSize },
+        { label: 'Signature', value: 'signature', icon: IconWriting },
+        { label: 'Date', value: 'date', icon: IconCalendarEvent },
+        { label: 'Image', value: 'image', icon: IconPhoto },
+        { label: 'File', value: 'attachment', icon: IconPaperclip },
+        { label: 'Select', value: 'select', icon: IconSelect },
+        { label: 'Checkbox', value: 'checkbox', icon: IconCheckbox },
+        { label: 'Radio', value: 'radio', icon: IconCircleDot }
       ]
     }
   },
@@ -78,6 +93,19 @@ export default {
     onDragstart (fieldType) {
       this.$emit('set-drag', fieldType)
     },
+    move (field, direction) {
+      const currentIndex = this.fields.indexOf(field)
+
+      this.fields.splice(currentIndex, 1)
+
+      if (currentIndex + direction > this.fields.length) {
+        this.fields.unshift(field)
+      } else if (currentIndex + direction < 0) {
+        this.fields.push(field)
+      } else {
+        this.fields.splice(currentIndex + direction, 0, field)
+      }
+    },
     addField (type, area = null) {
       const field = {
         name: type === 'signature' ? 'Signature' : '',