-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.vue
97 lines (85 loc) · 3.34 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
<div class=" h-screen w-screen bg-radial-gradient from-primary via-between to-secondary text-white flex items-center justify-center">
<div class="w-[62%] h-[65%] flex p-4 items-center justify-between rounded-lg bg-custom-bg">
<div class=" hidden md:flex flex-col h-full w-[60%] justify-between">
<div class="flex gap-2 items-center">
<img class=" -ml-4 w-16 " src="/static/icons/devzero_logo.png" alt="logo">
<h1 class=" text-4xl font-bold">DevZero</h1>
</div>
<div class="">
<img class=" w-[18rem] lg:w-[30rem]" src="/static/icons/todo_list.png" alt="nothing">
</div>
</div>
<div class=" flex flex-col items-center gap-8 h-full w-full md:w-[45%]">
<div class="flex w-full justify-between md:justify-end">
<img class=" block md:hidden w-16 " src="/static/icons/devzero_logo.png" alt="logo">
<div class="flex flex-col items-end">
<h1 class=" text-2xl sm:text-4xl font-bold text-center">Todo List</h1>
<p class=" text-sm sm:text-base text-slate-400 text-center">Create your tasks</p>
</div>
</div>
<form class="flex w-full gap-4" @submit.prevent="addTodo">
<input class=" border-b border-white bg-transparent outline-none px-2 py-1 w-[80%] lg:flex-1" type="text" v-model="newTodo"
placeholder="Add a new todo" />
<button class=" bg-custom-blue hover:bg-custom-light-blue rounded-md px-2 text-white font-semibold">Add</button>
</form>
<ul v-if="todos" class="flex flex-col gap-2 w-full overflow-auto flex-1">
<li class=" w-full" v-for="todo in todos" :key="todo.id">
<Task :title="todo.title" :id="todo.id" :is_completed="todo.is_completed" @delete-todo="deleteTodo" @mark-as-done="markAsDone"/>
</li>
</ul>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue';
import { fetchTasks, addTask, deleteTask, updateTask } from "~/http/api";
interface Task {
id: string;
title: string;
is_completed: number;
created_at: string;
}
export default {
setup() {
const todos = ref<Task[]>([]);
const newTodo = ref('');
const fetchTodos = async () => {
try {
const tasks: Task[] | null = await fetchTasks();
if(tasks !== null && tasks !== undefined) {
tasks.sort((a, b) => Number(a.is_completed) - Number(b.is_completed));
todos.value = tasks;
}
} catch (error) {
console.error('Failed to fetch todos', error);
}
};
onMounted(() => {
fetchTodos();
});
const addTodo = async () => {
if (newTodo.value.trim()) {
const newTodoTitle = newTodo.value;
await addTask(newTodoTitle);
fetchTodos();
newTodo.value = '';
}
};
const deleteTodo = async (todoId: string) => {
await deleteTask(todoId);
todos.value = todos.value.filter(todo => todo.id !== todoId);
};
const markAsDone = async (todoId: string) => {
await updateTask(todoId);
const todo = todos.value.find(todo => todo.id === todoId);
if (todo) {
todo.is_completed = 1;
}
todos.value.sort((a, b) => Number(a.is_completed) - Number(b.is_completed));
};
return { todos, newTodo, addTodo, deleteTodo, markAsDone };
},
};
</script>