x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix(treasurechest): fix jumpy swaps due to non unique ids
All checks were successful
Build Docker Image / Build-Docker-Image (push) Successful in 5m2s
Details
Build and Push Docker Image / Build-And-Push-Docker-Image (push) Successful in 5m23s
Details

Browse Source
This commit was merged in pull request #120.
This commit is contained in:
Tim Wundenberg
2025-05-20 22:06:40 +02:00
parent 057c3cdb1b
commit b27a2050a7
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
template/treasurechest/treasure_chest.templ
View File

@@ -16,7 +16,7 @@ templ TreasureChest(treasureChests []*types.TreasureChest) {
@svg.Plus() @svg.Plus()
<p>New Treasure Chest</p> <p>New Treasure Chest</p>
</button> </button>
<div id="treasurechest-items" class="my-6 flex flex-col items-center"> <div id="treasurechest-items" class="my-6 flex flex-col">
for _, treasureChest := range treasureChests { for _, treasureChest := range treasureChests {
@TreasureChestItem(treasureChest) @TreasureChestItem(treasureChest)
} }
@@ -33,6 +33,7 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
cancelUrl string cancelUrl string
) )
indentation := " mt-10"
if treasureChest == nil { if treasureChest == nil {
id = "new" id = "new"
name = "" name = ""
@@ -43,14 +44,15 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
name = treasureChest.Name name = treasureChest.Name
if treasureChest.ParentId != nil { if treasureChest.ParentId != nil {
parentId = *treasureChest.ParentId parentId = *treasureChest.ParentId
indentation = " mt-2 ml-14"
} }
cancelUrl = "/treasurechest/" + id cancelUrl = "/treasurechest/" + id
} }
}} }}
<div id="treasurechest" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg"> <div id={ "treasurechest-" + id } class={ "border-1 border-gray-300 p-4 bg-gray-50 rounded-lg" + indentation }>
<form <form
hx-post={ "/treasurechest/" + id } hx-post={ "/treasurechest/" + id }
hx-target="closest #treasurechest" hx-target={ "#treasurechest-" + id }
hx-swap="outerHTML" hx-swap="outerHTML"
class="text-xl flex justify-end gap-4 items-center" class="text-xl flex justify-end gap-4 items-center"
> >
@@ -79,7 +81,7 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
</button> </button>
<button <button
hx-get={ cancelUrl } hx-get={ cancelUrl }
hx-target="closest #treasurechest" hx-target={ "#treasurechest-" + id }
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@@ -94,16 +96,16 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
templ TreasureChestItem(treasureChest *types.TreasureChest) { templ TreasureChestItem(treasureChest *types.TreasureChest) {
{{ {{
var identation string var indentation string
viewTransactions := "" viewTransactions := ""
if treasureChest.ParentId != nil { if treasureChest.ParentId != nil {
identation = " mt-2 ml-36" indentation = " mt-2 ml-14"
} else { } else {
identation = " mt-8" indentation = " mt-10"
viewTransactions = "hidden" viewTransactions = "hidden"
} }
}} }}
<div id="treasurechest" class={ "border-1 border-gray-300 w-full p-4 bg-gray-50 rounded-lg" + identation }> <div id={ "treasurechest-" + treasureChest.Id.String() } class={ "border-1 border-gray-300 p-4 bg-gray-50 rounded-lg" + indentation }>
<div class="text-xl flex justify-end items-center gap-4"> <div class="text-xl flex justify-end items-center gap-4">
<p class="mr-auto">{ treasureChest.Name }</p> <p class="mr-auto">{ treasureChest.Name }</p>
if treasureChest.ParentId != nil { if treasureChest.ParentId != nil {
@@ -125,7 +127,7 @@ templ TreasureChestItem(treasureChest *types.TreasureChest) {
</a> </a>
<button <button
hx-get={ "/treasurechest/" + treasureChest.Id.String() + "?edit=true" } hx-get={ "/treasurechest/" + treasureChest.Id.String() + "?edit=true" }
hx-target="closest #treasurechest" hx-target={ "#treasurechest-" + treasureChest.Id.String() }
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >
@@ -136,7 +138,7 @@ templ TreasureChestItem(treasureChest *types.TreasureChest) {
</button> </button>
<button <button
hx-delete={ "/treasurechest/" + treasureChest.Id.String() } hx-delete={ "/treasurechest/" + treasureChest.Id.String() }
hx-target="closest #treasurechest" hx-target={ "#treasurechest-" + treasureChest.Id.String() }
hx-swap="outerHTML" hx-swap="outerHTML"
class="button button-neglect px-1 flex items-center gap-2" class="button button-neglect px-1 flex items-center gap-2"
> >