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

creating modal works, edit modal is showing

Browse Source
This commit is contained in:
quirinecker
2025-07-05 11:02:01 +02:00
parent ebcbab654f
commit 22ca3e9645
4 changed files with 105 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
backend/src/main.ts
View File

@@ -18,7 +18,7 @@ app.use(cors())
app.use(express.json()); app.use(express.json());
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.send('Hello World'); res.send('Hello World');
}); });
app.get('/tasks', async (req, res) => { app.get('/tasks', async (req, res) => {
@@ -29,115 +29,116 @@ app.get('/tasks', async (req, res) => {
})); }));
}); });
app.get('/events', async(req, res) => { app.get('/events', async (req, res) => {
res.status(200).send(await db.select().from(event)) res.status(200).send(await db.select().from(event))
}); });
app.get('/user/:id', (req, res) => { app.get('/user/:id', (req, res) => {
const id = req.params['id']; const id = req.params['id'];
if (id == null) { if (id == null) {
res.status(400).send({error: 'Needs an user id'}); res.status(400).send({ error: 'Needs an user id' });
return; return;
} }
const user = {id: id, name: 'Cracker'} //TODO const user = { id: id, name: 'Cracker' } //TODO
res.json(user); res.json(user);
}); });
app.get('/task/:id', async(req, res) => { app.get('/task/:id', async (req, res) => {
const id = parseInt(req.params['id']); const id = parseInt(req.params['id']);
if (id == null) { if (id == null) {
res.status(400).send({error: 'Needs an id'}); res.status(400).send({ error: 'Needs an id' });
return; return;
} }
const returnedTask = await db.select().from(task).where(eq(task.id, id)) const returnedTask = await db.select().from(task).where(eq(task.id, id))
// //
console.log(returnedTask) console.log(returnedTask)
res.json(returnedTask); res.json(returnedTask);
}); });
app.get('/event/:id', (req, res) => { app.get('/event/:id', (req, res) => {
const id = req.params['id']; const id = req.params['id'];
if (id == null) { if (id == null) {
res.status(400).send({error: 'Needs an id'}); res.status(400).send({ error: 'Needs an id' });
return; return;
} }
const event = {id: id, name: 'Pary'} //TODO const event = { id: id, name: 'Pary' } //TODO
res.json(event); res.json(event);
}); });
app.post('/task', async(req, res) => { app.post('/task', async (req, res) => {
const newTask = req.body const newTask = req.body
newTask.userid = userId newTask.userid = userId
console.log(newTask) console.log(newTask)
const returnedTask = await db.insert(task).values(newTask).returning() const returnedTasks = await db.insert(task).values(newTask).returning()
console.log(returnedTask) console.log(returnedTasks)
res.status(201).json(returnedTask); res.status(201).json(returnedTasks[0]);
}); });
app.post('/event', async(req, res) => { app.post('/event', async (req, res) => {
const newEvent: typeof event.$inferInsert = req.body const newEvent: typeof event.$inferInsert = req.body
newEvent.userid = userId newEvent.userid = userId
const returnedEvent = await db.insert(event).values(newEvent).returning() const returnedEvent = await db.insert(event).values(newEvent).returning()
console.log(returnedEvent) console.log(returnedEvent)
res.status(201).json(returnedEvent); res.status(201).json(returnedEvent);
}); });
app.put('/task', (req, res) => { app.put('/task', (req, res) => {
const id = parseInt(req.params['id']); const id = parseInt(req.params['id']);
const updatedTask: Partial<typeof task.$inferSelect> = req.body const updatedTask: Partial<typeof task.$inferSelect> = req.body
if (id == null) { if (id == null) {
res.status(400).send({error: 'Needs an id'}); res.status(400).send({ error: 'Needs an id' });
return; return;
} }
db.update(task).set(updatedTask).where(eq(task.id, id)) db.update(task).set(updatedTask).where(eq(task.id, id))
res.status(200).json(updatedTask); res.status(200).json(updatedTask);
}); });
app.put('/event', (req, res) => { app.put('/event', (req, res) => {
const id = parseInt(req.params['id']); const id = parseInt(req.params['id']);
const updatedEvent: Partial<typeof event.$inferSelect> = req.body const updatedEvent: Partial<typeof event.$inferSelect> = req.body
if (id == null) { if (id == null) {
res.status(400).send({error: 'Needs an id'}); res.status(400).send({ error: 'Needs an id' });
return; return;
} }
db.update(event).set(updatedEvent).where(eq(event.id, id)) db.update(event).set(updatedEvent).where(eq(event.id, id))
res.status(200).json(updatedEvent);}); res.status(200).json(updatedEvent);
app.delete('/task/:id', async(req, res) => {
const id = parseInt(req.params['id']);
const success = await db.delete(task).where(eq(task.id, id))
res.send("Deleted");
}); });
app.delete('/event/:id', async(req, res) => { app.delete('/task/:id', async (req, res) => {
const id = parseInt(req.params['id']); const id = parseInt(req.params['id']);
const success = await db.delete(event).where(eq(event.id, id)) const success = await db.delete(task).where(eq(task.id, id))
res.send("Deleted"); res.send("Deleted");
});
app.delete('/event/:id', async (req, res) => {
const id = parseInt(req.params['id']);
const success = await db.delete(event).where(eq(event.id, id))
res.send("Deleted");
}); });
app.listen(8080, () => { app.listen(8080, () => {
console.log('Listening on port 8080'); console.log('Listening on port 8080');
}); });

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

