forms almost done

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-new-form.html

@@ -7,7 +7,7 @@
   hx-target-error="this"
   x-data="{ 
     hasError: {{ if .Error }}true{{ else }}false{{ end }} 
-  }"
+    }"
   @htmx:after-request="
     if($event.detail.successful && $event.detail.target.id === 'todo-list-body') {
         $el.reset(); 

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
-      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>
+    {{ template "fragments/todo-edit-form" . }}
   </div>
-</li>
+</li>

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

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