spend-sparrow/internal/template/transaction/transaction.templ

package transaction

import "fmt"
import "time"
import "spend-sparrow/internal/template/svg"
import "spend-sparrow/internal/types"
import "github.com/google/uuid"

templ Transaction(items templ.Component, filter types.TransactionItemsFilter, accounts []*types.Account, treasureChests []*types.TreasureChest) {
	<div class="max-w-6xl mt-10 mx-auto">
		<div class="flex items-center gap-4">
			<form
				hx-get="/transaction"
				hx-target="#transaction-items"
				hx-push-url="true"
				hx-trigger="change"
			>
				<select name="account-id" class="bg-white input">
					<option value="">- Filter Acount -</option>
					for _, account := range accounts {
						<option
							value={ account.Id.String() }
							selected?={ filter.AccountId == account.Id.String() }
						>{ account.Name }</option>
					}
				</select>
				<select name="treasure-chest-id" class="bg-white input">
					<option value="">- Filter Treasure Chest -</option>
					for _, parent := range treasureChests {
						if parent.ParentId == nil {
							<optgroup label={ parent.Name }>
								for _, child := range treasureChests {
									if child.ParentId != nil && *child.ParentId == parent.Id {
										<option
											value={ child.Id.String() }
											selected?={ filter.TreasureChestId == child.Id.String() }
										>{ child.Name }</option>
									}
								}
							</optgroup>
						}
					}
				</select>
				<select name="error" class="bg-white input">
					<option value="">- Filter Error -</option>
					<option
						value="true"
						selected?={ filter.Error == "true" }
					>Has Errors</option>
					<option
						value="false"
						selected?={ filter.Error == "false" }
					>Has no Errors</option>
				</select>
			</form>
			<button
				hx-get="/transaction/new"
				hx-target="#transaction-items"
				hx-swap="afterbegin"
				class="button button-primary ml-auto px-2 flex items-center gap-2 justify-center"
			>
				@svg.Plus()
				<p>New Transaction</p>
			</button>
		</div>
		@items
	</div>
}

templ TransactionItems(transactions []*types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
	<div id="transaction-items" class="my-6">
		for _, transaction := range transactions {
			@TransactionItem(transaction, accounts, treasureChests)
		}
	</div>
}

templ EditTransaction(transaction *types.Transaction, accounts []*types.Account, treasureChests []*types.TreasureChest) {
	{{
		var (
			timestamp time.Time

			id        string
			cancelUrl string
		)
		party := ""
		description := ""
		accountId := ""
		value := "0.00"
		treasureChestId := ""
		if transaction == nil {
			timestamp = time.Now().UTC().Truncate(time.Minute)

			id = "new"
			cancelUrl = "/empty"
		} else {
			timestamp = transaction.Timestamp.UTC().Truncate(time.Minute)
			party = transaction.Party
			description = transaction.Description
			if transaction.AccountId != nil {
				accountId = transaction.AccountId.String()
			}
			if transaction.TreasureChestId != nil {
				treasureChestId = transaction.TreasureChestId.String()
			}
			value = formatFloat(transaction.Value)

			id = transaction.Id.String()
			cancelUrl = "/transaction/" + id
		}
	}}
	<div id="transaction" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
		<form
			hx-post={ "/transaction/" + id }
			hx-target="closest #transaction"
			hx-swap="outerHTML"
			class="text-xl flex justify-end gap-4 items-center"
		>
			<div class="grid grid-cols-[auto_auto] items-center gap-4 mr-auto">
				<label for="timestamp" class="text-sm text-gray-500">Transaction Date</label>
				<input
					autofocus
					name="timestamp"
					type="date"
					value={ timestamp.String() }
					class="bg-white input datetime"
				/>
				<label for="party" class="text-sm text-gray-500">Party</label>
				<input
					name="party"
					type="text"
					value={ party }
					class="mr-auto bg-white input"
				/>
				<label for="description" class="text-sm text-gray-500">Description</label>
				<input
					name="description"
					type="text"
					value={ description }
					class="mr-auto bg-white input"
				/>
				<label for="value" class="text-sm text-gray-500">Value (€)</label>
				<input
					name="value"
					step="0.01"
					type="number"
					value={ value }
					class="bg-white input"
				/>
				<label for="account-id" class="text-sm text-gray-500">Account</label>
				<select
					name="account-id"
					class="bg-white input"
				>
					<option value="">-</option>
					for _, account := range accounts {
						<option selected?={ account.Id.String() == accountId } value={ account.Id.String() }>{ account.Name }</option>
					}
				</select>
				<label for="treasure-chest-id" class="text-sm text-gray-500">Treasure Chest</label>
				<select name="treasure-chest-id" class="bg-white input">
					<option value="">- Filter Treasure Chest -</option>
					for _, parent := range treasureChests {
						if parent.ParentId == nil {
							<optgroup label={ parent.Name }>
								for _, child := range treasureChests {
									if child.ParentId != nil && *child.ParentId == parent.Id {
										<option
											value={ child.Id.String() }
											selected?={ treasureChestId == child.Id.String() }
										>{ child.Name }</option>
									}
								}
							</optgroup>
						}
					}
				</select>
			</div>
			<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 #transaction"
				hx-swap="outerHTML"
				class="button button-neglect px-1 flex items-center gap-2"
			>
				<span class="h-4 w-4">
					@svg.Cancel()
				</span>
				<span>
					Cancel
				</span>
			</button>
		</form>
	</div>
}

