Add saveCallback to wrapper

Syntactically, the save button belongs to the info panel. This creates a
prop-callback chain, but improves the syntax instead of relying on css
hacks.

Addresses RISDEV-2955

frontend/src/components/DocumentUnitCategories.vue

@@ -8,7 +8,6 @@ import DocumentUnitWrapper from "@/components/DocumentUnitWrapper.vue"
 import EnsuingDecisions from "@/components/EnsuingDecisions.vue"
 import OriginalFileSidePanel from "@/components/OriginalFileSidePanel.vue"
 import PreviousDecisions from "@/components/PreviousDecisions.vue"
-import SaveButton from "@/components/SaveDocumentUnitButton.vue"
 import { useScrollToHash } from "@/composables/useScrollToHash"
 import { useToggleStateInRouteQuery } from "@/composables/useToggleStateInRouteQuery"
 import DocumentUnit, { Texts, CoreData } from "@/domain/documentUnit"
@@ -164,17 +163,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <DocumentUnitWrapper :document-unit="updatedDocumentUnit as DocumentUnit">
+  <DocumentUnitWrapper
+    :document-unit="updatedDocumentUnit as DocumentUnit"
+    :save-callback="handleUpdateDocumentUnit"
+  >
     <template #default="{ classes }">
-      <div
-        class="sticky top-[2rem] z-30 -mt-96 grid h-[6rem] w-full justify-items-end pb-8 pr-[2rem]"
-      >
-        <SaveButton
-          aria-label="Speichern Button"
-          :service-callback="handleUpdateDocumentUnit"
-        />
-      </div>
-
       <div class="flex w-full flex-grow">
         <div class="flex flex-col bg-gray-100" :class="classes">
           <DocumentUnitCoreData

frontend/src/components/DocumentUnitInfoPanel.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { toRaw } from "vue"
+import SaveButton from "@/components/SaveDocumentUnitButton.vue"
+import { ServiceResponse } from "@/services/httpClient"
 import IconBadge, { IconBadgeProps } from "@/shared/components/IconBadge.vue"
 import PropertyInfo from "@/shared/components/PropertyInfo.vue"
 
@@ -12,12 +14,14 @@ interface Props {
   heading?: string
   firstRow?: (PropertyInfoType | IconBadgeProps)[]
   secondRow?: (PropertyInfoType | IconBadgeProps)[]
+  saveCallback?: () => Promise<ServiceResponse<void>>
 }
 
 withDefaults(defineProps<Props>(), {
   heading: "",
   firstRow: () => [],
   secondRow: () => [],
+  saveCallback: undefined,
 })
 
 function isBadge(
@@ -71,5 +75,10 @@ function isBadge(
         </div>
       </div>
     </div>
+    <SaveButton
+      v-if="saveCallback"
+      aria-label="Speichern Button"
+      :service-callback="saveCallback"
+    />
   </div>
 </template>

frontend/src/components/DocumentUnitWrapper.vue

@@ -7,10 +7,14 @@ import { useCaseLawMenuItems } from "@/composables/useCaseLawMenuItems"
 import { useStatusBadge } from "@/composables/useStatusBadge"
 import { useToggleStateInRouteQuery } from "@/composables/useToggleStateInRouteQuery"
 import DocumentUnit from "@/domain/documentUnit"
+import { ServiceResponse } from "@/services/httpClient"
 import NavbarSide from "@/shared/components/NavbarSide.vue"
 import SideToggle from "@/shared/components/SideToggle.vue"
 
-const props = defineProps<{ documentUnit: DocumentUnit }>()
+const props = defineProps<{
+  documentUnit: DocumentUnit
+  saveCallback?: () => Promise<ServiceResponse<void>>
+}>()
 const route = useRoute()
 const router = useRouter()
 const documentNumber = computed(() => props.documentUnit.documentNumber)
@@ -81,6 +85,7 @@ watchEffect(() => {
         :document-unit="documentUnit"
         :first-row="firstRowInfos"
         :heading="documentUnit.documentNumber ?? ''"
+        :save-callback="saveCallback"
         :second-row="secondRowInfos"
       />