tangled.org
Monorepo for Tangled
tangled.org
appview: add reusable pagination template
Extract pagination UI into a shared template for reuse across pages. Refactored issues listing to use it with no behavior change
authored by
+105
-103
+95
appview/pages/templates/fragments/pagination.html
+95
appview/pages/templates/fragments/pagination.html
···
1
+
{{ define "fragments/pagination" }}
2
+
{{/* Params: Page (pagination.Page), TotalCount (int), BasePath (string), QueryParams (string) */}}
3
+
{{ $page := .Page }}
4
+
{{ $totalCount := .TotalCount }}
5
+
{{ $basePath := .BasePath }}
6
+
{{ $queryParams := .QueryParams }}
7
+
8
+
{{ $prev := $page.Previous.Offset }}
9
+
{{ $next := $page.Next.Offset }}
10
+
{{ $lastPage := sub $totalCount (mod $totalCount $page.Limit) }}
11
+
12
+
<div class="flex justify-center items-center mt-4 gap-2">
13
+
<a
14
+
class="
15
+
btn flex items-center gap-2 no-underline hover:no-underline
16
+
dark:text-white dark:hover:bg-gray-700
17
+
{{ if le $page.Offset 0 }}
18
+
cursor-not-allowed opacity-50
19
+
{{ end }}
20
+
"
21
+
{{ if gt $page.Offset 0 }}
22
+
hx-boost="true"
23
+
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}"
24
+
{{ end }}
25
+
>
26
+
{{ i "chevron-left" "w-4 h-4" }}
27
+
previous
28
+
</a>
29
+
30
+
{{ if gt $page.Offset 0 }}
31
+
<a
32
+
hx-boost="true"
33
+
href="{{ $basePath }}?{{ $queryParams }}&offset=0&limit={{ $page.Limit }}"
34
+
>
35
+
1
36
+
</a>
37
+
{{ end }}
38
+
39
+
{{ if gt $prev $page.Limit }}
40
+
<span>...</span>
41
+
{{ end }}
42
+
43
+
{{ if gt $prev 0 }}
44
+
<a
45
+
hx-boost="true"
46
+
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $prev }}&limit={{ $page.Limit }}"
47
+
>
48
+
{{ add (div $prev $page.Limit) 1 }}
49
+
</a>
50
+
{{ end }}
51
+
52
+
<span class="font-bold">
53
+
{{ add (div $page.Offset $page.Limit) 1 }}
54
+
</span>
55
+
56
+
{{ if lt $next $lastPage }}
57
+
<a
58
+
hx-boost="true"
59
+
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}"
60
+
>
61
+
{{ add (div $next $page.Limit) 1 }}
62
+
</a>
63
+
{{ end }}
64
+
65
+
{{ if lt $next (sub $totalCount (mul 2 $page.Limit)) }}
66
+
<span>...</span>
67
+
{{ end }}
68
+
69
+
{{ if lt $page.Offset $lastPage }}
70
+
<a
71
+
hx-boost="true"
72
+
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $lastPage }}&limit={{ $page.Limit }}"
73
+
>
74
+
{{ add (div $lastPage $page.Limit) 1 }}
75
+
</a>
76
+
{{ end }}
77
+
78
+
<a
79
+
class="
80
+
btn flex items-center gap-2 no-underline hover:no-underline
81
+
dark:text-white dark:hover:bg-gray-700
82
+
{{ if lt $next $totalCount | not }}
83
+
cursor-not-allowed opacity-50
84
+
{{ end }}
85
+
"
86
+
{{ if lt $next $totalCount }}
87
+
hx-boost="true"
88
+
href="{{ $basePath }}?{{ $queryParams }}&offset={{ $next }}&limit={{ $page.Limit }}"
89
+
{{ end }}
90
+
>
91
+
next
92
+
{{ i "chevron-right" "w-4 h-4" }}
93
+
</a>
94
+
</div>
95
+
{{ end }}
+10
-103
appview/pages/templates/repo/issues/issues.html
+10
-103
appview/pages/templates/repo/issues/issues.html
···
71
71
<div class="mt-2">
72
72
{{ template "repo/issues/fragments/issueListing" (dict "Issues" .Issues "RepoPrefix" .RepoInfo.FullName "LabelDefs" .LabelDefs) }}
73
73
</div>
74
-
{{if gt .IssueCount .Page.Limit }}
75
-
{{ block "pagination" . }} {{ end }}
76
-
{{ end }}
77
-
{{ end }}
78
-
79
-
{{ define "pagination" }}
80
-
<div class="flex justify-center items-center mt-4 gap-2">
81
-
{{ $currentState := "closed" }}
82
-
{{ if .FilteringByOpen }}
83
-
{{ $currentState = "open" }}
84
-
{{ end }}
85
-
86
-
{{ $prev := .Page.Previous.Offset }}
87
-
{{ $next := .Page.Next.Offset }}
88
-
{{ $lastPage := sub .IssueCount (mod .IssueCount .Page.Limit) }}
89
-
90
-
<a
91
-
class="
92
-
btn flex items-center gap-2 no-underline hover:no-underline
93
-
dark:text-white dark:hover:bg-gray-700
94
-
{{ if le .Page.Offset 0 }}
95
-
cursor-not-allowed opacity-50
96
-
{{ end }}
97
-
"
98
-
{{ if gt .Page.Offset 0 }}
99
-
hx-boost="true"
100
-
href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev }}&limit={{ .Page.Limit }}"
74
+
{{if gt .IssueCount .Page.Limit }}
75
+
{{ $state := "closed" }}
76
+
{{ if .FilteringByOpen }}
77
+
{{ $state = "open" }}
101
78
{{ end }}
102
-
>
103
-
{{ i "chevron-left" "w-4 h-4" }}
104
-
previous
105
-
</a>
106
-
107
-
<!-- dont show first page if current page is first page -->
108
-
{{ if gt .Page.Offset 0 }}
109
-
<a
110
-
hx-boost="true"
111
-
href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset=0&limit={{ .Page.Limit }}"
112
-
>
113
-
1
114
-
</a>
115
-
{{ end }}
116
-
117
-
<!-- if previous page is not first or second page (prev > limit) -->
118
-
{{ if gt $prev .Page.Limit }}
119
-
<span>...</span>
79
+
{{ template "fragments/pagination" (dict
80
+
"Page" .Page
81
+
"TotalCount" .IssueCount
82
+
"BasePath" (printf "/%s/issues" .RepoInfo.FullName)
83
+
"QueryParams" (printf "state=%s&q=%s" $state .FilterQuery)
84
+
) }}
120
85
{{ end }}
121
-
122
-
<!-- if previous page is not the first page -->
123
-
{{ if gt $prev 0 }}
124
-
<a
125
-
hx-boost="true"
126
-
href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev }}&limit={{ .Page.Limit }}"
127
-
>
128
-
{{ add (div $prev .Page.Limit) 1 }}
129
-
</a>
130
-
{{ end }}
131
-
132
-
<!-- current page. this is always visible -->
133
-
<span class="font-bold">
134
-
{{ add (div .Page.Offset .Page.Limit) 1 }}
135
-
</span>
136
-
137
-
<!-- if next page is not last page -->
138
-
{{ if lt $next $lastPage }}
139
-
<a
140
-
hx-boost="true"
141
-
href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next }}&limit={{ .Page.Limit }}"
142
-
>
143
-
{{ add (div $next .Page.Limit) 1 }}
144
-
</a>
145
-
{{ end }}
146
-
147
-
<!-- if next page is not second last or last page (next < issues - 2 * limit) -->
148
-
{{ if lt ($next) (sub .IssueCount (mul (2) .Page.Limit)) }}
149
-
<span>...</span>
150
-
{{ end }}
151
-
152
-
<!-- if its not the last page -->
153
-
{{ if lt .Page.Offset $lastPage }}
154
-
<a
155
-
hx-boost="true"
156
-
href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $lastPage }}&limit={{ .Page.Limit }}"
157
-
>
158
-
{{ add (div $lastPage .Page.Limit) 1 }}
159
-
</a>
160
-
{{ end }}
161
-
162
-
<a
163
-
class="
164
-
btn flex items-center gap-2 no-underline hover:no-underline
165
-
dark:text-white dark:hover:bg-gray-700
166
-
{{ if ne (len .Issues) .Page.Limit }}
167
-
cursor-not-allowed opacity-50
168
-
{{ end }}
169
-
"
170
-
{{ if eq (len .Issues) .Page.Limit }}
171
-
hx-boost="true"
172
-
href="/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next }}&limit={{ .Page.Limit }}"
173
-
{{ end }}
174
-
>
175
-
next
176
-
{{ i "chevron-right" "w-4 h-4" }}
177
-
</a>
178
-
</div>
179
86
{{ end }}