92 lines
3.2 KiB
Text
92 lines
3.2 KiB
Text
package blocks
|
|
|
|
import "git.juancwu.dev/juancwu/budgit/internal/model"
|
|
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
|
|
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
|
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
|
|
import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
|
|
|
|
type TransactionListProps struct {
|
|
SpaceID string
|
|
AccountID string
|
|
Transactions []*model.Transaction
|
|
// NonEditableIDs marks transaction IDs whose Edit button should be hidden
|
|
// (currently: transfer halves). Nil/empty means everything is editable.
|
|
NonEditableIDs map[string]bool
|
|
}
|
|
|
|
templ TransactionList(props TransactionListProps) {
|
|
if len(props.Transactions) == 0 {
|
|
<div class="text-sm text-muted-foreground py-6 text-center">
|
|
No transactions yet.
|
|
</div>
|
|
} else {
|
|
<ul class="divide-y">
|
|
for _, t := range props.Transactions {
|
|
@transactionRow(props.SpaceID, props.AccountID, t, !props.NonEditableIDs[t.ID])
|
|
}
|
|
</ul>
|
|
}
|
|
}
|
|
|
|
templ transactionRow(spaceID, accountID string, t *model.Transaction, editable bool) {
|
|
{{
|
|
isDeposit := t.Type == model.TransactionTypeDeposit
|
|
amountClasses := []string{"text-sm font-semibold tabular-nums"}
|
|
sign := "-"
|
|
if isDeposit {
|
|
amountClasses = append(amountClasses, "text-green-600 dark:text-green-400")
|
|
sign = "+"
|
|
} else {
|
|
amountClasses = append(amountClasses, "text-red-600 dark:text-red-400")
|
|
}
|
|
}}
|
|
<li class="flex items-center justify-between gap-4 py-3">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<div class="w-9 h-9 shrink-0 rounded-full bg-muted flex items-center justify-center">
|
|
if isDeposit {
|
|
@icon.BanknoteArrowDown(icon.Props{Class: "size-4 text-green-600 dark:text-green-400"})
|
|
} else {
|
|
@icon.HandCoins(icon.Props{Class: "size-4 text-red-600 dark:text-red-400"})
|
|
}
|
|
</div>
|
|
<div class="min-w-0">
|
|
if spaceID != "" && accountID != "" {
|
|
<a
|
|
href={ templ.SafeURL(routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction", "spaceID", spaceID, "accountID", accountID, "transactionID", t.ID)) }
|
|
class="font-medium truncate block hover:underline"
|
|
>
|
|
{ t.Title }
|
|
</a>
|
|
} else {
|
|
<p class="font-medium truncate">{ t.Title }</p>
|
|
}
|
|
<p class="text-xs text-muted-foreground">{ t.OccurredAt.Format("Jan 2, 2006") }</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 shrink-0">
|
|
<div class="text-right">
|
|
<p class={ utils.TwMerge(amountClasses...) }>
|
|
{ sign }${ utils.FormatDecimalWithThousands(t.Value.StringFixedBank(2)) }
|
|
</p>
|
|
if t.Description != nil && *t.Description != "" {
|
|
<p class="text-xs text-muted-foreground truncate max-w-[200px]">{ *t.Description }</p>
|
|
}
|
|
</div>
|
|
if spaceID != "" && accountID != "" && editable {
|
|
@button.Button(button.Props{
|
|
Variant: button.VariantGhost,
|
|
Size: button.SizeIcon,
|
|
Href: routeurl.URL("page.app.spaces.space.accounts.account.transactions.transaction.edit", "spaceID", spaceID, "accountID", accountID, "transactionID", t.ID),
|
|
Class: "h-8 w-8",
|
|
Attributes: templ.Attributes{
|
|
"aria-label": "Edit transaction",
|
|
"title": "Edit transaction",
|
|
},
|
|
}) {
|
|
@icon.Pencil(icon.Props{Class: "size-4"})
|
|
}
|
|
}
|
|
</div>
|
|
</li>
|
|
}
|