Connect CalDAV todos to DB-Items, finish todo component and add it to pipeline items

resources/js/components/Todos.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue"
+import { ref, computed, watch, onMounted } from "vue"
 import { Todo } from "@/types";
 import { toLocalDate, toDuration, isToday, daysFromNow } from "@/lib/utils";
-import { Mail, PhoneCall, ClipboardCheck } from "lucide-vue-next"
+import { Mail, PhoneCall, ClipboardCheck, Repeat } from "lucide-vue-next"
 import { Badge } from '@/components/ui/crm-badge'
 
 const props = defineProps<{
     modelValue?: Todo[] | null
-    showCompleted?: boolean
+    showCompleted?: boolean | false
+    showTodoable?: boolean | false
 }>()
 const todos = ref<Todo[]>([])
 const emit = defineEmits(['update:modelValue'])
@@ -17,6 +18,12 @@ watch(() => props.modelValue, value => {
     todos.value = value as Todo[];
 })
 
+onMounted(() => {
+    if (props.modelValue) {
+        todos.value = props.modelValue as Todo[];
+    }
+})
+
 const groupedTodos = computed(() => {
     const groups: Record<string, Todo[]> = {};
 
@@ -83,8 +90,10 @@ const shouldDisplay = (todo: Todo) => {
 <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-foreground! font-bold': groupKey === 'today' }">
+        <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>
@@ -118,13 +127,15 @@ const shouldDisplay = (todo: Todo) => {
 
                     <!-- Date -->
                     <div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
-                        <Badge v-if="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="{ 'text-destructive font-bold': todo.status?.toLowerCase() != 'completed' && daysFromNow(todo.dueDate) < 0 }">
+                        <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" /> -->
+                        <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
                     </div>
                 </div>