klemek/tout-doux
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

refactor: separate task list component

Browse Source
This commit is contained in:
klemek
2026-07-10 10:30:27 +02:00
parent 1b8e6ff8ae
commit a5004f3741
3 changed files with 77 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/ts/App.vue
+5 -71
View File
@@ -1,45 +1,8 @@
<script setup lang="ts">
import { ref, onMounted, 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";
import { ref, onMounted } from "vue";
import TaskList from "@/components/TaskList.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">
<ul class="list bg-base-100 rounded-box shadow-md">
<li
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 class="max-w-md min-w-96 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>
<task-list />
</div>
</div>
</div>
resources/ts/components/TaskItem.vue
+2 -2
View File
@@ -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
+70
View File
@@ -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>