tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view: devices: added action button

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-29 16:22:26 +07:00
parent 6f78182f5c
commit 8a0a139e50
2 changed files with 62 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
views/components/action_button.templ Normal file
View file

@ -0,0 +1,44 @@
package components
import "github.com/tigorlazuardi/redmage/views/icons"
templ ActionButton(components ...templ.Component) {
<div
class="max-xs:toast max-xs:z-40"
x-data="{ show: false }"
@click="show = !show; if (!show) document.activeElement.blur()"
@click.away="show = false"
>
<div class="dropdown dropdown-hover dropdown-top xs:dropdown-bottom dropdown-end">
<div
tabindex="0"
role="button"
class="btn btn-primary max-xs:btn-circle max-lg:btn-square xs:btn-outline m-1 max-xs:border-none"
>
@icons.Kebab("h-8 w-8")
</div>
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 m-0 border-primary border-2"
>
for i, component := range components {
if i > 0 {
<div class="divider m-0 p-0"></div>
}
<li class="m-0 p-0 hover:bg-primary rounded-btn">
@component
</li>
}
if len(components) > 0 {
<div class="xs:hidden divider m-0 p-0"></div>
}
<li class="xs:hidden m-0 p-0 hover:bg-primary rounded-btn">
<button
class="btn btn-ghost btn-sm m-0"
onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
>Scroll to Top</button>
</li>
</ul>
</div>
</div>
}

28
views/devices/view.templ
View file

@ -7,13 +7,13 @@ import "github.com/tigorlazuardi/redmage/api"
import "strconv" import "strconv"
import "fmt" import "fmt"
import "github.com/tigorlazuardi/redmage/views/utils" import "github.com/tigorlazuardi/redmage/views/utils"
import "github.com/tigorlazuardi/redmage/views/icons"
type Data struct { type Data struct {
Error string Error string
Devices models.DeviceSlice Devices models.DeviceSlice
Total int64 Total int64
Params api.DevicesListParams Params api.DevicesListParams
FlashMessageSuccess string
} }
templ View(c *views.Context, data Data) { templ View(c *views.Context, data Data) {
@ -21,6 +21,11 @@ templ View(c *views.Context, data Data) {
@components.Head(c, components.HeadTitle("Redmage - Devices")) @components.Head(c, components.HeadTitle("Redmage - Devices"))
@components.Body(c) { @components.Body(c) {
@Content(c, data) @Content(c, data)
@components.NotificationContainer() {
if data.FlashMessageSuccess != "" {
@components.SuccessToast(data.FlashMessageSuccess)
}
}
} }
} }
} }
@ -33,11 +38,7 @@ templ Content(c *views.Context, data Data) {
} else { } else {
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="my-auto">Devices</h1> <h1 class="my-auto">Devices</h1>
<div class="tooltip" data-tip="Add Device"> @components.ActionButton(addNewDeviceButton())
<a href="/devices/add" class="btn btn-primary btn-outline btn-square text-base-100">
@icons.PlusCircleFill("w-6 h-6")
</a>
</div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
@filter(data) @filter(data)
@ -48,6 +49,13 @@ templ Content(c *views.Context, data Data) {
</main> </main>
} }
templ addNewDeviceButton() {
<a
href="/devices/add"
class="btn btn-ghost btn-sm no-underline m-0"
>Add New Device</a>
}
templ devicesList(data Data) { templ devicesList(data Data) {
<div class="grid md:grid-cols-2 gap-4"> <div class="grid md:grid-cols-2 gap-4">
for _, device := range data.Devices { for _, device := range data.Devices {