feat: Add pagination

dadav · Jul 23, 2024 · f109739 · f109739
1 parent 8bc8c8f
commit f109739
Show file tree

Hide file tree

Showing 5 changed files with 246 additions and 26 deletions.
diff --git a/internal/v3/ui/assets/style.css b/internal/v3/ui/assets/style.css
@@ -5,6 +5,17 @@
   flex-direction: column;
 }
 
+#pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+#pagesizewrapper {
+  margin-left: auto;
+}
+
 #query {
   max-width: 50%;
 }

diff --git a/internal/v3/ui/assets/style.scss b/internal/v3/ui/assets/style.scss
@@ -5,6 +5,18 @@
   flex-direction: column;
 }
 
+#pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+#pagesizewrapper {
+  // width: 100px;
+  margin-left: auto;
+}
+
 #query {
   max-width: 50%;
 }

diff --git a/internal/v3/ui/components/search.templ b/internal/v3/ui/components/search.templ
@@ -5,7 +5,7 @@ import (
 	gen "github.com/dadav/gorge/pkg/gen/v3/openapi"
 )
 
-templ SearchView(query string, modules []*gen.Module) {
+templ SearchView(query string, modules []*gen.Module, page, maxPage, pageSize int) {
 	<div class="search">
 		<img src="/assets/logo.png" width="400"/>
 		<br/>
@@ -17,13 +17,22 @@ templ SearchView(query string, modules []*gen.Module) {
 			value={ query }
 			placeholder="Name, author, version..."
 			hx-get="/search"
-			hx-params="*"
 			hx-trigger="input changed delay:500ms, search"
 			hx-target="#search-results"
 			hx-select="#search-results"
 			hx-swap="outerHTML"
 			hx-replace-url="true"
+			hx-include="#pagesize"
 		/>
+		<div id="pagesizewrapper">
+			<label for="pagesize">Modules per page:</label>
+			<select name="page_size" id="pagesize" hx-get="/search" hx-target="div.search" hx-select="div.search" hx-swap="outerHTML" hx-include="#query" hx-trigger="change" hx-replace-url="true">
+				<option selected?={ pageSize == 10 } value="10">10</option>
+				<option selected?={ pageSize == 25 } value="25">25</option>
+				<option selected?={ pageSize == 50 } value="50">50</option>
+				<option selected?={ pageSize == 100 } value="100">100</option>
+			</select>
+		</div>
 		<table class="table">
 			<thead>
 				<tr>
@@ -40,6 +49,43 @@ templ SearchView(query string, modules []*gen.Module) {
 				}
 			</tbody>
 		</table>
+		<div id="pagination">
+			<button
+				if page - 1 <= 0 {
+					disabled
+				}
+				class="btn primary"
+				hx-get="/search"
+				name="page"
+				value={ fmt.Sprintf("%d", page-1) }
+				hx-include="#query, #pagesize"
+				hx-target="div.search"
+				hx-select="div.search"
+				hx-swap="outerHTML"
+				hx-replace-url="true"
+			>
+				Previous
+				>
+			</button>
+			<p>{ fmt.Sprintf("Page: %d/%d", page, maxPage) }</p>
+			<button
+				if page + 1 > maxPage {
+					disabled
+				}
+				class="btn primary"
+				hx-get="/search"
+				name="page"
+				value={ fmt.Sprintf("%d", page+1) }
+				hx-include="#query, #pagesize"
+				hx-target="div.search"
+				hx-select="div.search"
+				hx-swap="outerHTML"
+				hx-replace-url="true"
+			>
+				Next
+				>
+			</button>
+		</div>
 	</div>
 }
 

diff --git a/internal/v3/ui/components/search_templ.go b/internal/v3/ui/components/search_templ.go