Add a view to see all books in a collection

front/src/CollectionForm.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { getCollection } from './api.js'
+import CollectionFormBookItem from './CollectionFormBookItem.vue'
+import Pagination from './Pagination.vue'
+
+const props = defineProps({
+  id: String,
+})
+
+const limit = 5
+const pageNumber = ref(1)
+
+const offset = computed(() => (pageNumber.value - 1) * limit)
+
+const data = ref(null)
+const error = ref(null)
+
+let totalElementsNumber = computed(() =>
+  typeof data != 'undefined' && data.value != null ? data.value['count'] : 0,
+)
+
+let pageTotal = computed(() => Math.ceil(totalElementsNumber.value / limit))
+
+getCollection(data, error, props.id, limit, offset.value)
+
+function pageChange(newPageNumber) {
+  pageNumber.value = newPageNumber
+  data.value = null
+  getCollection(data, error, props.id, limit, offset.value)
+}
+</script>
+
+<template>
+  <div v-if="error">{{ $t('bookform.error', { error: error.message }) }}</div>
+  <div v-if="data">
+    <h2 class="title">{{ data.name }}</h2>
+    <div>
+      <CollectionFormBookItem v-for="book in data.books" :key="book.id" v-bind="book" />
+    </div>
+    <Pagination
+      class="mt-5"
+      :pageNumber="pageNumber"
+      :pageTotal="pageTotal"
+      maxItemDisplayed="11"
+      @pageChange="pageChange"
+    />
+  </div>
+</template>
+
+<style></style>

front/src/CollectionFormBookItem.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { getImagePathOrDefault } from './api.js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  coverPath: String,
+})
+const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath))
+</script>
+
+<template>
+  <div class="bookcontainer has-background-dark p-2 m-2">
+    <img class="mr-2" v-bind:src="imagePathOrDefault" v-bind:alt="title" />
+    <h3 class="centered subtitle">{{ title }}</h3>
+  </div>
+</template>
+
+<style>
+img {
+  max-height: 200px;
+  max-width: 200px;
+  height: auto;
+  width: auto;
+}
+
+.bookcontainer {
+  display: flex;
+  transition: ease-in-out 0.04s;
+  border-radius: 20px;
+}
+
+.bookcontainer:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+}
+</style>

front/src/CollectionListElement.vue

@@ -1,26 +1,36 @@
 <script setup>
 import { getImagePathOrDefault } from './api.js'
+import { useRouter } from 'vue-router'
 
 const props = defineProps({
   id: Number,
   name: String,
   books: Array,
 })
+
+const router = useRouter()
+
+function goToCollection() {
+  const collectionId = props.id
+  router.push(`/collection/${props.id}`)
+}
 </script>
+
 <template>
-  <div class="collectioncontainer has-background-dark p-2">
+  <div class="collectioncontainer has-background-dark p-2" @click="goToCollection">
     <div class="collectionheader">
       <h2 class="subtitle">
         {{ props.name }}
       </h2>
     </div>
-    <div class="collectionpreviewbooks">
+    <div class="collectionpreviewbooks" v-if="props.books && props.books.length > 0">
       <div class="bookpreview mx-1" v-for="book in props.books" :key="book.id">
         <img v-bind:src="getImagePathOrDefault(book.coverPath)" v-bind:alt="book.title" />
       </div>
     </div>
   </div>
 </template>
+
 <style scoped>
 img {
   max-height: 100px;

front/src/api.js

@@ -60,6 +60,11 @@ export function getCollections(data, error, limit, offset) {
   return useFetch(data, error, '/ws/collections' + '?' + queryParams.toString())
 }
 
+export function getCollection(data, error, id, limit, offset) {
+  const queryParams = new URLSearchParams({ limit: limit, offset: offset })
+  return useFetch(data, error, '/ws/collection/' + id + '?' + queryParams.toString())
+}
+
 export function getMyBooks(data, error, arg, limit, offset) {
   const queryParams = new URLSearchParams({ limit: limit, offset: offset })
   return useFetch(data, error, '/ws/mybooks/' + arg + '?' + queryParams.toString())

front/src/locales/en.json

@@ -93,6 +93,9 @@
   "collections": {
     "error": "Error when loading collections: {error}",
     "add": "Add a collection",
-    "name": "Nom"
+    "name": "Name"
+  },
+  "collection": {
+    "error": "Error when loading collection: {error}"
   }
 }

front/src/locales/fr.json

@@ -94,5 +94,8 @@
     "error": "Erreur pendant le chargement des listes: {error}",
     "add": "Ajouter une liste",
     "name": "Nom"
+  },
+  "collection": {
+    "error": "Erreur pendant le chargement de la liste : {error}"
   }
 }

front/src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import BooksBrowser from './BooksBrowser.vue'
 import CollectionsBrowser from './CollectionsBrowser.vue'
+import CollectionForm from './CollectionForm.vue'
 import BookFormEdit from './BookFormEdit.vue'
 import AuthorForm from './AuthorForm.vue'
 import BookFormView from './BookFormView.vue'
@@ -22,6 +23,7 @@ const routes = [
   { path: '/book/:id', component: BookFormView, props: true },
   { path: '/book/:id/edit', component: BookFormEdit, props: true },
   { path: '/collections', component: CollectionsBrowser },
+  { path: '/collection/:id', component: CollectionForm, props: true },
   { path: '/author/:id', component: AuthorForm, props: true },
   { path: '/search/:searchterm', component: SearchBook, props: true },
   { path: '/import/inventaire/:inventaireid', component: ImportInventaire, props: true },