feat: clone and delete task

resources/ts/components/TaskList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onBeforeMount } from "vue";
 import type { Task } from "@/types";
-import { getTasks, createTask } from "@/api/tasks";
+import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import { CirclePlus } from "@lucide/vue";
 import TaskItem from "@/components/TaskItem.vue";
 
@@ -17,7 +17,7 @@ function fetchTasks() {
         });
 }
 
-function newTask() {
+function onNewTask() {
     if (taskInput.value.trim()) {
         void createTask(list.value, {
             name: taskInput.value.trim(),
@@ -32,13 +32,28 @@ function newTask() {
     }
 }
 
+function onCloneTask(task: Task) {
+    void createTask(list.value, {
+        name: task.name,
+        reset_cron: task.reset_cron,
+    }).then((data: Task) => {
+        tasks.value.push(data);
+    })
+}
+
+function onDeleteTask(task: Task) {
+    void deleteTask(task.id);
+
+    tasks.value.splice(tasks.value.indexOf(task), 1);
+}
+
 onBeforeMount(fetchTasks);
 </script>
 
 <template>
     <ul class="list ">
         <li v-for="(task, i) in tasks" :key="task.id">
-            <task-item v-if="tasks[i]" v-model="tasks[i]" />
+            <task-item v-if="tasks[i]" v-model="tasks[i]" @clone="onCloneTask" @delete="onDeleteTask" />
         </li>
         <li class="list-row">
             <div class="list-col-grow">
@@ -47,14 +62,14 @@ onBeforeMount(fetchTasks);
                     type="text"
                     placeholder="New Task"
                     class="input"
-                    @keyup.enter="newTask"
+                    @keyup.enter="onNewTask"
                 />
             </div>
             <div>
                 <button
                     class="btn btn-square"
                     :disabled="taskInput.trim().length === 0"
-                    @click="newTask"
+                    @click="onNewTask"
                 >
                     <CirclePlus />
                 </button>