refactor: separate task list component

resources/ts/App.vue

@@ -1,45 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from "vue";
+import { ref, onMounted } from "vue";
-import type { Task } from "@/types";
+import TaskList from "@/components/TaskList.vue";
-import { getTasks, createTask } from "./api/tasks";
-import { CirclePlus } from "@lucide/vue";
-import TaskItem from "@/components/TaskItem.vue";
 
 const visible = ref<boolean>(false);
-const taskInput = ref<string>("");
-const tasks = ref<Task[]>([]);
-const list = ref<string>("test");
-
-function fetchTasks() {
-    getTasks(list.value)
-        .then((data: Task[]) => {
-            tasks.value = data;
-            setTimeout(fetchTasks, 10000);
-        })
-        .catch(() => {
-            // ignore
-        });
-}
-
-function newTask() {
-    if (taskInput.value.trim()) {
-        createTask(list.value, {
-            name: taskInput.value.trim(),
-            reset_cron: null,
-        })
-            .then((data: Task) => {
-                tasks.value.push(data);
-            })
-            .catch(() => {
-                //ignore
-            })
-            .finally(() => {
-                taskInput.value = "";
-            });
-    }
-}
-
-onBeforeMount(fetchTasks);
 
 onMounted(() => {
     setTimeout(() => {
@@ -52,38 +15,9 @@ onMounted(() => {
     <main :style="{ display: visible ? 'inherit' : 'none' }">
         <div class="hero bg-base-200 min-h-screen">
             <div class="hero-content text-center">
-                <div class="max-w-md min-w-96">
+                <div class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md">
-                    <ul class="list bg-base-100 rounded-box shadow-md">
+                    <h1 class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none">Tout Doux</h1>
-                        <li
+                    <task-list />
-                            class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
-                        >
-                            Tout Doux
-                        </li>
-
-                        <li v-for="(task, i) in tasks" :key="task.id">
-                            <TaskItem v-if="tasks[i]" v-model="tasks[i]" />
-                        </li>
-                        <li class="list-row">
-                            <div class="list-col-grow">
-                                <input
-                                    v-model="taskInput"
-                                    type="text"
-                                    placeholder="New Task"
-                                    class="input"
-                                    @keyup.enter="newTask"
-                                />
-                            </div>
-                            <div>
-                                <button
-                                    class="btn btn-square"
-                                    :disabled="taskInput.trim().length === 0"
-                                    @click="newTask"
-                                >
-                                    <CirclePlus />
-                                </button>
-                            </div>
-                        </li>
-                    </ul>
                 </div>
             </div>
         </div>

resources/ts/components/TaskItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeMount, ref, watch, computed } from "vue";
 import type { Task } from "@/types";
-import { Copy, Trash, Check, X } from "@lucide/vue";
+import { Copy, Trash, Save, X } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
 import { CronExpressionParser } from 'cron-parser'
 import CronInput from "@/components/CronInput.vue";
@@ -80,7 +80,7 @@ watch(task, () => {
                         <X />
                     </button>
                     <button class="btn btn-square me-1" @click="save">
-                        <Check />
+                        <Save />
                     </button>
                     <button class="btn btn-square me-1">
                         <Copy />

resources/ts/components/TaskList.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import type { Task } from "@/types";
+import { getTasks, createTask } from "@/api/tasks";
+import { CirclePlus } from "@lucide/vue";
+import TaskItem from "@/components/TaskItem.vue";
+
+const taskInput = ref<string>("");
+const tasks = ref<Task[]>([]);
+const list = ref<string>("test");
+
+function fetchTasks() {
+    getTasks(list.value)
+        .then((data: Task[]) => {
+            tasks.value = data;
+            setTimeout(fetchTasks, 10000);
+        })
+        .catch(() => {
+            // ignore
+        });
+}
+
+function newTask() {
+    if (taskInput.value.trim()) {
+        createTask(list.value, {
+            name: taskInput.value.trim(),
+            reset_cron: null,
+        })
+            .then((data: Task) => {
+                tasks.value.push(data);
+            })
+            .catch(() => {
+                //ignore
+            })
+            .finally(() => {
+                taskInput.value = "";
+            });
+    }
+}
+
+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]" />
+        </li>
+        <li class="list-row">
+            <div class="list-col-grow">
+                <input
+                    v-model="taskInput"
+                    type="text"
+                    placeholder="New Task"
+                    class="input"
+                    @keyup.enter="newTask"
+                />
+            </div>
+            <div>
+                <button
+                    class="btn btn-square"
+                    :disabled="taskInput.trim().length === 0"
+                    @click="newTask"
+                >
+                    <CirclePlus />
+                </button>
+            </div>
+        </li>
+    </ul>
+</template>