Fix: Todo component show empty headers and didn't respect show completed property
This commit is contained in:
@@ -12,7 +12,6 @@ const props = defineProps<{
|
||||
}>()
|
||||
const todos = ref<Todo[]>([])
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const showCompleted = ref(props.showCompleted)
|
||||
|
||||
watch(() => props.modelValue, value => {
|
||||
todos.value = value as Todo[];
|
||||
@@ -55,6 +54,12 @@ const groupedTodos = computed(() => {
|
||||
return groups
|
||||
})
|
||||
|
||||
const todosEmpty = (todos: Todo[]) => {
|
||||
if (todos.length === 0) return true
|
||||
if (!props.showCompleted && !todos.some(todo => todo.status?.toLowerCase() !== 'completed')) return true
|
||||
return false
|
||||
}
|
||||
|
||||
const todoTitle = (title: string) => {
|
||||
// If there's no title, return empty string
|
||||
if (!title) return '';
|
||||
@@ -82,71 +87,75 @@ const todoBadge = (title: string) => {
|
||||
const shouldDisplay = (todo: Todo) => {
|
||||
if (todo.status?.toLowerCase() !== 'completed') return true
|
||||
|
||||
return showCompleted.value; // && moment(todo.dueDate).isSameOrAfter(moment(new Date()), 'day')
|
||||
return props.showCompleted;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="todos" v-for="(todos, groupKey) in groupedTodos" :key="groupKey">
|
||||
<!-- Group header -->
|
||||
<h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
|
||||
'text-destructive! font-bold': groupKey === 'overdue',
|
||||
'text-warning! font-bold': groupKey === 'today'
|
||||
}">
|
||||
{{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
|
||||
</h3>
|
||||
<hr>
|
||||
<div v-if="!todosEmpty(todos)">
|
||||
<!-- Group header -->
|
||||
<h3 class="mt-4 mb-2 text-sm text-muted-foreground" :class="{
|
||||
'text-destructive! font-bold': groupKey === 'overdue',
|
||||
'text-warning! font-bold': groupKey === 'today'
|
||||
}">
|
||||
{{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
|
||||
</h3>
|
||||
|
||||
<ul>
|
||||
<li v-for="todo in todos" class="flex gap-3 items-baseline py-2.5 pr-1 transition-all"
|
||||
:class="{ 'scale-y-0 h-0 py-0! my-0 origin-top': !shouldDisplay(todo) }">
|
||||
<hr>
|
||||
|
||||
<!-- Check mark -->
|
||||
<div
|
||||
class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary border flex items-center justify-center">
|
||||
<div class="absolute inset-0.5 rounded-full bg-transparent has-[input:checked]:bg-primary">
|
||||
<input type="checkbox" class="absolute -inset-2 opacity-0"
|
||||
:checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
|
||||
<ul>
|
||||
<li v-for="todo in todos" class="flex gap-3 items-baseline py-2.5 pr-1 transition-all"
|
||||
:class="{ 'scale-y-0 h-0 py-0! my-0 origin-top': !shouldDisplay(todo) }">
|
||||
|
||||
<!-- Check mark -->
|
||||
<div
|
||||
class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary border flex items-center justify-center">
|
||||
<div class="absolute inset-0.5 rounded-full bg-transparent has-[input:checked]:bg-primary">
|
||||
<input type="checkbox" class="absolute -inset-2 opacity-0"
|
||||
:checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text -->
|
||||
<div class="grow overflow-hidden truncate">
|
||||
<!-- Priority -->
|
||||
<span v-if="todo.priority < 5 && todo.priority > 0" class="mr-2 text-destructive">!!!</span>
|
||||
<span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
|
||||
<span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
|
||||
<!-- Text -->
|
||||
<div class="grow overflow-hidden truncate">
|
||||
<!-- Priority -->
|
||||
<span v-if="todo.priority < 5 && todo.priority > 0" class="mr-2 text-destructive">!!!</span>
|
||||
<span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
|
||||
<span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
|
||||
|
||||
<!-- Title -->
|
||||
<label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
|
||||
'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
|
||||
}">
|
||||
{{ todoTitle(todo.title) }}
|
||||
</label>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
|
||||
<Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="outline">{{ todoBadge(todo.title)
|
||||
}}
|
||||
</Badge>
|
||||
<span v-if="todo.dueDate" :class="{
|
||||
'text-destructive! font-bold': groupKey === 'overdue',
|
||||
'text-warning! font-bold': groupKey === 'today'
|
||||
<!-- Title -->
|
||||
<label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
|
||||
'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
|
||||
}">
|
||||
{{ toDuration(todo.dueDate) }}</span>
|
||||
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
|
||||
{{ todoTitle(todo.title) }}
|
||||
</label>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
|
||||
<Badge v-if="props.showTodoable && todoBadge(todo.title)" variant="outline">{{
|
||||
todoBadge(todo.title)
|
||||
}}
|
||||
</Badge>
|
||||
<span v-if="todo.dueDate" :class="{
|
||||
'text-destructive! font-bold': groupKey === 'overdue',
|
||||
'text-warning! font-bold': groupKey === 'today'
|
||||
}">
|
||||
{{ toDuration(todo.dueDate) }}</span>
|
||||
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icon -->
|
||||
<div class="relative top-0.75 text-muted-foreground shrink-0">
|
||||
<PhoneCall v-if="todo.type?.name === 'phoneCall'" :size="18" />
|
||||
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" :size="18" />
|
||||
<Mail v-else-if="todo.type?.name === 'mail'" :size="18" />
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div class="relative top-0.75 text-muted-foreground shrink-0">
|
||||
<PhoneCall v-if="todo.type?.name === 'phoneCall'" :size="18" />
|
||||
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" :size="18" />
|
||||
<Mail v-else-if="todo.type?.name === 'mail'" :size="18" />
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user