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) {
	<table id="transaction-recurring-items border-spacing-96" class="p-40 w-full">
		<thead>
			<tr>
				<th class="text-sm text-gray-500">Party</th>
				<th class="text-sm text-gray-500">Description</th>
				<th class="text-sm text-gray-500">Value (€)</th>
				<th class="text-sm text-gray-500">Actions</th>
			</tr>
		</thead>
		<tbody>
			for _, transaction := range transactionsRecurring {
				@TransactionRecurringItem(transaction)
			}
		</tbody>
	</table>
}

templ TransactionRecurringItem(transactionRecurring *types.TransactionRecurring) {
	<tr id={ "transaction-recurring" + transactionRecurring.Id.String() } class="mx-20">
		<td>
			<p class="text-sm text-gray-500">
				if transactionRecurring.Party != "" {
					{ transactionRecurring.Party }
				} else {
					&nbsp;
				}
			</p>
		</td>
		<td>
			<p class="text-sm text-gray-500">
				if transactionRecurring.Description != "" {
					{ transactionRecurring.Description }
				} else {
					&nbsp;
				}
			</p>
		</td>
		<td>
			if transactionRecurring.Value < 0 {
				<p class="mr-8 min-w-22 text-red-700">{ displayBalance(transactionRecurring.Value)+" €" }</p>
			} else {
				<p class="mr-8 min-w-22 text-green-700">{ displayBalance(transactionRecurring.Value)+" €" }</p>
			}
		</td>
		<td class="flex gap-2">
			<button
				hx-get={ "/transaction-recurring/" + transactionRecurring.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-recurring/" + transactionRecurring.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>
		</td>
	</tr>
}

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

			id = transactionRecurring.Id.String()
			cancelUrl = "/transaction-recurring/" + 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-recurring/" + 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 ">
				<div class="col-span-2">
					<input
						name="active"
						id="active"
						type="checkbox"
						checked?={ active }
						class="bg-white input"
					/>
					<label for="active" class="select-none text-sm text-gray-800">Active</label>
				</div>
				<label for="interval-months" class="text-sm text-gray-500">Interval Months</label>
				<input
					name="interval-months"
					type="number"
					value={ intervalMonths }
					class="bg-white input"
				/>
				<label for="party" class="text-sm text-gray-500">Party</label>
				<input
					name="party"
					type="text"
					value={ party }
					class="bg-white input"
				/>
				<label for="description" class="text-sm text-gray-500">Description</label>
				<input
					name="description"
					type="text"
					value={ description }
					class="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"
				/>
				if accountId != "" {
					<input type="text" name="account-id" class="hidden text-sm text-gray-500" value={ accountId }/>
				}
				if treasureChestId != "" {
					<input type="text" name="treasure-chest-id" class="hidden text-sm text-gray-500" value={ treasureChestId }/>
				}
			</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"
			>
				@svg.Cancel()
				<span>
					Cancel
				</span>
			</button>
		</form>
	</div>
}

func displayBalance(balance int64) string {

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

func calculateReferences() {
}