feat: clone and delete task

README.md

@@ -4,12 +4,14 @@
 
 - [x] auto refresh task completion
 - [x] validate cron string
-- [ ] clone task
-- [ ] delete task
+- [x] clone task
+- [x] delete task
 - [ ] list option: sort
 - [ ] list option: show last completion
 - [ ] list option: show next refresh
+- [ ] list option: hide completed
 - [ ] list per URL
+- [ ] Empty list message
 - [ ] home screen
 - [ ] change lang
 - [ ] toasts

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>

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>