feat: clone and delete task

resources/ts/components/TaskItem.vue

@@ -6,12 +6,18 @@ import { updateTask } from "@/api/tasks";
 import { CronExpressionParser } from 'cron-parser'
 import CronInput from "@/components/CronInput.vue";
 
-const editMode = ref<boolean>(false);
+const emit = defineEmits<{
+    (e: 'clone', task: Task): void
+    (e: 'delete', task: Task): void
+}>();
 
 const task = defineModel<Task>({ required: true });
+
+const editMode = ref<boolean>(false);
 const editName = ref<string>('');
 const editCron = ref<string|null>(null);
 const refreshKey = ref<number>(0);
+
 const checked = computed<boolean>(() => {
     if (task.value.check_date === null) {
         return false;
@@ -28,7 +34,11 @@ const checked = computed<boolean>(() => {
     }
 });
 
-function save() {
+function onClose() {
+    editMode.value = false;
+}
+
+function onSave() {
     void updateTask(task.value.id, { name: editName.value, reset_cron: editCron.value })
         .then((newTask) => {
             task.value = newTask;
@@ -38,7 +48,7 @@ function save() {
     editMode.value = false;
 }
 
-function check() {
+function onCheck() {
     if (!checked.value) {
         void updateTask(task.value.id, { check_date: (new Date()).toISOString(), previous_check_date: task.value.check_date?.toISOString() })
             .then((newTask) => {
@@ -52,6 +62,14 @@ function check() {
     }
 }
 
+function onClone() {
+    emit('clone', task.value);
+}
+
+function onDelete() {
+    emit('delete', task.value);
+}
+
 onBeforeMount(() => {
     editName.value = task.value.name;
     editCron.value = task.value.reset_cron;
@@ -72,7 +90,7 @@ watch(task, () => {
 <template>
     <div class="list-row text-left">
         <div class="content-center">
-            <input :id="refreshKey.toFixed(0)" type="checkbox" class="checkbox" :checked="checked" @click.prevent="check" />
+            <input :id="refreshKey.toFixed(0)" type="checkbox" class="checkbox" :checked="checked" @click.prevent="onCheck" />
         </div>
         <div
             v-if="!editMode"
@@ -84,16 +102,16 @@ watch(task, () => {
         <template v-else>
             <div class="flex flex-col gap-2">
                 <div class="flex justify-evenly">
-                    <button class="btn btn-square me-1" @click="editMode = false">
+                    <button class="btn btn-square me-1" @click="onClose">
                         <X />
                     </button>
-                    <button class="btn btn-square me-1" @click="save">
+                    <button class="btn btn-square me-1" @click="onSave">
                         <Save />
                     </button>
-                    <button class="btn btn-square me-1">
+                    <button class="btn btn-square me-1" @click="onClone">
                         <Copy />
                     </button>
-                    <button class="btn btn-square">
+                    <button class="btn btn-square" @click="onDelete">
                         <Trash />
                     </button>
                 </div>