juancwu/budgit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: paginate expenses history

Browse source
This commit is contained in:
juancwu 2026-02-09 12:40:02 +00:00
commit 153eaca676
5 changed files with 237 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

175
internal/ui/components/expense/expense.templ
View file

@ -35,8 +35,8 @@ func (p AddExpenseFormProps) formAttrs() templ.Attributes {
}
return templ.Attributes{
"hx-post": "/app/spaces/" + p.Space.ID + "/expenses",
"hx-target": "#expenses-list",
"hx-swap": "afterbegin",
"hx-target": "#expenses-list-wrapper",
"hx-swap": "innerHTML",
"_": closeScript,
}
}
@ -143,87 +143,7 @@ templ AddExpenseForm(props AddExpenseFormProps) {
})
</div>
// Shopping list items selector
<div id="item-selector-section">
@label.Label(label.Props{}) {
Link Shopping List Items
}
if len(props.ListsWithItems) == 0 {
<p class="text-sm text-muted-foreground">No unchecked items available.</p>
} else {
<div class="max-h-48 overflow-y-auto border rounded-md p-2 space-y-2">
for i, lwi := range props.ListsWithItems {
{{ toggleID := "toggle-list-" + lwi.List.ID }}
{{ itemsID := "items-" + lwi.List.ID }}
<div class="space-y-1">
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
ID: "select-all-" + lwi.List.ID,
Attributes: templ.Attributes{
"_": "on change repeat for cb in <input[name='item_ids']/> in #" + itemsID + " set cb.checked to my.checked end",
},
})
<button
type="button"
id={ toggleID }
class="flex-1 flex items-center gap-1 text-sm font-medium cursor-pointer select-none"
_={ "on click toggle .hidden on #" + itemsID + " then toggle .rotate-90 on <svg/> in me" }
>
@icon.ChevronRight(icon.Props{Size: 14})
{ lwi.List.Name }
<span class="text-muted-foreground">
({ strconv.Itoa(len(lwi.Items)) })
</span>
</button>
</div>
<div id={ itemsID } class="hidden pl-6 space-y-1">
for _, item := range lwi.Items {
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
ID: "item-cb-" + item.ID,
Name: "item_ids",
Value: item.ID,
})
<label for={ "item-cb-" + item.ID } class="text-sm cursor-pointer select-none">
{ item.Name }
</label>
</div>
}
</div>
</div>
if i < len(props.ListsWithItems) - 1 {
<hr class="border-border"/>
}
}
</div>
// Post-action radio group
<div class="mt-2 space-y-1">
<p class="text-sm text-muted-foreground">After linking items:</p>
<div class="flex gap-4">
<div class="flex items-center gap-2">
@radio.Radio(radio.Props{
ID: "item-action-check",
Name: "item_action",
Value: "check",
Checked: true,
})
@label.Label(label.Props{For: "item-action-check"}) {
Mark as checked
}
</div>
<div class="flex items-center gap-2">
@radio.Radio(radio.Props{
ID: "item-action-delete",
Name: "item_action",
Value: "delete",
})
@label.Label(label.Props{For: "item-action-delete"}) {
Delete from list
}
</div>
</div>
</div>
}
</div>
@ItemSelectorSection(props.ListsWithItems, false)
<div class="flex justify-end">
@button.Button(button.Props{Type: button.TypeSubmit}) {
Save
@ -332,6 +252,95 @@ templ EditExpenseForm(spaceID string, exp *model.ExpenseWithTags) {
</form>
}
templ ItemSelectorSection(listsWithItems []model.ListWithUncheckedItems, oob bool) {
<div
id="item-selector-section"
if oob {
hx-swap-oob="true"
}
>
@label.Label(label.Props{}) {
Link Shopping List Items
}
if len(listsWithItems) == 0 {
<p class="text-sm text-muted-foreground">No unchecked items available.</p>
} else {
<div class="max-h-48 overflow-y-auto border rounded-md p-2 space-y-2">
for i, lwi := range listsWithItems {
{{ toggleID := "toggle-list-" + lwi.List.ID }}
{{ itemsID := "items-" + lwi.List.ID }}
<div class="space-y-1">
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
ID: "select-all-" + lwi.List.ID,
Attributes: templ.Attributes{
"_": "on change repeat for cb in <input[name='item_ids']/> in #" + itemsID + " set cb.checked to my.checked end",
},
})
<button
type="button"
id={ toggleID }
class="flex-1 flex items-center gap-1 text-sm font-medium cursor-pointer select-none"
_={ "on click toggle .hidden on #" + itemsID + " then toggle .rotate-90 on <svg/> in me" }
>
@icon.ChevronRight(icon.Props{Size: 14})
{ lwi.List.Name }
<span class="text-muted-foreground">
({ strconv.Itoa(len(lwi.Items)) })
</span>
</button>
</div>
<div id={ itemsID } class="hidden pl-6 space-y-1">
for _, item := range lwi.Items {
<div class="flex items-center gap-2">
@checkbox.Checkbox(checkbox.Props{
ID: "item-cb-" + item.ID,
Name: "item_ids",
Value: item.ID,
})
<label for={ "item-cb-" + item.ID } class="text-sm cursor-pointer select-none">
{ item.Name }
</label>
</div>
}
</div>
</div>
if i < len(listsWithItems) - 1 {
<hr class="border-border"/>
}
}
</div>
// Post-action radio group
<div class="mt-2 space-y-1">
<p class="text-sm text-muted-foreground">After linking items:</p>
<div class="flex gap-4">
<div class="flex items-center gap-2">
@radio.Radio(radio.Props{
ID: "item-action-check",
Name: "item_action",
Value: "check",
Checked: true,
})
@label.Label(label.Props{For: "item-action-check"}) {
Mark as checked
}
</div>
<div class="flex items-center gap-2">
@radio.Radio(radio.Props{
ID: "item-action-delete",
Name: "item_action",
Value: "delete",
})
@label.Label(label.Props{For: "item-action-delete"}) {
Delete from list
}
</div>
</div>
</div>
}
</div>
}
templ BalanceCard(spaceID string, balance int, oob bool) {
<div
id="balance-card"