Revert "Consolidate all scrolling logic in one composable"

This reverts commit aaa0f61.

frontend/src/components/ActiveCitationInput.vue

@@ -8,8 +8,8 @@ import InputField from "@/components/input/InputField.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import TextInput from "@/components/input/TextInput.vue"
 import Pagination, { Page } from "@/components/Pagination.vue"
-import { useScroll } from "@/composables/useScroll"
 import { useValidationStore } from "@/composables/useValidationStore"
+import values from "@/data/values.json"
 import ActiveCitation from "@/domain/activeCitation"
 import { CitationType } from "@/domain/citationType"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
@@ -28,7 +28,6 @@ const emit = defineEmits<{
   removeEntry: [value?: boolean]
 }>()
 
-const { scrollIntoViewportById } = useScroll()
 const lastSearchInput = ref(new ActiveCitation())
 const lastSavedModelValue = ref(new ActiveCitation({ ...props.modelValue }))
 const activeCitation = ref(new ActiveCitation({ ...props.modelValue }))
@@ -155,7 +154,21 @@ async function addActiveCitationFromSearch(decision: RelatedDocumentation) {
   })
   emit("update:modelValue", activeCitation.value as ActiveCitation)
   emit("addEntry")
-  await scrollIntoViewportById("activeCitations")
+  scrollToTop()
+}
+
+function scrollToTop() {
+  const element = document.getElementById("activeCitations")
+  if (element) {
+    const headerOffset = values.headerOffset
+    const elementPosition = element?.getBoundingClientRect().top
+    const offsetPosition = elementPosition + window.scrollY - headerOffset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth",
+    })
+  }
 }
 
 function updateDateFormatValidation(

frontend/src/components/DecisionSummary.vue

@@ -3,7 +3,7 @@ import { computed, toRaw } from "vue"
 import type { Component } from "vue"
 import { DisplayMode } from "@/components/enumDisplayMode"
 import IconBadge from "@/components/IconBadge.vue"
-import { useScroll } from "@/composables/useScroll"
+import { useScrollPreviewContainer } from "@/composables/useScrollPreviewContainer"
 import { useStatusBadge } from "@/composables/useStatusBadge"
 import { PublicationStatus } from "@/domain/publicationStatus"
 import BaselineArrowOutward from "~icons/ic/baseline-arrow-outward"
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   icon: undefined,
   linkClickable: true, // eslint-disable-line vue/no-boolean-default
 })
