From 0d591c0fa90f08582cb1cb27e56cfbb8095376b0 Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Sun, 8 Mar 2026 18:39:45 +0100
Subject: [PATCH] Bookform: fix scrollTo on mobile view

regression of previous commit
---
 front/src/BookForm.vue      |  6 ------
 front/src/BookFormIcons.vue | 23 +++++++++++++++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/front/src/BookForm.vue b/front/src/BookForm.vue
index e12e205..be20306 100644
--- a/front/src/BookForm.vue
+++ b/front/src/BookForm.vue
@@ -12,7 +12,6 @@ import {
   putEndReadDateUnset,
   putUnreadBook,
 } from './api.js'
-import { useTemplateRef, nextTick } from 'vue'
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 import { VRating } from 'vuetify/components/VRating'
 import BookFormIcons from './BookFormIcons.vue'
@@ -27,7 +26,6 @@ let data = ref(null)
 let error = ref(null)
 getBook(data, error, props.id)
 const imagePathOrDefault = computed(() => getImagePathOrDefault(data.value.coverPath))
-const mobiledatesel = useTemplateRef('mobiledates')
 
 onBeforeRouteUpdate(async (to, from) => {
   getBook(data, error, to.params.id)
@@ -48,8 +46,6 @@ async function onReadIconClick() {
     data.value.wantread = false
     data.value.endReadDate = today
     putEndReadDate(props.id, today)
-    await nextTick()
-    mobiledatesel.value.scrollIntoView()
   } else {
     putUnreadBook(props.id)
   }
@@ -64,8 +60,6 @@ async function onStartReadIconClick() {
   if (!data.value.startReadDate) {
     data.value.startReadDate = today
     putStartReadDate(props.id, data.value.startReadDate)
-    await nextTick()
-    mobiledatesel.value.scrollIntoView()
   } else {
     data.value.startReadDate = null
     putStartReadDateUnset(props.id)
diff --git a/front/src/BookFormIcons.vue b/front/src/BookFormIcons.vue
index 47a2b6b..2d0c931 100644
--- a/front/src/BookFormIcons.vue
+++ b/front/src/BookFormIcons.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { useTemplateRef, nextTick } from 'vue'
 import BigIcon from './BigIcon.vue'
 import BookDateWidget from './BookDateWidget.vue'
 import DateWidget from './DateWidget.vue'
@@ -10,6 +11,8 @@ const props = defineProps({
   read: Boolean,
 })
 
+const mobiledatesel = useTemplateRef('mobiledates')
+
 const emit = defineEmits([
   'onWantReadIconClick',
   'onStartReadIconClick',
@@ -23,6 +26,18 @@ function isStartReadExpanded() {
   let isReadUnset = !props.read ? true : false
   return isStartReadDateSet && isReadUnset
 }
+
+async function onReadIconClick() {
+  emit('onReadIconClick')
+  await nextTick()
+  mobiledatesel.value.scrollIntoView()
+}
+
+async function onStartReadIconClick() {
+  emit('onStartReadIconClick')
+  await nextTick()
+  mobiledatesel.value.scrollIntoView()
+}
 </script>
 
 <template>
@@ -47,7 +62,7 @@ function isStartReadExpanded() {
         :legend="$t('bookform.wantread')"
         :is-set="isStartReadExpanded()"
         :is-readonly="props.read"
-        @click="props.read ? null : $emit('onStartReadIconClick')"
+        @click="props.read ? null : onStartReadIconClick()"
       />
     </div>
     <div
@@ -58,7 +73,7 @@ function isStartReadExpanded() {
         icon="BIconCheckCircle"
         :legend="$t('bookform.read')"
         :isSet="props.read"
-        @click="$emit('onReadIconClick')"
+        @click="onReadIconClick"
       />
     </div>
     <BookDateWidget
@@ -69,7 +84,7 @@ function isStartReadExpanded() {
       :is-expanded="isStartReadExpanded()"
       :is-readonly="props.read"
       @onStartDateChange="(d) => $emit('onStartReadDateChange', d)"
-      @onIconClick="$emit('onStartReadIconClick')"
+      @onIconClick="onStartReadIconClick"
     />
     <BookDateWidget
       class="is-hidden-mobile"
@@ -82,7 +97,7 @@ function isStartReadExpanded() {
       :isExpanded="props.read"
       @onStartDateChange="(d) => $emit('onStartReadDateChange', d)"
       @onEndDateChange="(d) => $emit('onEndReadDateChange', d)"
-      @onIconClick="$emit('onReadIconClick')"
+      @onIconClick="onReadIconClick"
     />
   </div>