cake-order-tracker/server/templates/orders.templ

package templates

import (
	"strconv"

	"git.bronku.xyz/bronku/cake-order-tracker/models"
)

templ OrdersPage(first, last, today, tomorrow, special string, counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order) {
	@Layout("Panel główny", DateForm(first, last, today, tomorrow, special), OrdersMain(counts, cakeCounts, orders, first, last, special))
}

templ DateForm(first, last, today, tomorrow, special string) {
	<div class="horizontal-group" style="gap:0.5rem;flex-wrap:wrap">
		<div class="preset-group">
			<a href={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + today + "&to=" + today + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Dzisiaj</a>
			<a href={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-get={ templ.URL("/orders?from=" + tomorrow + "&to=" + tomorrow + "&special=" + special) } hx-target="#results-pane" class="preset-btn">Jutro</a>
			<a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#results-pane" class="preset-btn">W tym tygodniu</a>
		</div>
		<form method="GET" action="/orders" class="horizontal-group" style="align-items:center;gap:0.25rem" hx-get="/orders" hx-target="#results-pane" hx-trigger="change, keyup delay:500ms">
			<label>Od</label>
			<input type="date" name="from" value={ first }/>
			<label>Do</label>
			<input type="date" name="to" value={ last }/>
			<input type="hidden" name="special" value={ special }/>
		</form>
	</div>
}

templ OrdersMain(counts models.OrderCounts, cakeCounts []models.CakeCount, orders []models.Order, first, last, special string) {
	<div class="metrics-grid">
		<div>
			<span class="label">
				<span class="material-symbols-outlined">receipt_long</span>
				Aktywne
			</span>
			<span class="value">{ strconv.Itoa(counts.Active) }</span>
			<span class="change">Wszystkie niezrealizowane</span>
		</div>
		<div>
			<span class="label">
				<span class="material-symbols-outlined">today</span>
				Na dziś
			</span>
			<span class="value">{ strconv.Itoa(counts.DueToday) }</span>
			<span class="change">Do zrobienia</span>
		</div>
	</div>
	<div id="results-pane">
		@OrdersContent(orders, cakeCounts, first, last, special)
	</div>
}

templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
	<section class="card">
		<header>
			<h2>
				<span class="material-symbols-outlined">list_alt</span>
				Aktywne zamówienia
			</h2>
			<div class="header-actions">
				<div class="preset-group">
					<a href={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?special=true&from=" + first + "&to=" + last) } hx-target="#results-pane"
						class={ "preset-btn", templ.KV("active", special == "true") }>Torty</a>
					<a href={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-get={ templ.URL("/orders?from=" + first + "&to=" + last) } hx-target="#results-pane"
						class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
				</div>
				<div class="search-wrapper">
					<span class="material-symbols-outlined search-icon">search</span>
					<input type="text" class="search-input" placeholder="Szukaj..." oninput="filterOrders(this)"/>
				</div>
			</div>
		</header>
		<div class="table-container">
			<table class="data-table">
				<thead>
					<tr>
						<th>ID zamówienia</th>
						<th>Klient</th>
						<th>Data odbioru</th>
						<th>Pozycje</th>
						<th class="right">Suma</th>
						<th class="center">Status</th>
						<th class="center"></th>
					</tr>
				</thead>
				<tbody>
					for _, o := range orders {
						@OrderRow(o)
					}
				</tbody>
			</table>
		</div>
	</section>
	@CakeBreakdown(cakeCounts)
}

templ OrderRow(order models.Order) {
	<tr>
		<td><a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="order-id">#{ strconv.Itoa(order.ID) }</a></td>
		<td class="customer">{ order.Surname } { order.Name }<br/><span class="text-muted">{ order.Phone }</span></td>
		<td class="text-muted">{ order.Date.Format("2006-01-02 15:04") }</td>
		<td>
			if len(order.SpecialCakes) > 0 {
				<span class="tort-badge" title="Tort specjalny">
					<span class="material-symbols-outlined">cake</span>
				</span>
			}
			<span class="truncate" title={ orderItemsDesc(order) }>
				for i, c := range order.Cakes {
					if i > 0 {
						{ ", " }
					}
					{ c.Name } (x{ strconv.Itoa(c.Amount) })
				}
				for _, s := range order.SpecialCakes {
					{ ", " }
					{ s.Name }*
				}
			</span>
		</td>
		<td class="text-right font-bold">{ order.Total().String() } PLN</td>
		<td class="text-center">
			<select name="status" class="status-select"
				hx-post={ templ.URL("/order/" + strconv.Itoa(order.ID) + "/status") }
				hx-trigger="change"
				hx-target="closest tr"
				hx-swap="outerHTML">
				<option value="pending"
					if order.Status == "pending" {
						selected
					}
				>Oczekujące</option>
				<option value="accepted"
					if order.Status == "accepted" {
						selected
					}
				>Przyjęte</option>
				<option value="production"
					if order.Status == "production" {
						selected
					}
				>W realizacji</option>
				<option value="ready"
					if order.Status == "ready" {
						selected
					}
				>Do odbioru</option>
				<option value="picked_up"
					if order.Status == "picked_up" {
						selected
					}
				>Wydane</option>
			</select>
		</td>
		<td class="text-center">
			<a href={ templ.URL("/order/" + strconv.Itoa(order.ID)) } class="action-btn">
				<span class="material-symbols-outlined">edit</span>
			</a>
		</td>
	</tr>
}

templ CakeBreakdown(cakeCounts []models.CakeCount) {
	<section class="card">
		<header>
			<h2>
				<span class="material-symbols-outlined">cake</span>
				Zapotrzebowanie
			</h2>
		</header>
		<div>
			<ul class="breakdown-list">
				for _, cc := range cakeCounts {
					<li class="breakdown-item">
						<span>{ cc.Name }</span>
						<span class="breakdown-amount">{ strconv.Itoa(cc.Amount) }</span>
					</li>
				}
				if len(cakeCounts) == 0 {
					<li class="breakdown-empty">Brak ciast w tym okresie</li>
				}
			</ul>
		</div>
	</section>
}