forms almost done

htmx-alpine-pt2/main.go

@@ -18,6 +18,7 @@ type TodoList struct {
 	ID        int
 	Name      string
 	Completed bool
+	Error     string
 
 	ui.CRUDActions
 }
@@ -89,7 +90,7 @@ func main() {
 	mux.HandleFunc("/todo", func(w http.ResponseWriter, r *http.Request) {
 		err := r.ParseForm()
 		if err != nil {
-			http.Error(w, "bad request", http.StatusBadRequest)
+			http.Error(w, fmt.Sprintf("error loading template, err: %v", err), http.StatusInternalServerError)
 			return
 		}
 
@@ -99,12 +100,12 @@ func main() {
 		if name == "" {
 			w.Header().Set("HX-Retarget", "#create-todo-form")
 			w.Header().Set("HX-Reswap", "outerHTML")
-			err := h.RenderW(w, "fragments/todo-row-form", hrender.H{
+			err := h.RenderW(w, "fragments/todo-new-form", hrender.H{
 				"Name":  name,
 				"Error": "El nombre es obligatorio",
 			})
 			if err != nil {
-				http.Error(w, "error loading template", http.StatusInternalServerError)
+				http.Error(w, fmt.Sprintf("error loading template, err: %v", err), http.StatusInternalServerError)
 			}
 			return
 		}
@@ -133,7 +134,7 @@ func main() {
 			"Completed": false,
 		})
 		if err != nil {
-			http.Error(w, "error loading template", http.StatusInternalServerError)
+			http.Error(w, fmt.Sprintf("error loading template, err: %v", err), http.StatusInternalServerError)
 		}
 	}, "POST")
 
@@ -141,7 +142,7 @@ func main() {
 		idStr := r.PathValue("id")
 		id, err := strconv.Atoi(idStr)
 		if err != nil {
-			http.Error(w, "invalid id", http.StatusBadRequest)
+			http.Error(w, fmt.Sprintf("error loading template, err: %v", err), http.StatusInternalServerError)
 			return
 		}
 
@@ -155,7 +156,7 @@ func main() {
 		}
 
 		if foundItem == nil {
-			http.Error(w, "item not found", http.StatusNotFound)
+			http.Error(w, fmt.Sprintf("error loading template, err: %v", err), http.StatusInternalServerError)
 			return
 		}
 
@@ -184,6 +185,20 @@ func main() {
 		}
 
 		newName := r.FormValue("name")
+		if newName == "" {
+			w.Header().Set("HX-Retarget", fmt.Sprintf("#todo-edit-form-%d", id))
+			w.Header().Set("HX-Reswap", "outerHTML")
+			err := h.RenderW(w, "fragments/todo-edit-form", hrender.H{
+				"ID":    id,
+				"Name":  newName,
+				"Error": "El nombre es obligatorio",
+			})
+			if err != nil {
+				http.Error(w, "error loading template", http.StatusInternalServerError)
+			}
+			return
+		}
+
 		if newName == "some error" {
 			log.Println("error triggered")
 			http.Error(w, "bad request", http.StatusBadRequest)

htmx-alpine-pt2/templates/fragments/todo-edit-form.html

@@ -0,0 +1,31 @@
+<form
+  id="todo-edit-form-{{.ID}}"
+  class="flex w-full gap-2 items-start"
+  hx-put="/todo/{{.ID}}"
+  hx-target="closest li"
+  hx-swap="outerHTML"
+  hx-target-error="this"
+  x-data="{ 
+    hasError: {{ if .Error }}true{{ else }}false{{ end }} 
+  }"
+  @edit-cancelled="hasError = false"
+>
+  <div class="flex-grow form-control space-y-1.5">
+    <input
+      type="text"
+      name="name"
+      class="input input-sm input-bordered w-full"
+      :class="{ 'input-error': hasError }"
+      x-model="form.name"
+      x-init="$el.focus()"
+      @input="hasError = false"
+    />
+    {{ if .Error }}
+    <p class="text-error text-xs" x-show="hasError">{{ .Error }}</p>
+    {{ end }}
+  </div>
+  <button type="button" class="btn btn-sm btn-ghost" @click="cancelEdit()">
+    Cancelar
+  </button>
+  <button type="submit" class="btn btn-sm btn-primary">Guardar</button>
+</form>

htmx-alpine-pt2/templates/fragments/todo-row.html

@@ -9,6 +9,7 @@
     cancelEdit() {
       this.isEditing = false;
       this.form.name = '{{ .Name }}';
+      this.$dispatch('edit-cancelled');
     }
   }"
 >
@@ -49,24 +50,7 @@
   <div
     class="card-body p-4 flex-row items-center justify-between gap-4"
     x-show="isEditing"
-    style="display: none"
   >
-    <form
+    {{ template "fragments/todo-edit-form" . }}
-      class="flex w-full gap-2"
-      hx-put="/todo/{{.ID}}"
-      hx-target="closest li"
-      hx-swap="outerHTML"
-    >
-      <input
-        type="text"
-        name="name"
-        class="input input-sm input-bordered flex-grow"
-        x-model="form.name"
-      />
-      <button type="button" class="btn btn-sm btn-ghost" @click="cancelEdit()">
-        Cancelar
-      </button>
-      <button type="submit" class="btn btn-sm btn-primary">Guardar</button>
-    </form>
   </div>
 </li>

htmx-alpine-pt2/templates/fragments/todo-widget.html

@@ -13,8 +13,8 @@
       </button>
     </div>
 
-    <div x-show="creating" class="w-full pb-4">
+    <div x-show="creating" class="w-full pb-2">
-      {{ template "fragments/todo-row-form" .}}
+      {{ template "fragments/todo-new-form" .}}
     </div>
 
     <ol id="todo-list-body" class="space-y-3">