Search existing books

front/src/BookListElement.vue

@@ -0,0 +1,47 @@
+<script setup>
+
+  const props = defineProps({
+  title: String,
+  author: String,
+  imagePath: String,
+});
+const imagePathOrDefault = (props.imagePath == "" || typeof props.imagePath === 'undefined') ? "../defaultbook.png" : props.imagePath;
+
+
+</script>
+
+<template>
+  <div class="box container has-background-dark">
+    <div class="media">
+      <div class="media-left">
+        <figure class="image mb-3">
+          <img v-bind:src="imagePathOrDefault" v-bind:alt="title">
+        </figure>
+      </div>
+      <div class="media-content">
+        <div class="is-size-4">{{title}}</div>
+        <div class="is-size-5 is-italic">{{author}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+img {
+  max-height:100px;
+  max-width:100px;
+  height:auto;
+  width:auto;
+}
+
+.box {
+  transition:ease-in-out 0.04s;
+  margin-bottom: 15px;
+}
+
+.box:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+}
+
+</style>

front/src/NavBarSearch.vue

@@ -14,7 +14,7 @@
   <div class="navbar-item">
     <div class="field has-addons">
       <div class="control">
-        <input v-model="searchterm" class="input" type="text" />
+        <input v-model="searchterm" @keyup.enter="onSearchClick()" class="input" type="text" />
       </div>
       <div class="control">
         <button @click="onSearchClick()" class="button">

front/src/SearchBook.vue

@@ -1,11 +1,31 @@
 <script setup>
+  import BookListElement from './BookListElement.vue';
+  import { getSearchBooks } from './api.js'
+  import { onBeforeRouteUpdate } from 'vue-router'
+
   const props = defineProps({
     searchterm: String
+  });
+
+  let { data, error } = getSearchBooks(props.searchterm);
+
+  onBeforeRouteUpdate(async (to, from) => {
+    let res = getSearchBooks(to.params.searchterm);
+    data = res.data;
+    error = res.error;
   })
+
 </script>
 
 <template>
-  <div> You are searching for {{ searchterm }} </div>
+  <div class="booksearch">
+    <div v-if="error">{{$t('searchbook.error', {error: error.message})}}</div>
+    <div class="booksearchlist" v-else-if="data && data.length > 0" v-for="book in data" :key="book.id">
+      <BookListElement v-bind="book" />
+    </div>
+    <div v-else-if="data === null">{{$t('searchbook.loading')}}</div>
+    <div v-else>{{$t('searchbook.noresult')}}</div>
+  </div>
 </template>
 
 <style scoped></style>

front/src/api.js

@@ -28,6 +28,10 @@ export function getMyBooks() {
   return useFetch(baseUrl + '/mybooks');
 }
 
+export function getSearchBooks(searchterm) {
+  return useFetch(baseUrl + '/search/' + searchterm);
+}
+
 export function postBook(book) {
   return genericPostCall('/book', book.value)
 }

front/src/locales/en.json

@@ -28,5 +28,10 @@
   "bookbrowser": {
     "error": "Error when loading books: {error}",
     "loading": "Loading..."
+  },
+  "searchbook": {
+    "error": "Error when loading books: {error}",
+    "loading": "Loading...",
+    "noresult": "No results found."
   }
 }

front/src/locales/fr.json

@@ -28,5 +28,10 @@
   "bookbrowser": {
     "error": "Erreur pendant le chargement des livres: {error}",
     "loading": "Chargement..."
+  },
+  "searchbook": {
+    "error": "Erreur pendant le chargement des livres: {error}",
+    "loading": "Chargement...",
+    "noresult": "Aucun résultat trouvé."
   }
 }