From bc8a84e13a306699166f01d178fd49f3b3b61298 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Mar 2024 17:26:44 +0100
Subject: [PATCH] Add scrolling to surveys from MyActivities page

Resolves MS-902 #complete
---
 .../components/content-blocks/SurveyBlock.vue | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/client/src/components/content-blocks/SurveyBlock.vue b/client/src/components/content-blocks/SurveyBlock.vue
index f69af811..6d31420f 100644
--- a/client/src/components/content-blocks/SurveyBlock.vue
+++ b/client/src/components/content-blocks/SurveyBlock.vue
@@ -2,6 +2,7 @@
   <div
     :data-scrollto="value.id"
     class="survey-block"
+    ref="surveyDiv"
   >
     <router-link
       :to="{ name: 'survey', params: { id: value.id } }"
@@ -12,10 +13,35 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['value'],
-};
+<script setup lang="ts">
+import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+export interface Props {
+  value: {
+    id: string;
+  };
+}
+
+const props = defineProps<Props>();
+
+const surveyDiv = ref<HTMLElement | null>(null);
+const route = useRoute();
+
+onMounted(() => {
+  if (surveyDiv.value !== null) {
+    if (route.hash === `#${props.value.id}`) {
+      setTimeout(() => {
+        const rect = surveyDiv.value.getBoundingClientRect();
+
+        window.scrollTo({
+          top: rect.y,
+          behavior: 'smooth',
+        });
+      }, PAGE_LOAD_TIMEOUT);
+    }
+  }
+});
 </script>
 
 <style scoped lang="scss">