spend-sparrow/template/transaction_recurring/transaction_recurring.templ

package transaction_recurring

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

templ TransactionRecurringItems(transactionsRecurring []*types.TransactionRecurring, editId, accountId, treasureChestId string) {
	<!-- Don't use table, because embedded forms are only valid for cells -->
	<div id="transaction-recurring" class="max-w-full grid gap-4 mt-10 grid-cols-[auto_auto_auto_auto_auto_max-content] items-center text-xl">
		<span class="text-sm text-gray-500">Active</span>
		<span class="text-sm text-gray-500">Party</span>
		<span class="text-sm text-gray-500">Description</span>
		<span class="text-sm text-gray-500">Interval</span>
		<span class="text-sm text-right text-gray-500">Value</span>
		<span></span>
		if editId == "new" {
			@EditTransactionRecurring(nil, accountId, treasureChestId)
		}
		for _, transaction := range transactionsRecurring {
			if transaction.Id.String() == editId {
				@EditTransactionRecurring(transaction, accountId, treasureChestId)
			} else {
				@TransactionRecurringItem(transaction, accountId, treasureChestId)
			}
		}
	</div>
}

templ TransactionRecurringItem(transactionRecurring *types.TransactionRecurring, accountId, treasureChestId string) {
	<p class="text-gray-600">
		if transactionRecurring.Active {
			Yes
		} else {
			No
		}
	</p>
	<p class="text-gray-600">
		if transactionRecurring.Party != "" {
			{ transactionRecurring.Party }
		} else {
			&nbsp;
		}
	</p>
	<p class="text-gray-600">
		if transactionRecurring.Description != "" {
			{ transactionRecurring.Description }
		} else {
			&nbsp;
		}
	</p>
	<p class="text-gray-500 text-sm">
		Every  <span class="text-xl">{ transactionRecurring.IntervalMonths }</span> month(s)
	</p>
	if transactionRecurring.Value < 0 {
		<p class="text-right text-red-700">{ displayBalance(transactionRecurring.Value)+" €" }</p>
	} else {
		<p class="text-right text-green-700">{ displayBalance(transactionRecurring.Value)+" €" }</p>
	}
	<div class="flex gap-2">
		<button
			hx-get={ "/transaction-recurring?id=" + transactionRecurring.Id.String() + "&account-id=" + accountId + "&treasure-chest-id=" + treasureChestId + "&edit=true" }
			hx-target="closest #transaction-recurring"
			hx-swap="outerHTML"
			class="button button-neglect px-1 flex items-center gap-2"
		>
			@svg.Edit()
			<span>
				Edit
			</span>
		</button>
		<button
			hx-delete={ "/transaction-recurring/" + transactionRecurring.Id.String() + "?account-id=" + accountId + "&treasure-chest-id=" + treasureChestId }
			hx-target="closest #transaction-recurring"
			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>
}

templ EditTransactionRecurring(transactionRecurring *types.TransactionRecurring, accountId, treasureChestId string) {
	{{
		var (
			id string
		)
		party := ""
		description := ""
		value := "0.00"
		intervalMonths := "1"
		active := true
		if transactionRecurring == nil {
			id = "new"
		} else {
			intervalMonths = fmt.Sprintf("%d", transactionRecurring.IntervalMonths)
			active = transactionRecurring.Active
			party = transactionRecurring.Party
			description = transactionRecurring.Description
			value = displayBalance(transactionRecurring.Value)

			id = transactionRecurring.Id.String()
		}
	}}
	<form
		id="transaction-recurring-form"
		hx-post={ "/transaction-recurring/" + id }
		hx-target="closest #transaction-recurring"
		hx-swap="outerHTML"
		class="hidden"
	></form>
	<input
		name="active"
		form="transaction-recurring-form"
		id="active"
		type="checkbox"
		checked?={ active }
		class="bg-white input"
	/>
	<input
		autofocus
		form="transaction-recurring-form"
		name="party"
		type="text"
		value={ party }
		size="5"
		class="bg-white input"
	/>
	<input
		name="description"
		form="transaction-recurring-form"
		type="text"
		value={ description }
		size="10"
		class="bg-white input"
	/>
	<input
		name="interval-months"
		form="transaction-recurring-form"
		type="number"
		value={ intervalMonths }
		size="1"
		class="bg-white input"
	/>
	<input
		name="value"
		form="transaction-recurring-form"
		step="0.01"
		type="number"
		size="1"
		value={ value }
		class="bg-white input"
	/>
	if accountId != "" {
		<input
			form="transaction-recurring-form"
			type="text"
			name="account-id"
			class="hidden text-sm text-gray-500"
			value={ accountId }
		/>
	}
	if treasureChestId != "" {
		<input
			form="transaction-recurring-form"
			type="text"
			name="treasure-chest-id"
			class="hidden text-sm text-gray-500"
			value={ treasureChestId }
		/>
	}
	<div class="flex gap-2">
		<button
			form="transaction-recurring-form"
			type="submit"
			class="button button-neglect px-1 flex items-center gap-2"
		>
			@svg.Save()
			<span>
				Save
			</span>
		</button>
		<button
			form="transaction-recurring-form"
			hx-get={ "/transaction-recurring?account-id=" + accountId + "&treasure-chest-id=" + treasureChestId }
			hx-target="closest #transaction-recurring"
			hx-swap="outerHTML"
			class="button button-neglect px-1 flex items-center gap-2"
		>
			@svg.Cancel()
			<span>
				Cancel
			</span>
		</button>
	</div>
}

func displayBalance(balance int64) string {

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

func calculateReferences() {
}