use input field foreach list option & add sortable

src/components/FeatureType/FeatureTypeCustomForm.vue

@@ -138,36 +138,6 @@
             </li>
           </ul>
         </div>
-
-        <div
-          v-if="selectedFieldType === 'Liste de valeurs' || selectedFieldType === 'Liste à choix multiples'"
-          class="field field-list-options required field"
-        >
-          <label :for="form.options.id_for_label">{{
-            form.options.label
-          }}</label>
-          <input
-            :id="form.options.id_for_label"
-            v-model="arrayOption"
-            type="text"
-            :maxlength="form.options.field.max_length"
-            :name="form.options.html_name"
-            class="options-field"
-          >
-          <small>{{ form.options.help_text }}</small>
-          <ul
-            id="errorlist"
-            class="errorlist"
-          >
-            <li
-              v-for="error in form.options.errors"
-              :key="error"
-            >
-              {{ error }}
-            </li>
-          </ul>
-        </div>
-
         <div
           v-if="selectedFieldType === 'Liste de valeurs pré-enregistrées'"
           class="field required"
@@ -193,12 +163,55 @@
           </ul>
         </div>
       </div>
+
+      <div
+        v-if="selectedFieldType === 'Liste de valeurs' || selectedFieldType === 'Liste à choix multiples'"
+        class="field field-list-options required field"
+      >
+        <label :for="form.options.id_for_label">{{
+          form.options.label
+        }}</label>
+        <div :id="`list-options-${customForm.dataKey}`">
+          <div
+            v-for="(option, index) in form.options.value"
+            :key="option"
+            :id="option"
+            class="draggable-row"
+          >
+            <i
+              class="th icon"
+              aria-hidden="true"
+            />
+            <input
+              :value="option"
+              type="text"
+              :maxlength="form.options.field.max_length"
+              :name="form.options.html_name"
+              class="options-field"
+              @change="updateOptionValue(index, $event)"
+            >
+          </div>
+        </div>
+        <ul
+          id="errorlist"
+          class="errorlist"
+        >
+          <li
+            v-for="error in form.options.errors"
+            :key="error"
+          >
+            {{ error }}
+          </li> 
+        </ul>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import Sortable from 'sortablejs';
 
 import Dropdown from '@/components/Dropdown.vue';
 
@@ -295,7 +308,8 @@ export default {
           value: [],
         },
       },
-      selectedPrerecordedList: null
+      selectedPrerecordedList: null,
+      sortable: null
     };
   },
 
@@ -311,6 +325,11 @@ export default {
           (el) => el.value === this.form.field_type.value
         );
         if (currentFieldType) {
+          this.$nextTick(() => { // to be executed after the fieldType is returned and the html generated
+            if (this.selectedFieldType === 'Liste de valeurs' || this.selectedFieldType === 'Liste à choix multiples') {
+              this.initSortable();
+            }
+          });
           return currentFieldType.name;
         }
         return null;
@@ -386,6 +405,27 @@ export default {
       );
     },
 
+    updateOptionValue(index, e) {
+      this.form.options.value[index] = e.target.value;
+      if (!this.hasDuplicateOptions()) {
+        this.updateStore();
+      }
+    },
+
+    updateOptionOrder(e) {
+      console.log(e, e.target.childNodes);
+    },
+
+    initSortable() {
+      this.sortable = new Sortable(document.getElementById(`list-options-${this.customForm.dataKey}`), {
+        animation: 150,
+        handle: '.draggable-row', // The element that is active to drag
+        ghostClass: 'blue-background-class',
+        dragClass: 'white-opacity-background-class',
+        onEnd: this.updateOptionOrder,
+      });
+    },
+
     updateStore() {
       const data = {
         dataKey: this.customForm.dataKey,
@@ -489,5 +529,12 @@ export default {
     }
   }
 }
-
+.draggable-row {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 1em;
+  input {
+    margin-left: .5em !important;
+  }
+}
 </style>

src/views/Feature/FeatureEdit.vue

@@ -270,7 +270,6 @@
               id="popup-content"
             />
           </div>
-        
         </div>
       </div>