pagination: support mobile view

This commit is contained in:
Tigor Hutasuhut 2024-05-13 10:37:55 +07:00
parent cdc5cffefc
commit b36a2f828a

View file

@ -7,12 +7,13 @@ import "strings"
import "fmt" import "fmt"
type PaginationData struct { type PaginationData struct {
Offset int64 Offset int64
Limit int64 Limit int64
BaseURL string BaseURL string
Total int64 Total int64
Classes []string Classes []string
UnhideRange int UnhideRange int
MobileUnhideRange int
} }
type pageStatus int type pageStatus int
@ -25,11 +26,18 @@ const (
func (pgdata PaginationData) GetUnhideRange() int { func (pgdata PaginationData) GetUnhideRange() int {
if pgdata.UnhideRange < 1 { if pgdata.UnhideRange < 1 {
return 1 return 2
} }
return pgdata.UnhideRange return pgdata.UnhideRange
} }
func (pgdata PaginationData) GetMobileUnhideRange() int {
if pgdata.MobileUnhideRange < 1 {
return 1
}
return pgdata.MobileUnhideRange
}
func (pgdata PaginationData) getPageStatus(page int) pageStatus { func (pgdata PaginationData) getPageStatus(page int) pageStatus {
if page < 2 { if page < 2 {
return pageStatusShow return pageStatusShow
@ -53,6 +61,29 @@ func (pgdata PaginationData) getPageStatus(page int) pageStatus {
return pageStatusHidden return pageStatusHidden
} }
func (pgdata PaginationData) getMobilePageStatus(page int) pageStatus {
if page < 2 {
return pageStatusShow
}
lastPage := (pgdata.Total / max(pgdata.Limit, 1)) + 1
if page == int(lastPage) {
return pageStatusShow
}
current := pgdata.GetCurrentPage()
unhideRange := pgdata.GetMobileUnhideRange()
if page == current-unhideRange-1 {
return pageStatusDot
}
if page == current+unhideRange+1 {
return pageStatusDot
}
if page >= current-unhideRange && page <= current+unhideRange {
return pageStatusShow
}
return pageStatusHidden
}
func (pgdata PaginationData) GetCurrentPage() int { func (pgdata PaginationData) GetCurrentPage() int {
return int(pgdata.Offset/pgdata.Limit) + 1 return int(pgdata.Offset/pgdata.Limit) + 1
} }
@ -71,7 +102,7 @@ templ Pagination(c *views.Context, data PaginationData) {
get vals() { return JSON.stringify({...this.qs, offset: (Math.max(1, Math.min(this.page, this.max))-1) * (this.qs.limit || 25)}) } get vals() { return JSON.stringify({...this.qs, offset: (Math.max(1, Math.min(this.page, this.max))-1) * (this.qs.limit || 25)}) }
}`, data.GetCurrentPage(), c.JSONQuery(), data.GetTotalPage()) } }`, data.GetCurrentPage(), c.JSONQuery(), data.GetTotalPage()) }
> >
<div class="join"> <div class="hidden sm:join">
for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit { for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit {
if data.GetTotalPage() <= 5 || data.getPageStatus(i) == pageStatusShow { if data.GetTotalPage() <= 5 || data.getPageStatus(i) == pageStatusShow {
<a <a
@ -87,6 +118,22 @@ templ Pagination(c *views.Context, data PaginationData) {
} }
} }
</div> </div>
<div class="join sm:hidden">
for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit {
if data.GetTotalPage() <= 5 || data.getMobilePageStatus(i) == pageStatusShow {
<a
href={ c.URLWithExtraQuery(data.BaseURL, "offset", strconv.FormatInt(count, 10)) }
class={ utils.CXX(
"join-item btn no-underline btn-sm", true,
"btn-active", data.Offset <= count && data.Offset > count - data.Limit ,
strings.Join(data.Classes, " "), len(data.Classes) > 0,
) }
>{ strconv.Itoa(i) }</a>
} else if data.getMobilePageStatus(i) == pageStatusDot {
<span @click="$refs.dialog.showModal()" class="join-item btn btn-sm">...</span>
}
}
</div>
<dialog <dialog
onclick="if (event.target === this) this.close()" onclick="if (event.target === this) this.close()"
x-ref="dialog" x-ref="dialog"