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

added overflow for tasks and overflow shadow to all overflows. also

Browse Source 
minimum drag distance is now 10px
This commit is contained in:
quirinecker
2025-06-16 19:51:31 +02:00
parent c4daa88ea2
commit 7588661a59
9 changed files with 124 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/components/ui/EventFormModal.vue
View File

@@ -71,6 +71,7 @@ function submit() {
}
emit('submnitted', {
id: props.input.id,
title: form.data.title,
description: form.data.description,
from: DateTime.fromISO(form.data.from),

2
web/components/ui/ListItem.vue
View File

@@ -3,7 +3,7 @@
</script>
<template>
<UCard class="[&>*]:p-3">
<UCard class="[&>*]:p-3 w-full">
<slot />
</UCard>
</template>

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

@@ -75,19 +75,19 @@ const selectedDate = computed({
})
type Task = {
id: number
userid: string
title: string
description: string
done: number
estimated_time: string
due_date: string
created_at: string
updated_at: string
id: number
userid: string
title: string
description: string
done: number
estimated_time: string
due_date: string
created_at: string
updated_at: string
}
defineProps<{
todos: Task[]
todos: Task[]
}>()
@@ -109,7 +109,7 @@ function editTodo() {
</script>
<template>
<UCard class="flex w-64 h-full">
<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
<div class="flex flex-col h-full w-full gap-5">
<header class="flex flex-col gap-2">
<Title1>Calendar</Title1>
@@ -120,20 +120,37 @@ function editTodo() {
<Title1>Todos</Title1>
<div class="flex gap-2 flex-col">
<ListItem v-for="todo in todos">
<div class="flex justify-between">
<span>
<div class="flex w-full gap-4 items-center">
<span class="grow overflow-scroll py-3 overflow-shadow">
{{ todo.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>
<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 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>
</div>
</div>
</ListItem>
</ListItem>
</div>
</div>
<div class="flex">
@@ -157,4 +174,6 @@ function editTodo() {
</UCard>
</template>
<style scoped></style>
<style scoped>
</style>

14
web/components/ui/calendar/Calendar.vue
View File

@@ -132,7 +132,19 @@ function openDeleteModal(event: Event) {
function deleteEvent() {
if (deleteContext.value === undefined) return
emits('delete', deleteContext.value?.event)
events.value = events.value.filter(e => e.title !== deleteContext.value?.event.title)
console.log(events.value)
events.value = events.value.filter(e => {
if (e.id === undefined || deleteContext.value?.event.id === undefined) {
return true
}
if (e.id === deleteContext.value?.event.id) {
return false
}
return true
})
deleteModalOpened.value = false
}

7
web/components/ui/calendar/CalendarCollumn.vue
View File

@@ -62,6 +62,13 @@ function mouseup(_: MouseEvent) {
const timeFrom = Math.min(endY.value, startY.value) / column.value.offsetHeight
const timeTo = Math.max(endY.value, startY.value) / column.value.offsetHeight
if (timeTo * column.value.offsetHeight - timeFrom * column.value.offsetHeight <= 10) {
startY.value = 0
endY.value = 0
return
}
emit('quick-create', props.day, {
from: timeFrom,
to: timeTo

2
web/components/ui/calendar/CalendarEvent.vue
View File

@@ -64,7 +64,7 @@ function dragStart(e: DragEvent) {
</template>
<template #default>
<div>{{ event.event.from.toFormat('HH:mm') }} - {{ event.event.to.toFormat('HH:mm') }}</div>
<div class="overflow-scroll pb-5">
<div class="overflow-scroll pb-5 overflow-shadow">
{{ event.event.description }}
</div>
</template>