feat(ui): allow re-ordering of array items

Author: MilosPaunovic

ui/src/components/code/styles/code.scss

@@ -53,7 +53,8 @@ $code-font-sm: var(--el-font-size-small);
     font-size: $code-font-sm;
 }
 
-.delete {
+.delete,
+.reorder {
     cursor: pointer;
     padding-left: 0;
     color: $code-gray-700;
@@ -64,7 +65,8 @@ $code-font-sm: var(--el-font-size-small);
     :deep(*) {
         --el-disabled-text-color: #{$code-gray-700};
 
-        .el-input__inner {
+        .el-input__inner,
+        .el-textarea__inner {
             color: $code-gray-700;
             font-size: $code-font-sm;
         }

ui/src/components/flows/tasks/TaskArray.vue

@@ -3,9 +3,13 @@
         v-for="(element, index) in items"
         :key="'array-' + index"
         :gutter="10"
-        class="w-100 mb-2"
+        class="w-100"
     >
-        <el-col :span="22">
+        <el-col :span="2" class="d-flex flex-column mt-1 mb-2 reorder">
+            <ChevronUp @click.prevent.stop="moveItem(index, 'up')" />
+            <ChevronDown @click.prevent.stop="moveItem(index, 'down')" />
+        </el-col>
+        <el-col :span="20">
             <InputText
                 :model-value="element"
                 @update:model-value="(v) => handleInput(v, index)"
@@ -23,7 +27,7 @@
 <script setup lang="ts">
     import {ref} from "vue";
 
-    import {DeleteOutline} from "../../code/utils/icons";
+    import {DeleteOutline, ChevronUp, ChevronDown} from "../../code/utils/icons";
 
     import InputText from "../../code/components/inputs/InputText.vue";
     import Add from "../../code/components/Add.vue";
@@ -50,4 +54,22 @@
         items.value.splice(index, 1);
         emits("update:modelValue", items.value);
     };
+    const moveItem = (index: number, direction: "up" | "down") => {
+        if (direction === "up" && index > 0) {
+            [items.value[index - 1], items.value[index]] = [
+                items.value[index],
+                items.value[index - 1],
+            ];
+        } else if (direction === "down" && index < items.value.length - 1) {
+            [items.value[index + 1], items.value[index]] = [
+                items.value[index],
+                items.value[index + 1],
+            ];
+        }
+        emits("update:modelValue", items.value);
+    };
 </script>
+
+<style scoped lang="scss">
+@import "../../code/styles/code.scss";
+</style>