search frontend

internal/server/get.go

@@ -14,6 +14,12 @@ func (h *Server) orders(r *http.Request) (any, int, error) {
 	return data, http.StatusOK, err
 }
 
+func (h *Server) ordersSearch(r *http.Request) (any, int, error) {
+	data, err := h.s.GetOrders()
+	data = data[:3]
+	return data, http.StatusOK, err
+}
+
 func (h *Server) cakes(r *http.Request) (any, int, error) {
 	data, err := h.s.GetCakes()
 	return data, http.StatusOK, err

internal/server/server.go

@@ -16,8 +16,9 @@ type Server struct {
 }
 
 type route struct {
-	function fetcher
-	template string
+	function      fetcher
+	template      string
+	templateEntry string
 }
 
 func (h *Server) Close() {
@@ -30,7 +31,7 @@ func (h *Server) loadHandler() {
 	mux := http.NewServeMux()
 
 	for i, e := range h.routes {
-		mux.HandleFunc(i, h.render(e.function, e.template))
+		mux.HandleFunc(i, h.render(e.function, e.template, e.templateEntry))
 	}
 
 	mux.HandleFunc("GET /", h.redirect("/orders", http.StatusSeeOther))
@@ -45,12 +46,13 @@ func New(store *store.Store) *Server {
 	var server Server
 
 	server.routes = map[string]route{
-		"GET /order/":  {server.order, "order"},
-		"GET /orders":  {server.orders, "orders"},
-		"GET /cake/":   {server.cake, "cake"},
-		"GET /cakes":   {server.cakes, "cakes"},
-		"POST /order/": {server.postOrder, "confirmation"},
-		"POST /cake/":  {server.postCake, "confirmation"},
+		"GET /order/":         {server.order, "order", "layout"},
+		"GET /orders":         {server.orders, "orders", "layout"},
+		"GET /orders/search/": {server.ordersSearch, "orders", "orders-table"},
+		"GET /cake/":          {server.cake, "cake", "layout"},
+		"GET /cakes":          {server.cakes, "cakes", "layout"},
+		"POST /order/":        {server.postOrder, "confirmation", "layout"},
+		"POST /cake/":         {server.postCake, "confirmation", "layout"},
 	}
 
 	server.loadTemplates()

internal/server/template.go

@@ -26,14 +26,14 @@ func (h *Server) loadTemplates() {
 	}
 }
 
-func (s *Server) render(fetch fetcher, templateName string) http.HandlerFunc {
+func (s *Server) render(fetch fetcher, templateFile string, templateEntry string) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		data, code, err := fetch(r)
 		if err != nil {
 			logging.ErrorPage(err, code).ServeHTTP(w, r)
 			return
 		}
-		err = s.tmpl[templateName].ExecuteTemplate(w, "layout", data)
+		err = s.tmpl[templateFile].ExecuteTemplate(w, templateEntry, data)
 		if err != nil {
 			logging.ErrorPage(err, http.StatusInternalServerError).ServeHTTP(w, r)
 			return

internal/server/templates/cake.html

@@ -1,5 +1,5 @@
 {{define "title"}}
-Cake
+Cake {{.ID}}
 {{end}}
 {{define "main"}}
 <main>

internal/server/templates/order.html

@@ -1,5 +1,5 @@
 {{define "title"}}
-    Order
+    Order {{.Order.ID}}
 {{end}}
 {{define "main"}}
 <main>

internal/server/templates/orders.html

@@ -4,7 +4,30 @@
 {{end}}
 {{define "main"}}
 <main>
-    <table>
+    <div class="search-container">
+        <input
+            type="search"
+            name="q"
+            hx-get="/orders/search"
+            hx-trigger="keyup changed delay:500ms"
+            hx-target="#results-table"
+            hx-push-url="true"
+            placeholder="Search orders..."
+            >
+
+        <div class="htmx-indicator">
+            Searching...
+        </div>
+
+        <div id="results-table">
+            {{template "orders-table" .}}
+        </div>
+    </div>
+</main>
+{{end}}
+
+{{define "orders-table"}}
+    <table id="orders_table">
         <tr>
             <th></th>
             <th>Name</th>
@@ -30,5 +53,4 @@
         </tr>
         {{end}}
     </table>
-</main>
-{{end}}
+    {{end}}