Add author books list

front/src/AuthorForm.vue

@@ -2,29 +2,38 @@
   import { ref } from 'vue'
   import { getAuthor } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
+  import SearchBook from './SearchBook.vue'
 
 
   const props = defineProps({
     id: String
   });
 
-  let data = ref(null);
-  let error = ref(null);
+  let author = ref(null);
+  let authorfetcherror = ref(null);
 
-  getAuthor(data, error, props.id);
+  getAuthor(author, authorfetcherror, props.id);
 
   onBeforeRouteUpdate(async (to, from) => {
-    getAuthor(data, error, to.params.id);
+    getAuthor(author, authorfetcherror, to.params.id);
   })
 </script>
 
 <template>
-  <div v-if="error">{{$t('authorform.error', {err: error.message})}}</div>
-  <div v-if="data">
-    <h3 class="title">{{data.name}}</h3>
-    <p v-if="data.description">{{data.description}}</p>
+  <div v-if="authorfetcherror">{{$t('authorform.error', {err: authorfetcherror.message})}}</div>
+  <div v-if="author">
+    <h3 class="title">{{author.name}}</h3>
+    <p v-if="author.description">{{author.description}}</p>
+  </div>
+  <div class="authorbooks mt-5">
+    <SearchBook :author-id="id"/>
   </div>
 </template>
 
 <style scoped>
+
+.authorbooks {
+  border: solid;
+  border-radius: 50px;
+}
 </style>

front/src/SearchBook.vue

@@ -1,7 +1,7 @@
 <script setup>
   import { ref, computed } from 'vue'
   import BookListElement from './BookListElement.vue';
-  import { getSearchBooks, getCountSearchBooks } from './api.js'
+  import { getSearchBooks, getCountSearchBooks, getAuthorBooks, getCountAuthorBooks } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import Pagination from './Pagination.vue'
 
@@ -11,7 +11,8 @@
   const offset = computed(() => (pageNumber.value - 1) * limit);
 
   const props = defineProps({
-    searchterm: String
+    searchterm: String,
+    authorId: Number
   });
 
   let data = ref(null);
@@ -24,29 +25,34 @@
     return Math.ceil(countValue / limit);
   });
 
-  fetchData(props.searchterm);
+  fetchData(props.searchterm, props.authorId);
 
 
-  function fetchData(searchTerm) {
-    getSearchBooks(data, error, searchTerm, limit, offset.value);
-    getCountSearchBooks(totalBooksData, errorFetchTotal, searchTerm);
+  function fetchData(searchTerm, authorId) {
+    if (searchTerm != null) {
+      getSearchBooks(data, error, searchTerm, limit, offset.value);
+      getCountSearchBooks(totalBooksData, errorFetchTotal, searchTerm);
+    } else if (authorId != null) {
+      getAuthorBooks(data, error, authorId, limit, offset.value);
+      getCountAuthorBooks(totalBooksData, errorFetchTotal, searchTerm);
+    }
   }
 
   onBeforeRouteUpdate(async (to, from) => {
     pageNumber.value = 1;
-    fetchData(to.params.searchterm);
+    fetchData(to.params.searchterm, props.authorId);
   })
 
   function pageChange(newPageNumber) {
     pageNumber.value = newPageNumber;
     data.value = null;
-    fetchData(props.searchterm);
+    fetchData(props.searchterm, props.authorId);
   }
 
 </script>
 
 <template>
-  <div class="booksearch">
+  <div class="booksearch my-2">
     <div v-if="error">{{$t('searchbook.error', {error: error.message})}}</div>
     <div v-else-if="data && data.length > 0">
       <div class="booksearchlist"  v-for="book in data" :key="book.id">

front/src/api.js

@@ -45,6 +45,15 @@ export function getAuthor(data, error, id) {
   return useFetch(data, error, baseUrl + '/author/' + id);
 }
 
+export function getAuthorBooks(data, error, id, limit, offset) {
+  const queryParams = new URLSearchParams({limit: limit, offset: offset});
+  return useFetch(data, error, baseUrl + '/author/' + id + "/books" + "?" + queryParams.toString());
+}
+
+export function getCountAuthorBooks(data, error, id) {
+  return useFetch(data, error, baseUrl + '/author/' + id + "/books" + '/count');
+}
+
 export function getBook(data, error, id) {
   return useFetch(data, error, baseUrl + '/book/' + id);
 }