spend-sparrow/template/treasurechest/treasure_chest.templ

package treasurechest

import "fmt"

import "spend-sparrow/template/svg"
import "spend-sparrow/types"

import "github.com/google/uuid"

templ TreasureChest(treasureChests []*types.TreasureChest) {
	<div class="max-w-6xl mt-10 mx-auto">
		<button
			hx-get="/treasurechest/new"
			hx-target="#treasurechest-items"
			hx-swap="afterbegin"
			class="ml-auto button button-primary px-2 flex-1 flex items-center gap-2 justify-center"
		>
			@svg.Plus()
			<p>New Treasure Chest</p>
		</button>
		<div id="treasurechest-items" class="my-6 flex flex-col items-center">
			for _, treasureChest := range treasureChests {
				@TreasureChestItem(treasureChest)
			}
		</div>
	</div>
}

templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.TreasureChest) {
	{{
	var (
		id        string
		name      string
		parentId  uuid.UUID
		cancelUrl string
	)

	if treasureChest == nil {
		id = "new"
		name = ""
		parentId = uuid.Nil
		cancelUrl = "/empty"
	} else {
		id = treasureChest.Id.String()
		name = treasureChest.Name
		parentId = treasureChest.ParentId
		cancelUrl = "/treasurechest/" + id
	}
	}}
	<div id="treasurechest" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
		<form
			hx-post={ "/treasurechest/" + id }
			hx-target="closest #treasurechest"
			hx-swap="outerHTML"
			class="text-xl flex justify-end gap-4 items-center"
		>
			<input
				autofocus
				name="name"
				type="text"
				value={ name }
				placeholder="Treasure Chest Name"
				class="bg-white input"
			/>
			<select name="parent-id" class="mr-auto bg-white input">
				<option value="" class="text-gray-500">-</option>
				for _, parent := range filterNoChildNoSelf(parents, id) {
					<option
						selected?={ parentId == parent.Id }
						value={ parent.Id.String() }
					>{ parent.Name }</option>
				}
			</select>
			<button type="submit" class="button button-neglect px-1 flex items-center gap-2">
				@svg.Save()
				<span>
					Save
				</span>
			</button>
			<button
				hx-get={ cancelUrl }
				hx-target="closest #treasurechest"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				@svg.Cancel()
				<span>
					Cancel
				</span>
			</button>
		</form>
	</div>
}

templ TreasureChestItem(treasureChest *types.TreasureChest) {
	{{
	var identation string
	if treasureChest.ParentId != uuid.Nil {
		identation = " mt-2 ml-36"
	} else {
		identation = " mt-8"
	}
	}}
	<div id="treasurechest" class={ "border-1 border-gray-300 w-full p-4 bg-gray-50 rounded-lg" + identation }>
		<div class="text-xl flex justify-end items-center gap-4">
			<p class="mr-auto">{ treasureChest.Name }</p>
			if treasureChest.CurrentBalance < 0 {
				<p class="mr-20 text-red-700">{ displayBalance(treasureChest.CurrentBalance) }</p>
			} else {
				<p class="mr-20 text-green-700">{ displayBalance(treasureChest.CurrentBalance) }</p>
			}
			<button
				hx-get={ "/treasurechest/" + treasureChest.Id.String() + "?edit=true" }
				hx-target="closest #treasurechest"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				@svg.Edit()
				<span>
					Edit
				</span>
			</button>
			<button
				hx-delete={ "/treasurechest/" + treasureChest.Id.String() }
				hx-target="closest #treasurechest"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				@svg.Delete()
				<span>
					Delete
				</span>
			</button>
		</div>
	</div>
}

func filterNoChildNoSelf(nodes []*types.TreasureChest, selfId string) []*types.TreasureChest {
	var result []*types.TreasureChest

	for _, node := range nodes {
		if node.ParentId == uuid.Nil && node.Id.String() != selfId {
			result = append(result, node)
		}
	}

	return result
}

func displayBalance(balance int64) string {

	euros := float64(balance) / 100
	return fmt.Sprintf("%.2f €", euros)
}