demo: ingredient interface using templ

examples/simple-crud/Makefile

@@ -1,5 +1,4 @@
 dev:
-	npx tailwindcss -i ./tailwind.css -o ./static/tailwind.min.css --watch &
 	air -- -debug
 
 prepare-db: backup

examples/simple-crud/store/queries/ingredient.sql

@@ -4,6 +4,13 @@ SELECT * FROM ingredient WHERE id = ?;
 -- name: GetIngredients :many
 SELECT * FROM ingredient;
 
+-- name: SearchIngredients :many
+SELECT * FROM ingredient
+WHERE name LIKE ?
+ORDER BY name ASC
+LIMIT ?
+OFFSET ?;
+
 -- name: GetIngredientsOfRecipe :many
 SELECT quantity, unit, sqlc.embed(ingredient) FROM ingredient
 JOIN dosing ON ingredient.id = dosing.ingredient_id
@@ -15,7 +22,21 @@ INSERT INTO ingredient (id, name, description) VALUES (?, ?, ?) RETURNING *;
 -- name: UpdateIngredient :one
 UPDATE ingredient SET 
   name=COALESCE(sqlc.arg(name), name),
+  description=COALESCE(sqlc.arg(description), description),
   category=COALESCE(sqlc.narg(category), category),
-  default_unit=COALESCE(sqlc.narg(default_unit), default_unit)
+  default_unit=COALESCE(sqlc.narg(default_unit), default_unit),
+  available_all_year=COALESCE(sqlc.arg(available_all_year), available_all_year),
+  available_jan=COALESCE(sqlc.arg(available_jan), available_jan),
+  available_feb=COALESCE(sqlc.arg(available_feb), available_feb),
+  available_mar=COALESCE(sqlc.arg(available_mar), available_mar),
+  available_apr=COALESCE(sqlc.arg(available_apr), available_apr),
+  available_may=COALESCE(sqlc.arg(available_may), available_may),
+  available_jun=COALESCE(sqlc.arg(available_jun), available_jun),
+  available_jul=COALESCE(sqlc.arg(available_jul), available_jul),
+  available_aug=COALESCE(sqlc.arg(available_aug), available_aug),
+  available_sep=COALESCE(sqlc.arg(available_sep), available_sep),
+  available_oct=COALESCE(sqlc.arg(available_oct), available_oct),
+  available_nov=COALESCE(sqlc.arg(available_nov), available_nov),
+  available_dec=COALESCE(sqlc.arg(available_dec), available_dec)
 WHERE id = @id
 RETURNING *;

examples/simple-crud/tailwind.go

@@ -0,0 +1,3 @@
+package main
+
+//go:generate npx tailwindcss -i ./tailwind.css -o ./static/tailwind.min.css --minify

examples/simple-crud/templa/components/searchForm.templ

@@ -0,0 +1,44 @@
+package components
+
+import "fmt"
+
+type SearchParams struct {
+	URL     string `json:"url"`
+	Name    string `json:"name"`
+	Page    int    `json:"page"`
+	PerPage int    `json:"per_page"`
+}
+
+templ SearchBox(parameters SearchParams) {
+	// method="GET"
+	// if (parameters.URL != "") {
+	// 	action={ templ.URL(parameters.URL) }
+	// }
+	<form
+ 		class="flex flex-row gap-4 items-center my-4 md:my-8"
+ 		method="GET"
+ 		action="/admin/ingredients"
+ 		hx-push-url="true"
+ 		hx-boost="true"
+ 		hx-trigger="input changed delay:100ms, search"
+ 		hx-target="#page"
+ 		hx-select="#page"
+ 		hx-swap="outerHTML"
+	>
+		<label class="label" for="name">
+			Search
+			<input class="input w-full" type="text" name="name" value={ parameters.Name }/>
+		</label>
+		<label class="label" for="page">
+			Page
+			<input class="w-20 input" type="number" name="page" value={ fmt.Sprintf("%d", parameters.Page) }/>
+		</label>
+		<label class="label" for="perPage">
+			Per Page
+			<input class="w-20 input" type="number" name="perPage" value={ fmt.Sprintf("%d", parameters.PerPage) }/>
+		</label>
+		<noscript>
+			<input class="input" type="submit" value="Save"/>
+		</noscript>
+	</form>
+}

examples/simple-crud/templa/ingredient.admin.templ

@@ -5,18 +5,20 @@ import (
 	"simple-crud/templa/components"
 )
 
