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>