Monorepo for Tangled

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

Signed-off-by: moshyfawn <email@moshyfawn.dev>
Signed-off-by: Seongmin Lee <git@boltless.me>

authored by moshyfawn.dev and committed by tangled.org b480d950 50b88f01

+105 -103
+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
··· 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 }}