-const { openSidePanelAndScrollToSection } = useScroll()
+const { openSidePanel } = useScrollPreviewContainer()
 const statusBadge = computed(() => useStatusBadge(props.status).value)
 
 const summary = computed(() =>
@@ -76,7 +76,7 @@ const divider = computed(() => (props.documentNumber ? ` | ` : undefined))
             <button
               class="ds-link-01-bold whitespace-nowrap leading-24 no-underline focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800"
               :data-testid="'document-number-link-' + documentNumber"
-              @click="openSidePanelAndScrollToSection(documentNumber)"
+              @click="openSidePanel(documentNumber)"
             >
               {{ documentNumber }}
               <BaselineArrowOutward class="mb-4 inline w-24" />

frontend/src/components/DocumentUnitCategories.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia"
-import { computed, ref, toRefs, watch } from "vue"
+import { computed, ref, toRefs } from "vue"
 import { useRoute } from "vue-router"
 import DocumentUnitContentRelatedIndexing from "@/components/DocumentUnitContentRelatedIndexing.vue"
 import DocumentUnitCoreData from "@/components/DocumentUnitCoreData.vue"
@@ -11,16 +11,14 @@ import DocumentUnitTexts from "@/components/texts/DocumentUnitTexts.vue"
 
 import { useProvideCourtType } from "@/composables/useCourtType"
 import { useInternalUser } from "@/composables/useInternalUser"
-import { useScroll } from "@/composables/useScroll"
+import { useScrollToHash } from "@/composables/useScrollToHash"
 import constitutionalCourtTypes from "@/data/constitutionalCourtTypes.json"
 import { useDocumentUnitStore } from "@/stores/documentUnitStore"
 
 const route = useRoute()
-const { hash: routeHash } = toRefs(route)
 const store = useDocumentUnitStore()
 const { documentUnit } = storeToRefs(store)
 const courtTypeRef = ref<string>(documentUnit.value!.coreData.court?.type ?? "")
-const { scrollIntoViewportById } = useScroll()
 
 /**
  * Determines whether legal forces should be deleted based on the court type and presence of a selected court.
@@ -61,13 +59,9 @@ const coreData = computed({
   },
 })
 
-watch(
-  routeHash,
-  async () => {
-    await scrollIntoViewportById(routeHash.value.replace(/^#/, ""))
-  },
-  { immediate: true },
-)
+const { hash: routeHash } = toRefs(route)
+const headerOffset = 64
+useScrollToHash(routeHash, headerOffset)
 
 useProvideCourtType(courtTypeRef)
 

frontend/src/components/EnsuingDecisionInputGroup.vue

@@ -9,8 +9,8 @@ import InputField, { LabelPosition } from "@/components/input/InputField.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import TextInput from "@/components/input/TextInput.vue"
 import Pagination, { Page } from "@/components/Pagination.vue"
-import { useScroll } from "@/composables/useScroll"
 import { useValidationStore } from "@/composables/useValidationStore"
+import values from "@/data/values.json"
 import EnsuingDecision from "@/domain/ensuingDecision"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
 import ComboboxItemService from "@/services/comboboxItemService"
@@ -28,7 +28,6 @@ const emit = defineEmits<{
   removeEntry: [value?: boolean]
 }>()
 
-const { scrollIntoViewportById } = useScroll()
 const lastSearchInput = ref(new EnsuingDecision())
 const lastSavedModelValue = ref(new EnsuingDecision({ ...props.modelValue }))
 const ensuingDecision = ref(new EnsuingDecision({ ...props.modelValue }))
@@ -127,7 +126,7 @@ function addEnsuingDecision() {
   }
 }
 
-async function addEnsuingDecisionFromSearch(decision: RelatedDocumentation) {
+function addEnsuingDecisionFromSearch(decision: RelatedDocumentation) {
   ensuingDecision.value = new EnsuingDecision({
     ...decision,
     pending: ensuingDecision.value?.pending,
@@ -136,7 +135,21 @@ async function addEnsuingDecisionFromSearch(decision: RelatedDocumentation) {
   })
   emit("update:modelValue", ensuingDecision.value as EnsuingDecision)
   emit("addEntry")
-  await scrollIntoViewportById("ensuingDecisions")
+  scrollToTop()
+}
+
+function scrollToTop() {
+  const element = document.getElementById("ensuingDecisions")
+  if (element) {
+    const headerOffset = values.headerOffset
+    const elementPosition = element?.getBoundingClientRect().top
+    const offsetPosition = elementPosition + window.scrollY - headerOffset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth",
+    })
+  }
 }
 
 function updateDateFormatValidation(

frontend/src/components/PreviousDecisionInputGroup.vue

@@ -10,8 +10,8 @@ import TextButton from "@/components/input/TextButton.vue"
 import TextInput from "@/components/input/TextInput.vue"
 import NestedComponent from "@/components/NestedComponents.vue"
 import Pagination, { Page } from "@/components/Pagination.vue"
-import { useScroll } from "@/composables/useScroll"
 import { useValidationStore } from "@/composables/useValidationStore"
+import values from "@/data/values.json"
 import PreviousDecision from "@/domain/previousDecision"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
 import ComboboxItemService from "@/services/comboboxItemService"
@@ -28,7 +28,7 @@ const emit = defineEmits<{
   cancelEdit: [void]
   removeEntry: [value: PreviousDecision]
 }>()
-const { scrollIntoViewportById } = useScroll()
+
 const lastSearchInput = ref(new PreviousDecision())
 const lastSavedModelValue = ref(new PreviousDecision({ ...props.modelValue }))
 const previousDecision = ref(new PreviousDecision({ ...props.modelValue }))
@@ -136,7 +136,21 @@ async function addPreviousDecisionFromSearch(decision: RelatedDocumentation) {
   })
   emit("update:modelValue", previousDecision.value as PreviousDecision)
   emit("addEntry")
-  await scrollIntoViewportById("previousDecisions")
+  scrollToTop()
+}
+
+function scrollToTop() {
+  const element = document.getElementById("previousDecisions")
+  if (element) {
+    const headerOffset = values.headerOffset
+    const elementPosition = element?.getBoundingClientRect().top
+    const offsetPosition = elementPosition + window.scrollY - headerOffset
+
+    window.scrollTo({
+      top: offsetPosition,
+      behavior: "smooth",
+    })
+  }
 }
 
 function updateDateFormatValidation(

frontend/src/components/ProceedingDecisions.vue

@@ -7,7 +7,7 @@ import TitleElement from "@/components/TitleElement.vue"
 <template>
   <div class="flex flex-col gap-24 bg-white p-24">
     <TitleElement>Rechtszug</TitleElement>
-    <PreviousDecisions id="previousDecisions" />
-    <EnsuingDecisions id="ensuingDecisions" />
+    <PreviousDecisions />
+    <EnsuingDecisions />
   </div>
 </template>

frontend/src/components/SearchResultList.vue

@@ -6,7 +6,7 @@ import FlexContainer from "@/components/FlexContainer.vue"
 import IconBadge from "@/components/IconBadge.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import LoadingSpinner from "@/components/LoadingSpinner.vue"
-import { useScroll } from "@/composables/useScroll"
+import values from "@/data/values.json"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
 import errorMessages from "@/i18n/errors.json"
 import IconAdd from "~icons/ic/baseline-add"
@@ -17,13 +17,28 @@ const props = defineProps<{
   allowMultipleLinks?: boolean
   displayMode?: DisplayMode
 }>()
+
 const emits =
   defineEmits<(event: "linkDecision", decision: RelatedDocumentation) => void>()
-const { scrollIntoViewportById } = useScroll()
+
 watch(
   () => props.searchResults,
   async () => {
-    if (props.searchResults) await scrollIntoViewportById("search-results")
+    if (props.searchResults) {
+      setTimeout(() => {
+        const element = document.getElementById("searchResults")
+        if (element) {
+          const headerOffset = values.headerOffset
+          const elementPosition = element?.getBoundingClientRect().top
+          const offsetPosition = elementPosition + window.scrollY - headerOffset
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          })
+        }
+      })
+    }
   },
   { immediate: true },
 )
@@ -37,7 +52,7 @@ export type SearchResults<Type extends RelatedDocumentation> = {
 </script>
 
 <template>
-  <div id="search-results">
+  <div id="searchResults">
     <FlexContainer
       v-if="isLoading"
       class="m-24"

frontend/src/components/periodical-evaluation/references/PeriodicalEditionReferenceInput.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from "vue"
+import { computed, nextTick, onMounted, ref, watch } from "vue"
 import ComboboxInput from "@/components/ComboboxInput.vue"
 import CreateNewFromSearch from "@/components/CreateNewFromSearch.vue"
 import DecisionSummary from "@/components/DecisionSummary.vue"
@@ -15,7 +15,7 @@ import PopupModal from "@/components/PopupModal.vue"
 import SearchResultList, {
   SearchResults,
 } from "@/components/SearchResultList.vue"
-import { useScroll } from "@/composables/useScroll"
+import { useScrollPreviewContainer } from "@/composables/useScrollPreviewContainer"
 import { useValidationStore } from "@/composables/useValidationStore"
 import DocumentUnit, {
   DocumentationUnitParameters,
@@ -42,7 +42,8 @@ const emit = defineEmits<{
   removeEntry: [value: Reference]
 }>()
 
-const { scrollIntoViewportById, openSidePanelAndScrollToSection } = useScroll()
+const containerRef = ref<HTMLElement | null>(null)
+const { openSidePanel } = useScrollPreviewContainer()
 
 const store = useEditionStore()
 const reference = ref<Reference>(new Reference({ ...props.modelValue }))
@@ -108,6 +109,23 @@ function updateDateFormatValidation(
   else validationStore.remove("decisionDate")
 }
 
+/**
+ * In case of validation errors it will scroll  back to input fields
+ *
+ * @returns A promise that resolves after the DOM updates.
+ */
+async function scrollToTopPosition() {
+  await nextTick()
+  if (
+    containerRef.value instanceof HTMLElement &&
+    "scrollIntoView" in containerRef.value
+  ) {
+    containerRef.value.scrollIntoView({
+      block: "start",
+    })
+  }
+}
+
 async function search() {
   isLoading.value = true
   createNewFromSearchResponseError.value = undefined
@@ -197,7 +215,7 @@ async function addReference(decision: RelatedDocumentation) {
     emit("update:modelValue", newReference)
     emit("addEntry")
   } else {
-    await scrollIntoViewportById("periodical-references")
+    await scrollToTopPosition()
   }
 }
 
@@ -306,23 +324,27 @@ watch(searchResultsCurrentPage, () => {
  */
 watch(searchResults, async () => {
   if (searchResults.value?.length == 1) {
-    await openSidePanelAndScrollToSection(
-      searchResults.value[0].decision.documentNumber,
-    )
+    await openSidePanel(searchResults.value[0].decision.documentNumber)
   }
 })
 
 onMounted(async () => {
   featureToggle.value = (
     await FeatureToggleService.isEnabled("neuris.new-from-search")
   ).data
-  await scrollIntoViewportById("periodical-references")
+  setTimeout(() => {
+    if (!containerRef.value) return
+    containerRef.value.scrollIntoView({
+      behavior: "smooth",
+      block: "end",
+    })
+  })
 })
 </script>
 
 <template>
   <div
-    id="periodical-references"
+    ref="containerRef"
     v-ctrl-enter="search"
     class="flex flex-col border-b-1"
   >
@@ -680,4 +702,4 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-@/stores/editionStore @/composables/useScrollTo
+@/stores/editionStore

frontend/src/composables/useScroll.ts → frontend/src/composables/useScrollPreviewContainer.ts

@@ -1,27 +1,11 @@
 import { useDocumentUnitStore } from "@/stores/documentUnitStore"
 import { useExtraContentSidePanelStore } from "@/stores/extraContentSidePanelStore"
 
-export function useScroll() {
+export function useScrollPreviewContainer() {
   const extraContentSidePanelStore = useExtraContentSidePanelStore()
   const documentUnitStore = useDocumentUnitStore()
-  const headerOffset = 170
 
-  async function scrollIntoViewportById(id: string) {
-    setTimeout(() => {
-      const element = document.getElementById(id)
-      if (element) {
-        const elementPosition = element?.getBoundingClientRect().top
-        const offsetPosition = elementPosition + window.scrollY - headerOffset
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: "smooth",
-        })
-      }
-    })
-  }
-
-  async function openSidePanelAndScrollToSection(documentUnitNumber?: string) {
+  async function openSidePanel(documentUnitNumber?: string) {
     if (documentUnitNumber) {
       await documentUnitStore.loadDocumentUnit(documentUnitNumber)
       extraContentSidePanelStore.togglePanel(true)
@@ -45,7 +29,6 @@ export function useScroll() {
   }
 
   return {
-    scrollIntoViewportById,
-    openSidePanelAndScrollToSection,
+    openSidePanel,
   }
 }