Search API: use a single query with result and count

front/src/SearchBook.vue

@@ -1,7 +1,7 @@
 <script setup>
   import { ref, computed } from 'vue'
   import BookListElement from './BookListElement.vue';
-  import { getSearchBooks, getCountSearchBooks, getAuthorBooks, getCountAuthorBooks } from './api.js'
+  import { getSearchBooks, getAuthorBooks, getCountAuthorBooks } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import Pagination from './Pagination.vue'
 
@@ -17,11 +17,10 @@
 
   let data = ref(null);
   let error = ref(null);
-  let totalBooksData = ref(null);
   let errorFetchTotal = ref(null);
 
   const pageTotal = computed(() => {
-    let countValue = totalBooksData.value !== null ? totalBooksData.value['count'] : 0;
+    let countValue = (data.value !== null) ? data.value['count'] : 0;
     return Math.ceil(countValue / limit);
   });
 
@@ -32,7 +31,6 @@
     if (searchTerm != null) {
       let lang = navigator.language.substring(0,2);
       getSearchBooks(data, error, searchTerm, lang, limit, offset.value);
-      getCountSearchBooks(totalBooksData, errorFetchTotal, searchTerm);
     } else if (authorId != null) {
       getAuthorBooks(data, error, authorId, limit, offset.value);
       getCountAuthorBooks(totalBooksData, errorFetchTotal, searchTerm);
@@ -55,8 +53,8 @@
 <template>
   <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">
+    <div v-else-if="data && data.books && data.books.length > 0">
+      <div class="booksearchlist"  v-for="book in data.books" :key="book.id">
         <BookListElement v-bind="book" />
       </div>
       <Pagination