Merge remote-tracking branch 'origin/dev' into dev

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([])
@@ -935,6 +936,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
@@ -2897,13 +2937,28 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 @end="setPosNumbers"
             >
               <template #item="{element: row}">
-                <tr>
+                <tr :class="{ collapse: isDocumentRowHidden(row.id) }">
                   <td>
-                    <UIcon
-                        class="handle"
-                        name="i-mdi-menu"
-                        v-if="itemInfo.type !== 'cancellationInvoices'"
-                    />
+                    <div class="flex items-center gap-1 whitespace-nowrap">
+                      <UIcon
+                          class="handle shrink-0"
+                          name="i-mdi-menu"
+                          v-if="itemInfo.type !== 'cancellationInvoices'"
+                      />
+                      <UTooltip
+                          v-if="row.mode === 'title'"
+                          :text="collapsedTitleRowIds.has(row.id) ? 'Titelbereich ausklappen' : 'Titelbereich einklappen'"
+                      >
+                        <UButton
+                            class="shrink-0"
+                            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>
+                    </div>
                   </td>
                   <td
                       v-if="row.mode === 'pagebreak'"