devices-details: added pagination component

views/components/pagination.templ

@@ -0,0 +1,31 @@
+package components
+
+import "github.com/tigorlazuardi/redmage/views"
+import "strconv"
+import "github.com/tigorlazuardi/redmage/views/utils"
+import "strings"
+
+type PaginationData struct {
+	Offset  int64
+	Limit   int64
+	BaseURL string
+	Total   int64
+	Classes []string
+}
+
+templ Pagination(c *views.Context, data PaginationData) {
+	if data.Total > data.Limit {
+		<div class="join">
+			for i, count := 1, int64(0); count < data.Total; i, count = i+1, count+data.Limit {
+				<a
+					href={ c.URLWithExtraQuery(data.BaseURL, "offset", strconv.FormatInt(count, 10)) }
+					class={ utils.CXX(
+                        "join-item btn no-underline", true,
+                        "btn-active", data.Offset <= count &&  data.Offset > count - data.Limit ,
+                        strings.Join(data.Classes, " "), len(data.Classes) > 0,
+                    ) }
+				>{ strconv.Itoa(i) }</a>
+			}
+		</div>
+	}
+}

views/context.go

@@ -1,9 +1,11 @@
 package views
 
 import (
+	"fmt"
 	"net/http"
 	"net/url"
 
+	"github.com/a-h/templ"
 	"github.com/tigorlazuardi/redmage/config"
 )
 
@@ -21,6 +23,18 @@ func (c *Context) AppendQuery(keyValue ...string) string {
 	return query.Encode()
 }
 
+// URLWithExtraQuery creates a query based from baseUrl with queries joined between
+// current context and extraQueries.
+//
+// extraKeyValues is an alternating key-value pair.
+func (c *Context) URLWithExtraQuery(baseUrl string, extraKeyValues ...string) templ.SafeURL {
+	query := c.Request.URL.Query()
+	for i := 0; i < len(extraKeyValues); i += 2 {
+		query.Set(extraKeyValues[i], extraKeyValues[i+1])
+	}
+	return templ.SafeURL(fmt.Sprintf("%s?%s", baseUrl, query.Encode()))
+}
+
 func NewContext(config *config.Config, request *http.Request) *Context {
 	return &Context{
 		Config:  config,

views/devices/details/filter.templ

@@ -42,13 +42,11 @@ templ filter(c *views.Context, data Data) {
 			</select>
 			<label for="range">Range</label>
 			<select id="range" name="created_at" class="select select-bordered w-full">
+				@rangeOption(c, "", "*No Filter")
 				@rangeOption(c, "-10800", "3 Hours")
 				@rangeOption(c, "-21600", "6 Hours")
 				@rangeOption(c, "-43200", "12 Hours")
-				<option
-					value="-86400"
-					selected?={ c.Request.URL.Query().Get("created_at") == "" || c.Request.URL.Query().Get("created_at") == "-86400" }
-				>1 Day</option>
+				@rangeOption(c, "-86400", "1 Day")
 				@rangeOption(c, "-172800", "2 Days")
 				@rangeOption(c, "-259200", "3 Days")
 				@rangeOption(c, "-604800", "7 Days")

views/devices/details/view.templ

@@ -4,6 +4,7 @@ import "github.com/tigorlazuardi/redmage/views"
 import "github.com/tigorlazuardi/redmage/views/components"
 import "fmt"
 import "github.com/tigorlazuardi/redmage/models"
+import "strconv"
 
 templ View(c *views.Context, data Data) {
 	@components.Doctype() {
@@ -33,10 +34,35 @@ templ Content(c *views.Context, data Data) {
 				</div>
 				<div class="divider"></div>
 				@filter(c, data)
+				<h2>{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
+				if data.TotalImages > 0 {
+					<div class="flex justify-center mt-4">
+						@components.Pagination(c, components.PaginationData{
+							BaseURL: "/devices/details/" + data.Device.Slug,
+							Limit:   data.Params.Limit,
+							Offset:  data.Params.Offset,
+							Total:   data.TotalImages,
+						})
+					</div>
+					<p class="text-center my-4">
+						Showing from 
+						{ strconv.FormatInt(data.Params.Offset + 1, 10) }
+						to 
+						{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
+					</p>
+				}
 				for _, group := range data.splitImages() {
 					<h2>{ group.Subreddit }</h2>
 					@imageList(group.Images)
 				}
+				<div class="flex justify-center mt-4">
+					@components.Pagination(c, components.PaginationData{
+						BaseURL: "/devices/details/" + data.Device.Slug,
+						Limit:   data.Params.Limit,
+						Offset:  data.Params.Offset,
+						Total:   data.TotalImages,
+					})
+				</div>
 			}
 		}
 	</main>