New view to see available editions from inventaire

front/src/BookListElement.vue

@@ -32,7 +32,7 @@ function openBook() {
   if (props.id != 0) {
     router.push(`/book/${props.id}`);
   } else {
-    router.push(`/importinventaire/${props.inventaireid}`)
+    router.push(`/import/inventaire/${props.inventaireid}`)
   }
 }
 

front/src/ImportInventaire.vue

@@ -0,0 +1,68 @@
+<script setup>
+  import { ref, computed } from 'vue'
+  import ImportListElement from './ImportListElement.vue';
+  import { getInventaireEditionBooks } from './api.js'
+  import { onBeforeRouteUpdate } from 'vue-router'
+  import Pagination from './Pagination.vue'
+
+  const limit = 5;
+  const pageNumber = ref(1);
+
+  const offset = computed(() => (pageNumber.value - 1) * limit);
+
+  const props = defineProps({
+    inventaireid: String,
+  });
+
+  let data = ref(null);
+  let error = ref(null);
+
+  const pageTotal = computed(() => {
+    let countValue = (data.value !== null) ? data.value['count'] : 0;
+    return Math.ceil(countValue / limit);
+  });
+
+  fetchData(props.inventaireid);
+
+
+  function fetchData(inventaireid, authorId) {
+    if (inventaireid != null) {
+      let lang = navigator.language.substring(0,2);
+      getInventaireEditionBooks(data, error, inventaireid, lang, limit, offset.value);
+    }
+  }
+
+  onBeforeRouteUpdate(async (to, from) => {
+    pageNumber.value = 1;
+    fetchData(to.params.inventaireid);
+  })
+
+  function pageChange(newPageNumber) {
+    pageNumber.value = newPageNumber;
+    data.value = null;
+    fetchData(props.inventaireid);
+  }
+
+</script>
+
+<template>
+  <div class="booksearch my-2">
+    <h1 class="title">{{$t('importinventaire.title')}}</h1>
+    <div v-if="error">{{$t('searchbook.error', {error: error.message})}}</div>
+    <div v-else-if="data && data.results && data.results.length > 0">
+      <div class="booksearchlist"  v-for="book in data.results" :key="book.id">
+        <ImportListElement v-bind="book" />
+      </div>
+      <Pagination
+          :pageNumber="pageNumber"
+          :pageTotal="pageTotal"
+          maxItemDisplayed="11"
+          @pageChange="pageChange"/>
+    </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/ImportListElement.vue

@@ -0,0 +1,69 @@
+<script setup>
+  import { computed } from 'vue'
+  import { getInventaireImagePathOrDefault } from './api.js'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter();
+  const props = defineProps({
+    id: String,
+    title: String,
+    image: String,
+    publisher: String,
+    date: String,
+    isbn: String,
+  });
+  const imagePathOrDefault = computed(() => getInventaireImagePathOrDefault(props.image));
+</script>
+
+<template>
+  <div v-if="error" class="notification is-danger">
+    <p>{{error}}</p>
+  </div>
+  <div class="columns no-padding box container has-background-dark">
+    <div class="media column no-margin" @click="openBook">
+      <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 v-if="props.date" class="is-size-5">{{$t('importlistelement.releasedate') + "" + date}}</div>
+        <div v-if="props.publisher" class="is-size-5">{{$t('importlistelement.publisher') + "" + publisher}}</div>
+        <div v-if="props.isbn" class="is-size-5">{{"ISBN: " + isbn}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+img {
+  max-height:180px;
+  max-width:180px;
+  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;
+}
+
+.verticalbutton {
+  display: block;
+}
+
+.no-padding {
+  padding: 0px;
+}
+
+.no-margin {
+  margin: 0px;
+}
+
+</style>

front/src/api.js

@@ -2,9 +2,17 @@ import { useAuthStore } from './auth.store.js'
 
 const baseUrl = "http://localhost:8080"
 
+export function getInventaireImagePathOrDefault(path) {
+  return getImagePathOrGivenDefault(path, "../../defaultinventairebook.png")
+}
+
 export function getImagePathOrDefault(path) {
+  return getImagePathOrGivenDefault(path, "../defaultbook.png")
+}
+
+export function getImagePathOrGivenDefault(path, defaultpath) {
   if (path == "" || typeof path === 'undefined') {
-    return "../defaultbook.png";
+    return defaultpath;
   } else if (path.startsWith("https://")) {
     return path;
   } else {
@@ -38,6 +46,11 @@ export function getSearchBooks(data, error, searchterm, lang, limit, offset) {
   return useFetch(data, error, baseUrl + '/search/' + encodeURIComponent(searchterm) + "?" + queryParams.toString());
 }
 
+export function getInventaireEditionBooks(data, error, inventaireId, lang, limit, offset) {
+  const queryParams = new URLSearchParams({lang: lang, limit: limit, offset: offset});
+  return useFetch(data, error, baseUrl + '/inventaire/books/' + encodeURIComponent(inventaireId) + "?" + queryParams.toString());
+}
+
 export function getAuthor(data, error, id) {
   return useFetch(data, error, baseUrl + '/author/' + id);
 }

front/src/locales/en.json

@@ -58,8 +58,16 @@
     "goto":"Goto page {pageNumber}",
     "page":"Page {pageNumber}"
   },
-  "bookdatewidget" :{
+  "bookdatewidget": {
     "started": "Started at :",
     "finished": "Finished at :"
+  },
+  "importinventaire": {
+    "title":"Please select a book to import"
+  },
+  "importlistelement": {
+    "releasedate":"Release date:",
+    "publisher":"Publisher:"
   }
+
 }

front/src/locales/fr.json

@@ -58,8 +58,15 @@
     "goto":"Aller à la page {pageNumber}",
     "page":"Page {pageNumber}"
   },
-  "bookdatewidget" :{
+  "bookdatewidget": {
     "started": "Commencé le :",
     "finished": "Fini le :"
+  },
+  "importinventaire": {
+    "title":"Sélectionner l'édition à importer"
+  },
+  "importlistelement": {
+    "releasedate":"Date de publication : ",
+    "publisher":"Maison d'édition : "
   }
 }

front/src/router.js

@@ -8,6 +8,7 @@ import SignUp from './SignUp.vue'
 import LogIn from './LogIn.vue'
 import Home from './Home.vue'
 import SearchBook from './SearchBook.vue'
+import ImportInventaire from './ImportInventaire.vue'
 import InventaireImport from './InventaireImport.vue'
 import { useAuthStore } from './auth.store'
 
@@ -18,6 +19,7 @@ const routes = [
   { path: '/importinventaire/:inventaireid', component: InventaireImport, props: true },
   { path: '/author/:id', component: AuthorForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
+  { path: '/import/inventaire/:inventaireid', component: ImportInventaire, props: true },
   { path: '/add', component: AddBook },
   { path: '/signup', component: SignUp },
   { path: '/login', component: LogIn },