From 31fc558ef1aa4e46ce2d8a52165fb047a7ff405b Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Tue, 18 Apr 2023 12:30:50 +0100
Subject: [PATCH] Add draggable effect to options list in select configurator

---
 .../ModuleFields/Configurator/Select.vue      | 120 +++++++++++++-----
 .../components/ModuleFields/Editor/Select.vue |   4 +-
 2 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
index 95fc4d092..8f4c9422c 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
@@ -4,44 +4,94 @@
       <b-form-group
         :label="$t('kind.select.optionsLabel')"
       >
-        <b-input-group
-          v-for="(option, index) in f.options.options"
-          :key="index"
-          class="mb-1"
+        <b-table-simple
+          borderless
+          small
+          responsive="lg"
         >
-          <b-form-input
-            v-model.trim="f.options.options[index].value"
-            plain
-            size="sm"
-            :placeholder="$t('kind.select.optionValuePlaceholder')"
-          />
+          <b-thead>
+            <b-tr>
+              <b-th />
 
-          <b-form-input
-            v-model.trim="f.options.options[index].text"
-            plain
-            size="sm"
-            :placeholder="$t('kind.select.optionLabelPlaceholder')"
-          />
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('kind.select.optionValuePlaceholder') }}
+              </b-th>
 
-          <b-input-group-append>
-            <field-select-translator
-              v-if="field"
-              :field="field"
-              :module="module"
-              :highlight-key="`meta.options.${option.value}.text`"
-              size="sm"
-              :disabled="isNew || option.new"
-              button-variant="light"
-            />
-            <b-button
-              variant="outline-danger"
-              class="border-0"
-              @click.prevent="f.options.options.splice(index, 1)"
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('kind.select.optionLabelPlaceholder') }}
+              </b-th>
+
+              <b-th />
+            </b-tr>
+          </b-thead>
+
+          <draggable
+            v-model="f.options.options"
+            group="sort"
+            handle=".grab"
+            tag="tbody"
+          >
+            <b-tr
+              v-for="(option, index) in f.options.options"
+              :key="index"
             >
-              <font-awesome-icon :icon="['far', 'trash-alt']" />
-            </b-button>
-          </b-input-group-append>
-        </b-input-group>
+              <b-td class="d-flex align-items-center justify-content-center">
+                <font-awesome-icon
+                  :icon="['fas', 'bars']"
+                  class="grab text-light"
+                />
+              </b-td>
+              <b-td
+                style="min-width: 200px;"
+              >
+                <b-form-input
+                  v-model.trim="f.options.options[index].value"
+                  plain
+                  size="sm"
+                  :placeholder="$t('kind.select.optionValuePlaceholder')"
+                />
+              </b-td>
+              <b-td
+                style="min-width: 200px;"
+              >
+                <b-input-group>
+                  <b-form-input
+                    v-model.trim="f.options.options[index].text"
+                    plain
+                    size="sm"
+                    :placeholder="$t('kind.select.optionLabelPlaceholder')"
+                  />
+
+                  <b-input-group-append>
+                    <field-select-translator
+                      v-if="field"
+                      :field="field"
+                      :module="module"
+                      :highlight-key="`meta.options.${option.value}.text`"
+                      size="sm"
+                      :disabled="isNew || option.new"
+                      button-variant="light"
+                    />
+                  </b-input-group-append>
+                </b-input-group>
+              </b-td>
+
+              <b-td class="d-flex align-items-center justify-content-center">
+                <b-button
+                  variant="outline-danger"
+                  class="border-0"
+                  @click.prevent="f.options.options.splice(index, 1)"
+                >
+                  <font-awesome-icon :icon="['far', 'trash-alt']" />
+                </b-button>
+              </b-td>
+            </b-tr>
+          </draggable>
+        </b-table-simple>
       </b-form-group>
 
       <div class="my-2">
@@ -80,6 +130,7 @@
 
 <script>
 import base from './base'
+import Draggable from 'vuedraggable'
 import { NoID } from '@cortezaproject/corteza-js'
 import FieldSelectTranslator from 'corteza-webapp-compose/src/components/Admin/Module/FieldSelectTranslator'
 
@@ -90,6 +141,7 @@ export default {
 
   components: {
     FieldSelectTranslator,
+    Draggable,
   },
 
   extends: base,
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index 8a839d016..e6583ca00 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -113,9 +113,7 @@ export default {
           ? this.value === o.value
           : (this.value || []).includes(o.value)
         return { ...o, disabled }
-      }).filter(({ value = '', text = '' }) => {
-        return value !== '' || text !== ''
-      })
+      }).filter(({ value = '', text = '' }) => value && text)
     },
   },