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.get('/', (req, res) => {
res.send('Hello World');
res.send('Hello World');
});
app.get('/tasks', async (req, res) => {
@@ -29,115 +29,116 @@ app.get('/tasks', async (req, res) => {
}));
});
app.get('/events', async(req, res) => {
res.status(200).send(await db.select().from(event))
app.get('/events', async (req, res) => {
res.status(200).send(await db.select().from(event))
});
app.get('/user/:id', (req, res) => {
const id = req.params['id'];
const id = req.params['id'];
if (id == null) {
res.status(400).send({error: 'Needs an user id'});
return;
}
if (id == null) {
res.status(400).send({ error: 'Needs an user id' });
return;
}
const user = {id: id, name: 'Cracker'} //TODO
res.json(user);
const user = { id: id, name: 'Cracker' } //TODO
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) {
res.status(400).send({error: 'Needs an id'});
return;
}
if (id == null) {
res.status(400).send({ error: 'Needs an id' });
return;
}
const returnedTask = await db.select().from(task).where(eq(task.id, id))
//
console.log(returnedTask)
res.json(returnedTask);
const returnedTask = await db.select().from(task).where(eq(task.id, id))
//
console.log(returnedTask)
res.json(returnedTask);
});
app.get('/event/:id', (req, res) => {
const id = req.params['id'];
const id = req.params['id'];
if (id == null) {
res.status(400).send({error: 'Needs an id'});
return;
}
if (id == null) {
res.status(400).send({ error: 'Needs an id' });
return;
}
const event = {id: id, name: 'Pary'} //TODO
res.json(event);
const event = { id: id, name: 'Pary' } //TODO
res.json(event);
});
app.post('/task', async(req, res) => {
app.post('/task', async (req, res) => {
const newTask = req.body
newTask.userid = userId
const newTask = req.body
newTask.userid = userId
console.log(newTask)
const returnedTask = await db.insert(task).values(newTask).returning()
console.log(returnedTask)
const returnedTasks = await db.insert(task).values(newTask).returning()
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
newEvent.userid = userId
const newEvent: typeof event.$inferInsert = req.body
newEvent.userid = userId
const returnedEvent = await db.insert(event).values(newEvent).returning()
console.log(returnedEvent)
const returnedEvent = await db.insert(event).values(newEvent).returning()
console.log(returnedEvent)
res.status(201).json(returnedEvent);
res.status(201).json(returnedEvent);
});
app.put('/task', (req, res) => {
const id = parseInt(req.params['id']);
const updatedTask: Partial<typeof task.$inferSelect> = req.body
const id = parseInt(req.params['id']);
const updatedTask: Partial<typeof task.$inferSelect> = req.body
if (id == null) {
res.status(400).send({error: 'Needs an id'});
return;
}
db.update(task).set(updatedTask).where(eq(task.id, id))
if (id == null) {
res.status(400).send({ error: 'Needs an id' });
return;
}
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) => {
const id = parseInt(req.params['id']);
const updatedEvent: Partial<typeof event.$inferSelect> = req.body
const id = parseInt(req.params['id']);
const updatedEvent: Partial<typeof event.$inferSelect> = req.body
if (id == null) {
res.status(400).send({error: 'Needs an id'});
return;
}
db.update(event).set(updatedEvent).where(eq(event.id, id))
if (id == null) {
res.status(400).send({ error: 'Needs an id' });
return;
}
db.update(event).set(updatedEvent).where(eq(event.id, id))
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");
res.status(200).json(updatedEvent);
});
app.delete('/event/:id', async(req, res) => {
const id = parseInt(req.params['id']);
app.delete('/task/:id', async (req, res) => {
const id = parseInt(req.params['id']);
const success = await db.delete(event).where(eq(event.id, id))
res.send("Deleted");
const success = await db.delete(task).where(eq(task.id, id))
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, () => {
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 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 date = defineModel<DateTime>('date', { required: true })
const tasks = defineModel<Task[]>('tasks', { required: true })
const emits = defineEmits<{
(e: 'createTask', name: string): void
(e: 'createTask', task: Task): void
(e: 'deleteTask', id: number): void
(e: 'editTask', task: Task): void
}>()
@@ -78,22 +79,22 @@ const selectedDate = computed({
}
})
function addTask() {
const name = prompt("Todo name:")
console.log(name)
if (name !== null) {
emits('createTask', name)
}
function addTask(task: Task) {
tasks.value.push(task)
console.log(tasks.value)
emits('createTask', task)
}
function deleteTask(todo: Task) {
if (todo.id === undefined) {
function deleteTask(task: Task) {
if (task.id === undefined) {
toast.add({
title: "Task does not exist anymore"
})
return
}
emits('deleteTask', todo.id)
tasks.value = tasks.value.filter(t => t.id !== task.id)
emits('deleteTask', task.id)
}
function editTask(task: Task) {
emits('editTask', task)
@@ -101,14 +102,22 @@ function editTask(task: Task) {
function openTaskFormModal(task: Partial<Task>) {
taskFormModalInput.value = task
showTaskFormModal.value = true
showTaskCreateModal.value = true
}
function openTaskEditModal(task: Task) {
taskFormModalInput.value = task
showTaskEditModal.value = true
}
</script>
<template>
<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">
<header class="flex flex-col gap-2">
@@ -117,7 +126,7 @@ function openTaskFormModal(task: Partial<Task>) {
</header>
<div class="flex flex-col grow justify-between">
<div class="flex flex-col gap-2">
<Title1>Todos</Title1>
<Title1>Tasks</Title1>
<div class="flex gap-2 flex-col">
<ListItem v-for="task in todoTasks">
<div class="flex w-full gap-4 items-center">
@@ -127,7 +136,7 @@ function openTaskFormModal(task: Partial<Task>) {
</span>
<div class="flex gap-1">
<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"
icon="octicon:trashcan-16" @click="() => deleteTask(task)" />
</div>
@@ -142,7 +151,7 @@ function openTaskFormModal(task: Partial<Task>) {
</span>
<div class="flex gap-1">
<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"
@click="() => deleteTask(task)" icon="octicon:trashcan-16" />
</div>

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

@@ -35,6 +35,7 @@ watchEffect(() => {
descriptionField.value = props.input.description ?? ''
estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60)
dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? ''
dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? ''
})
const formSchema = z.object({
@@ -89,10 +90,13 @@ function cancel() {
<template #body>
<div class="flex flex-col gap-2">
<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">
<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 />
<UInput class="grow" placeholder="15:34" v-model="dueTimeField" icon="i-lucide-clock" required />
</div>
<UTextarea type="text" placeholder="Description" v-model="descriptionField" required />
</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 events = ref<Event[]>([])
const tasks = ref<Task[]>([])
const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
'events',
() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
);
const {data: tasksResponse, refresh} = await useAsyncData<SerializableTask[]>(
const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
'tasks',
() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
);
onMounted(() => {
events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
})
const tasks = computed(() => {
return tasksResponse.value?.map(Task.fromSerializable) ?? []
tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
})
async function postEvent(event: Event) {
@@ -31,16 +29,11 @@ async function postEvent(event: Event) {
await axios.post('/event', event.toSerializable())
}
async function postTask(name: string) {
async function postTask(task: Task) {
console.log('posting Task')
await axios.post('/task', {
title: name,
description: "",
done: false,
estimated_time: 0,
due_date: (new Date()).toISOString(),
})
await refresh()
const createdTask = await axios.post<SerializableTask>('/task', task)
console.log(createdTask)
task.id = createdTask.data.id
}
async function deleteTask(id: number) {