Skip to content

Commit

Permalink
expanded client detail section
Browse files Browse the repository at this point in the history
  • Loading branch information
henriquepw committed Nov 19, 2024
1 parent 3307bd0 commit 1e4d448
Show file tree
Hide file tree
Showing 9 changed files with 136 additions and 94 deletions.
2 changes: 1 addition & 1 deletion static/css/input.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}

.card {
@apply bg-gray-2 backdrop-blur border border-gray-7 rounded-lg p-4
@apply bg-gray-2 backdrop-blur border border-gray-7 rounded-lg p-3 md:p-4
}

.btn-primary {
Expand Down
38 changes: 19 additions & 19 deletions web/handlers/client_handler.go
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import (
"github.com/henriquepw/imperium-tattoo/pkg/httputil"
"github.com/henriquepw/imperium-tattoo/web/services"
"github.com/henriquepw/imperium-tattoo/web/types"
"github.com/henriquepw/imperium-tattoo/web/view/pages"
clientview "github.com/henriquepw/imperium-tattoo/web/view/client_view"
)

type ClientHandler struct {
Expand All @@ -29,12 +29,12 @@ func (h *ClientHandler) ClientsPage(w http.ResponseWriter, r *http.Request) {
clients, err := h.clientSVC.ListClients(r.Context())
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
return pages.ClientsPage(r.Header.Get("HX-Boosted") == "true", nil)
return clientview.ClientsPage(r.Header.Get("HX-Boosted") == "true", nil)
})
}

httputil.RenderPage(w, r, func(b bool) templ.Component {
return pages.ClientsPage(b, clients)
return clientview.ClientsPage(b, clients)
})
}

Expand All @@ -61,15 +61,15 @@ func (h *ClientHandler) CreateClientAction(w http.ResponseWriter, r *http.Reques
client, err := h.clientSVC.CreateClient(r.Context(), payload)
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
return pages.ClientCreateForm(payload, e.Errors)
return clientview.ClientCreateForm(payload, e.Errors)
})
return
}

httputil.Render(
w, r, http.StatusCreated,
pages.ClientCreateForm(types.ClientCreateDTO{}, nil),
pages.OobNewClient(*client),
clientview.ClientCreateForm(types.ClientCreateDTO{}, nil),
clientview.OobNewClient(*client),
)
}

Expand All @@ -78,7 +78,7 @@ func (h *ClientHandler) EditClientProcedureAction(w http.ResponseWriter, r *http
doneAt, err := time.Parse(time.DateOnly, r.Form.Get("doneAt"))
if err != nil {
fmt.Print(err)
httputil.Render(w, r, http.StatusBadRequest, pages.ClientProcessEditForm(map[string]string{"doneAt": "Data inválida"}))
httputil.Render(w, r, http.StatusBadRequest, clientview.ClientProcessEditForm(map[string]string{"doneAt": "Data inválida"}))
return
}

Expand All @@ -92,15 +92,15 @@ func (h *ClientHandler) EditClientProcedureAction(w http.ResponseWriter, r *http
p, err := h.clientProcedureSVC.EditClientProcedure(r.Context(), payload)
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
return pages.ClientProcessEditForm(e.Errors)
return clientview.ClientProcessEditForm(e.Errors)
})
return
}

httputil.Render(
w, r, http.StatusOK,
pages.ClientProcessEditForm(nil),
pages.OobUpdateClientProcedure(*p),
clientview.ClientProcessEditForm(nil),
clientview.OobUpdateClientProcedure(*p),
)
}

Expand All @@ -126,7 +126,7 @@ func (h *ClientHandler) ClientDetailPage(w http.ResponseWriter, r *http.Request)
}

httputil.RenderPage(w, r, func(b bool) templ.Component {
return pages.ClientDetailPage(b, *client, procedures, clientProcedures)
return clientview.ClientDetailPage(b, *client, procedures, clientProcedures)
})
}

Expand Down Expand Up @@ -159,15 +159,15 @@ func (h *ClientHandler) EditClientAction(w http.ResponseWriter, r *http.Request)
client, err := h.clientSVC.UpdateClinetById(r.Context(), id, payload)
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
return pages.ClientEditForm(id, payload, e.Errors)
return clientview.ClientEditForm(id, payload, e.Errors)
})
return
}

httputil.Render(
w, r, http.StatusOK,
pages.ClientEditForm(id, payload, nil),
pages.OobClientUpdated(*client),
clientview.ClientEditForm(id, payload, nil),
clientview.OobClientUpdated(*client),
)
}

