From 8a0a139e50b6925cc7ab5178b084a94ede90f2ec Mon Sep 17 00:00:00 2001
From: Tigor Hutasuhut <tigor.hutasuhut@gmail.com>
Date: Wed, 29 May 2024 16:22:26 +0700
Subject: [PATCH] view: devices: added action button

---
 views/components/action_button.templ | 44 ++++++++++++++++++++++++++++
 views/devices/view.templ             | 28 +++++++++++-------
 2 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 views/components/action_button.templ

diff --git a/views/components/action_button.templ b/views/components/action_button.templ
new file mode 100644
index 0000000..3b4ade3
--- /dev/null
+++ b/views/components/action_button.templ
@@ -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>
+}
diff --git a/views/devices/view.templ b/views/devices/view.templ
index ebd7f8b..7a9fcbb 100644
--- a/views/devices/view.templ
+++ b/views/devices/view.templ
@@ -7,13 +7,13 @@ import "github.com/tigorlazuardi/redmage/api"
 import "strconv"
 import "fmt"
 import "github.com/tigorlazuardi/redmage/views/utils"
-import "github.com/tigorlazuardi/redmage/views/icons"
 
 type Data struct {
-	Error   string
-	Devices models.DeviceSlice
-	Total   int64
-	Params  api.DevicesListParams
+	Error               string
+	Devices             models.DeviceSlice
+	Total               int64
+	Params              api.DevicesListParams
+	FlashMessageSuccess string
 }
 
 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.Body(c) {
 			@Content(c, data)
+			@components.NotificationContainer() {
+				if data.FlashMessageSuccess != "" {
+					@components.SuccessToast(data.FlashMessageSuccess)
+				}
+			}
 		}
 	}
 }
@@ -33,11 +38,7 @@ templ Content(c *views.Context, data Data) {
 			} else {
 				<div class="flex justify-between items-center">
 					<h1 class="my-auto">Devices</h1>
-					<div class="tooltip" data-tip="Add Device">
-						<a href="/devices/add" class="btn btn-primary btn-outline btn-square text-base-100">
-							@icons.PlusCircleFill("w-6 h-6")
-						</a>
-					</div>
+					@components.ActionButton(addNewDeviceButton())
 				</div>
 				<div class="divider"></div>
 				@filter(data)
@@ -48,6 +49,13 @@ templ Content(c *views.Context, data Data) {
 	</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) {
 	<div class="grid md:grid-cols-2 gap-4">
 		for _, device := range data.Devices {