fix(treasurechest): fix jumpy swaps due to non unique ids
This commit was merged in pull request #120.
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user