From 6bfd3ae2daab4a93e071d94c8eacb6e48cb82d7b Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Thu, 6 Nov 2025 14:27:06 +0100
Subject: [PATCH] Make read button work

---
 front/src/BigIcon.vue  | 11 ++++++-----
 front/src/BookForm.vue | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/front/src/BigIcon.vue b/front/src/BigIcon.vue
index f5d431b..56c95c4 100644
--- a/front/src/BigIcon.vue
+++ b/front/src/BigIcon.vue
@@ -3,19 +3,20 @@
 
   const props = defineProps({
   icon: String,
-  legend: String
+  legend: String,
+  isSet: Boolean
 });
 
   const hovered = ref(false)
 
-  const computedIcon = computed(() => props.icon + (hovered.value ? "Fill" : ""));
+  const computedIcon = computed(() => props.icon + (hovered.value || props.isSet ? "Fill" : ""));
+
 </script>
 
 <template>
   <div class="bigiconandlegend"
        @mouseover="hovered = true"
-       @mouseout="hovered = false"
-       >
+       @mouseout="hovered = false">
     <span class="bigicon" :title="props.legend">
       <component :is="computedIcon"></component>
     </span>
@@ -31,7 +32,7 @@
 }
 
 .bigiconandlegend:hover {
-  transform: scale(1.01);
+  transform: scale(1.03);
   transition: ease-in-out 0.02s;
   background-color: bulma-primary;
   cursor: pointer;
diff --git a/front/src/BookForm.vue b/front/src/BookForm.vue
index 108f922..08ba9ce 100644
--- a/front/src/BookForm.vue
+++ b/front/src/BookForm.vue
@@ -18,8 +18,13 @@
   })
 
   function onRatingUpdate(rating) {
-    data.value.rating = rating * 2
-    putBookUpdate(props.id, {rating: data.value.rating})
+    data.value.rating = rating * 2;
+    putBookUpdate(props.id, {rating: data.value.rating});
+  }
+
+  function onReadIconClick() {
+    data.value.read = !data.value.read;
+    putBookUpdate(props.id, {read: data.value.read});
   }
 
 </script>
@@ -50,9 +55,10 @@
     </div>
     <div class="column">
       <div class="iconscontainer">
-        <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')"/>
-        <BigIcon icon="BIconBook" :legend="$t('bookform.startread')"/>
-        <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')"/>
+        <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')" :isSet="false"/>
+        <BigIcon icon="BIconBook" :legend="$t('bookform.startread')" :isSet="false"/>
+        <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')" :isSet="data.read"
+                 @click="onReadIconClick"/>
       </div>
     </div>
   </div>