Resolve "Make the select options of the single select field orderable"

changelog.md

@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Made it possible to list table field meta-data with a token.
+* Single select options can now be ordered by drag and drop. 
 
 ## Released (2021-06-02)
 

web-frontend/modules/core/assets/scss/components/select_options.scss

@@ -1,5 +1,5 @@
 .select-options {
-  // Nothing
+  position: relative;
 }
 
 .select-options__item {
@@ -34,3 +34,12 @@
     color: $color-neutral-400;
   }
 }
+
+.select-options__drag-handle {
+  width: 12px;
+  margin: 4px 8px 4px 0;
+  cursor: grab;
+  background-image: radial-gradient($color-neutral-200 40%, transparent 40%);
+  background-size: 4px 4px;
+  background-repeat: repeat;
+}

web-frontend/modules/core/directives/sortable.js

@@ -92,6 +92,7 @@ export default {
     el.sortableId = binding.value.id
     el.sortableMarginLeft = binding.value.marginLeft
     el.sortableMarginRight = binding.value.marginRight
+    el.sortableMarginTop = binding.value.marginTop
   },
   /**
    * Called when the user moves the mouse when the dragging of the element has
@@ -163,7 +164,8 @@ export default {
         ? beforeRect.top - indicator.clientHeight
         : afterRect.top + afterRect.height) -
       parentRect.top +
-      parent.scrollTop
+      parent.scrollTop +
+      (el.sortableMarginTop || 0)
     const left = elementRect.left - parentRect.left
     indicator.style.left = left + (el.sortableMarginLeft || 0) + 'px'
     indicator.style.width =

web-frontend/modules/database/components/field/FieldSelectOptions.vue

@@ -1,27 +1,36 @@
 <template>
-  <div class="select-options">
-    <div
-      v-for="(item, index) in value"
-      :key="item.id"
-      class="select-options__item"
-    >
-      <a
-        :ref="'color-select-' + index"
-        :class="'select-options__color' + ' background-color--' + item.color"
-        @click="openColor(index)"
+  <div>
+    <div class="select-options">
+      <div
+        v-for="(item, index) in value"
+        :key="item.id"
+        v-sortable="{
+          id: item.id,
+          update: order,
+          handle: '[data-sortable-handle]',
+          marginTop: -3,
+        }"
+        class="select-options__item"
       >
-        <i class="fas fa-caret-down"></i>
-      </a>
-      <input
-        v-model="item.value"
-        class="input select-options__value"
-        :class="{ 'input--error': $v.value.$each[index].value.$error }"
-        @input="$emit('input', value)"
-        @blur="$v.value.$each[index].value.$touch()"
-      />
-      <a class="select-options__remove" @click.stop.prevent="remove(index)">
-        <i class="fas fa-times"></i>
-      </a>
+        <div class="select-options__drag-handle" data-sortable-handle></div>
+        <a
+          :ref="'color-select-' + index"
+          :class="'select-options__color' + ' background-color--' + item.color"
+          @click="openColor(index)"
+        >
+          <i class="fas fa-caret-down"></i>
+        </a>
+        <input
+          v-model="item.value"
+          class="input select-options__value"
+          :class="{ 'input--error': $v.value.$each[index].value.$error }"
+          @input="$emit('input', value)"
+          @blur="$v.value.$each[index].value.$touch()"
+        />
+        <a class="select-options__remove" @click.stop.prevent="remove(index)">
+          <i class="fas fa-times"></i>
+        </a>
+      </div>
     </div>
     <a class="add" @click="add()">
       <i class="fas fa-plus add__icon"></i>
@@ -81,6 +90,16 @@ export default {
       this.value[index].color = color
       this.$emit('input', this.value)
     },
+    order(newOrder, oldOrder) {
+      const sortedValue = this.value
+        .slice()
+        .sort(
+          (a, b) =>
+            newOrder.findIndex((id) => id === a.id) -
+            newOrder.findIndex((id) => id === b.id)
+        )
+      this.$emit('input', sortedValue)
+    },
   },
   validations: {
     value: {