Add pagination for "my books" display

front/src/BooksBrowser.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
-import BookCard from './BookCard.vue';
+import BookCard from './BookCard.vue'
-import { getMyBooks } from './api.js'
+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 v-if="error">{{$t('bookbrowser.error', {error: error.message})}}</div>
+  <div v-else-if="data">
-    <div class="book" v-else-if="data" v-for="book in data" :key="book.id">
+    <div class="books">
-      <BookCard v-bind="book" />
+      <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) {
+export function getCountMyBooks(arg) {
-  return useFetch(baseUrl + '/mybooks/' + 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}"
   }
 }

internal/apitest/get_count_user_book_test.go

@@ -0,0 +1,54 @@
+package apitest
+
+import (
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"git.artlef.fr/PersonalLibraryManager/internal/testutils"
+	"github.com/stretchr/testify/assert"
+)
+
+type countResponse struct {
+	Count int
+}
+
+func TestGetReadBooksCountHandler_Demo(t *testing.T) {
+	router := testutils.TestSetup()
+
+	token := testutils.ConnectDemoUser(router)
+
+	req, _ := http.NewRequest("GET", "/mybooks/read/count", nil)
+	req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", token))
+
+	w := httptest.NewRecorder()
+	router.ServeHTTP(w, req)
+
+	var c countResponse
+	err := json.Unmarshal(w.Body.Bytes(), &c)
+	if err != nil {
+		t.Error(err)
+	}
+	assert.Equal(t, 23, c.Count)
+}
+
+func TestGetWantReadBooksCountHandler_Demo(t *testing.T) {
+	router := testutils.TestSetup()
+
+	token := testutils.ConnectDemoUser(router)
+
+	req, _ := http.NewRequest("GET", "/mybooks/wantread/count", nil)
+	req.Header.Add("Authorization", fmt.Sprintf("Bearer %s", token))
+
+	w := httptest.NewRecorder()
+	router.ServeHTTP(w, req)
+
+	var c countResponse
+	err := json.Unmarshal(w.Body.Bytes(), &c)
+	if err != nil {
+		t.Error(err)
+	}
+	assert.Equal(t, 2, c.Count)
+}

internal/apitest/get_read_user_book_test.go

