138 lines
3.4 KiB
Text
138 lines
3.4 KiB
Text
package expense
|
|
|
|
import (
|
|
"fmt"
|
|
"git.juancwu.dev/juancwu/budgit/internal/model"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/csrf"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/tagsinput"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/radio"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
|
|
"git.juancwu.dev/juancwu/budgit/internal/ui/components/datepicker"
|
|
)
|
|
|
|
templ AddExpenseForm(space *model.Space, tags []*model.Tag, lists []*model.ShoppingList) {
|
|
<form
|
|
hx-post={ "/app/spaces/" + space.ID + "/expenses" }
|
|
hx-target="#expenses-list"
|
|
hx-swap="afterbegin"
|
|
_="on htmx:afterOnLoad if event.detail.xhr.status == 200 then call window.tui.dialog.close('add-expense-dialog') reset() me end"
|
|
class="space-y-4"
|
|
>
|
|
@csrf.Token()
|
|
// Type
|
|
<div class="flex gap-4">
|
|
<div class="flex items-start gap-3">
|
|
@radio.Radio(radio.Props{
|
|
ID: "expense-type-expense",
|
|
Name: "type",
|
|
Value: "expense",
|
|
Checked: true,
|
|
})
|
|
<div class="grid gap-2">
|
|
@label.Label(label.Props{
|
|
For: "expense-type-expense",
|
|
}) {
|
|
Expense
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
@radio.Radio(radio.Props{
|
|
ID: "expense-type-topup",
|
|
Name: "type",
|
|
Value: "topup",
|
|
})
|
|
<div class="grid gap-2">
|
|
@label.Label(label.Props{
|
|
For: "expense-type-topup",
|
|
}) {
|
|
Top-up
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
// Description
|
|
<div>
|
|
@label.Label(label.Props{
|
|
For: "description",
|
|
}) {
|
|
Description
|
|
}
|
|
@input.Input(input.Props{
|
|
Name: "description",
|
|
ID: "description",
|
|
Attributes: templ.Attributes{"required": "true"},
|
|
})
|
|
</div>
|
|
// Amount
|
|
<div>
|
|
@label.Label(label.Props{
|
|
For: "amount",
|
|
}) {
|
|
Amount
|
|
}
|
|
@input.Input(input.Props{
|
|
Name: "amount",
|
|
ID: "amount",
|
|
Type: "number",
|
|
Attributes: templ.Attributes{"step": "0.01", "required": "true"},
|
|
})
|
|
</div>
|
|
// Date
|
|
<div>
|
|
@label.Label(label.Props{
|
|
For: "date",
|
|
}) {
|
|
Date
|
|
}
|
|
@datepicker.DatePicker(datepicker.Props{
|
|
ID: "date",
|
|
Name: "date",
|
|
Attributes: templ.Attributes{"required": "true"},
|
|
})
|
|
</div>
|
|
// Tags
|
|
<div>
|
|
@label.Label(label.Props{For: "new-expense-tags"}) {
|
|
Tags
|
|
}
|
|
<datalist id="available-tags">
|
|
for _, tag := range tags {
|
|
<option value={ tag.Name }></option>
|
|
}
|
|
</datalist>
|
|
@tagsinput.TagsInput(tagsinput.Props{
|
|
ID: "new-expense-tags",
|
|
Name: "tags",
|
|
Placeholder: "Add tags (press enter)",
|
|
Attributes: templ.Attributes{"list": "available-tags"},
|
|
})
|
|
</div>
|
|
// TODO: Shopping list items selector
|
|
<div class="flex justify-end">
|
|
@button.Button(button.Props{Type: button.TypeSubmit}) {
|
|
Save
|
|
}
|
|
</div>
|
|
</form>
|
|
}
|
|
|
|
templ BalanceCard(spaceID string, balance int, oob bool) {
|
|
<div
|
|
id="balance-card"
|
|
class="border rounded-lg p-4 bg-card text-card-foreground"
|
|
hx-get={ "/app/spaces/" + spaceID + "/components/balance" }
|
|
hx-trigger="sse:balance_changed"
|
|
hx-swap="outerHTML"
|
|
if oob {
|
|
hx-swap-oob="true"
|
|
}
|
|
>
|
|
<h2 class="text-lg font-semibold">Current Balance</h2>
|
|
<p class={ "text-3xl font-bold", templ.KV("text-destructive", balance < 0) }>
|
|
{ fmt.Sprintf("$%.2f", float64(balance)/100.0) }
|
|
</p>
|
|
</div>
|
|
}
|