feat: basic ui and workflow

resources/ts/App.vue

@@ -1,36 +1,45 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeMount } from "vue";
-import { getComments, postComment } from "@/api/comments";
-import type { Comment } from "@/types";
+import type { Task } from "@/types";
+import { getTasks, createTask } from "./api/tasks";
+import { CirclePlus } from "@lucide/vue";
+import TaskItem from "@/components/TaskItem.vue";
 
 const visible = ref<boolean>(false);
-const comments = ref<Comment[]>([]);
-const commentInput = ref<string>("");
+const taskInput = ref<string>("");
+const tasks = ref<Task[]>([]);
+const list = ref<string>("test");
 
-function fetchComments() {
-    getComments()
-        .then((data: Comment[]) => {
-            comments.value = data;
+function fetchTasks() {
+    getTasks(list.value)
+        .then((data: Task[]) => {
+            tasks.value = data;
+            setTimeout(fetchTasks, 10000);
         })
         .catch(() => {
-            //ignore
+            // ignore
         });
 }
 
-function sendComment() {
-    if (commentInput.value.trim()) {
-        postComment(commentInput.value.trim())
-            .finally(() => {
-                commentInput.value = "";
-                fetchComments();
+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(fetchComments);
+onBeforeMount(fetchTasks);
 
 onMounted(() => {
     setTimeout(() => {
@@ -43,52 +52,34 @@ 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">
+                <div class="max-w-md min-w-96">
                     <ul class="list bg-base-100 rounded-box shadow-md">
-                        <li class="p-4 pb-2 text-xl opacity-60 tracking-wide">
-                            Comments
+                        <li
+                            class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
+                        >
+                            Tout Doux
                         </li>
 
-                        <li
-                            v-for="comment in comments"
-                            :key="comment.id"
-                            class="list-row"
-                        >
-                            <div class="avatar avatar-placeholder">
-                                <div
-                                    class="bg-neutral text-neutral-content size-10 rounded-box"
-                                >
-                                    <span class="text-xs">{{
-                                        comment.content[0]
-                                    }}</span>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="text-xs opacity-60">
-                                    {{ comment.created_at }}
-                                </div>
-                                <div class="font-semibold">
-                                    {{ comment.content }}
-                                </div>
-                            </div>
+                        <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>
+                            <div class="list-col-grow">
                                 <input
-                                    v-model="commentInput"
+                                    v-model="taskInput"
                                     type="text"
-                                    placeholder="Type here"
+                                    placeholder="New Task"
                                     class="input"
-                                    @keyup.enter="sendComment"
+                                    @keyup.enter="newTask"
                                 />
                             </div>
                             <div>
                                 <button
-                                    class="btn"
-                                    :disabled="commentInput.trim().length === 0"
-                                    @click="sendComment"
+                                    class="btn btn-square"
+                                    :disabled="taskInput.trim().length === 0"
+                                    @click="newTask"
                                 >
-                                    Send
+                                    <CirclePlus />
                                 </button>
                             </div>
                         </li>