Expand All @@ -187,14 +187,14 @@ func (h *ClientHandler) CreateClientProcedureAction(w http.ResponseWriter, r *ht
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
log.Println(payload)
return pages.ClientProcessCreateForm(clientID, payload, e.Errors)
return clientview.ClientProcessCreateForm(clientID, payload, e.Errors)
})
return
}

httputil.Render(
w, r, http.StatusCreated,
pages.ClientProcessCreateForm(clientID, payload, nil),
clientview.ClientProcessCreateForm(clientID, payload, nil),
// pages.OobNewClient(*client),
)
}
Expand All @@ -204,14 +204,14 @@ func (h *ClientHandler) DeleteClientProcedureAction(w http.ResponseWriter, r *ht
err := h.clientProcedureSVC.DeleteClientProcedure(r.Context(), id)
if err != nil {
httputil.RenderError(w, r, err, func(e errors.ServerError) templ.Component {
return pages.ClientProcessEditForm(e.Errors)
return clientview.ClientProcessEditForm(e.Errors)
})
return
}

httputil.Render(
w, r, http.StatusOK,
pages.ClientProcessEditForm(nil),
pages.OobDeleteClientProcedure(id),
clientview.ClientProcessEditForm(nil),
clientview.OobDeleteClientProcedure(id),
)
}
Original file line number Diff line number Diff line change
@@ -1,65 +1,13 @@
package pages
package clientview

import (
"fmt"
"github.com/henriquepw/imperium-tattoo/pkg/date"
"github.com/henriquepw/imperium-tattoo/web/types"
"github.com/henriquepw/imperium-tattoo/web/view/layout"
"github.com/henriquepw/imperium-tattoo/web/view/ui"
"time"
"unicode"
)

func formatDate(dt time.Time) string {
return fmt.Sprintf("new Date('%v').toLocaleDateString('pt-BR')", dt)
}

func onlyNumber(str string) string {
num := ""
for _, c := range str {
if unicode.IsDigit(c) {
num = num + string(c)
}
}

return num
}

templ ClientDetailSection(client types.Client) {
<di class="row">
@ui.Tile("Adicionado em") {
<span x-text={ formatDate(client.CreatedAt) }></span>
}
@ui.Tile("Última atualização em") {
<span x-text={ formatDate(client.UpdatedAt) }></span>
}
</di>
<div class="row">
@ui.Tile("CPF") {
{ client.CPF }
}
@ui.Tile("Data de Nascimento") {
<span x-text={ formatDate(client.Brithday) }></span>
}
@ui.Tile("Email") {
{ client.Email }
}
</div>
<div class="row">
@ui.LinkTile("Whatsapp", "https://api.whatsapp.com/send?phone="+onlyNumber(client.Phone)) {
{ client.Phone }
}
@ui.LinkTile("Instagram", "https://www.instagram.com/"+client.Instagram) {
{ client.Instagram }
}
</div>
<div class="row">
@ui.Tile("Endereço") {
{ client.Address.ToString() }
}
</div>
}

