From c6f5789ad39c16f0559660720af08801f80ec01f Mon Sep 17 00:00:00 2001 From: quirinecker Date: Mon, 16 Jun 2025 19:51:31 +0200 Subject: [PATCH] added overflow for tasks and overflow shadow to all overflows. also minimum drag distance is now 10px --- web/assets/css/main.css | 7 ++ web/components/ui/EventFormModal.vue | 1 + web/components/ui/ListItem.vue | 2 +- web/components/ui/Sidebar.vue | 55 ++++++++++------ web/components/ui/calendar/Calendar.vue | 14 +++- .../ui/calendar/CalendarCollumn.vue | 7 ++ web/components/ui/calendar/CalendarEvent.vue | 2 +- web/pages/index.vue | 64 +++++++++---------- web/utils/event.ts | 31 +++++++-- 9 files changed, 124 insertions(+), 59 deletions(-) diff --git a/web/assets/css/main.css b/web/assets/css/main.css index f59a066..7a2fbdf 100644 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -1,6 +1,13 @@ @import "tailwindcss"; @import "@nuxt/ui"; +.overflow-shadow { + overflow-x: auto; + position: relative; + mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); + -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 90%, rgba(0,0,0,0)); +} + :root { --ui-primary: #C02942; --ui-text-dimmed: var(--ui-color-neutral-400); diff --git a/web/components/ui/EventFormModal.vue b/web/components/ui/EventFormModal.vue index 3810012..666a10d 100644 --- a/web/components/ui/EventFormModal.vue +++ b/web/components/ui/EventFormModal.vue @@ -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), diff --git a/web/components/ui/ListItem.vue b/web/components/ui/ListItem.vue index b16cc92..a115f61 100644 --- a/web/components/ui/ListItem.vue +++ b/web/components/ui/ListItem.vue @@ -3,7 +3,7 @@ diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue index d8f7ee7..5e0445e 100644 --- a/web/components/ui/Sidebar.vue +++ b/web/components/ui/Sidebar.vue @@ -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() { - + diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue index d9a8f33..91f1499 100644 --- a/web/components/ui/calendar/Calendar.vue +++ b/web/components/ui/calendar/Calendar.vue @@ -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 } diff --git a/web/components/ui/calendar/CalendarCollumn.vue b/web/components/ui/calendar/CalendarCollumn.vue index 5cbb2bc..e644b96 100644 --- a/web/components/ui/calendar/CalendarCollumn.vue +++ b/web/components/ui/calendar/CalendarCollumn.vue @@ -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 diff --git a/web/components/ui/calendar/CalendarEvent.vue b/web/components/ui/calendar/CalendarEvent.vue index 8802e6c..0b97445 100644 --- a/web/components/ui/calendar/CalendarEvent.vue +++ b/web/components/ui/calendar/CalendarEvent.vue @@ -64,7 +64,7 @@ function dragStart(e: DragEvent) { diff --git a/web/pages/index.vue b/web/pages/index.vue index 5f1b1f1..47e8371 100644 --- a/web/pages/index.vue +++ b/web/pages/index.vue @@ -1,5 +1,4 @@ - \ No newline at end of file + diff --git a/web/utils/event.ts b/web/utils/event.ts index 6c73275..358fb98 100644 --- a/web/utils/event.ts +++ b/web/utils/event.ts @@ -4,7 +4,8 @@ export class Event { private static readonly MINUTES_IN_DAY = 24 * 60 constructor( - public readonly title: string, + public id: number | undefined, + public title: string, public from: DateTime, public to: DateTime, public description: string @@ -39,15 +40,28 @@ export class Event { } static fromSimple(event: SimpleEvent): Event { - return new Event(event.title, event.from, event.to, event.description) + return new Event( + event.id, + event.title, + event.from, + event.to, + event.description + ) } static fromSerializable(event: SerializableEvent) { - return new Event(event.title, DateTime.fromISO(event.from), DateTime.fromISO(event.to), event.description) + return new Event( + event.id, + event.title, + DateTime.fromISO(event.from), + DateTime.fromISO(event.to), + event.description + ) } - static fromPercentDimensions(title: string, dimensions: EventDimensions, date: DateTime, description: string): Event { + static fromPercentDimensions(id: number | undefined, title: string, dimensions: EventDimensions, date: DateTime, description: string): Event { return new Event( + id, title, date.startOf('day').plus({ minutes: (dimensions.from / 100) * Event.MINUTES_IN_DAY }), date.startOf('day').plus({ minutes: (dimensions.to / 100) * Event.MINUTES_IN_DAY }), @@ -55,13 +69,13 @@ export class Event { ) } - static fromPixelDimensions(title: string, dimensions: EventDimensions, height: number, date: DateTime, description: string): Event { + static fromPixelDimensions(id: number | undefined, title: string, dimensions: EventDimensions, height: number, date: DateTime, description: string): Event { const percentDimensions: EventDimensions = { from: dimensions.from * 100 / height, to: dimensions.to * 100 / height } - return Event.fromPercentDimensions(title, percentDimensions, date, description) + return Event.fromPercentDimensions(id, title, percentDimensions, date, description) } static fromDraggedEvent(draggedEvent: DraggedEvent, height: number): Event { @@ -71,6 +85,7 @@ export class Event { } return Event.fromPixelDimensions( + draggedEvent.target.id, draggedEvent.target.title, pixelDimensions, height, @@ -91,6 +106,7 @@ export class Event { toSimple(): SimpleEvent { return { + id: this.id, title: this.title, from: this.from, to: this.to, @@ -100,6 +116,7 @@ export class Event { toSerializable(): SerializableEvent { return { + id: this.id, title: this.title, from: this.from.toISO() ?? '', to: this.to.toISO() ?? '', @@ -135,6 +152,7 @@ export type EventDimensions = { } export type SimpleEvent = { + id: number | undefined, title: string, from: DateTime, to: DateTime @@ -142,6 +160,7 @@ export type SimpleEvent = { } export type SerializableEvent = { + id: number | undefined, title: string, from: string, to: string