Add a new tab to browse all books on the instance

front/src/AppNavBar.vue

@@ -83,6 +83,9 @@ onMounted(() => {
     <div id="navmenu" class="navbar-menu" :class="isMenuActive ? 'is-active' : ''">
       <div class="navbar-start">
         <NavBarSearch size-class="" class="is-hidden-touch" />
+        <RouterLink v-if="authStore.user" to="/browse" class="navbar-item" activeClass="is-active">
+          {{ $t('navbar.explore') }}
+        </RouterLink>
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks') }}
         </RouterLink>

front/src/BooksBrowser.vue

@@ -17,8 +17,8 @@ const offset = computed(() => (pageNumber.value - 1) * limit)
 
 let currentFilterState = ref(FilterStates.READ)
 
-let data = ref(null)
-let error = ref(null)
+const data = ref(null)
+const error = ref(null)
 
 let totalBooksNumber = computed(() =>
   typeof data != 'undefined' && data.value != null ? data.value['count'] : 0,

front/src/InstanceBrowser.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { getAllBooks } from './api.js'
+import { onBeforeRouteUpdate } from 'vue-router'
+import BookListElement from './BookListElement.vue'
+import Pagination from './Pagination.vue'
+
+const limit = 5
+const pageNumber = ref(1)
+
+const offset = computed(() => (pageNumber.value - 1) * limit)
+
+const data = ref(null)
+const error = ref(null)
+
+const pageTotal = computed(() => {
+  const countValue = data.value !== null ? data.value['count'] : 0
+  return Math.ceil(countValue / limit)
+})
+
+function fetchData() {
+  data.value = null
+  error.value = null
+  getAllBooks(data, error, limit, offset.value)
+}
+
+fetchData()
+
+onBeforeRouteUpdate(async (to, from) => {
+  pageNumber.value = 1
+  fetchData()
+})
+
+function pageChange(newPageNumber) {
+  pageNumber.value = newPageNumber
+  fetchData()
+}
+</script>
+
+<template>
+  <div>
+  <div>
+    <div v-if="error"> {{ error }}</div>
+    <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>
+    </div>
+    <div v-else-if="data === null">{{ $t('searchbook.loading') }}</div>
+    <div v-else>{{ $t('searchbook.noresult') }}</div>
+  </div>
+  <Pagination
+      :pageNumber="pageNumber"
+      :pageTotal="pageTotal"
+      maxItemDisplayed="11"
+      @pageChange="pageChange"
+      />
+  </div>
+</template>
+
+<style scoped></style>

front/src/api.js

@@ -54,6 +54,14 @@ export function getMyBooks(data, error, arg, limit, offset) {
   return useFetch(data, error, '/ws/mybooks/' + arg + '?' + queryParams.toString())
 }
 
+export function getAllBooks(data, error, limit, offset) {
+  const queryParams = new URLSearchParams({
+    limit: limit,
+    offset: offset,
+  })
+  return useFetch(data, error, '/ws/books' + '?' + queryParams.toString())
+}
+
 export function getSearchBooks(data, error, searchterm, lang, searchInventaire, limit, offset) {
   const queryParams = new URLSearchParams({
     lang: lang,

front/src/locales/en.json

@@ -6,6 +6,7 @@
   "navbar": {
     "mybooks": "My Books",
     "addbook": "Add Book",
+    "explore": "Explore",
     "logout": "Log out",
     "signup": "Sign up",
     "search": "Search",

front/src/locales/fr.json

@@ -5,6 +5,7 @@
   },
   "navbar": {
     "mybooks": "Mes Livres",
+    "explore": "Explorer",
     "addbook": "Ajouter Un Livre",
     "logout": "Se déconnecter",
     "signup": "S'inscrire",

front/src/router.js

@@ -10,11 +10,13 @@ import Home from './Home.vue'
 import ScanBook from './ScanBook.vue'
 import SearchBook from './SearchBook.vue'
 import ImportInventaire from './ImportInventaire.vue'
+import InstanceBrowser from './InstanceBrowser.vue'
 import { useAuthStore } from './auth.store'
 
 const routes = [
   { path: '/', component: Home },
   { path: '/scan', component: ScanBook },
+  { path: '/browse', component: InstanceBrowser },
   { path: '/books', component: BooksBrowser },
   { path: '/book/:id', component: BookForm, props: true },
   { path: '/author/:id', component: AuthorForm, props: true },