budgit/internal/ui/forms/create_bill.templ

package forms

import "git.juancwu.dev/juancwu/budgit/internal/model"
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"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/textarea"

type CreateBillProps struct {
	SpaceID    string
	AccountID  string
	Categories []*model.Category

	Title       string
	Amount      string
	Date        string
	Description string
	CategoryID  string

	TitleErr   string
	AmountErr  string
	DateErr    string
	GeneralErr string
}

templ CreateBill(props CreateBillProps) {
	<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.account.bills.create", "spaceID", props.SpaceID, "accountID", props.AccountID) }>
		@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: "title"}) {
						Title
					}
					@input.Input(input.Props{
						ID:          "title",
						Name:        "title",
						Type:        input.TypeText,
						Placeholder: "e.g. Hydro bill",
						Class:       "rounded-sm",
						Value:       props.Title,
						HasError:    props.TitleErr != "",
						Required:    true,
						Attributes: templ.Attributes{
							"autocomplete": "off",
							"autofocus":    "",
						},
					})
					if props.TitleErr != "" {
						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
							{ props.TitleErr }
						}
					}
				}
				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
					@form.Item() {
						@form.Label(form.LabelProps{For: "amount"}) {
							Amount
						}
						@input.Input(input.Props{
							ID:          "amount",
							Name:        "amount",
							Type:        input.TypeNumber,
							Placeholder: "0.00",
							Class:       "rounded-sm",
							Value:       props.Amount,
							HasError:    props.AmountErr != "",
							Required:    true,
							Attributes: templ.Attributes{
								"step":         "0.01",
								"min":          "0",
								"inputmode":    "decimal",
								"autocomplete": "off",
							},
						})
						if props.AmountErr != "" {
							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
								{ props.AmountErr }
							}
						}
					}
					@form.Item() {
						@form.Label(form.LabelProps{For: "date"}) {
							Date
						}
						@input.Input(input.Props{
							ID:       "date",
							Name:     "date",
							Type:     input.TypeDate,
							Class:    "rounded-sm",
							Value:    props.Date,
							HasError: props.DateErr != "",
							Required: true,
						})
						if props.DateErr != "" {
							@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
								{ props.DateErr }
							}
						}
					}
				</div>
				@form.Item() {
					@form.Label(form.LabelProps{For: "category"}) {
						Category
					}
					<select
						id="category"
						name="category"
						class="flex h-9 w-full items-center rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
					>
						<option value="" selected?={ props.CategoryID == "" }>Uncategorized</option>
						for _, c := range props.Categories {
							<option value={ c.ID } selected?={ props.CategoryID == c.ID }>{ c.Name }</option>
						}
					</select>
					@form.Description() {
						Optional. Helps with budget reporting.
					}
				}
				@form.Item() {
					@form.Label(form.LabelProps{For: "description"}) {
						Description
					}
					@textarea.Textarea(textarea.Props{
						ID:          "description",
						Name:        "description",
						Placeholder: "Anything extra worth remembering",
						Rows:        3,
						Value:       props.Description,
					})
					@form.Description() {
						Optional.
					}
				}
			}
			@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
				@button.Button(button.Props{
					Variant: button.VariantGhost,
					Href:    routeurl.URL("page.app.spaces.space.accounts.account.overview", "spaceID", props.SpaceID, "accountID", props.AccountID),
				}) {
					Cancel
				}
				@button.Button(button.Props{Type: button.TypeSubmit}) {
					Pay Bill
				}
			}
		}
	</form>
}