feat: mark book as read

front/src/BookCard.vue

@@ -4,7 +4,8 @@
   title: String,
   author: String,
   imagePath: String,
-  rating: Number
+  rating: Number,
+  read: Boolean
 });
 const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "defaultbook.png" : props.imagePath;
 
@@ -24,6 +25,13 @@ const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath ===
         <div class="is-size-5 is-italic">{{author}}</div>
         <p>{{rating}}/10</p>
       </div>
+      <nav v-if="read" class="level">
+        <div class="level-left">
+          <span class="level-item icon" :title="$t('booklistelement.read')">
+            <b-icon-check-circle />
+          </span>
+        </div>
+      </nav>
     </div>
   </div>
 </template>

front/src/BookListElement.vue

@@ -1,6 +1,6 @@
 <script setup>
   import { ref } from 'vue'
-  import { postUserBook } from './api.js'
+  import { postReadBook } from './api.js'
   import { useRouter } from 'vue-router'
 
   const router = useRouter();
@@ -8,14 +8,14 @@
   const props = defineProps({
   title: String,
   author: String,
-  id: BigInt,
+  id: Number,
   imagePath: String,
 });
   const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
   const error = ref(null)
 
-async function onUserBookAdd() {
-  const res = await postUserBook({bookId: props.id});
+async function onUserBookRead() {
+  const res = await postReadBook({bookId: props.id});
   if (res.ok) {
     router.push('/books')
   } else {
@@ -29,15 +29,8 @@ async function onUserBookAdd() {
   <div v-if="error" class="notification is-danger">
     <p>{{error}}</p>
   </div>
-  <div class="columns box container has-background-dark">
-  <div class="column is-narrow">
-    <button @click="onUserBookAdd" class="button">
-      <span class="icon" title="Add">
-        <b-icon-plus />
-      </span>
-    </button>
-  </div>
-    <div class="media column">
+  <div class="columns no-padding box container has-background-dark">
+    <div class="media column no-margin">
       <div class="media-left">
         <figure class="image mb-3">
           <img v-bind:src="imagePathOrDefault" v-bind:alt="title">
@@ -48,13 +41,30 @@ async function onUserBookAdd() {
         <div class="is-size-5 is-italic">{{author}}</div>
       </div>
     </div>
+  <div class="column is-narrow">
+    <button @click="" class="button is-large verticalbutton">
+      <span class="icon" :title="$t('booklistelement.wantread')">
+        <b-icon-eye />
+      </span>
+    </button>
+    <button @click="" class="button is-large verticalbutton">
+      <span class="icon" :title="$t('booklistelement.startread')">
+        <b-icon-book />
+      </span>
+    </button>
+    <button @click="onUserBookRead" class="button is-large verticalbutton">
+      <span class="icon" :title="$t('booklistelement.read')">
+        <b-icon-check-circle />
+      </span>
+    </button>
+  </div>
   </div>
 </template>
 
 <style scoped>
 img {
-  max-height:100px;
-  max-width:100px;
+  max-height:180px;
+  max-width:180px;
   height:auto;
   width:auto;
 }
@@ -69,4 +79,16 @@ img {
   transition: ease-in-out 0.02s;
 }
 
+.verticalbutton {
+  display: block;
+}
+
+.no-padding {
+  padding: 0px;
+}
+
+.no-margin {
+  margin: 0px;
+}
+
 </style>

front/src/api.js

@@ -36,8 +36,8 @@ export function postBook(book) {
   return genericPostCall('/book', book.value)
 }
 
-export async function postUserBook(userbook) {
-  return genericPostCall('/userbook', userbook)
+export async function postReadBook(userbook) {
+  return genericPostCall('/book/read', userbook)
 }
 
 export function postLogin(user) {

front/src/locales/en.json

@@ -33,5 +33,10 @@
     "error": "Error when loading books: {error}",
     "loading": "Loading...",
     "noresult": "No results found."
+  },
+  "booklistelement": {
+    "read": "Read",
+    "startread": "Start reading",
+    "wantread": "I want to read it"
   }
 }

front/src/locales/fr.json

@@ -33,5 +33,10 @@
     "error": "Erreur pendant le chargement des livres: {error}",
     "loading": "Chargement...",
     "noresult": "Aucun résultat trouvé."
+  },
+  "booklistelement": {
+    "read": "Lu",
+    "startread": "Commencer la lecture",
+    "wantread": "Je veux le lire"
   }
 }