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

resources/js/components/documents/LineItemTable.vue

@@ -24,7 +24,7 @@ import { toast } from "vue-sonner";
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 
 
-const DEBUG = ref(true)
+const DEBUG = ref(false)
 
 const props = defineProps<{
   isLoading?: boolean,
@@ -60,12 +60,12 @@ watch(() => props.lineItems, async (newLineItems) => {
   updateFromParent.value = true
 
   // Only update if the items actually changed
-  if (JSON.stringify(items.value) !== JSON.stringify(newLineItems)) {
-    items.value = (newLineItems ?? [])
-  } else {
-    console.log('already up to date, no change')
-  }
-  // items.value = (newLineItems ?? [])
+  // if (JSON.stringify(items.value) !== JSON.stringify(newLineItems)) {
+  //   items.value = (newLineItems ?? [])
+  // } else {
+  //   console.log('already up to date, no change')
+  // }
+  items.value = (newLineItems ?? [])
 
   // Reset flag after next tick
   await nextTick()
@@ -90,6 +90,7 @@ watch(items, (newItems) => {
 
   // Don't emit changes in loading
   if (props.isLoading || updateFromParent.value) return
+  recalculatePositions()
   console.log('emit update:lineItems')
   emit('update:lineItems', newItems)
 }, { deep: true })
@@ -144,6 +145,7 @@ const deleteItem = (lineItem: LineItem) => {
 }
 
 const recalculatePositions = () => {
+  console.log('recalculatePositions')
   for (let i = 0; i < items.value.length; i++) {
     items.value[i].position = getNextPosition(i, items.value[i].isSection)
   }
@@ -189,8 +191,7 @@ const recalculatePositions = () => {
         <TableHead class="h-0 w-8"></TableHead>
       </TableRow>
 
-      <draggable v-model="items" tag="tbody" item-key="position" handle=".handle" ghostClass="ghost"
-        @end="recalculatePositions">
+      <draggable v-model="items" tag="tbody" item-key="position" handle=".handle" ghostClass="ghost">
         <template #item="{ element }">
 
           <TableRow v-if="element.isSection">
@@ -205,8 +206,7 @@ const recalculatePositions = () => {
               <GrowingTextarea v-model="element.description" placeholder="Text"
                 class="font-light bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 py-0 px-1 m-0 border-none shadow-none" />
             </TableCell>
-
-
+            
             <!-- Buttons -->
             <TableCell class="w-8 text-right px-1">
               <Button variant="ghost" size="sm" @click="deleteItem(element)"