serialinvoice fix

frontend/pages/createDocument/serialInvoice.vue

@@ -151,7 +151,7 @@
           </div>
         </template>
 
-      <div class="space-y-4">
+      <div class="max-h-[70vh] space-y-4 overflow-y-auto pr-1">
         <UFormField label="Ausführungsdatum (Belegdatum)" help="Dieses Datum steuert auch den Leistungszeitraum (z.B. Vormonat bei 'Rückwirkend').">
           <div class="flex items-center gap-2">
             <UInput type="date" v-model="executionDate" class="flex-1" />
@@ -197,18 +197,37 @@
                 color="gray"
                 variant="ghost"
                 label="Keine"
-                @click="selectedExecutionRows = []"
+                @click="clearSelectedTemplates"
             />
           </div>
         </div>
 
         <div class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-800 rounded-md">
           <UTable
-              v-model="selectedExecutionRows"
+              v-model:row-selection="executionRowSelection"
               :data="filteredExecutionList"
               :columns="normalizeTableColumns(executionColumns)"
+              :row-selection-options="{ enableMultiRowSelection: true }"
+              :get-row-id="(row) => row.id"
               :ui="{ th: { base: 'whitespace-nowrap' } }"
+              :on-select="toggleExecutionRow"
           >
+            <template #select-header="{ table }">
+              <div class="flex justify-center" @click.stop>
+                <UCheckbox
+                    :model-value="table.getIsAllPageRowsSelected() ? true : (table.getIsSomePageRowsSelected() ? 'indeterminate' : false)"
+                    @update:model-value="table.toggleAllPageRowsSelected(!!$event)"
+                />
+              </div>
+            </template>
+            <template #select-cell="{ row }">
+              <div class="flex justify-center" @click.stop>
+                <UCheckbox
+                    :model-value="row.getIsSelected()"
+                    @update:model-value="row.toggleSelected(!!$event)"
+                />
+              </div>
+            </template>
             <template #partner-cell="{row}">
               {{row.original.customer ? row.original.customer.name : "-"}}
             </template>
@@ -305,7 +324,7 @@ const selectedItem = ref(0)
 // --- Execution State ---
 const showExecutionModal = ref(false)
 const executionDate = ref(dayjs().format('YYYY-MM-DD'))
-const selectedExecutionRows = ref([])
+const executionRowSelection = ref({})
 const isExecuting = ref(false)
 const modalSearch = ref("") // NEU: Suchstring für das Modal
 const selectedExecutionIntervall = ref("all")
@@ -484,15 +503,33 @@ const filteredExecutionList = computed(() => {
   })
 })
 
+const selectedExecutionRows = computed(() => {
+  return activeTemplates.value.filter(row => !!executionRowSelection.value[row.id])
+})
+
 watch(selectedExecutionIntervall, () => {
-  selectedExecutionRows.value = [...filteredExecutionList.value]
+  executionRowSelection.value = filteredExecutionList.value.reduce((acc, row) => {
+    acc[row.id] = true
+    return acc
+  }, {})
 })
 
 // NEU: Alle auswählen (nur die aktuell sichtbaren/gefilterten)
 const selectAllTemplates = () => {
   // WICHTIG: Überschreibt nicht bestehende Auswahl, sondern fügt hinzu oder ersetzt.
   // Hier ersetzen wir die Auswahl komplett mit dem aktuellen Filterergebnis
-  selectedExecutionRows.value = [...filteredExecutionList.value]
+  executionRowSelection.value = filteredExecutionList.value.reduce((acc, row) => {
+    acc[row.id] = true
+    return acc
+  }, {})
+}
+
+const clearSelectedTemplates = () => {
+  executionRowSelection.value = {}
+}
+
+const toggleExecutionRow = (row) => {
+  row.toggleSelected(!row.getIsSelected())
 }
 
 const getActionItems = (row) => {
@@ -542,6 +579,7 @@ const templateColumns = [
 ]
 
 const executionColumns = [
+  {key: 'select', label: ""},
   {key: 'partner', label: "Kunde"},
   {key: 'plant', label: "Objekt"},
   {key: 'contract', label: "Vertrag"},
@@ -586,7 +624,7 @@ const openExecutionModal = () => {
   executionDate.value = dayjs().format('YYYY-MM-DD')
   modalSearch.value = "" // Reset Search
   selectedExecutionIntervall.value = "all"
-  selectedExecutionRows.value = []
+  executionRowSelection.value = {}
   showExecutionModal.value = true
 }
 
@@ -615,7 +653,7 @@ const executeSerialInvoices = async () => {
     })
 
     showExecutionModal.value = false
-    selectedExecutionRows.value = []
+    executionRowSelection.value = {}
 
     await fetchExecutions()