display employees table

henriquepw · Sep 8, 2024 · 88102c9 · 88102c9
1 parent 1f66b8e
commit 88102c9
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 93 deletions.
diff --git a/database/employee_repository.go b/database/employee_repository.go
@@ -38,11 +38,11 @@ func (r repo) Insert(ctx context.Context, payload types.EmployeeCreateDTO) (*str
 	now := time.Now().UnixMilli()
 	_, err = tx.QueryContext(
 		ctx,
-		"INSERT INTO employee (id, name, email, roles, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
+		"INSERT INTO employee (id, name, email, role, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
 		id,
 		payload.Name,
 		payload.Email,
-		payload.Roles,
+		payload.Role,
 		now,
 		now,
 	)
@@ -67,7 +67,7 @@ func (r repo) Insert(ctx context.Context, payload types.EmployeeCreateDTO) (*str
 }
 
 func (r repo) List(ctx context.Context) ([]types.Employee, error) {
-	rows, err := r.db.QueryContext(ctx, "SELECT id, name, email, roles FROM employee")
+	rows, err := r.db.QueryContext(ctx, "SELECT id, name, email, role FROM employee")
 	if err != nil {
 		return nil, err
 	}
@@ -76,7 +76,7 @@ func (r repo) List(ctx context.Context) ([]types.Employee, error) {
 	items := []types.Employee{}
 	for rows.Next() {
 		var r types.Employee
-		if err = rows.Scan(&r.ID, &r.Name, &r.Email, &r.Roles); err != nil {
+		if err = rows.Scan(&r.ID, &r.Name, &r.Email, &r.Role); err != nil {
 			return nil, err
 		}
 

diff --git a/static/css/input.css b/static/css/input.css
@@ -3,12 +3,8 @@
 @tailwind utilities;
 
 @layer components {
-  .htmx-request .hx-indicator {
-    display: block;
-  }
-
-  .htmx-request .default-indicator {
-    display: none;
+  .card {
+    @apply bg-gray-2 backdrop-blur border border-gray-7 rounded-lg p-4
   }
 
   .btn-primary {
@@ -19,6 +15,18 @@
 }
 
 @layer base {
+  td {
+    @apply py-3 px-4;
+  }
+
+  thead td {
+    @apply bg-gray-3 border-b border-gray-6 font-bold text-sm;
+  }
+
+  tr+tr td {
+    @apply border-t border-t-gray-6;
+  }
+
   @font-face {
     font-family: raleway;
     font-weight: 400;

diff --git a/web/handler/employee.go b/web/handler/employee.go
@@ -19,7 +19,16 @@ func NewEmployeeHandler(svc service.EmployeeService) *EmployeeHandler {
 }
 
 func (h EmployeeHandler) EmployeesPage(w http.ResponseWriter, r *http.Request) {
-	web.RenderPage(w, r, employee.EmployeesPage)
+	employees, err := h.svc.ListEmployees(r.Context())
+	if err != nil {
+		web.RenderError(w, r, err, func(e web.ServerError) templ.Component {
+			return employee.EmployeesPage(true, []types.Employee{})
+		})
+	}
+
+	web.RenderPage(w, r, func(boosted bool) templ.Component {
+		return employee.EmployeesPage(boosted, employees)
+	})
 }
 
 func (h EmployeeHandler) EmployeeCreatePage(w http.ResponseWriter, r *http.Request) {
@@ -31,8 +40,8 @@ func (h EmployeeHandler) EmployeeCreateAction(w http.ResponseWriter, r *http.Req
 	payload := types.EmployeeCreateDTO{
 		Name:     r.Form.Get("name"),
 		Email:    r.Form.Get("email"),
-		Roles:    r.Form.Get("roles"),
 		Password: r.Form.Get("email"),
+		Role:     "ADMIN",
 	}
 
 	_, err := h.svc.CreateEmployee(r.Context(), payload)

diff --git a/web/service/employee.go b/web/service/employee.go
@@ -10,6 +10,7 @@ import (
 
 type EmployeeService interface {
 	CreateEmployee(ctx context.Context, payload types.EmployeeCreateDTO) (*string, error)
+	ListEmployees(ctx context.Context) ([]types.Employee, error)
 }
 
 type EmployeeSvc struct {
@@ -34,15 +35,15 @@ func (s *EmployeeSvc) CreateEmployee(ctx context.Context, payload types.Employee
 		return nil, err
 	}
 
-	id, err := s.repo.Insert(ctx, types.EmployeeCreateDTO{
-		Name:     payload.Name,
-		Email:    payload.Email,
-		Roles:    payload.Roles,
-		Password: hash,
-	})
+	payload.Password = hash
+	id, err := s.repo.Insert(ctx, payload)
 	if err != nil {
 		return nil, err
 	}
 
 	return id, nil
 }
+
+func (s *EmployeeSvc) ListEmployees(ctx context.Context) ([]types.Employee, error) {
+	return s.repo.List(ctx)
+}
diff --git a/web/types/employee.go b/web/types/employee.go
@@ -10,12 +10,12 @@ type Employee struct {
 	ID        string    `json:"id"`
 	Name      string    `json:"name"`
 	Email     string    `json:"email"`
-	Roles     []string  `json:"roles"`
+	Role      string    `json:"role"`
 }
 
 type EmployeeCreateDTO struct {
 	Name     string `json:"name" validate:"required"`
 	Email    string `json:"email" validate:"required,email"`
-	Roles    string `json:"roles" validate:"required"`
+	Role     string `json:"role" validate:"required"`
 	Password string `json:"password" validate:"required"`
 }
diff --git a/web/view/employee/employee_create.templ b/web/view/employee/employee_create.templ
@@ -1,58 +1,56 @@
 package employee
 
 import (
-"github.com/henriquepw/imperium-tattoo/web/types"
-"github.com/henriquepw/imperium-tattoo/web/view/layout"
-"github.com/henriquepw/imperium-tattoo/web/view/ui"
+	"github.com/henriquepw/imperium-tattoo/web/types"
+	"github.com/henriquepw/imperium-tattoo/web/view/layout"
+	"github.com/henriquepw/imperium-tattoo/web/view/ui"
 )
 
 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"},
-  },
-  )
-  @ui.Card() {
-  @EmployeeCreateForm(EmployeeCreateFormProps{})
-  }
-</section>
-}
+	@layout.Dashbaord("Novo Profissional", "employees", boosted) {
+		<section>
+			@layout.PageHeader(
+				"Novo Profissional",
+				[]ui.BreadcrumbItem{
+					{Label: "Funcionários", Href: "/employees"},
+					{Label: "Novo", Href: "/employees/create"},
+				},
+			)
+			@ui.Card() {
+				@EmployeeCreateForm(EmployeeCreateFormProps{})
+			}
+		</section>
+	}
 }
 
 type EmployeeCreateFormProps struct {
-Values types.EmployeeCreateDTO
-Errors map[string]string
+	Values types.EmployeeCreateDTO
+	Errors map[string]string
 }
 
 templ EmployeeCreateForm(props EmployeeCreateFormProps) {
-<form hx-post="/employees/create" hx-target="this" hx-swap="outerHTML" class="flex flex-col gap-4 group">
-  @ui.TextInput(ui.TextInputProps{
-  Name: "name",
-  Label: "Nome",
-  Placeholder: "Nome do Profissinal",
-  Value: props.Values.Name,
-  Error: props.Errors["name"],
-  })
-  @ui.TextInput(ui.TextInputProps{
-  Name: "email",
-  Label: "Email",
-  Placeholder: "[email protected]",
-  Value: props.Values.Email,
-  Error: props.Errors["email"],
-  })
-  @ui.TextInput(ui.TextInputProps{
-  Name: "roles",
-  Label: "Cargo",
-  Placeholder: "Admin",
-  Value: props.Values.Roles,
-  Error: props.Errors["roles"],
-  })
-  @ui.SubmitBtn("save", "Criando...", "ml-auto") {
-  Criar
-  }
-</form>
+	<form
+		hx-post="/employees/create"
+		hx-target="this"
+		hx-swap="outerHTML"
+		class="flex flex-col gap-4 group [&.htmx-request]:pointer-events-none"
+	>
+		@ui.TextInput(ui.TextInputProps{
+			Name:        "name",
+			Label:       "Nome",
+			Placeholder: "Nome do Funcionário",
+			Value:       props.Values.Name,
+			Error:       props.Errors["name"],
+		})
+		@ui.TextInput(ui.TextInputProps{
+			Name:        "email",
+			Label:       "Email",
+			Placeholder: "[email protected]",
+			Value:       props.Values.Email,
+			Error:       props.Errors["email"],
+		})
+		@ui.SubmitBtn("save", "Criando...", "ml-auto") {
+			Criar
+		}
+	</form>
 }
diff --git a/web/view/employee/employee_list.templ b/web/view/employee/employee_list.templ
@@ -0,0 +1,71 @@
+package employee
+
+import (
+	"github.com/henriquepw/imperium-tattoo/web/types"
+	"github.com/henriquepw/imperium-tattoo/web/view/layout"
+	"github.com/henriquepw/imperium-tattoo/web/view/ui"
+)
+
+templ badge(role string, classname ...string) {
+	<span class={ "text-sm text-accent-12 bg-accent-3 border border-accent-6 px-1 py-0.5 rounded" , classname }>
+		{ role }
+	</span>
+}
+
+templ EmployeesPage(boosted bool, items []types.Employee) {
+	@layout.Dashbaord("Funcionários", "employees", 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 _, i := range items {
+							<tr>
+								<td class="max-w-10 hidden md:table-cell">
+									@badge(i.Role)
+								</td>
+								<td>
+									<div class="flex flex-col">
+										<div class="space-x-2">
+											@badge(i.Role, "md:hidden")
+											<span>{ i.Name }</span>
+										</div>
+										<span class="text-gray-11 md:hidden">{ i.Email }</span>
+									</div>
+								</td>
+								<td class="hidden md:block">{ i.Email }</td>
+								<td class="max-w-4">
+									@ui.Icon("edit", "h-4 text-gray-11")
+								</td>
+							</tr>
+						}
+						if len(items) == 0 {
+							<tr>
+								<td colspan="4" class="bg-warning-2">
+									<div class="text-center text-warning-12">
+										Nenhum Funcionário cadastrado
+									</div>
+								</td>
+							</tr>
+						}
+					</tbody>
+				</table>
+			</section>
+		</div>
+	}
+}
diff --git a/web/view/employee/employees.templ b/web/view/employee/employees.templ
diff --git a/web/view/layout/dashboard.templ b/web/view/layout/dashboard.templ
@@ -60,7 +60,7 @@ templ item(label, icon, href string, active bool) {
 }
 
 templ PageHeader(title string, breadcrumb []ui.BreadcrumbItem) {
-	<header class="h-9 mb-4 flex flex-col justify-center">
+	<header class="h-10 mb-4 flex flex-col justify-center md:mb-8">
 		@ui.Breadcrumb(breadcrumb)
 		<div class="flex gap-4 justify-between flex-wrap items-center">
 			<button

diff --git a/web/view/ui/submit_btn.templ b/web/view/ui/submit_btn.templ
@@ -4,15 +4,15 @@ templ SubmitBtn(icon, loadingText string, classname ...string) {
 	<button
 		type="submit"
 		class={
-			"btn-primary [.htmx-request_&]:opacity-50 [.htmx-request_&]:pointer-events-none",
+			"btn-primary [.htmx-request_&]:opacity-50 group-[.htmx-request]:pointer-events-none",
 			classname,
 		}
 	>
-		<div class="items-center gap-1.5 hidden [.htmx-request_&]:flex">
-			@Icon("loader", "h-5 w-5 animate-spin hidden hx-indicator")
+		<div class="items-center gap-1.5 hidden group-[.htmx-request]:flex">
+			@Icon("loader", "h-5 w-5 animate-spin")
 			{ loadingText }
 		</div>
-		<div class="flex gap-1.5 [.htmx-request_&]:hidden">
+		<div class="flex gap-1.5 group-[.htmx-request]:hidden">
 			@Icon(icon, "h-5 w-5")
 			{ children... }
 		</div>