140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import { TODOS_REPO_KEY } from "@/utils/proxy-service-keys";
|
|
import { Todo } from "@/utils/types";
|
|
import { createProxyService } from '@webext-core/proxy-service';
|
|
import { v4 as uuidv4 } from "uuid"
|
|
|
|
const todosRepo = createProxyService(TODOS_REPO_KEY);
|
|
|
|
const props = defineProps<{
|
|
showCompleted?: boolean,
|
|
showOnlyCompleted?: boolean,
|
|
showInput?: boolean,
|
|
hoverShowDeleteButton?: boolean,
|
|
showClearAllTodo?: boolean
|
|
}>()
|
|
|
|
const todos = ref<Todo[]>([]);
|
|
const inputNewTodo = ref<string | null>();
|
|
|
|
const refreshTodo = async () => {
|
|
const allTodos = await todosRepo.getAll();
|
|
todos.value = allTodos.filter(
|
|
(todo: Todo) =>
|
|
(props.showCompleted && todo.completed) ||
|
|
(props.showOnlyCompleted && todo.completed) ||
|
|
(!props.showOnlyCompleted && !todo.completed)
|
|
)
|
|
}
|
|
|
|
onBeforeMount(async () => refreshTodo())
|
|
|
|
const insertTodo = async () => {
|
|
if (!inputNewTodo.value) return
|
|
if (!inputNewTodo.value.trim()) return
|
|
const generateTodoId = uuidv4()
|
|
await todosRepo.insert({
|
|
id: generateTodoId,
|
|
name: inputNewTodo.value,
|
|
completed: false
|
|
})
|
|
inputNewTodo.value = null
|
|
refreshTodo()
|
|
}
|
|
|
|
const updateTodo = async (todo: Todo) => {
|
|
await todosRepo.update(toRaw(todo))
|
|
refreshTodo()
|
|
}
|
|
|
|
const deleteTodo = async (todo: Todo) => {
|
|
await todosRepo.delete(toRaw(todo))
|
|
refreshTodo()
|
|
}
|
|
|
|
const clearAllCompletedTodo = async () => {
|
|
const allTodos = await todosRepo.getAll()
|
|
const completedTodos = allTodos.filter((todo) => todo.completed)
|
|
const deletePromises = completedTodos.map((todo) => todosRepo.delete(todo))
|
|
await Promise.all(deletePromises)
|
|
refreshTodo()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<h2 v-if="props.showOnlyCompleted">[completed todos]</h2>
|
|
<h2 v-if="!props.showOnlyCompleted">[todos]</h2>
|
|
<div v-if="showInput" class="form-input">
|
|
<input @keydown.enter="insertTodo" v-model="inputNewTodo" placeholder="playing skateboard at 5am" type="input"/>
|
|
<button @click="insertTodo">[add todo]</button>
|
|
</div>
|
|
<div v-if="showClearAllTodo">
|
|
<button @click="clearAllCompletedTodo">[clear all completed todos]</button>
|
|
</div>
|
|
<br/>
|
|
<div v-if="todos.length === 0">no todos :D</div>
|
|
<ul v-else v-for="todo in todos">
|
|
<li :class="{ completed: todo.completed }" :key="todo.id">
|
|
<label>
|
|
<input type="checkbox" @change="updateTodo(todo)" v-model="todo.completed" :id="todo.id"/>
|
|
{{ todo.name }}
|
|
<button class="button-delete" v-if="props.hoverShowDeleteButton" @click="deleteTodo(todo)">x</button>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
min-width: 300px;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
text-align: left;
|
|
font-size: 14pt;
|
|
}
|
|
|
|
li label {
|
|
display: block;
|
|
}
|
|
|
|
li label:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
li.completed {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
li .button-delete {
|
|
display: none;
|
|
padding: 1px 4px;
|
|
font-size: 10pt;
|
|
float: right
|
|
}
|
|
|
|
li:hover .button-delete {
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-input input,
|
|
.form-input button {
|
|
width: 100%;
|
|
padding: 2px 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-input input {
|
|
font-size: 12pt;
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing:border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
</style>
|