display active path

henriquepw · Sep 8, 2024 · 89b1ce8 · 89b1ce8
1 parent 06c94c5
commit 89b1ce8
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 27 deletions.
diff --git a/cmd/main.go b/cmd/main.go
@@ -27,7 +27,7 @@ func main() {
 	server := http.NewServeMux()
 
 	homeHandler := handler.NewHomeHandler()
-	server.HandleFunc("/", homeHandler.HomePage)
+	server.HandleFunc("/dashboard", homeHandler.HomePage)
 
 	clientHandler := handler.NewClientHandler()
 	server.HandleFunc("GET /clients", clientHandler.ClientsPage)

diff --git a/web/handler/client.go b/web/handler/client.go
@@ -14,5 +14,5 @@ func NewClientHandler() ClientHandler {
 }
 
 func (h ClientHandler) ClientsPage(w http.ResponseWriter, r *http.Request) {
-	web.Render(w, r, http.StatusOK, client.ClientsPage())
+	web.RenderPage(w, r, client.ClientsPage)
 }
diff --git a/web/handler/home.go b/web/handler/home.go
@@ -14,5 +14,5 @@ func NewHomeHandler() HomeHandler {
 }
 
 func (h HomeHandler) HomePage(w http.ResponseWriter, r *http.Request) {
-	web.Render(w, r, http.StatusOK, home.HomePage())
+	web.RenderPage(w, r, home.HomePage)
 }
diff --git a/web/view/client/clients.templ b/web/view/client/clients.templ
@@ -5,8 +5,8 @@ import (
 	"github.com/henriquepw/imperium-tattoo/web/view/ui"
 )
 
-templ ClientsPage() {
-	@layout.Dashbaord("Painel", "clients", false) {
+templ ClientsPage(boosted bool) {
+	@layout.Dashbaord("Painel", boosted) {
 		@layout.PageHeader(
 			"Clientes",
 			[]ui.BreadcrumbItem{

diff --git a/web/view/employee/employee_create.templ b/web/view/employee/employee_create.templ
@@ -7,7 +7,7 @@ import (
 )
 
 templ EmployeeCreatePage(boosted bool) {
-	@layout.Dashbaord("Novo Profissional", "employees", boosted) {
+	@layout.Dashbaord("Novo Profissional", boosted) {
 		<section>
 			@layout.PageHeader(
 				"Novo Profissional",

diff --git a/web/view/employee/employee_list.templ b/web/view/employee/employee_list.templ
@@ -12,8 +12,44 @@ templ badge(role string, classname ...string) {
 	</span>
 }
 
+templ EmployeesLoading(boosted bool) {
+	@layout.Dashbaord("Funcionários", boosted) {
+		<div>
+			@layout.PageHeader("Funcionários", []ui.BreadcrumbItem{
+				{Label: "Funcionários", Href: "/employees"},
+			}) {
+				<a href={ templ.URL("employees/create") } class="btn-primary">
+					@ui.Icon("plus")
+				</a>
+			}
+			<section class="w-full card p-0 overflow-hidden">
+				<table class="table-auto w-full">
+					<thead class="bg-gray-2">
+						<tr class="uppercase">
+							<td class="md:hidden">Funcionário</td>
+							<td class="hidden md:table-cell">Cargo</td>
+							<td class="hidden md:table-cell">Nome</td>
+							<td class="hidden md:table-cell">Email</td>
+							<td></td>
+						</tr>
+					</thead>
+					<tbody>
+						for range 4 {
+							<tr>
+								<td colspan="4" class="p-2">
+									<div class="rounded h-6 bg-gray-400 animate-pulse"></div>
+								</td>
+							</tr>
+						}
+					</tbody>
+				</table>
+			</section>
+		</div>
+	}
+}
+
 templ EmployeesPage(boosted bool, items []types.Employee) {
-	@layout.Dashbaord("Funcionários", "employees", boosted) {
+	@layout.Dashbaord("Funcionários", boosted) {
 		<div>
 			@layout.PageHeader("Funcionários", []ui.BreadcrumbItem{
 				{Label: "Funcionários", Href: "/employees"},

diff --git a/web/view/home/homepage.templ b/web/view/home/homepage.templ
@@ -5,12 +5,12 @@ import (
 	"github.com/henriquepw/imperium-tattoo/web/view/ui"
 )
 
-templ HomePage() {
-	@layout.Dashbaord("Painel", "home", false) {
+templ HomePage(boosted bool) {
+	@layout.Dashbaord("Painel", boosted) {
 		@layout.PageHeader(
 			"Painel",
 			[]ui.BreadcrumbItem{
-				{Label: "Painel", Href: "/"},
+				{Label: "Painel", Href: "/dashboard"},
 			},
 		)
 		<section>

diff --git a/web/view/layout/dashboard.templ b/web/view/layout/dashboard.templ
@@ -1,14 +1,17 @@
 package layout
 
-import "github.com/henriquepw/imperium-tattoo/web/view/ui"
+import (
+	"fmt"
+	"github.com/henriquepw/imperium-tattoo/web/view/ui"
+)
 
-templ Dashbaord(title, route string, boosted bool) {
+templ Dashbaord(title string, boosted bool) {
 	if boosted {
 		{ children... }
 	} else {
 		@Base(title) {
 			<div
-				x-data="{ menu: false }"
+				x-data="{ open: false, path: window.location.pathname }"
 				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"
@@ -18,41 +21,39 @@ templ Dashbaord(title, route string, boosted bool) {
 				</main>
 				<aside
 					class="flex flex-row 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':''"
+					:class="open ? 'opacity-100 pointer-events-auto':''"
 				>
 					<nav
 						class="h-full w-full max-w-60 bg-gray-2 p-4 md:p-8 md:pt-10 shadow shadow-agray-2 -translate-x-[100%] transition-transform duration-500"
-						:class="menu ? 'translate-x-0':''"
+						:class="open ? '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-1"
-								@click="menu = false"
+								@click="open = false"
 							>
 								<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")
+							@item("Home", "home", "/dashboard")
+							@item("Clientes", "users", "/clients")
+							@item("Funcionários", "users", "/employees")
 						</ul>
 					</nav>
-					<div class="flex-1 opacity-0" @click="menu = false"></div>
+					<div class="flex-1 opacity-0" @click="open = false"></div>
 				</aside>
 			</div>
 		}
 	}
 }
 
-templ item(label, icon, href string, active bool) {
+templ item(label, icon, href string) {
 	<a
 		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),
-		}
+		@click={ "open=false;path='" + href + "'" }
+		:class={ fmt.Sprintf("path.startsWith('%s')?'text-accent-10':''", href) }
+		class="cursor-pointer flex flex-1 gap-4 flex-row items-center"
 	>
 		<i data-feather={ icon }></i>
 		<span class="text-lg">{ label }</span>
@@ -65,7 +66,7 @@ templ PageHeader(title string, breadcrumb []ui.BreadcrumbItem) {
 		<div class="flex gap-4 justify-between flex-wrap items-center">
 			<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"
+				@click="open = !open"
 			>
 				<i data-feather="menu"></i>
 			</button>