From 994389b8efef5130bad54006ea904621ca8fe5eb Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sat, 16 Mar 2024 14:41:36 +0000
Subject: [PATCH] stability fixes, better template support

---
 .gitignore                                   |  9 ++++---
 routes/items.go                              |  2 +-
 templates/components/add-category.html       |  8 ++++++
 templates/components/add-packing-stage.html  |  7 +++++
 templates/components/edit-category.html      |  4 +--
 templates/components/edit-packing-stage.html |  4 +--
 templates/items/entity-add-success.html      |  2 ++
 templates/items/entity-add.html              | 24 +++++++----------
 templates/items/entity-edit.html             | 28 +++++++++-----------
 9 files changed, 50 insertions(+), 38 deletions(-)
 create mode 100644 templates/components/add-category.html
 create mode 100644 templates/components/add-packing-stage.html
 create mode 100644 templates/items/entity-add-success.html

diff --git a/.gitignore b/.gitignore
index 68779bc..6a6b1e6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,10 @@
 app
+mikayla-moving
+
+tmp
+output.css
+
 *.swp
 *.test
 *.out
-tmp
-output.css
-example.db
+*.db
diff --git a/routes/items.go b/routes/items.go
index e86174d..c426f1c 100644
--- a/routes/items.go
+++ b/routes/items.go
@@ -202,7 +202,7 @@ func Post(r *http.Request) *web.Response {
 	return web.HTML(
 		http.StatusOK,
 		html,
-		"items/entity-row.html",
+		"items/entity-add-success.html",
 		item,
 		nil,
 	)
diff --git a/templates/components/add-category.html b/templates/components/add-category.html
new file mode 100644
index 0000000..dfc29c9
--- /dev/null
+++ b/templates/components/add-category.html
@@ -0,0 +1,8 @@
+<select class="data-input-NEW_ITEM_ROW" id="category-selector-NEW_ITEM_ROW" data-include-edit="NEW_ITEM_ROW" name="category">
+    <option value="0">Bedroom</option>
+    <option value="1">Bathroom</option>
+    <option value="2">Kitchen</option>
+    <option value="3">Office</option>
+    <option value="4">Living Room</option>
+    <option value="5">Other</option>
+  </select>
diff --git a/templates/components/add-packing-stage.html b/templates/components/add-packing-stage.html
new file mode 100644
index 0000000..c93db57
--- /dev/null
+++ b/templates/components/add-packing-stage.html
@@ -0,0 +1,7 @@
+<select class="data-input-NEW_ITEM_ROW" id="packing-stage-selector-NEW_ITEM_ROW" data-include-edit="NEW_ITEM_ROW" name="stage">
+    <option value="0">Essentials</option>
+    <option value="1">Stage One</option>
+    <option value="2">Stage Two</option>
+    <option value="3">Stage Three</option>
+    <option value="4">Determine Later</option>
+  </select>
diff --git a/templates/components/edit-category.html b/templates/components/edit-category.html
index 9a594f5..11b293b 100644
--- a/templates/components/edit-category.html
+++ b/templates/components/edit-category.html
@@ -1,8 +1,8 @@
-<select class="category-selector" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
+<select class="data-input-{{.ID}}" id="category-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
     <option value="0">Bedroom</option>
     <option value="1">Bathroom</option>
     <option value="2">Kitchen</option>
     <option value="3">Office</option>
     <option value="4">Living Room</option>
     <option value="5">Other</option>
-</select>
+  </select>
diff --git a/templates/components/edit-packing-stage.html b/templates/components/edit-packing-stage.html
index fda9f08..3088d46 100644
--- a/templates/components/edit-packing-stage.html
+++ b/templates/components/edit-packing-stage.html
@@ -1,7 +1,7 @@
-<select  class="packing-stage-selector" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
+<select class="data-input-{{.ID}}" id="packing-stage-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
     <option value="0">Essentials</option>
     <option value="1">Stage One</option>
     <option value="2">Stage Two</option>
     <option value="3">Stage Three</option>
     <option value="4">Determine Later</option>
-</select>
+  </select>
diff --git a/templates/items/entity-add-success.html b/templates/items/entity-add-success.html
new file mode 100644
index 0000000..f0b3c0f
--- /dev/null
+++ b/templates/items/entity-add-success.html
@@ -0,0 +1,2 @@
+{{ template "items/entity-row.html" . }}
+{{ template "items/entity-add.html" }}
diff --git a/templates/items/entity-add.html b/templates/items/entity-add.html
index 916ed23..3694eda 100644
--- a/templates/items/entity-add.html
+++ b/templates/items/entity-add.html
@@ -5,6 +5,7 @@
     </td>
     <td class="whitespace-nowrap px-6 py-4">
       <input
+        placeholder="Item name"
         type="text"
         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         data-include-edit="NEW_ITEM_ROW"
@@ -12,24 +13,15 @@
       />
     </td>
     <td class="whitespace-nowrap px-6 py-4">
-      <input
-        type="text"
-        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-        data-include-edit="NEW_ITEM_ROW"
-        name="stage"
-      />
-    </td>
-    <td class="whitespace-nowrap px-6 py-4">
-      <input
-        type="text"
-        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-        data-include-edit="NEW_ITEM_ROW"
-        name="category"
-      />
+      {{ template "components/add-packing-stage.html" }}
+    </td>
+    <td class="whitespace-nowrap px-6 py-4">
+      {{ template "components/add-category.html" }}
     </td>
     <td class="whitespace-nowrap px-6 py-4">
       <input
         type="text"
+        placeholder="Short description"
         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         data-include-edit="NEW_ITEM_ROW"
         name="description"
@@ -38,6 +30,7 @@
     <td class="whitespace-nowrap px-6 py-4">
       <input
         type="text"
+        placeholder="Notes"
         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
         data-include-edit="NEW_ITEM_ROW"
         name="notes"
@@ -45,11 +38,12 @@
 
     <td class="whitespace-nowrap px-1 py-1">
       <a
+        id="add-new-item-button-NEW_ITEM_ROW"
         hx-post="/items/add"
         hx-target="#datarow-NEW_ITEM_ROW"
         hx-swap="outerHTML"
         hx-indicator="#processing"
-        hx-include="input[data-include-edit='NEW_ITEM_ROW']"
+        hx-include="[data-include-edit='NEW_ITEM_ROW']"
         class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
         href=""
         >Add</a
diff --git a/templates/items/entity-edit.html b/templates/items/entity-edit.html
index 14e3d17..3f8b9ca 100644
--- a/templates/items/entity-edit.html
+++ b/templates/items/entity-edit.html
@@ -13,23 +13,10 @@
     />
   </td>
   <td class="whitespace-nowrap px-6 py-4">
-    <select class="data-input-{{.ID}}" id="packing-stage-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
-      <option value="0">Essentials</option>
-      <option value="1">Stage One</option>
-      <option value="2">Stage Two</option>
-      <option value="3">Stage Three</option>
-      <option value="4">Determine Later</option>
-    </select>
+    {{ template "components/edit-packing-stage.html" . }}
   </td>
   <td class="whitespace-nowrap px-6 py-4">
-    <select class="data-input-{{.ID}}" id="category-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
-      <option value="0">Bedroom</option>
-      <option value="1">Bathroom</option>
-      <option value="2">Kitchen</option>
-      <option value="3">Office</option>
-      <option value="4">Living Room</option>
-      <option value="5">Other</option>
-    </select>
+    {{ template "components/edit-category.html" . }}
   </td>
   <td class="whitespace-nowrap px-6 py-4">
     <input
@@ -51,6 +38,7 @@
 
   <td class="whitespace-nowrap px-1 py-1">
     <a
+      id="datarow-{{.ID}}-save"
       hx-put="/items/save/{{.ID}}"
       hx-target="#datarow-{{.ID}}"
       hx-swap="outerHTML"
@@ -73,6 +61,16 @@
     >
   </td>
   <script>
+    window.addEventListener("keydown", (e) => {
+      /** @typedef KeyboardEvent */
+      const target = e.target;
+
+      if (e.target.key == "Enter") {
+        const a = document.getElementById("datarow-{{.ID}}-save");
+        void a.click();
+      }
+    })
+
     document.getElementById("category-selector-{{.ID}}").onchange = (e) => {
       console.log(e.target.value);
     }