list.templ

package listsweb

import "fmt"
import "github.com/joerdav/shopping-list/app/common"
import "path"

func recipeInList(recipeID string, list List) bool {
	for _, r := range list.Recipes {
		if r.ID == recipeID {
			return true
		}
	}
	return false
}

templ ListRecipes(
	list List,
	availableRecipes []Recipe,
) {
	for _, recipe := range list.Recipes {
		<div class="grid grid-cols-2">
			<p class="col-span-1 py-1">{ recipe.Name }</p>
			@common.SetQuantity(fmt.Sprintf("/lists/%v/recipe", list.ID), "#list", "recipeID", recipe.ID, recipe.Quantity)
		</div>
	}
	<div>
		<select
			name="recipeID"
			hx-trigger="change"
			hx-put={ fmt.Sprintf("/lists/%v/recipe", list.ID) }
			hx-target="#list"
			hx-select="#list"
			hx-swap="outerHTML"
			hx-vals='{"quantity":"1"}'
			class="bg-white border border-gray-300 text-black rounded-full shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
		>
			<option value="">Select a recipe</option>
			for _, v := range availableRecipes {
				if !recipeInList(v.ID, list) {
					<option value={ v.ID }>{ v.Name }</option>
				}
			}
		</select>
	</div>
}

func itemInList(itemID string, list List) bool {
	for _, i := range list.Items {
		if i.ID == itemID {
			return true
		}
	}
	return false
}

templ ListItems(list List, availableItems []Item) {
	for _, item := range list.Items {
		<div class="grid grid-cols-2">
			<p class="col-span-1 py-1">{ item.Name }</p>
			@common.SetQuantity(fmt.Sprintf("/lists/%v/item", list.ID), "#list", "itemID", item.ID, item.Quantity)
		</div>
	}
	<div>
		<select
			name="itemID"
			hx-trigger="change"
			hx-put={ fmt.Sprintf("/lists/%v/item", list.ID) }
			hx-target="#list"
			hx-select="#list"
			hx-swap="outerHTML"
			hx-vals='{"quantity":"1"}'
			class="bg-white border border-gray-300 text-black rounded-full shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
		>
			<option value="">Select an item</option>
			for _, v := range availableItems {
				if !itemInList(v.ID, list) {
					<option value={ v.ID }>{ v.Name }</option>
				}
			}
		</select>
	</div>
}

templ ItemButton(listID string, i ListItem) {
	<button
		class={ "border border-gray-300 rounded-full shadow px-4 py-1", templ.KV("line-through bg-gray-200 text-gray-500", i.Bought) }
		hx-post={ path.Join("/lists", listID, "item", i.ID, "toggle") }
		hx-swap="outerHTML"
		hx-target="#list"
		hx-select="#list"
	>{ i.Name } x { fmt.Sprint(i.Quantity) }</button>
}

templ ListPage(urlpath string, list List, availableRecipes []Recipe, availableItems []Item) {
	@common.Layout(list.CreatedDate.Format("List - 02 Jan 06 15:04"), urlpath) {
		<section id="list" class="grid grid-cols-1 gap-4 px-4 pt-4 pb-28 sm:grid-cols-3">
			<h2 class="text-xl border-b border-gray-300 col-span-full font-bold px-4">List</h2>
			<div class="rounded-xl border border-gray-100 shadow-lg py-4 px-2">
				<h2 class="font-semibold text-lg text-black p-2 mb-2 border-b border-gray-300">Recipes</h2>
				<div class="px-2 py-4">
					@ListRecipes(list, availableRecipes)
				</div>
			</div>
			<div class="rounded-xl border border-gray-100 shadow-lg py-4 px-2">
				<h2 class="font-semibold text-lg text-black p-2 mb-2 border-b border-gray-300">Items</h2>
				<div class="px-2 py-4">
					@ListItems(list, availableItems)
				</div>
			</div>
			<h2 class="text-xl border-b border-gray-300 col-span-full font-bold px-4">Shops</h2>
			for _, shop := range list.Shops {
				<div class="rounded-xl border border-gray-100 shadow-lg py-4 px-2">
					<h2 class="font-semibold text-lg text-black p-2 mb-2 border-b border-gray-300">{ shop.Name }</h2>
					<div class="py-4 px-2">
						<div class="flex flex-wrap gap-1">
							for _, i := range shop.Items {
								@ItemButton(list.ID, i)
							}
						</div>
					</div>
				</div>
			}
			<div class="flex p-8 col-span-full">
				<button type="submit" class="bg-red-600 py-2 px-4 text-white text-lg rounded-full shadow-lg mx-auto" hx-delete={ "/lists/" + list.ID } hx-target="body" hx-swap="outerHTML" hx-push-url="true">
					Delete list
				</button>
			</div>
		</section>
	}
}

templ ListsPage(path string, lists []ListSummary) {
	@common.Layout("Lists", path) {
		<section class="grid grid-cols-1 gap-4 px-4 pt-4 pb-28 sm:grid-cols-3">
			for _, s := range lists {
				<a href={ templ.SafeURL("/lists/" + s.ID) } class="rounded-xl border border-gray-100 shadow-lg py-4 px-2">
					<h2 class="font-semibold text-lg text-black p-2">{ s.CreatedDate.Format("02 Jan 06 15:04") }</h2>
				</a>
			}
		</section>
		<button
			value="+ New list"
			hx-post="/lists"
			hx-target="body"
			hx-push-url="true"
			hx-swap="outerHTML"
			class="absolute bg-white bottom-24 right-4 border border-gray-300 rounded-full shadow-lg py-2 px-3 text-gray-500"
		>+ New list</button>
	}
}