@@ -9,14 +9,15 @@ const colorMode = useColorMode();
const toast = useToast() const toast = useToast()
const currentTheme = ref<'dark' | 'system' | 'light'>(colorMode.preference as 'dark' | 'system' | 'light'); const currentTheme = ref<'dark' | 'system' | 'light'>(colorMode.preference as 'dark' | 'system' | 'light');
const showTaskFormModal = ref(false); const showTaskCreateModal = ref(false);
const showTaskEditModal = ref(false);
const taskFormModalInput = ref<Partial<Task>>({}); const taskFormModalInput = ref<Partial<Task>>({});
const date = defineModel<DateTime>('date', { required: true }) const date = defineModel<DateTime>('date', { required: true })
const tasks = defineModel<Task[]>('tasks', { required: true }) const tasks = defineModel<Task[]>('tasks', { required: true })
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'createTask', name: string): void (e: 'createTask', task: Task): void
(e: 'deleteTask', id: number): void (e: 'deleteTask', id: number): void
(e: 'editTask', task: Task): void (e: 'editTask', task: Task): void
}>() }>()
@@ -78,22 +79,22 @@ const selectedDate = computed({
} }
}) })
function addTask() { function addTask(task: Task) {
const name = prompt("Todo name:") tasks.value.push(task)
console.log(name) console.log(tasks.value)
if (name !== null) { emits('createTask', task)
emits('createTask', name)
}
} }
function deleteTask(todo: Task) { function deleteTask(task: Task) {
if (todo.id === undefined) { if (task.id === undefined) {
toast.add({ toast.add({
title: "Task does not exist anymore" title: "Task does not exist anymore"
}) })
return return
} }
emits('deleteTask', todo.id) tasks.value = tasks.value.filter(t => t.id !== task.id)
emits('deleteTask', task.id)
} }
function editTask(task: Task) { function editTask(task: Task) {
emits('editTask', task) emits('editTask', task)
@@ -101,14 +102,22 @@ function editTask(task: Task) {
function openTaskFormModal(task: Partial<Task>) { function openTaskFormModal(task: Partial<Task>) {
taskFormModalInput.value = task taskFormModalInput.value = task
showTaskFormModal.value = true showTaskCreateModal.value = true
}
function openTaskEditModal(task: Task) {
taskFormModalInput.value = task
showTaskEditModal.value = true
} }
</script> </script>
<template> <template>
<UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }"> <UCard class="flex w-64 h-full" :ui="{ body: 'w-full' }">
<UiTaskFormModal v-model:open="showTaskFormModal" :input="taskFormModalInput" action="create" /> <UiTaskFormModal v-model:open="showTaskCreateModal" :input="taskFormModalInput" action="create"
@submnitted="addTask" />
<UiTaskFormModal v-model:open="showTaskEditModal" :input="taskFormModalInput" action="edit"
@submnitted="editTask" />
<div class="flex flex-col h-full w-full gap-5"> <div class="flex flex-col h-full w-full gap-5">
<header class="flex flex-col gap-2"> <header class="flex flex-col gap-2">
@@ -117,7 +126,7 @@ function openTaskFormModal(task: Partial<Task>) {
</header> </header>
<div class="flex flex-col grow justify-between"> <div class="flex flex-col grow justify-between">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<Title1>Todos</Title1> <Title1>Tasks</Title1>
<div class="flex gap-2 flex-col"> <div class="flex gap-2 flex-col">
<ListItem v-for="task in todoTasks"> <ListItem v-for="task in todoTasks">
<div class="flex w-full gap-4 items-center"> <div class="flex w-full gap-4 items-center">
@@ -127,7 +136,7 @@ function openTaskFormModal(task: Partial<Task>) {
</span> </span>
<div class="flex gap-1"> <div class="flex gap-1">
<UButton size="xs" color="neutral" class="flex justify-center" <UButton size="xs" color="neutral" class="flex justify-center"
icon="mingcute:pencil-line" @click="() => editTask(task)" /> icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
<UButton size="xs" color="primary" class="flex justify-center" <UButton size="xs" color="primary" class="flex justify-center"
icon="octicon:trashcan-16" @click="() => deleteTask(task)" /> icon="octicon:trashcan-16" @click="() => deleteTask(task)" />
</div> </div>
@@ -142,7 +151,7 @@ function openTaskFormModal(task: Partial<Task>) {
</span> </span>
<div class="flex gap-1"> <div class="flex gap-1">
<UButton size="xs" color="neutral" class="flex justify-center" <UButton size="xs" color="neutral" class="flex justify-center"
icon="mingcute:pencil-line" @click="() => editTask(task)" /> icon="mingcute:pencil-line" @click="() => openTaskEditModal(task)" />
<UButton size="xs" color="primary" class="flex justify-center" <UButton size="xs" color="primary" class="flex justify-center"
@click="() => deleteTask(task)" icon="octicon:trashcan-16" /> @click="() => deleteTask(task)" icon="octicon:trashcan-16" />
</div> </div>

8
web/components/ui/TaskFormModal.vue
View File

@@ -35,6 +35,7 @@ watchEffect(() => {
descriptionField.value = props.input.description ?? '' descriptionField.value = props.input.description ?? ''
estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60) estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60)
dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? '' dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? ''
dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? ''
}) })
const formSchema = z.object({ const formSchema = z.object({
@@ -89,10 +90,13 @@ function cancel() {
<template #body> <template #body>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<UInput type="text" placeholder="Name" v-model="titleField" required /> <UInput type="text" placeholder="Name" v-model="titleField" required />
<UInput type="number" class="grow" placeholder="estimated time in hours" v-model="estimatedTimeField"
icon="mdi:stopwatch-outline" required />
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<UInput class="grow" placeholder="2025-06-16" v-model="dueDateField" icon="i-lucide-calendar" <UInput type="date" class="grow" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
icon="i-lucide-calendar" required />
<UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock"
required /> required />
<UInput class="grow" placeholder="15:34" v-model="dueTimeField" icon="i-lucide-clock" required />
</div> </div>
<UTextarea type="text" placeholder="Description" v-model="descriptionField" required /> <UTextarea type="text" placeholder="Description" v-model="descriptionField" required />
</div> </div>

21
web/pages/index.vue
View File

@@ -7,23 +7,21 @@ import { Event, type SerializableEvent } from '~/utils/event';
const date = ref<DateTime>(DateTime.now()) const date = ref<DateTime>(DateTime.now())
const events = ref<Event[]>([]) const events = ref<Event[]>([])
const tasks = ref<Task[]>([])
const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>( const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
'events', 'events',
() => axios.get<SerializableEvent[]>('/events').then(res => res.data) () => axios.get<SerializableEvent[]>('/events').then(res => res.data)
); );
const {data: tasksResponse, refresh} = await useAsyncData<SerializableTask[]>( const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
'tasks', 'tasks',
() => axios.get<SerializableTask[]>('/tasks').then(res => res.data) () => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
); );
onMounted(() => { onMounted(() => {
events.value = eventsResponse.value?.map(Event.fromSerializable) ?? [] events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
}) tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
const tasks = computed(() => {
return tasksResponse.value?.map(Task.fromSerializable) ?? []
}) })
async function postEvent(event: Event) { async function postEvent(event: Event) {
@@ -31,16 +29,11 @@ async function postEvent(event: Event) {
await axios.post('/event', event.toSerializable()) await axios.post('/event', event.toSerializable())
} }
async function postTask(name: string) { async function postTask(task: Task) {
console.log('posting Task') console.log('posting Task')
await axios.post('/task', { const createdTask = await axios.post<SerializableTask>('/task', task)
title: name, console.log(createdTask)
description: "", task.id = createdTask.data.id
done: false,
estimated_time: 0,
due_date: (new Date()).toISOString(),
})
await refresh()
} }
async function deleteTask(id: number) { async function deleteTask(id: number) {