set up better ux for using categories

templates/box-items/box-item-list.html

@@ -1,3 +1,23 @@
-<tr id="box-item-list">
-    <td>Hooray!</td>
+<tr class="box-item-list">
+    <td>
+        <table>
+            <thead>
+                <tr>
+                    <th scope="col" class="px-6 py-4"></th>
+                    <th scope="col" class="px-6 py-4">#</th>
+                    <th scope="col" class="px-6 py-4">Name</th>
+                    <th scope="col" class="px-6 py-4">Stage</th>
+                    <th scope="col" class="px-6 py-4">Category</th>
+                    <th scope="col" class="px-6 py-4">Description</th>
+                    <th scope="col" class="px-6 py-4">Notes</th>
+                    <th scope="col" class="px-6 py-4"></th>
+                </tr>
+            </thead>
+            <tbody id="table-body">
+                {{range .}}
+                    {{ template "box-items/box-item-row.html" . }}
+                {{end}}
+            </tbody>
+        </table>
+    </td>
 </tr>

templates/box-items/box-item-row.html

@@ -0,0 +1,10 @@
+<tr class="box-item-row border-b dark:border-neutral-500 hover:bg-slate-300 hover:bg-opacity-20">
+    <td class="whitespace-nowrap px-6 py-4">{{ .ID }}</td>
+    <td class="whitespace-nowrap px-6 py-4">{{ .Name }}</td>
+
+    {{ template "components/parsed-packing-stage.html" .Stage }}
+    {{ template "components/parsed-category.html" .Category }}
+
+    <td class="whitespace-nowrap px-6 py-4">{{ .Description }}</td>
+    <td class="whitespace-nowrap px-6 py-4">{{ .Notes }}</td>
+</tr>

templates/boxes/box-row.html

@@ -3,6 +3,7 @@
       <button
           hx-get="/box-items?boxid={{ .ID }}"
           hx-target="#boxrow-{{ .ID }}"
+          hx-swap="afterend"
           class="inline-flex items-center h-8 px-4 m-2 text-sm text-stone-100 transition-colors duration-150 bg-stone-700 rounded-lg focus:shadow-outline hover:bg-stone-800"
       >
         &gt;
@@ -11,9 +12,9 @@
     <td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
     <td class="whitespace-nowrap px-6 py-4">{{.Name}}</td>
 
-    {{ template "components/parsed-packing-stage.html" .Stage }}
+    {{ template "components/parsed-packing-stage.html" .ID }}
 
-    {{ template "components/parsed-category.html" .Category }}
+    {{ template "components/parsed-category.html" .ID }}
 
     {{ if .Description }}
       <td class="whitespace-nowrap px-6 py-4">{{.Description}}</td>

templates/components/edit-category.html

@@ -0,0 +1,8 @@
+<select class="category-selector" 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>

templates/components/edit-packing-stage.html

@@ -0,0 +1,7 @@
+<select  class="packing-stage-selector" 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>

templates/index.html

@@ -18,6 +18,7 @@
             hx-get="/items"
             hx-target="#home-page-container"
             hx-swap="innerHTML"
+            onclick="handleLabelUpdate"
             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"
           >
             Items
@@ -26,6 +27,7 @@
             hx-get="/boxes"
             hx-target="#home-page-container"
             hx-swap="innerHTML"
+            onclick="handleLabelUpdate"
             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"
           >
             Boxes
@@ -34,11 +36,18 @@
         </nav>
 
         <br/>
-        <span class="text-xl">Items</span>
+        <span id="page-label" class="text-xl">Items</span>
         <div id="home-page-container">
           {{ template "items/entity-list.html" . }}
         </div>
       </div>
     </main>
+
+    <script>
+      function handleLabelUpdate() {
+        const prev = document.getElementById('page-label').innerText;
+        document.getElementById('page-label').innerText = prev === 'Items' ? 'Boxes' : 'Items';
+      }
+    </script>
   </body>
 </html>

templates/items/entity-edit.html

@@ -1,39 +1,40 @@
 <tr id="datarow-{{.ID}}" class="datarow border-b dark:border-neutral-500">
   <td class="whitespace-nowrap px-6 py-4">
-    <input hidden disabled type="text" name="id" value="{{.ID}}" data-include-edit="{{.ID}}" />
+    <input class="data-input-{{.ID}}" hidden disabled type="text" name="id" value="{{.ID}}" data-include-edit="{{.ID}}" />
     <span>{{.ID}}</span>
   </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"
+      class="data-input-{{.ID}} 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="{{.ID}}"
       name="name"
       value="{{.Name}}"
     />
   </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="{{.ID}}"
-      name="stage"
-      value="{{.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>
+  </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>
   </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="{{.ID}}"
-      name="category"
-      value="{{.Category}}"
-    />
-  </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"
+      class="data-input-{{.ID}} 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="{{.ID}}"
       name="description"
       value="{{.Description}}"
@@ -42,7 +43,7 @@
   <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"
+      class="data-input-{{.ID}} 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="{{.ID}}"
       name="notes"
       value="{{.Notes}}"
@@ -54,7 +55,7 @@
       hx-target="#datarow-{{.ID}}"
       hx-swap="outerHTML"
       hx-indicator="#processing"
-      hx-include="input[data-include-edit='{{.ID}}']"
+      hx-include=".data-input-{{.ID}}"
       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=""
       >Save</a
@@ -71,4 +72,13 @@
       >Cancel</a
     >
   </td>
+  <script>
+    document.getElementById("category-selector-{{.ID}}").onchange = (e) => {
+      console.log(e.target.value);
+    }
+
+    document.getElementById("packing-stage-selector-{{.ID}}").onchange = (e) => {
+      console.log(e.target.value);
+    }
+  </script>
 </tr>