Add pagination for "my books" display

front/src/BooksBrowser.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from 'vue'
-import BookCard from './BookCard.vue';
-import { getMyBooks } from './api.js'
+import { ref, computed } from 'vue'
+import BookCard from './BookCard.vue'
+import { getMyBooks, getCountMyBooks } from './api.js'
+import Pagination from './Pagination.vue'
 
 
 
@@ -10,15 +11,30 @@ const FilterStates = Object.freeze({
     WANTREAD: "wantread",
 });
 
+const limit = 6;
+const pageNumber = ref(1);
+
+const offset = computed(() => (pageNumber.value - 1) * limit);
+
 let currentFilterState = ref(FilterStates.READ);
 
-let { data, error } = getMyBooks(currentFilterState.value);
+let data;
+let error;
+let totalBooksData;
+let errorFetchTotal;
 
+let totalBooksNumber = computed(() => totalBooksData ? totalBooksData.value["count"] : 0);
+let pageTotal = computed(() => Math.ceil(totalBooksNumber.value / limit))
+
+fetchData();
 
 function fetchData() {
-  let res = getMyBooks(currentFilterState.value);
+  let res = getMyBooks(currentFilterState.value, limit, offset.value);
   data = res.data;
   error = res.error;
+  let resCount = getCountMyBooks(currentFilterState.value);
+  totalBooksData = resCount.data;
+
 }
 
 function onFilterButtonClick(newstate) {
@@ -30,6 +46,12 @@ function computeDynamicClass(state) {
   return currentFilterState.value === state ? 'is-active is-primary' : '';
 }
 
+function pageChange(newPageNumber) {
+  pageNumber.value = newPageNumber;
+  data.value = null
+  fetchData();
+}
+
 </script>
 
 <template>
@@ -45,13 +67,16 @@ function computeDynamicClass(state) {
       {{$t('bookbrowser.wantread')}}
     </button>
   </div>
-  <div class="books">
-    <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
-    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
-      <BookCard v-bind="book" />
+  <div v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
+  <div v-else-if="data">
+    <div class="books">
+      <div class="book" v-for="book in data" :key="book.id">
+        <BookCard v-bind="book" />
+      </div>
     </div>
-    <div v-else>{{$t('bookbrowser.loading')}}</div>
+    <Pagination :pageNumber="pageNumber" :pageTotal="pageTotal" maxItemDisplayed="11" @pageChange="pageChange"/>
   </div>
+  <div v-else>{{$t('bookbrowser.loading')}}</div>
 </template>
 
 <style scoped>

front/src/Pagination.vue

@@ -0,0 +1,82 @@
+<script setup>
+  import { computed } from 'vue'
+  const props = defineProps(['pageNumber', 'pageTotal', 'maxItemDisplayed']);
+  const emit = defineEmits(['pageChange']);
+
+  const paginatedItems = computed(() => {
+    let items = [];
+    if (props.pageTotal > props.maxItemDisplayed) {
+
+      //number of pages we can display before and after the current page
+      const maxNumberOfItemsAroundCurrentItem = Math.floor((props.maxItemDisplayed - 2) / 2);
+
+      items.push(1);
+      //compute first item number
+      let firstItemNumber;
+      let lastItemNumber;
+
+      if (props.pageNumber - maxNumberOfItemsAroundCurrentItem < 4) {
+        //starting at the left
+        firstItemNumber = 2;
+        lastItemNumber = props.maxItemDisplayed;
+      } else if (props.pageNumber + maxNumberOfItemsAroundCurrentItem > props.pageTotal - 2) {
+        //starting at the right
+        firstItemNumber = props.pageTotal - props.maxItemDisplayed + 1;
+        lastItemNumber = props.pageTotal - 1;
+      } else {
+        firstItemNumber = props.pageNumber - maxNumberOfItemsAroundCurrentItem;
+        lastItemNumber = props.pageNumber + maxNumberOfItemsAroundCurrentItem;
+      }
+
+      if (firstItemNumber !== 2) {
+        items.push(-1);
+      }
+
+      for (let i = firstItemNumber; i <= lastItemNumber; i++) {
+        items.push(i);
+      }
+      if (lastItemNumber !== props.pageTotal - 1) {
+        items.push(-1);
+      }
+      items.push(props.pageTotal);
+    } else {
+      for (let i = 1; i <= props.pageTotal; i++) {
+        items.push(i);
+      }
+    }
+    return items;})
+</script>
+
+<template>
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <a href="#" v-if="props.pageNumber > 1"
+             @click="$emit('pageChange', Math.max(1, props.pageNumber - 1))"
+             class="pagination-previous">
+      {{$t('pagination.previous')}}
+    </a>
+  <a href="#" v-if="props.pageNumber < props.pageTotal"
+    @click="$emit('pageChange', props.pageNumber + 1)"
+    class="pagination-next">
+    {{$t('pagination.next')}}
+  </a>
+  <ul class="pagination-list">
+    <li v-for="item in paginatedItems" :key="item">
+      <span v-if="item === -1" class="pagination-ellipsis">&hellip;</span>
+      <a v-else
+         href="#"
+         @click="$emit('pageChange', item)"
+         class="pagination-link"
+         :class="item === props.pageNumber ? 'is-current' : ''"
+         :aria-current="item === props.pageNumber ? 'page' : null"
+         :aria-label="$t(item === props.pageNumber ? 'pagination.page' : 'pagination.goto', {pageNumber: item})">
+        {{ item }}
+      </a>
+    </li>
+  </ul>
+</nav>
+</template>
+
+
+<style scoped>
+</style>
+

front/src/api.js

@@ -29,8 +29,13 @@ function useFetch(url) {
   return { data, error }
 }
 
-export function getMyBooks(arg) {
-  return useFetch(baseUrl + '/mybooks/' + arg);
+export function getCountMyBooks(arg) {
+  return useFetch(baseUrl + '/mybooks/' + arg + "/count");
+}
+
+export function getMyBooks(arg, limit, offset) {
+  const queryParams = new URLSearchParams({limit: limit, offset: offset});
+  return useFetch(baseUrl + '/mybooks/' + arg + "?" + queryParams.toString());
 }
 
 export function getSearchBooks(searchterm) {

front/src/locales/en.json

@@ -47,5 +47,11 @@
     "read": "Read",
     "startread": "Started",
     "wantread": "Interested"
+  },
+  "pagination": {
+    "previous":"Previous",
+    "next":"Next",
+    "goto":"Goto page {pageNumber}",
+    "page":"Page {pageNumber}"
   }
 }

front/src/locales/fr.json

@@ -47,5 +47,11 @@
     "read": "Lu",
     "startread": "Commencé",
     "wantread": "Intéressé"
+  },
+  "pagination": {
+    "previous":"Précédent",
+    "next":"Suivant",
+    "goto":"Aller à la page {pageNumber}",
+    "page":"Page {pageNumber}"
   }
 }