feat: basic ui and workflow

resources/css/style.css

@@ -1,2 +1,12 @@
+@import url("https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui" {
+    themes: cupcake --default;
+}
+
+body {
+    font-family: "Sour Gummy", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+}

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>

resources/ts/api/tasks.ts

@@ -1,32 +1,44 @@
-import type { RawTask, TaskCreateData, TaskUpdateData } from "@/types";
+import type { RawTask, Task, TaskCreateData, TaskUpdateData } from "@/types";
 
-export async function getTasks(list: string): Promise<RawTask[]> {
+function parseTask(task: RawTask): Task {
+    return {
+        id: task.id,
+        name: task.name,
+        reset_cron: task.reset_cron,
+        check_date: task.check_date ? new Date(task.check_date) : null,
+        previous_check_date: task.previous_check_date
+            ? new Date(task.previous_check_date)
+            : null,
+    };
+}
+
+export async function getTasks(list: string): Promise<Task[]> {
     const response = await fetch(`/api/lists/${list}/tasks`);
-    return await response.json();
+    return (await response.json()).map(parseTask);
 }
 
 export async function createTask(
     list: string,
     data: TaskCreateData,
-): Promise<RawTask> {
+): Promise<Task> {
     const response = await fetch(`/api/lists/${list}/tasks`, {
         method: "POST",
         body: JSON.stringify({ ...data }),
         headers: { "Content-Type": "application/json" },
     });
-    return await response.json();
+    return parseTask(await response.json());
 }
 
 export async function updateTask(
     taskId: string,
     data: TaskUpdateData,
-): Promise<RawTask> {
+): Promise<Task> {
     const response = await fetch(`/api/tasks/${taskId}`, {
         method: "PUT",
         body: JSON.stringify({ ...data }),
         headers: { "Content-Type": "application/json" },
     });
-    return await response.json();
+    return parseTask(await response.json());
 }
 
 export async function deleteTask(taskId: string): Promise<void> {

resources/ts/components/TaskItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Task } from "@/types";
+import { Copy, Trash, Check, X } from "@lucide/vue";
+
+const editMode = ref<boolean>(false);
+
+const task = defineModel<Task>({ required: true });
+</script>
+
+<template>
+    <div class="list-row text-left">
+        <div class="content-center">
+            <input type="checkbox" class="checkbox" />
+        </div>
+        <div
+            v-if="!editMode"
+            class="cursor-pointer text-lg select-none"
+            @click.prevent="editMode = true"
+        >
+            {{ task.name }}
+        </div>
+        <template v-else>
+            <div>
+                <input v-model="task.name" type="text" class="input mb-1" />
+                <br />
+                <button class="btn btn-square me-1" @click="editMode = false">
+                    <X />
+                </button>
+                <button class="btn btn-square me-1">
+                    <Check />
+                </button>
+                <button class="btn btn-square me-1">
+                    <Copy />
+                </button>
+                <button class="btn btn-square">
+                    <Trash />
+                </button>
+            </div>
+        </template>
+    </div>
+</template>

resources/ts/types.ts

@@ -16,6 +16,14 @@ export interface RawTask {
     previous_check_date: string | null;
 }
 
+export interface Task {
+    id: string;
+    name: string;
+    reset_cron: string | null;
+    check_date: Date | null;
+    previous_check_date: Date | null;
+}
+
 export interface TaskCreateData {
     name: string;
     reset_cron: string | null;