From 5b6fbe96097050aebbf1e4c53f6550d1729d0c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Thu, 30 Jan 2025 14:25:30 +0100
Subject: [PATCH] feat(ui): improve the task array component (#7095)

* feat(ui): improve the task array component

* chore(ui): replace existing task on editing during creation instead of re-adding them
---
 ui/src/components/code/segments/Task.vue    | 26 +++---
 ui/src/components/flows/tasks/TaskArray.vue | 98 ++++++---------------
 2 files changed, 40 insertions(+), 84 deletions(-)

diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
index dcbb7107113..82f0f1f67c1 100644
--- a/ui/src/components/code/segments/Task.vue
+++ b/ui/src/components/code/segments/Task.vue
@@ -142,18 +142,20 @@
             emits("updateTask", YamlUtils.insertTrigger(source, CURRENT.value));
             CURRENT.value = null;
         } else {
-            const action = props.creation
-                ? YamlUtils.insertTask(
-                    source,
-                    route.query.target ?? YamlUtils.getLastTask(source),
-                    task,
-                    route.query.position ?? "after",
-                )
-                : YamlUtils.replaceTaskInDocument(
-                    source,
-                    route.query.identifier,
-                    task,
-                );
+            const action =
+                props.creation &&
+                (!route.query.identifier || route.query.identifier === "new")
+                    ? YamlUtils.insertTask(
+                        source,
+                        route.query.target ?? YamlUtils.getLastTask(source),
+                        task,
+                        route.query.position ?? "after",
+                    )
+                    : YamlUtils.replaceTaskInDocument(
+                        source,
+                        route.query.identifier,
+                        task,
+                    );
 
             emits("updateTask", action);
         }
diff --git a/ui/src/components/flows/tasks/TaskArray.vue b/ui/src/components/flows/tasks/TaskArray.vue
index 657d11e853c..b019037ce55 100644
--- a/ui/src/components/flows/tasks/TaskArray.vue
+++ b/ui/src/components/flows/tasks/TaskArray.vue
@@ -1,97 +1,51 @@
 <template>
     <el-row
-        v-for="(item, index) in values"
+        v-for="(element, index) in items"
         :key="'array-' + index"
         :gutter="10"
         class="w-100 mb-2"
     >
         <el-col :span="22">
-            <component
-                :is="`task-${getType(schema.items)}`"
-                :model-value="item"
-                @update:model-value="onInput(index, $event)"
-                :root="getKey(index)"
-                :schema="schema.items"
-                :definitions="definitions"
+            <InputText
+                :model-value="element"
+                @update:model-value="(v) => handleInput(v, index)"
                 :placeholder="$t('value')"
                 class="w-100"
             />
         </el-col>
         <el-col :span="2" class="col align-self-center delete">
-            <DeleteOutline @click="removeItem(key)" />
+            <DeleteOutline @click="removeItem(index)" />
         </el-col>
     </el-row>
-    <Add @add="addItem()" v-if="values.at(-1)" />
+    <Add @add="addItem()" />
 </template>
 
-<script setup>
+<script setup lang="ts">
+    import {ref} from "vue";
+
     import {DeleteOutline} from "../../code/utils/icons";
 
+    import InputText from "../../code/components/inputs/InputText.vue";
     import Add from "../../code/components/Add.vue";
-</script>
-
-<script>
-    import {toRaw} from "vue";
-    import Task from "./Task";
-
-    export default {
-        mixins: [Task],
-        emits: ["update:modelValue"],
-        created() {
-            if (!Array.isArray(this.modelValue) && this.modelValue !== undefined) {
-                this.$emit("update:modelValue", []);
-            }
-        },
-        computed: {
-            values() {
-                if (this.modelValue === undefined) {
-                    return this.schema.default || [undefined];
-                }
-
-                return this.modelValue;
-            },
-        },
-        methods: {
-            getPropertiesValue(properties) {
-                return this.modelValue && this.modelValue[properties]
-                    ? this.modelValue[properties]
-                    : undefined;
-            },
-            onInput(index, value) {
-                const local = this.modelValue || [];
-                local[index] = value;
 
-                this.$emit("update:modelValue", local);
-            },
-            addItem() {
-                let local = this.modelValue || [];
-                local.push(undefined);
+    const emits = defineEmits(["update:modelValue"]);
+    const props = defineProps({modelValue: {type: Array, default: undefined}});
 
-                // click on + when there is no items
-                if (this.modelValue === undefined) {
-                    local.push(undefined);
-                }
+    const items = ref(
+        !Array.isArray(props.modelValue) ? [props.modelValue] : props.modelValue,
+    );
 
-                this.$emit("update:modelValue", local);
-            },
-            removeItem(x) {
-                let local = this.modelValue || [];
-                local.splice(x, 1);
-
-                if (local.length === 1) {
-                    let raw = toRaw(local[0]);
-
-                    if (raw === null || raw === undefined) {
-                        local = undefined;
-                    }
-                }
+    const handleInput = (value: string, index: number) => {
+        items.value[index] = value;
+        emits("update:modelValue", items.value);
+    };
 
-                this.$emit("update:modelValue", local);
-            },
-        },
+    const addItem = () => {
+        items.value.push(undefined);
+        emits("update:modelValue", items.value);
+    };
+    const removeItem = (index: number) => {
+        items.value.splice(index, 1);
+        emits("update:modelValue", items.value);
     };
 </script>
-
-<style scoped lang="scss">
-@import "../../code/styles/code.scss";
-</style>