quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added checkbox for todo. cleaned up code. added seperation between done

Browse Source 
and todo tasks
This commit is contained in:
quirinecker
2025-07-04 16:43:59 +02:00
parent 7588661a59
commit 1c72ab279d
2 changed files with 43 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/components/ui/Sidebar.vue
View File

@@ -4,24 +4,27 @@ import ListItem from './ListItem.vue';
import Title1 from './Title1.vue';
import type { DropdownMenuItem } from '@nuxt/ui';
import { DateTime } from 'luxon';
import type { USeparator } from '#components';
const colorMode = useColorMode();
const currentTheme = ref<'dark' | 'system' | 'light'>(colorMode.preference as 'dark' | 'system' | 'light');
const isLight = computed(() => currentTheme.value === 'light');
const isDark = computed(() => currentTheme.value === 'dark');
const isSystem = computed(() => currentTheme.value === 'system');
watch(currentTheme, () => {
console.log(currentTheme.value)
colorMode.preference = currentTheme.value;
})
const date = defineModel<DateTime>('date', { required: true })
const tasks = defineModel<Task[]>('tasks', { required: true })
const emits = defineEmits<{
(e: 'createTask', name: string): void
(e: 'deleteTask', id: number): void
(e: 'editTask', task: Task): void
}>()
const isLight = computed(() => currentTheme.value === 'light');
const isDark = computed(() => currentTheme.value === 'dark');
const isSystem = computed(() => currentTheme.value === 'system');
const doneTasks = computed(() => tasks.value.filter(task => task.done))
const todoTasks = computed(() => tasks.value.filter(task => !task.done))
const dropDownItems = computed<DropdownMenuItem[][]>(() => [
[
{ label: "Profile", icon: "i-lucide-user" },
@@ -60,7 +63,6 @@ const dropDownItems = computed<DropdownMenuItem[][]>(() => [
]
])
const date = defineModel<DateTime>('date', { required: true })
const selectedDate = computed({
get() {
@@ -79,31 +81,26 @@ type Task = {
userid: string
title: string
description: string
done: number
done: boolean
estimated_time: string
due_date: string
created_at: string
updated_at: string
}
defineProps<{
todos: Task[]
}>()
function addTodo() {
function addTask() {
const name = prompt("Todo name:")
console.log(name)
if (name !== null) {
emits('createTask', name)
}
}
function deleteTodo(todo: Task) {
console.log(todo.id)
function deleteTask(todo: Task) {
emits('deleteTask', todo.id)
}
function editTodo() {
function editTask(task: Task) {
emits('editTask', task)
}
</script>
@@ -119,42 +116,39 @@ function editTodo() {
<div class="flex flex-col gap-2">
<Title1>Todos</Title1>
<div class="flex gap-2 flex-col">
<ListItem v-for="todo in todos">
<ListItem v-for="task in todoTasks">
<div class="flex w-full gap-4 items-center">
<span class="grow overflow-scroll py-3 overflow-shadow">
{{ todo.title }}
<span
class="grow overflow-scroll py-3 overflow-shadow flex flex-row gap-2 items-center">
<UCheckbox v-model="task.done" @change="() => editTask(task)" />{{ task.title }}
</span>
<div class="flex gap-1">
<UButton size="xs" color="neutral" class="flex justify-center" @click="editTodo">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil">
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z">
</path>
<path d="m15 5 4 4"></path>
</svg>
</UButton>
<UButton size="xs" class="flex justify-center" color="primary"
@click="() => deleteTodo(todo)">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-trash-2">
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-2 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</UButton>
<UButton size="xs" color="neutral" class="flex justify-center" icon="mingcute:pencil-line"
@click="() => editTask(task)"/>
<UButton size="xs" color="primary" class="flex justify-center" icon="octicon:trashcan-16"
@click="() => deleteTask(task)" />
</div>
</div>
</ListItem>
<USeparator label="Done" v-if="todoTasks.length !== 0"/>
<ListItem v-for="task in doneTasks">
<div class="flex w-full gap-4 items-center">
<span
class="grow overflow-scroll py-3 overflow-shadow flex flex-row gap-2 items-center">
<UCheckbox v-model="task.done" @change="() => editTask(task)" />{{ task.title }}
</span>
<div class="flex gap-1">
<UButton size="xs" color="neutral" class="flex justify-center" icon="mingcute:pencil-line"
@click="() => editTask(task)"/>
<UButton size="xs" color="primary" class="flex justify-center"
@click="() => deleteTask(task)" icon="octicon:trashcan-16"/>
</div>
</div>
</ListItem>
</div>
</div>
<div class="flex">
<UButton size="xl" class="w-full flex justify-center" @click="addTodo">
<UButton size="xl" class="w-full flex justify-center" @click="addTask">
+
</UButton>
</div>
@@ -174,6 +168,4 @@ function editTodo() {
</UCard>
</template>
<style scoped>
</style>
<style scoped></style>

4
web/pages/index.vue
View File

@@ -23,7 +23,7 @@ type Task = {
userid: string
title: string
description: string
done: number
done: boolean
estimated_time: string
due_date: string
created_at: string
@@ -68,7 +68,7 @@ async function deleteTask(id: number) {
<template>
<div class="h-screen w-screen p-4 flex flex-row gap-5">
<Sidebar v-if="tasks !== null" :todos="tasks" v-model:date="date" @create-task="postTask"
<Sidebar v-if="tasks !== null" v-model:tasks="tasks" v-model:date="date" @create-task="postTask"
@delete-task="deleteTask" />
<MainContent v-if="events !== null" v-model:events="events" v-model:date="date" @create-event="postEvent" />
</div>