@@ -1,6 +1,7 @@
 package apitest
 
 import (
+	"net/url"
 	"testing"
 
 	"git.artlef.fr/PersonalLibraryManager/internal/testutils"
@@ -12,15 +13,39 @@ func TestGetReadBooksHandler_Demo(t *testing.T) {
 	router := testutils.TestSetup()
 
 	token := testutils.ConnectDemoUser(router)
-	books := testGetReadBooksHandler(t, router, token, 200)
+	books := testGetReadBooksHandler(t, router, token, 200, "", "")
 	assert.Equal(t, 23, len(books))
 }
 
+func TestGetReadBooksHandler_DemoNoLimit(t *testing.T) {
+	router := testutils.TestSetup()
+
+	token := testutils.ConnectDemoUser(router)
+	books := testGetReadBooksHandler(t, router, token, 200, "100", "")
+	assert.Equal(t, 23, len(books))
+}
+
+func TestGetReadBooksHandler_DemoLowerLimit(t *testing.T) {
+	router := testutils.TestSetup()
+
+	token := testutils.ConnectDemoUser(router)
+	books := testGetReadBooksHandler(t, router, token, 200, "5", "")
+	assert.Equal(t, 5, len(books))
+}
+
+func TestGetReadBooksHandler_DemoOffset(t *testing.T) {
+	router := testutils.TestSetup()
+
+	token := testutils.ConnectDemoUser(router)
+	books := testGetReadBooksHandler(t, router, token, 200, "20", "10")
+	assert.Equal(t, 13, len(books))
+}
+
 func TestGetReadBooksHandler_Demo2(t *testing.T) {
 	router := testutils.TestSetup()
 
 	token := testutils.ConnectDemo2User(router)
-	books := testGetReadBooksHandler(t, router, token, 200)
+	books := testGetReadBooksHandler(t, router, token, 200, "", "")
 	assert.Equal(t, 2, len(books))
 }
 
@@ -28,7 +53,7 @@ func TestGetReadBooksHandler_CheckOneBook(t *testing.T) {
 	router := testutils.TestSetup()
 
 	token := testutils.ConnectDemo2User(router)
-	books := testGetReadBooksHandler(t, router, token, 200)
+	books := testGetReadBooksHandler(t, router, token, 200, "100", "")
 	var book bookUserGet
 	for _, b := range books {
 		if b.Title == "De sang-froid" {
@@ -45,6 +70,20 @@ func TestGetReadBooksHandler_CheckOneBook(t *testing.T) {
 		}, book)
 }
 
-func testGetReadBooksHandler(t *testing.T, router *gin.Engine, userToken string, expectedCode int) []bookUserGet {
+func testGetReadBooksHandler(t *testing.T, router *gin.Engine, userToken string, expectedCode int, limit string, offset string) []bookUserGet {
-	return testGetbooksHandler(t, router, userToken, expectedCode, "/mybooks/read")
+	u, err := url.Parse("/mybooks/read")
+	if err != nil {
+		t.Error(err)
+	}
+	if limit != "" {
+		q := u.Query()
+		q.Set("limit", limit)
+		u.RawQuery = q.Encode()
+	}
+	if offset != "" {
+		q := u.Query()
+		q.Set("offset", offset)
+		u.RawQuery = q.Encode()
+	}
+	return testGetbooksHandler(t, router, userToken, expectedCode, u.String())
 }

internal/appcontext/main.go

@@ -2,6 +2,7 @@ package appcontext
 
 import (
 	"errors"
+	"strconv"
 
 	"git.artlef.fr/PersonalLibraryManager/internal/config"
 	"git.artlef.fr/PersonalLibraryManager/internal/model"
@@ -26,3 +27,21 @@ func (ac AppContext) GetAuthenticatedUser() (model.User, error) {
 	res := ac.Db.Where("name = ?", username).First(&user)
 	return user, res.Error
 }
+
+func (ac AppContext) GetQueryLimit() (int, error) {
+	l := ac.C.Query("limit")
+	if l != "" {
+		return strconv.Atoi(l)
+	} else {
+		return ac.Config.Limit, nil
+	}
+}
+
+func (ac AppContext) GetQueryOffset() (int, error) {
+	o := ac.C.Query("offset")
+	if o != "" {
+		return strconv.Atoi(o)
+	} else {
+		return 0, nil
+	}
+}

internal/config/config.go

@@ -14,6 +14,7 @@ type Config struct {
 	DemoDataPath     string `toml:"demo_data_path" comment:"The path to the sql file to load for demo data."`
 	JWTKey           string `toml:"jwt_key" comment:"The key used to encrypt the generated JWT. Encoded in base64. If empty a random one will be generated on every restart."`
 	ImageFolderPath  string `toml:"image_folder_path" default:"img" comment:"Folder where uploaded files will be stored."`
+	Limit            int    `toml:"limit" default:"100" comment:"Folder where uploaded files will be stored."`
 }
 
 func defaultConfig() Config {
@@ -23,6 +24,7 @@ func defaultConfig() Config {
 		DemoDataPath:     "",
 		JWTKey:           "",
 		ImageFolderPath:  "img",
+		Limit:            100,
 	}
 }
 

internal/query/query.go

@@ -56,22 +56,51 @@ type BookUserGet struct {
 	CoverPath string `json:"coverPath"`
 }
 
-func FetchReadUserBook(db *gorm.DB, userId uint) ([]BookUserGet, error) {
+func FetchReadUserBook(db *gorm.DB, userId uint, limit int, offset int) ([]BookUserGet, error) {
-	query := fetchUserBookGet(db, userId)
-	query = query.Where("user_books.read IS TRUE")
 	var books []BookUserGet
+	query := fetchReadUserBookQuery(db, userId)
+	query = query.Limit(limit)
+	query = query.Offset(offset)
 	res := query.Find(&books)
 	return books, res.Error
 }
 
-func FetchWantReadUserBook(db *gorm.DB, userId uint) ([]BookUserGet, error) {
+func FetchReadUserBookCount(db *gorm.DB, userId uint) (int64, error) {
+	query := fetchReadUserBookQuery(db, userId)
+	var count int64
+	res := query.Count(&count)
+	return count, res.Error
+}
+
+func fetchReadUserBookQuery(db *gorm.DB, userId uint) *gorm.DB {
 	query := fetchUserBookGet(db, userId)
-	query = query.Where("user_books.want_read IS TRUE")
+	query = query.Where("user_books.read IS TRUE")
+	return query
+}
+
+func FetchWantReadUserBook(db *gorm.DB, userId uint, limit int, offset int) ([]BookUserGet, error) {
 	var books []BookUserGet
+
+	query := fetchWantReadUserBookQuery(db, userId)
+	query = query.Limit(limit)
+	query = query.Offset(offset)
 	res := query.Find(&books)
 	return books, res.Error
 }
 
+func FetchWantReadUserBookCount(db *gorm.DB, userId uint) (int64, error) {
+	query := fetchWantReadUserBookQuery(db, userId)
+	var count int64
+	res := query.Count(&count)
+	return count, res.Error
+}
+
+func fetchWantReadUserBookQuery(db *gorm.DB, userId uint) *gorm.DB {
+	query := fetchUserBookGet(db, userId)
+	query = query.Where("user_books.want_read IS TRUE")
+	return query
+}
+
 func fetchUserBookGet(db *gorm.DB, userId uint) *gorm.DB {
 	query := db.Model(&model.UserBook{})
 	query = query.Select("books.id, books.title, books.author, user_books.rating, user_books.read, user_books.want_read, " + selectStaticFilesPath())

internal/routes/userbookreadget.go

@@ -6,6 +6,7 @@ import (
 	"git.artlef.fr/PersonalLibraryManager/internal/appcontext"
 	"git.artlef.fr/PersonalLibraryManager/internal/myvalidator"
 	"git.artlef.fr/PersonalLibraryManager/internal/query"
+	"github.com/gin-gonic/gin"
 )
 
 func GetMyBooksReadHandler(ac appcontext.AppContext) {
@@ -14,6 +15,34 @@ func GetMyBooksReadHandler(ac appcontext.AppContext) {
 		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
 		return
 	}
-	userbooks, err := query.FetchReadUserBook(ac.Db, user.ID)
+	limit, err := ac.GetQueryLimit()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	offset, err := ac.GetQueryOffset()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	userbooks, err := query.FetchReadUserBook(ac.Db, user.ID, limit, offset)
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
 	ac.C.JSON(http.StatusOK, userbooks)
 }
+
+func GetMyBooksReadCountHandler(ac appcontext.AppContext) {
+	user, err := ac.GetAuthenticatedUser()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	count, err := query.FetchReadUserBookCount(ac.Db, user.ID)
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	ac.C.JSON(http.StatusOK, gin.H{"count": count})
+}

internal/routes/userbookwantreadget.go

@@ -6,6 +6,7 @@ import (
 	"git.artlef.fr/PersonalLibraryManager/internal/appcontext"
 	"git.artlef.fr/PersonalLibraryManager/internal/myvalidator"
 	"git.artlef.fr/PersonalLibraryManager/internal/query"
+	"github.com/gin-gonic/gin"
 )
 
 func GetMyBooksWantReadHandler(ac appcontext.AppContext) {
@@ -14,6 +15,34 @@ func GetMyBooksWantReadHandler(ac appcontext.AppContext) {
 		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
 		return
 	}
-	userbooks, err := query.FetchWantReadUserBook(ac.Db, user.ID)
+	limit, err := ac.GetQueryLimit()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	offset, err := ac.GetQueryOffset()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	userbooks, err := query.FetchWantReadUserBook(ac.Db, user.ID, limit, offset)
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
 	ac.C.JSON(http.StatusOK, userbooks)
 }
+
+func GetMyBooksWantReadCountHandler(ac appcontext.AppContext) {
+	user, err := ac.GetAuthenticatedUser()
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	count, err := query.FetchWantReadUserBookCount(ac.Db, user.ID)
+	if err != nil {
+		myvalidator.ReturnErrorsAsJsonResponse(&ac, err)
+		return
+	}
+	ac.C.JSON(http.StatusOK, gin.H{"count": count})
+}

internal/setup/setup.go

@@ -27,9 +27,15 @@ func Setup(config *config.Config) *gin.Engine {
 	r.GET("/mybooks/read", func(c *gin.Context) {
 		routes.GetMyBooksReadHandler(appcontext.AppContext{C: c, Db: db, I18n: bundle, Config: config})
 	})
+	r.GET("/mybooks/read/count", func(c *gin.Context) {
+		routes.GetMyBooksReadCountHandler(appcontext.AppContext{C: c, Db: db, I18n: bundle, Config: config})
+	})
 	r.GET("/mybooks/wantread", func(c *gin.Context) {
 		routes.GetMyBooksWantReadHandler(appcontext.AppContext{C: c, Db: db, I18n: bundle, Config: config})
 	})
+	r.GET("/mybooks/wantread/count", func(c *gin.Context) {
+		routes.GetMyBooksWantReadCountHandler(appcontext.AppContext{C: c, Db: db, I18n: bundle, Config: config})
+	})
 	r.GET("/search/:searchterm", func(c *gin.Context) {
 		routes.GetSearchBooksHandler(appcontext.AppContext{C: c, Db: db, I18n: bundle, Config: config})
 	})