KI-AGENT: Einklappbare Titelbereiche im Dokumenteneditor ergänzen

frontend/pages/createDocument/edit/[[id]].vue

@@ -91,6 +91,7 @@ const selectedProductcategorie = ref(null)
 const services = ref([])
 const servicecategories = ref([])
 const selectedServicecategorie = ref(null)
+const collapsedTitleRowIds = ref(new Set())
 const customers = ref([])
 const contacts = ref([])
 const contracts = ref([])
@@ -928,6 +929,45 @@ const getPositionAddMenuItems = (row) => [
   }))
 ]
 
+const toggleTitleSection = (rowId) => {
+  const nextCollapsedTitleRowIds = new Set(collapsedTitleRowIds.value)
+
+  if (nextCollapsedTitleRowIds.has(rowId)) {
+    nextCollapsedTitleRowIds.delete(rowId)
+  } else {
+    nextCollapsedTitleRowIds.add(rowId)
+  }
+
+  collapsedTitleRowIds.value = nextCollapsedTitleRowIds
+}
+
+const hiddenDocumentRowIds = computed(() => {
+  const hiddenRowIds = new Set()
+  const collapsedTitleLevels = []
+
+  itemInfo.value.rows.forEach((row) => {
+    if (row.mode === 'title') {
+      const titleLevel = Math.min(Math.max(Number(row.titleLevel) || 1, 1), 3)
+
+      while (
+        collapsedTitleLevels.length > 0
+        && collapsedTitleLevels[collapsedTitleLevels.length - 1] >= titleLevel
+      ) {
+        collapsedTitleLevels.pop()
+      }
+
+      if (collapsedTitleLevels.length > 0) hiddenRowIds.add(row.id)
+      if (collapsedTitleRowIds.value.has(row.id)) collapsedTitleLevels.push(titleLevel)
+    } else if (collapsedTitleLevels.length > 0) {
+      hiddenRowIds.add(row.id)
+    }
+  })
+
+  return hiddenRowIds
+})
+
+const isDocumentRowHidden = (rowId) => hiddenDocumentRowIds.value.has(rowId)
+
 const getFullWidthPositionColspan = () => deliveryNoteLikeDocumentTypes.includes(itemInfo.value.type) ? 5 : 8
 
 const getTitlePositionColspan = () => deliveryNoteLikeDocumentTypes.includes(itemInfo.value.type) ? 4 : 7
@@ -2875,7 +2915,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 @end="setPosNumbers"
             >
               <template #item="{element: row}">
-                <tr>
+                <tr v-show="!isDocumentRowHidden(row.id)">
                   <td>
                     <UIcon
                         class="handle"
@@ -3501,6 +3541,15 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                       :colspan="getTitlePositionColspan()"
                   >
                     <InputGroup class="w-full">
+                      <UTooltip :text="collapsedTitleRowIds.has(row.id) ? 'Titelbereich ausklappen' : 'Titelbereich einklappen'">
+                        <UButton
+                            variant="ghost"
+                            color="neutral"
+                            :icon="collapsedTitleRowIds.has(row.id) ? 'i-heroicons-chevron-right' : 'i-heroicons-chevron-down'"
+                            :aria-label="collapsedTitleRowIds.has(row.id) ? 'Titelbereich ausklappen' : 'Titelbereich einklappen'"
+                            @click="toggleTitleSection(row.id)"
+                        />
+                      </UTooltip>
                       <USelect
                           :disabled="itemInfo.type === 'cancellationInvoices'"
                           v-model="row.titleLevel"