budgit/internal/ui/forms/create_account.templ

package forms

import "git.juancwu.dev/juancwu/budgit/internal/misc/currency"
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"

type CreateAccountProps struct {
	SpaceID string

	Name              string
	Currency          string
	IsInvestment      bool
	InvestmentSubtype string

	NameErr     string
	CurrencyErr string
	SubtypeErr  string
	GeneralErr  string
}

var investmentSubtypes = []struct {
	Value string
	Label string
}{
	{"tfsa", "TFSA"},
	{"rrsp", "RRSP"},
	{"fhsa", "FHSA"},
	{"personal", "Personal / Non-registered"},
	{"other", "Other"},
}

templ CreateAccount(props CreateAccountProps) {
	<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.create", "spaceID", props.SpaceID) }>
		@card.Card(card.Props{Class: "rounded-sm"}) {
			@card.Content(card.ContentProps{Class: "p-4 space-y-4"}) {
				if props.GeneralErr != "" {
					@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
						{ props.GeneralErr }
					}
				}
				@form.Item() {
					@form.Label(form.LabelProps{For: "name"}) {
						Account Name
					}
					@input.Input(input.Props{
						ID:          "name",
						Name:        "name",
						Type:        input.TypeText,
						Placeholder: "e.g. Checking",
						Class:       "rounded-sm",
						Value:       props.Name,
						HasError:    props.NameErr != "",
						Required:    true,
						Attributes: templ.Attributes{
							"autocomplete": "off",
							"autofocus":    "",
						},
					})
					if props.NameErr != "" {
						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
							{ props.NameErr }
						}
					}
					@form.Description() {
						You can rename the account later. Starts with a 0.00 balance.
					}
				}
				{{
					selected := props.Currency
					if selected == "" {
						selected = currency.Default
					}
				}}
				@form.Item() {
					@form.Label(form.LabelProps{For: "currency"}) {
						Currency
					}
					<select
						id="currency"
						name="currency"
						class={ "flex h-9 w-full items-center rounded-sm border bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
							templ.KV("border-destructive", props.CurrencyErr != ""),
							templ.KV("border-input", props.CurrencyErr == "") }
						required
					>
						for _, code := range currency.Supported() {
							<option value={ code } selected?={ selected == code }>{ code }</option>
						}
					</select>
					if props.CurrencyErr != "" {
						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
							{ props.CurrencyErr }
						}
					}
				}
				{{
					selectedSubtype := props.InvestmentSubtype
					if selectedSubtype == "" {
						selectedSubtype = "tfsa"
					}
				}}
				@form.Item() {
					<label class="flex items-center gap-2 text-sm font-medium">
						<input
							type="checkbox"
							name="is_investment"
							value="1"
							class="h-4 w-4 rounded border-input"
							checked?={ props.IsInvestment }
							_="on change toggle .hidden on #investment-subtype-wrapper"
						/>
						Investment account
					</label>
					@form.Description() {
						Tracks contributions, contribution room, and holdings.
					}
				}
				<div
					id="investment-subtype-wrapper"
					class={ templ.KV("hidden", !props.IsInvestment) }
				>
					@form.Item() {
						@form.Label(form.LabelProps{For: "investment_subtype"}) {
							Account type
						}
						<select
							id="investment_subtype"
							name="investment_subtype"
							class={ "flex h-9 w-full items-center rounded-sm border bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
								templ.KV("border-destructive", props.SubtypeErr != ""),
								templ.KV("border-input", props.SubtypeErr == "") }
						>
							for _, opt := range investmentSubtypes {
								<option value={ opt.Value } selected?={ selectedSubtype == opt.Value }>{ opt.Label }</option>
							}
						</select>
						if props.SubtypeErr != "" {
							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
								{ props.SubtypeErr }
							}
						}
					}
				</div>
			}
			@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
				@button.Button(button.Props{
					Variant: button.VariantGhost,
					Href:    routeurl.URL("page.app.spaces.space.overview", "spaceID", props.SpaceID),
				}) {
					Cancel
				}
				@button.Button(button.Props{Type: button.TypeSubmit}) {
					Create Account
				}
			}
		}
	</form>
}