artlef/bibliomane
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Add pagination for "my books" display

Browse Source
This commit is contained in:
Arthur Lefebvre
2025-11-10 20:44:47 +01:00
parent 870158e489
commit 87f6daef18
13 changed files with 355 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
front/src/BooksBrowser.vue
View File

@@ -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>

82
front/src/Pagination.vue Normal file
View File

@@ -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>

9
front/src/api.js
View File

@@ -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) {

6
front/src/locales/en.json
View File

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

6
front/src/locales/fr.json
View File

@@ -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}"
}
}

54
internal/apitest/get_count_user_book_test.go Normal file
View File

@@ -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)
}

49
internal/apitest/get_read_user_book_test.go
View File

@@ -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 {
return testGetbooksHandler(t, router, userToken, expectedCode, "/mybooks/read")
func testGetReadBooksHandler(t *testing.T, router *gin.Engine, userToken string, expectedCode int, limit string, offset string) []bookUserGet {
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())
}

19
internal/appcontext/main.go
View File

@@ -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
}
}

2
internal/config/config.go
View File

@@ -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,
}
}

39
internal/query/query.go
View File

@@ -56,22 +56,51 @@ type BookUserGet struct {
CoverPath string `json:"coverPath"`
}
func FetchReadUserBook(db *gorm.DB, userId uint) ([]BookUserGet, error) {
query := fetchUserBookGet(db, userId)
query = query.Where("user_books.read IS TRUE")
func FetchReadUserBook(db *gorm.DB, userId uint, limit int, offset int) ([]BookUserGet, error) {
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())

31
internal/routes/userbookreadget.go
View File

@@ -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})
}

31
internal/routes/userbookwantreadget.go
View File

@@ -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})
}

6
internal/setup/setup.go
View File

@@ -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})
})