Fix: Todo component show empty headers and didn't respect show completed property

resources/js/components/Todos.vue

@@ -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,13 +87,14 @@ 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">
+        <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',
@@ -96,6 +102,7 @@ const shouldDisplay = (todo: Todo) => {
             }">
                 {{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
             </h3>
+
             <hr>
 
             <ul>
@@ -127,7 +134,8 @@ const shouldDisplay = (todo: Todo) => {
 
                         <!-- 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 v-if="props.showTodoable && todoBadge(todo.title)" variant="outline">{{
+                                todoBadge(todo.title)
                                 }}
                             </Badge>
                             <span v-if="todo.dueDate" :class="{
@@ -149,4 +157,5 @@ const shouldDisplay = (todo: Todo) => {
                 </li>
             </ul>
         </div>
+    </div>
 </template>