Redmage/views/devices/details/view.templ
Tigor Hutasuhut 3f3bc72f30
Some checks failed
/ push (push) Has been cancelled
devices-details: added pagination component
2024-05-12 18:13:00 +07:00

78 lines
2.3 KiB
Plaintext

package details
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() {
if data.Device == nil {
@components.Head(c, components.HeadTitle("Redmage - Device Not Found"))
} else {
@components.Head(c, components.HeadTitle(fmt.Sprintf("Redmage - %s", data.Device.Name)))
}
@components.Body(c) {
@Content(c, data)
}
}
}
templ Content(c *views.Context, data Data) {
<main class="prose min-w-full">
@components.Container() {
if data.Error != "" {
@components.ErrorToast(data.Error)
} else {
<div class="flex justify-between items-center">
<h1 class="my-auto">{ data.Device.Name }</h1>
<a
href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
class="btn btn-primary no-underline sm:w-24"
>Edit</a>
</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>
}
templ imageList(images models.ImageSlice) {
<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
for _, data := range images {
@components.ImageCard(data, 0)
}
</div>
}