-templ IngredientList(ingredients []store.Ingredient) {
+templ IngredientList(ingredients []store.Ingredient, parameters components.SearchParams) {
 	@htmlPage("Ingredients") {
 		<h1>Ingredients</h1>
-		<div class="border rounded border-gray-200 shadow p-8">
+		<hr/>
+		@components.SearchBox(parameters)
+		<div class="border rounded border-gray-200 shadow p-4 md:p-8">
 			<table class="table ">
 				<thead>
 					<tr>
-						<th class="border-b border-slate-100 p-4 pr-8 text-slate-700">Name</th>
-						<th class="border-b border-slate-100 p-4 pr-8 text-slate-700">Category</th>
-						<th class="border-b border-slate-100 p-4 pr-8 text-slate-700">Description</th>
-						<th class="border-b border-slate-100 p-4 pr-8 text-slate-700">Default Unit</th>
-						<th class="border-b border-slate-100 p-4 pr-8 text-slate-700">Available</th>
+						<th class="border-b border-slate-100 p-4 py-2 pr-8 text-slate-700">Name</th>
+						<th class="border-b border-slate-100 p-4 py-2 pr-8 text-slate-700">Category</th>
+						<th class="border-b border-slate-100 p-4 py-2 pr-8 text-slate-700">Description</th>
+						<th class="border-b border-slate-100 p-4 py-2 pr-8 text-slate-700">Default Unit</th>
+						<th class="border-b border-slate-100 p-4 py-2 pr-8 text-slate-700">Available</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -55,23 +57,35 @@ templ IngredientEdit(ingredient store.Ingredient) {
 	@htmlPage("Ingredient - "+ingredient.Name) {
 		<h1>Edit Ingredient</h1>
 		<form
- 			action={ templ.URL("/admin/ingredients/edit?id=" + ingredient.ID) }
+ 			action={ templ.URL("/admin/ingredients/one?id=" + ingredient.ID) }
  			method="PUT"
  			class="form"
  			hx-boost="true"
- 			hx-trigger="change"
+ 			hx-trigger="change delay:500ms"
  			hx-target="#page"
  			hx-select="#page"
 		>
 			<label class="label" for="name">Name</label>
 			<input class="input" type="text" name="name" value={ ingredient.Name }/>
-			<label class="label" for="defaultUnit">Default Unit</label>
-			@components.UnitSelector(ingredient.DefaultUnit)
+			<label class="label" for="description">Description</label>
+			<textarea class="input" name="description">{ ingredient.Description }</textarea>
 			<label class="label" for="category">Category</label>
 			@components.CategorySelector(ingredient.Category)
-			// <label class="label" for="available_all_year">Available All Year</label>
-			// <input class="input" type="checkbox" name="available_all_year" value="true" checked={ strconv.FormatBool(ingredient.AvailableAllYear) }/>
-			<input class="input" type="submit" value="Save"/>
+			<label class="label" for="defaultUnit">Default Unit</label>
+			@components.UnitSelector(ingredient.DefaultUnit)
+			<label class="label p-1 flex flex-row items-center gap-4">
+				<input
+ 					class="mr-2 md:mr-4 "
+ 					type="checkbox"
+ 					name="availableAllYear"
+ 					if ingredient.AvailableAllYear {
+						checked
+					}
+				/> Available All Year
+			</label>
+			<noscript>
+				<input class="input" type="submit" value="Save"/>
+			</noscript>
 		</form>
 	}
 }

examples/simple-crud/templa/navbar.admin.templ

@@ -2,10 +2,11 @@ package templa
 
 templ AdminNavbar() {
 	<nav
- 		class="hidden w-64 space-y-6 bg-gray-800 px-4 py-8 text-gray-400 md:block"
+ 		class="hidden w-64 space-y-6 bg-gray-800 px-4 py-8 text-gray-400 md:block shadow"
  		hx-boost="true"
  		hx-target="#page"
  		hx-select="#page"
+ 		hx-swap="outerHTML"
 	>
 		<h1 class="mb-4 text-center">
 			<a

examples/simple-crud/templa/scripts.templ

@@ -20,19 +20,18 @@ templ Scripts() {
     errDiv.classList.remove("flex");
   }
 
-  document.body.addEventListener("ingredient-updated", function(evt){
+  document.body.addEventListener("ingredient-updated", function(evt) {
     Toastify({
-  text: "Updated Ingredient",
-  duration: 3000,
-  destination: "https://github.com/apvarun/toastify-js",
-  newWindow: true,
-  close: true,
-  stopOnFocus: true, // Prevents dismissing of toast on hover
-  style: {
-    background: "linear-gradient(to right, #00b09b, #96c93d)",
-  },
-  onClick: function(){} // Callback after click
-}).showToast();
+      text: "Updated Ingredient",
+      duration: 3000,
+      destination: "https://github.com/apvarun/toastify-js",
+      newWindow: true,
+      close: true,
+      stopOnFocus: true, // Prevents dismissing of toast on hover
+      style: {
+        background: "linear-gradient(to right, #00b09b, #96c93d)",
+      },
+    }).showToast();
   })
 
 </script>

examples/simple-crud/templates/layouts/admin.layout.html

@@ -13,6 +13,7 @@
         hx-boost="true"
         hx-target="#page"
         hx-select="#page"
+        hx-swap="outerHTML"
       >
         <h1 class="mb-4 text-center">
           <a

examples/simple-crud/templates/partials/navbar.partial.html

@@ -24,7 +24,7 @@
         placeholder="orange, crème brulée..."
         hx-get="/search"
         hx-push-url="true"
-        hx-trigger="keyup changed delay:100ms"
+        hx-trigger="keyup changed delay:100ms, search"
         hx-target="#page"
         hx-select="#page"
         hx-swap="outerHTML"

examples/simple-crud/templates/partials/recipes/recipe-card.partial.html

@@ -1,9 +1,9 @@
 <div
-  class="h-full w-full rounded-lg border border-gray-200 p-4 leading-normal
+  class="h-full w-full rounded-lg border border-gray-200 leading-normal
   transition hover:cursor-pointer hover:border-gray-300 hover:bg-gray-50 hover:shadow-md"
 >
   <a
-    class="flex h-full w-full flex-col"
+    class="flex h-full w-full flex-col p-4"
     href="/recipes/one?id={{ .ID }}"
     hx-boost="true"
     hx-target="#page"