templ ClientDetailPage(
boosted bool,
client types.Client,
Expand Down Expand Up @@ -285,7 +233,7 @@ templ OobUpdateClientProcedure(p types.ClientProcedure) {
before:border-2 before:border-accent-8
before:rounded-full before:left-0 before:top-1/2 before:-translate-x-[1.45rem] before:-translate-y-1/2
"
x-text={ formatDate(p.DoneAt) }
x-text={ ui.FormatDate(p.DoneAt) }
></span>
<span class="text-sm text-accent-12 bg-accent-3 border border-accent-6 px-1 rounded">
{ p.Procedure }
Expand All @@ -308,7 +256,7 @@ templ clientProcedureItem(p types.ClientProcedure) {
before:border-2 before:border-accent-8
before:rounded-full before:left-0 before:top-1/2 before:-translate-x-[1.45rem] before:-translate-y-1/2
"
x-text={ formatDate(p.DoneAt) }
x-text={ ui.FormatDate(p.DoneAt) }
></span>
<span class="text-sm text-accent-12 bg-accent-3 border border-accent-6 px-1 rounded">
{ p.Procedure }
Expand Down
51 changes: 51 additions & 0 deletions web/view/client_view/client_detail_section.templ
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
package clientview

import (
"github.com/henriquepw/imperium-tattoo/web/types"
"github.com/henriquepw/imperium-tattoo/web/view/ui"
)

templ ClientDetailSection(client types.Client) {
<section x-data="{expanded: false}" class="column">
<div x-show="expanded" x-transition class="row">
@ui.Tile("Adicionado em") {
<span x-text={ ui.FormatDate(client.CreatedAt) }></span>
}
@ui.Tile("Última atualização em") {
<span x-text={ ui.FormatDate(client.UpdatedAt) }></span>
}
</div>
<div class="row">
@ui.Tile("CPF", templ.Attributes{"x-show": "expanded", "x-transition": true}) {
{ client.CPF }
}
@ui.Tile("Data de Nascimento", templ.Attributes{"x-show": "expanded"}) {
<span x-text={ ui.FormatDate(client.Brithday) }></span>
}
@ui.Tile("Email", templ.Attributes{"x-show": "expanded", "x-transition": true}) {
{ client.Email }
}
</div>
<div class="row">
@ui.LinkTile("Whatsapp", "https://api.whatsapp.com/send?phone="+ui.OnlyNumber(client.Phone)) {
{ client.Phone }
}
@ui.LinkTile("Instagram", "https://www.instagram.com/"+client.Instagram) {
{ client.Instagram }
}
</div>
<div x-show="expanded" x-transition class="row">
@ui.Tile("Endereço") {
{ client.Address.ToString() }
}
</div>
<div class="flex justify-center">
<button class="rounded border px-2 py-0.5 flex gap-1 items-center" @click="expanded = !expanded">
<span x-text="expanded?'menos detalhes':'mais detalhes'"></span>
<span :class="expanded?'rotate-180':''">
@ui.Icon("chevron-down")
</span>
</button>
</div>
</section>
}
5 changes: 5 additions & 0 deletions web/view/client_view/client_procedure.templ
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
package clientview

templ a() {
TODO
}
17 changes: 17 additions & 0 deletions web/view/client_view/client_row.templ
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
package clientview

import "github.com/henriquepw/imperium-tattoo/web/types"

templ clientRow(i types.Client) {
<td>
<a class="underline text-accent-11" href={ templ.SafeURL("/clients/" + i.ID) }>
{ i.Name }
</a>
</td>
<td>
{ i.Email }
</td>
<td class="whitespace-nowrap">
{ i.Phone }
</td>
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package pages
package clientview

import (
"fmt"
Expand All @@ -7,20 +7,6 @@ import (
"github.com/henriquepw/imperium-tattoo/web/view/ui"
)

templ clientRow(i types.Client) {
<td>
<a class="underline text-accent-11" href={ templ.SafeURL("/clients/" + i.ID) }>
{ i.Name }
</a>
</td>
<td>
{ i.Email }
</td>
<td class="whitespace-nowrap">
{ i.Phone }
</td>
}

templ ClientsPage(boosted bool, items []types.Client) {
@layout.Dashbaord("Painel", boosted) {
<div x-data={ fmt.Sprintf("{createOpen: false, client: null, count: %d}", len(items)) }>
Expand Down
9 changes: 5 additions & 4 deletions web/view/ui/tile.templ
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
package ui

templ Tile(title string, class ...string) {
<dl class={ "card flex-1" , class }>
templ Tile(title string, attrs ...templ.Attributes) {
<dl class="card flex-1" { GetAttrs(attrs...)... }>
<dt class="font-medium text-accent-12">
{ title }
</dt>
Expand All @@ -11,12 +11,13 @@ templ Tile(title string, class ...string) {
</dl>
}

templ LinkTile(title string, url string, class ...string) {
templ LinkTile(title string, url string, attrs ...templ.Attributes) {
<a
target="_blank"
rel="noopener noreferrer"
href={ templ.SafeURL(url) }
class={ "card flex-1 group transition-colors hover-bg-accent-2 hover:border-accent-8" , class, }
class="card flex-1 group transition-colors hover-bg-accent-2 hover:border-accent-8"
{ GetAttrs(attrs...)... }
>
<dl>
<div class="flex flex-row items-start justify-between">
Expand Down
34 changes: 34 additions & 0 deletions web/view/ui/util.go
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
package ui

import (
"fmt"
"maps"
"time"
"unicode"

"github.com/a-h/templ"
)

func GetAttrs(attrs ...templ.Attributes) templ.Attributes {
result := templ.Attributes{}
for _, a := range attrs {
maps.Copy(result, a)
}

return result
}

func FormatDate(dt time.Time) string {
return fmt.Sprintf("new Date('%v').toLocaleDateString('pt-BR')", dt)
}

func OnlyNumber(str string) string {
num := ""
for _, c := range str {
if unicode.IsDigit(c) {
num = num + string(c)
}
}

return num
}

0 comments on commit 1e4d448

Please sign in to comment.