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

@@ -5,6 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 import {useFunctions} from "~/composables/useFunctions.js";
 import EntityModalButtons from "~/components/EntityModalButtons.vue";
 import { documentTemplateHandlebars } from "~/utils/handlebars";
+import { getTitleSectionMove, moveTitleSection } from "~/utils/documentTitleSections.js";
 
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
@@ -1017,6 +1018,24 @@ const toggleTitleSection = (rowId) => {
   collapsedTitleRowIds.value = nextCollapsedTitleRowIds
 }
 
+const moveDocumentTitleSection = (rowId, direction) => {
+  if (itemInfo.value.type === 'cancellationInvoices') return
+  const rows = moveTitleSection(itemInfo.value.rows, rowId, direction)
+  if (rows === itemInfo.value.rows) return
+  itemInfo.value.rows = rows
+  setPosNumbers()
+}
+
+const getTitleSectionMoveMenuItems = (rowId) => [
+  { label: 'Titelbereich nach oben', icon: 'i-heroicons-arrow-up', direction: 'up' },
+  { label: 'Titelbereich nach unten', icon: 'i-heroicons-arrow-down', direction: 'down' }
+].map(({ direction, ...item }) => ({
+  ...item,
+  disabled: itemInfo.value.type === 'cancellationInvoices'
+      || !getTitleSectionMove(itemInfo.value.rows, rowId, direction),
+  onSelect: () => moveDocumentTitleSection(rowId, direction)
+}))
+
 const hiddenDocumentRowIds = computed(() => {
   const hiddenRowIds = new Set()
   const collapsedTitleLevels = []
@@ -3116,7 +3135,7 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                 v-model="itemInfo.rows"
                 handle=".handle"
                 tag="tbody"
-                itemKey="pos"
+                itemKey="id"
                 @end="setPosNumbers"
             >
               <template #item="{element: row}">
@@ -3141,6 +3160,21 @@ const setRowData = async (row, service = {sellingPriceComposed: {}}, product = {
                             @click="toggleTitleSection(row.id)"
                         />
                       </UTooltip>
+                      <UDropdownMenu
+                          v-if="row.mode === 'title' && itemInfo.type !== 'cancellationInvoices'"
+                          :items="getTitleSectionMoveMenuItems(row.id)"
+                          :content="{ align: 'start' }"
+                      >
+                        <UTooltip text="Titel mit untergeordneten Zeilen verschieben">
+                          <UButton
+                              class="shrink-0"
+                              variant="ghost"
+                              color="neutral"
+                              icon="i-heroicons-arrows-up-down"
+                              aria-label="Titel mit untergeordneten Zeilen verschieben"
+                          />
+                        </UTooltip>
+                      </UDropdownMenu>
                     </div>
                   </td>
                   <td