spenke-nordic-ab/pomoday-app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Implement ESLint with @antfu/eslint-config and apply consistent formatting across the codebase.

Browse Source 
- Refactor `useTasks` to improve task fetching, creation, and updating logic.
- Enhance `TodoItem` and `ListScreen` with improved bindings, sorting, and category handling.
- Update dependencies and adjust task grouping in various components.
This commit is contained in:
Paul Spenke
2026-02-22 16:24:55 +01:00
parent 395129abb1
commit ec76a52fdd
8 changed files with 2863 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/TodoItem.vue
View File

@@ -1,41 +1,46 @@
<script setup lang="ts">
import { PhCheckSquare, PhDotsThree, PhFlag, PhPause, PhPlay, PhSquare, PhX } from '@phosphor-icons/vue';
import { TaskStatus, Task } from '../types.ts';
import { DateTime } from 'luxon';
import { computed, ref } from 'vue';
import { useTasks } from '../composables/useTasks.ts';
import type { Task } from '../types.ts'
import { PhCheckSquare, PhDotsThree, PhFlag, PhPause, PhPlay, PhSquare, PhX } from '@phosphor-icons/vue'
import { DateTime } from 'luxon'
import { computed, ref } from 'vue'
import { useTasks } from '../composables/useTasks.ts'
import { TaskStatus } from '../types.ts'
const {updateTask} = useTasks()
const { task } = defineProps<{ task: Task }>()
const {task} = defineProps<{task: Task}>()
const { updateTask } = useTasks()
const dueColor = computed(() => {
const dueDiff = task.dueDate ? DateTime.fromMillis(task.dueDate).diffNow('days').days : undefined;
if (!dueDiff) return '';
const dueDiff = task.dueDate ? DateTime.fromMillis(task.dueDate).diffNow('days').days : undefined
if (!dueDiff)
return ''
if (dueDiff < 0) {
return 'text-error'
} else if (dueDiff < 2) {
return 'text-warning';
} else if (dueDiff < 7) {
return 'text-success';
} else {
return 'text-neutral';
}
else if (dueDiff < 2) {
return 'text-warning'
}
else if (dueDiff < 7) {
return 'text-success'
}
else {
return 'text-neutral'
}
})
const statusSelectVisible = ref(false);
const statusSelectVisible = ref(false)
const handleClick = async(update: Partial<Task>) => {
updateTask({...task, ...update})
statusSelectVisible.value = false;
async function handleClick(update: Partial<Task>) {
updateTask({ ...task, ...update })
statusSelectVisible.value = false
}
</script>
<template>
<li class="list-row" >
<li class="list-row">
<div class="flex items-center justify-center">
<button class="btn btn-square btn-ghost" @click="statusSelectVisible = !statusSelectVisible">
<PhX :size="20" v-if="statusSelectVisible" />
<PhX v-if="statusSelectVisible" :size="20" />
<template v-else>
<PhSquare v-if="task.status === TaskStatus.WAIT" :size="20" />
<PhCheckSquare v-else-if="task.status === TaskStatus.DONE" :size="20" weight="fill" class="text-success" />
@@ -46,28 +51,30 @@ const handleClick = async(update: Partial<Task>) => {
<Transition>
<div v-if="statusSelectVisible" class="">
<template v-if="task.status !== TaskStatus.WIP">
<button v-if="task.status !== TaskStatus.DONE" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.DONE})">
<button v-if="task.status !== TaskStatus.DONE" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.DONE })">
<PhCheckSquare :size="24" weight="regular" class="text-success" />
</button>
<button v-if="task.status !== TaskStatus.WAIT" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WAIT})">
<button v-if="task.status !== TaskStatus.WAIT" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WAIT })">
<PhSquare :size="24" weight="regular" />
</button>
<button v-if="task.status !== TaskStatus.FLAG" class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.FLAG})">
<button v-if="task.status !== TaskStatus.FLAG" class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.FLAG })">
<PhFlag :size="24" weight="fill" class="text-warning" />
</button>
<button class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WIP})">
<button class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WIP })">
<PhPlay :size="24" weight="fill" class="text-info" />
</button>
</template>
<button v-else class="btn btn-square btn-ghost" @click="handleClick({status: TaskStatus.WAIT})">
<button v-else class="btn btn-square btn-ghost" @click="handleClick({ status: TaskStatus.WAIT })">
<PhPause :size="24" weight="fill" class="text-info" />
</button>
</div>
</Transition>
</div>
<div class="flex flex-col justify-center">
<div>{{task.title}}</div>
<div :class="dueColor" v-if="task.dueDate">{{DateTime.fromMillis(task.dueDate).toFormat('dd/MM/yyyy')}}</div>
<div>{{ task.id_ }} {{ task.title }}</div>
<div v-if="task.dueDate" :class="dueColor">
{{ DateTime.fromMillis(task.dueDate).toFormat('dd/MM/yyyy') }}
</div>
</div>
<button class="btn btn-square btn-ghost">
<PhDotsThree :size="24" weight="regular" />