boost daskboard links

henriquepw · Aug 26, 2024 · 528327f · 528327f
1 parent 36dbfd7
commit 528327f
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 68 deletions.
diff --git a/web/handler/employee_handler.go b/web/handler/employee_handler.go
@@ -18,11 +18,13 @@ func NewEmployeeHandler(repo database.EmployeeRepository) EmployeeHandler {
 }
 
 func (h EmployeeHandler) EmployeesPage(w http.ResponseWriter, r *http.Request) {
-	web.Render(w, r, http.StatusOK, employee.EmployeesPage())
+	boosted := r.Header.Get("HX-Boosted") == "true"
+	web.Render(w, r, http.StatusOK, employee.EmployeesPage(boosted))
 }
 
 func (h EmployeeHandler) EmployeeCreatePage(w http.ResponseWriter, r *http.Request) {
-	web.Render(w, r, http.StatusOK, employee.EmployeeCreatePage())
+	boosted := r.Header.Get("HX-Boosted") == "true"
+	web.Render(w, r, http.StatusOK, employee.EmployeeCreatePage(boosted))
 }
 
 func (h EmployeeHandler) EmployeeCreateAction(w http.ResponseWriter, r *http.Request) {

diff --git a/web/view/client/clients.templ b/web/view/client/clients.templ
@@ -3,7 +3,7 @@ package client
 import "github.com/henriquepw/imperium-tattoo/web/view/layout"
 
 templ ClientsPage() {
-	@layout.Dashbaord("Painel", "clients") {
+	@layout.Dashbaord("Painel", "clients", false) {
 		<div>
 			MAIN
 		</div>

diff --git a/web/view/employee/employee_create.templ b/web/view/employee/employee_create.templ
@@ -6,16 +6,15 @@ import (
 	"github.com/henriquepw/imperium-tattoo/web/view/ui"
 )
 
-templ EmployeeCreatePage() {
-	@layout.Dashbaord("Novo Profissional", "employees") {
+templ EmployeeCreatePage(boosted bool) {
+	@layout.Dashbaord("Novo Profissional", "employees", boosted) {
 		<section>
 			@layout.PageHeader(
 				"Novo Profissional",
 				[]ui.BreadcrumbItem{
 					{Label: "Profissinais", Href: "/employees"},
 					{Label: "Novo", Href: "/employees/create"},
 				},
-				"/employees",
 			)
 			@EmployeeCreateForm(EmployeeCreateFormProps{})
 		</section>

diff --git a/web/view/employee/employees.templ b/web/view/employee/employees.templ
@@ -5,12 +5,12 @@ import (
 	"github.com/henriquepw/imperium-tattoo/web/view/ui"
 )
 
-templ EmployeesPage() {
-	@layout.Dashbaord("Profissinais", "employees") {
+templ EmployeesPage(boosted bool) {
+	@layout.Dashbaord("Profissinais", "employees", boosted) {
 		<div>
 			@layout.PageHeader("Profissinais", []ui.BreadcrumbItem{
 				{Label: "Profissinais", Href: "/employees"},
-			}, "") {
+			}) {
 				@ui.Link(ui.LinkProps{Href: "employees/create"}) {
 					<i data-feather="plus"></i>
 				}

diff --git a/web/view/home/homepage.templ b/web/view/home/homepage.templ
@@ -3,7 +3,7 @@ package home
 import "github.com/henriquepw/imperium-tattoo/web/view/layout"
 
 templ HomePage() {
-	@layout.Dashbaord("Painel", "home") {
+	@layout.Dashbaord("Painel", "home", false) {
 		<div>
 			MAIN
 		</div>

diff --git a/web/view/layout/base.templ b/web/view/layout/base.templ
@@ -17,6 +17,6 @@ templ Base(title string) {
 		<body x-data="{ theme: $persist('dark')}" :class="theme" class="dark bg-gray-1 text-gray-12">
 			{ children... }
 		</body>
-		<script>feather.replace()</script>
+		<script>feather.replace(); document.body.addEventListener('htmx:afterSwap', feather.replace);</script>
 	</html>
 }
diff --git a/web/view/layout/dashboard.templ b/web/view/layout/dashboard.templ
@@ -2,80 +2,72 @@ package layout
 
 import "github.com/henriquepw/imperium-tattoo/web/view/ui"
 
-templ Dashbaord(title, route string) {
-	@Base(title) {
-		<div
-			x-data="{ menu: false }"
-			class="min-h-svh h-full w-full max-w-[90rem] mx-auto grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]"
-		>
-			<header
-				class="justify-between items-center px-4 h-12 row-span-1 col-start-1 col-end-3 border-b w-full hidden md:flex"
+templ Dashbaord(title, route string, boosted bool) {
+	if boosted {
+		{ children... }
+	} else {
+		@Base(title) {
+			<div
+				x-data="{ menu: false }"
+				class="min-h-svh h-full w-full max-w-[90rem] mx-auto grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]"
+				hx-boost="true"
+				hx-target="#main"
 			>
-				<span class="text-accent-9">LOGO</span>
-				<button @click="theme = theme === 'dark' ? 'light' : 'dark'">Thema</button>
-				<nav class="flex list-none gap-4">
-					<a href="/" class={ templ.KV("text-accent-10", route == "home") }>Home</a>
-					<a href="/employees" class={ templ.KV("text-accent-10", route == "employees") }>Profissionais</a>
-				</nav>
-				<span class="text-accent-9">
-					USER
-				</span>
-			</header>
-			<main id="main" class="col-end-3 row-span-2 w-full p-4 md:p-8">
-				{ children... }
-			</main>
-			<aside
-				class="fixed bg-agray-1 backdrop-blur-xl inset-0 z-50 transition-opacity duration-300 opacity-0 pointer-events-none"
-				:class="menu ? 'opacity-100 pointer-events-auto':''"
-			>
-				<nav
-					class="h-full w-full max-w-60 bg-gray-2 p-4 shadow shadow-agray-2 -translate-x-[100%] transition-transform duration-500"
-					:class="menu ? 'translate-x-0':''"
+				<main id="main" class="col-end-3 row-span-2 w-full p-4 md:p-8">
+					{ children... }
+				</main>
+				<aside
+					class="fixed bg-agray-1 backdrop-blur-xl inset-0 z-50 transition-opacity duration-300 opacity-0 pointer-events-none"
+					:class="menu ? 'opacity-100 pointer-events-auto':''"
 				>
-					<header class="h-9 mb-4 flex flex-col justify-center">
-						<button
-							class="transition-colors hover:bg-agray-3 active:bg-agray-5 rounded h-8 w-8 flex items-center justify-center -ml-2 md:hidden"
-							@click="menu = !menu"
-						>
-							<i data-feather="x"></i>
-						</button>
-					</header>
-					<ul class="flex flex-col list-none gap-6">
-						@item("Home", "home", "/", route == "home")
-						@item("Clientes", "users", "/clients", route == "clients")
-						@item("Funcionários", "users", "/employees", route == "employees")
-					</ul>
-				</nav>
-			</aside>
-		</div>
+					<nav
+						class="h-full w-full max-w-60 bg-gray-2 p-4 shadow shadow-agray-2 -translate-x-[100%] transition-transform duration-500"
+						:class="menu ? 'translate-x-0':''"
+					>
+						<header class="h-9 mb-4 flex flex-col justify-center">
+							<button
+								class="transition-colors hover:bg-agray-3 active:bg-agray-5 rounded h-8 w-8 flex items-center justify-center -ml-2 md:hidden"
+								@click="menu = !menu"
+							>
+								<i data-feather="x"></i>
+							</button>
+						</header>
+						<ul class="flex flex-col list-none gap-6">
+							@item("Home", "home", "/", route == "home")
+							@item("Clientes", "users", "/clients", route == "clients")
+							@item("Funcionários", "users", "/employees", route == "employees")
+						</ul>
+					</nav>
+				</aside>
+			</div>
+		}
 	}
 }
 
 templ item(label, icon, href string, active bool) {
 	<a
-		hx-get={ href }
-		hx-push-url="true"
-		hx-target="#main"
+		href={ templ.URL(href) }
 		@click="menu = false"
-		class={ "cursor-pointer flex flex-1 gap-4 flex-row items-center" , templ.KV("text-accent-10", active), }
+		class={
+			"cursor-pointer flex flex-1 gap-4 flex-row items-center",
+			templ.KV("text-accent-10", active),
+		}
 	>
 		<i data-feather={ icon }></i>
 		<span class="text-lg">{ label }</span>
 	</a>
 }
 
-templ PageHeader(title string, breadcrumb []ui.BreadcrumbItem, back string) {
+templ PageHeader(title string, breadcrumb []ui.BreadcrumbItem) {
 	<header class="h-9 mb-4 flex flex-col justify-center">
 		@ui.Breadcrumb(breadcrumb)
 		<div class="flex gap-4 justify-between flex-wrap items-center">
-			if back != "" {
-				<button
-					class="transition-colors hover:bg-agray-3 active:bg-agray-5 bg-gray-1 rounded h-8 w-8 flex items-center justify-center -ml-1 md:hidden"
-					@click="menu = !menu"
-				>
-					<i data-feather="menu"></i>
-				</button>
-			}
+			<button
+				class="transition-colors hover:bg-agray-3 active:bg-agray-5 bg-gray-1 rounded h-8 w-8 flex items-center justify-center -ml-1"
+				@click="menu = !menu"
+			>
+				<i data-feather="menu"></i>
+			</button>
 			<h1 class="text-xl md:text-3xl text-gray-12 font-bold flex-1">{ title }</h1>
 			{ children... }
 		</div>