templ TransactionItem(transaction *types.Transaction, accounts, treasureChests map[uuid.UUID]string) {
	{{
		background := "bg-gray-50"
		if transaction.Error != nil {
			background = "bg-yellow-50"
		}
	}}
	<div
		id="transaction"
		class={ "mt-4 border-1 grid grid-cols-[auto_auto_1fr_1fr_auto_auto_auto_auto] gap-4 items-center text-xl border-gray-300 w-full p-4 rounded-lg " + background }
		if transaction.Error != nil {
			title={ *transaction.Error }
		}
	>
		<p class="mr-auto datetime">{ transaction.Timestamp.String() }</p>
		<div class="w-6">
			if transaction.Error != nil {
				@svg.Info()
			}
		</div>
		<div>
			<p class="text-sm text-gray-500">
				if transaction.AccountId != nil {
					{ accounts[*transaction.AccountId] }
				} else {
					&nbsp;
				}
			</p>
			<p class="text-sm text-gray-500">
				if transaction.TreasureChestId != nil {
					{ treasureChests[*transaction.TreasureChestId] }
				} else {
					&nbsp;
				}
			</p>
		</div>
		<div>
			<p class="text-sm text-gray-500">
				if transaction.Party != "" {
					{ transaction.Party }
				} else {
					&nbsp;
				}
			</p>
			<p class="text-sm text-gray-500">
				if transaction.Description != "" {
					{ transaction.Description }
				} else {
					&nbsp;
				}
			</p>
		</div>
		if transaction.Value < 0 {
			<p class="mr-8 min-w-22 text-right text-red-700">{ types.FormatEuros(transaction.Value) }</p>
		} else {
			<p class="mr-8 w-22 text-right text-green-700">{ types.FormatEuros(transaction.Value) }</p>
		}
		<button
			hx-get={ "/transaction/" + transaction.Id.String() + "?edit=true" }
			hx-target="closest #transaction"
			hx-swap="outerHTML"
			class="button button-neglect px-1 flex items-center gap-2"
		>
			@svg.Edit()
			<span>
				Edit
			</span>
		</button>
		<button
			hx-delete={ "/transaction/" + transaction.Id.String() }
			hx-target="closest #transaction"
			hx-swap="outerHTML"
			hx-confirm="Are you sure you want to delete this transaction?"
			class="button button-neglect px-1 flex items-center gap-2"
		>
			@svg.Delete()
			<span>
				Delete
			</span>
		</button>
	</div>
}

func formatFloat(balance int64) string {

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