veola/templates/items.templ

package templates

import (
	"fmt"

	"veola/internal/models"
)

type ItemsData struct {
	Page
	Items            []models.Item
	Categories       []string
	SelectedCategory string
}

templ itemsBody(d ItemsData) {
	<div>
		<div class="flex items-center justify-between mb-6">
			<h1 class="text-3xl font-semibold">Items</h1>
			<a class="v-btn" href="/items/new">+ Add Item</a>
		</div>
		if len(d.Categories) > 0 {
			<form method="get" action="/items" class="mb-4 flex items-center gap-2">
				<label class="v-label mb-0">Category</label>
				<select class="v-select max-w-xs" name="category" onchange="this.form.submit()">
					<option value="">All</option>
					for _, c := range d.Categories {
						<option value={ c } selected?={ c == d.SelectedCategory }>{ c }</option>
					}
				</select>
			</form>
		}
		if len(d.Items) == 0 {
			@itemsEmpty()
		} else {
			<div class="v-card p-0 overflow-hidden">
				<table class="v-table">
					<thead>
						<tr>
							<th>Name</th>
							<th>Category</th>
							<th>Target</th>
							<th>Best Price</th>
							<th>Last Polled</th>
							<th>Status</th>
							<th></th>
						</tr>
					</thead>
					<tbody id="items-tbody">
						for _, it := range d.Items {
							@itemRow(it, d.CSRFToken)
						}
					</tbody>
				</table>
			</div>
		}
	</div>
}

templ itemsEmpty() {
	<div class="v-card p-8 flex flex-col md:flex-row items-center gap-6">
		<div class="v-veola-portrait w-48 shrink-0">
			<img src="/static/img/veola.webp" alt="Veola"/>
		</div>
		<div>
			<h2 class="text-xl font-semibold mb-2">Nothing on the watchlist.</h2>
			<p class="v-muted mb-4">Add an item and Veola will keep an eye on it.</p>
			<a class="v-btn" href="/items/new">Add the first item</a>
		</div>
	</div>
}

templ itemRow(it models.Item, csrf string) {
	<tr id={ fmt.Sprintf("item-row-%d", it.ID) }>
		<td>
			<a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", it.ID)) }>{ it.Name }</a>
			if it.LastPollError != "" {
				<button class="v-pill v-pill-error ml-2" hx-get={ fmt.Sprintf("/items/%d/error", it.ID) } hx-target={ fmt.Sprintf("#item-error-%d", it.ID) } hx-swap="innerHTML">!</button>
				<div id={ fmt.Sprintf("item-error-%d", it.ID) } class="v-error-text mt-1"></div>
			}
		</td>
		<td class="v-muted">{ it.Category }</td>
		<td class="font-mono">
			if it.TargetPrice != nil {
				{ fmtPrice(it.TargetPrice, "USD") }
			} else {
				<span class="v-muted">—</span>
			}
		</td>
		<td>
			if it.BestPrice != nil {
				<div class={ "font-mono text-lg", priceClass(it.BestPrice, it.TargetPrice) }>{ fmtPrice(it.BestPrice, it.BestPriceCurrency) }</div>
				if it.BestPriceURL != "" {
					<a class="text-xs" href={ templ.SafeURL(it.BestPriceURL) } target="_blank" rel="noopener">{ it.BestPriceStore }</a>
				} else if it.BestPriceStore != "" {
					<span class="text-xs v-muted">{ it.BestPriceStore }</span>
				}
			} else {
				<span class="v-muted">not yet</span>
			}
		</td>
		<td class="v-muted text-sm">
			if it.LastPolledAt != nil {
				<span title={ it.LastPolledAt.Format("2006-01-02 15:04:05") }>{ humanTime(*it.LastPolledAt) }</span>
			} else {
				—
			}
		</td>
		<td>
			if it.Active {
				<span class="v-pill v-pill-active">active</span>
			} else {
				<span class="v-pill v-pill-paused">paused</span>
			}
		</td>
		<td class="text-right whitespace-nowrap">
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/toggle", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">
					if it.Active {
						Pause
					} else {
						Resume
					}
				</button>
			</form>
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/run", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML" hx-disabled-elt="find button">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">
					Run Now
					<span class="v-spinner htmx-indicator ml-1"></span>
				</button>
			</form>
			<a class="v-btn-ghost text-sm" href={ templ.SafeURL(fmt.Sprintf("/items/%d/edit", it.ID)) }>Edit</a>
			<form class="inline" hx-post={ fmt.Sprintf("/items/%d/delete", it.ID) } hx-target={ fmt.Sprintf("#item-row-%d", it.ID) } hx-swap="outerHTML" hx-confirm="Delete this item?">
				<input type="hidden" name="csrf_token" value={ csrf }/>
				<button class="v-btn-ghost text-sm" type="submit">Delete</button>
			</form>
		</td>
	</tr>
}

func priceClass(best, target *float64) string {
	if best == nil || target == nil {
		return ""
	}
	if *best <= *target {
		return "v-price-target"
	}
	return ""
}

templ Items(d ItemsData) {
	@Layout(d.Page, itemsBody(d))
}

// ItemRow renders a single row partial, used by HTMX endpoints.
templ ItemRow(it models.Item, csrf string) {
	@itemRow(it, csrf)
}

// EmptyRow lets a delete handler return a row replacement that vanishes.
templ EmptyRow() {
	<tr></tr>
}