First implementation of fetching collections of book managed by user

front/src/AppNavBar.vue

@@ -86,6 +86,14 @@ onMounted(() => {
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks') }}
         </RouterLink>
+        <RouterLink
+          v-if="authStore.user"
+          to="/collections"
+          class="navbar-item"
+          activeClass="is-active"
+        >
+          {{ $t('navbar.mycollections') }}
+        </RouterLink>
         <RouterLink v-if="authStore.user" to="/browse" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.explore') }}
         </RouterLink>

front/src/CollectionListElement.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { getImagePathOrDefault } from './api.js'
+
+const props = defineProps({
+  id: Number,
+  name: String,
+  books: Array,
+})
+</script>
+<template>
+  <div class="collectioncontainer has-background-dark p-2">
+    <div class="collectionheader">
+      <h2 class="subtitle">
+        {{ props.name }}
+      </h2>
+    </div>
+    <div class="collectionpreviewbooks">
+      <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;
+  max-width: 100px;
+  height: auto;
+  width: auto;
+}
+
+.collectioncontainer {
+  display: flex;
+  transition: ease-in-out 0.04s;
+  border-radius: 20px;
+}
+
+.collectioncontainer:hover {
+  transform: scale(1.01);
+  transition: ease-in-out 0.02s;
+}
+
+.collectionheader {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.collectionpreviewbooks {
+  flex: 6;
+  display: flex;
+}
+
+@media (max-width: 1024px) {
+  img {
+    max-height: 50px;
+    max-width: 50px;
+  }
+  .collectionpreviewbooks {
+    flex: 2;
+  }
+}
+</style>

front/src/CollectionsBrowser.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { getCollections } from './api.js'
+import CollectionListElement from './CollectionListElement.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)
+
+let totalCollectionsNumber = computed(() =>
+  typeof data != 'undefined' && data.value != null ? data.value['count'] : 0,
+)
+let pageTotal = computed(() => Math.ceil(totalCollectionsNumber.value / limit))
+
+fetchData()
+
+function fetchData() {
+  getCollections(data, error, limit, offset.value)
+}
+
+function pageChange(newPageNumber) {
+  pageNumber.value = newPageNumber
+  data.value = null
+  fetchData()
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="error">{{ $t('bookbrowser.error', { error: error.message }) }}</div>
+    <div v-else-if="data">
+      <div class="collectionslist">
+        <div class="my-2" v-for="collection in data.collections" :key="collection.id">
+          <CollectionListElement v-bind="collection" />
+        </div>
+      </div>
+      <Pagination
+        :pageNumber="pageNumber"
+        :pageTotal="pageTotal"
+        maxItemDisplayed="11"
+        @pageChange="pageChange"
+      />
+    </div>
+    <div v-else>{{ $t('bookbrowser.loading') }}</div>
+  </div>
+</template>
+
+<style scoped></style>

front/src/api.js

@@ -55,6 +55,11 @@ export async function getAppInfo(appInfo, appInfoErr) {
     .catch((err) => (appInfoErr.value = err))
 }
 
+export function getCollections(data, error, limit, offset) {
+  const queryParams = new URLSearchParams({ limit: limit, offset: offset })
+  return useFetch(data, error, '/ws/collections' + '?' + 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

@@ -5,6 +5,7 @@
   },
   "navbar": {
     "mybooks": "My Books",
+    "mycollections": "My Collections",
     "addbook": "Add Book",
     "explore": "Explore",
     "logout": "Log out",

front/src/locales/fr.json

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

front/src/router.js

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