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

This commit was merged in pull request #120.
This commit is contained in:
2025-05-20 22:06:40 +02:00
parent 057c3cdb1b
commit b27a2050a7

View File

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