Manage display of book covers

front/src/AddBook.vue

@@ -8,7 +8,8 @@
 
   const book = ref({
     title: "",
-    author: ""
+    author: "",
+    coverId: null
   });
   const errors = ref(null)
   const titleError = computed(() => {
@@ -50,7 +51,7 @@
       </div>
       <p v-if="authorError" class="help is-danger">{{authorError}}</p>
     </div>
-    <CoverUpload name="cover"/>
+    <CoverUpload name="cover" @on-image-upload="(id) => book.coverId = id"/>
     <div class="field">
       <div class="control">
         <button class="button is-link">{{$t('addbook.submit')}}</button>

front/src/BookCard.vue

@@ -1,16 +1,18 @@
 <script setup>
+  import { computed } from 'vue'
   import { useRouter } from 'vue-router'
+  import { getImagePathOrDefault } from './api.js'
 
   const props = defineProps({
   id: Number,
   title: String,
   author: String,
-  imagePath: String,
+  coverPath: String,
   rating: Number,
   read: Boolean
 });
-const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "defaultbook.png" : props.imagePath;
-const router = useRouter();
+  const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath));
+  const router = useRouter();
 
 function openBook() {
   router.push(`/book/${props.id}`)

front/src/BookForm.vue

@@ -1,5 +1,6 @@
 <script setup>
-  import { getBook } from './api.js'
+  import { computed } from 'vue'
+  import { getBook, getImagePathOrDefault } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
 
   const props = defineProps({
@@ -7,7 +8,7 @@
 });
 
   let { data, error } = getBook(props.id);
-  const imagePathOrDefault = "../defaultbook.png"
+  const imagePathOrDefault = computed(() => getImagePathOrDefault(data.value.coverPath));
   onBeforeRouteUpdate(async (to, from) => {
     let res = getBook(to.params.id);
     data = res.data;

front/src/BookListElement.vue

@@ -1,6 +1,6 @@
 <script setup>
-  import { ref } from 'vue'
-  import { postReadBook } from './api.js'
+  import { ref, computed } from 'vue'
+  import { postReadBook, getImagePathOrDefault } from './api.js'
   import { useRouter } from 'vue-router'
 
   const router = useRouter();
@@ -10,9 +10,9 @@
   title: String,
   author: String,
   id: Number,
-  imagePath: String,
+  coverPath: String,
 });
-  const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+  const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath));
   const error = ref(null)
 
 async function onUserBookRead() {

front/src/CoverUpload.vue

@@ -2,6 +2,7 @@
   import { ref, computed } from 'vue'
   import { postImage } from './api.js'
 
+  const emit = defineEmits(['OnImageUpload'])
   const props = defineProps({
     name: String
   });
@@ -12,10 +13,15 @@
   function onFileChanged(e) {
     postImage(e.target.files[0])
       .then((res) => res.json())
-      .then((json) => (imagePath.value = json["filepath"]))
+      .then((json) => onJsonResult(json))
       .catch((err) => (error.value = err["error"]));
   }
 
+  function onJsonResult(json) {
+    imagePath.value = json["filepath"];
+    emit('OnImageUpload', json["fileId"])
+  }
+
   function unsetImage() {
     imagePath.value = null;
   }

front/src/api.js

@@ -3,6 +3,11 @@ import { useAuthStore } from './auth.store.js'
 
 const baseUrl = "http://localhost:8080"
 
+export function getImagePathOrDefault(path) {
+  return (path == "" || typeof path === 'undefined') ?
+  "../defaultbook.png" : "http://localhost:8080" + path;
+}
+
 function useFetch(url) {
   const data = ref(null);
   const error = ref(null);