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", OrdersMain(counts, cakeCounts, orders, first, last, special, today, tomorrow))
}

templ DateForm(first, last, today, tomorrow, special string) {
	<div class="horizontal-group">
		<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="#orders-results" 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="#orders-results" class="preset-btn">Jutro</a>
			<a href={ templ.URL("/orders?special=" + special) } hx-get={ templ.URL("/orders?special=" + special) } hx-target="#orders-results" class="preset-btn">W tym tygodniu</a>
		</div>
		<form method="GET" action="/orders" class="horizontal-group" hx-get="/orders" hx-target="#orders-results" 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, today, tomorrow string) {
	@DateForm(first, last, today, tomorrow, special)
	<div class="metric">
		<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 class="metric">
		<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 id="orders-results">
		@OrdersContent(orders, cakeCounts, first, last, special)
	</div>
}

templ OrdersContent(orders []models.Order, cakeCounts []models.CakeCount, first, last, special string) {
	<section class="card" id="orders-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="#orders-results"
						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="#orders-results"
						class={ "preset-btn", templ.KV("active", special != "true") }>Wszystkie</a>
				</div>
				<div class="search">
					<span class="material-symbols-outlined">search</span>
					<input type="text" placeholder="Szukaj..." oninput="filterOrders(this)"/>
				</div>
			</div>
		</header>
		<table class="data-table">
			<thead>
				<tr>
					<th>ID zamówienia</th>
					<th>Klient</th>
					<th>Data odbioru</th>
					<th>Pozycje</th>
					<th class="text-right">Suma</th>
					<th class="text-center">Status</th>
					<th class="text-center"></th>
				</tr>
			</thead>
			<tbody>
				for _, o := range orders {
					@OrderRow(o)
				}
			</tbody>
		</table>
	</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>{ 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="material-symbols-outlined" title="Tort specjalny">cake</span>
			}
			<span 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"
				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="btn-icon">
				<span class="material-symbols-outlined">edit</span>
			</a>
		</td>
	</tr>
}

templ CakeBreakdown(cakeCounts []models.CakeCount) {
	<section class="card" id="breakdown-card">
		<header>
			<h2>
				<span class="material-symbols-outlined">cake</span>
				Zapotrzebowanie
			</h2>
		</header>
		<table>
			<thead>
				<tr>
					<th>Nazwa</th>
					<th class="text-right">Ilość</th>
				</tr>
			</thead>
			<tbody>
				for _, cc := range cakeCounts {
					<tr>
						<td>{ cc.Name }</td>
						<td class="text-right font-bold">{ strconv.Itoa(cc.Amount) }</td>
					</tr>
				}
				if len(cakeCounts) == 0 {
					<tr>
						<td colspan="2" class="empty-state">Brak ciast w tym okresie</td>
					</tr>
				}
			</tbody>
		</table>
	</section>
}