reorganize html

templates/boxes/box-list.html

@@ -1,35 +1,25 @@
-<div id="box-list">
+<div id="boxes/box-list">
     <div id="processing" class="htmx-indicator">Processing...</div>
     <div class="flex flex-col">
       <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
           <div class="overflow-hidden">
-            <!-- <div class="flex justify-end">
-              <button
-                hx-get="/company/add"
-                hx-target="#table-body"
-                hx-swap="outerHTML"
-                hx-indicator="#processing"
-                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
-              </button>
-            </div> -->
             <table class="min-w-full text-left text-sm font-light">
               <thead class="border-b font-medium dark:border-neutral-500">
                 <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 "entity-row.html". }}
+                  {{ template "boxes/box-row.html" . }}
                 {{end}}
               </tbody>
             </table>

templates/boxes/box-row.html

@@ -0,0 +1,38 @@
+<tr id="boxrow-{{.ID}}" class="border-b dark:border-neutral-500 hover:bg-slate-300 hover:bg-opacity-20">
+    <td
+        hx-get="/box-items?box_id={{ .ID }}"
+        hx-target="#boxrow-{{ .ID }}"
+        hx-swap="afterend"
+        class="whitespace-nowrap px-6 py-4 relative top-0 -left-12 inline-flex items-center h-8 m-2 text-sm text-stone-100 transition-colors duration-150 bg-stone-700 rounded-lg focus:shadow-outline hover:bg-stone-800"
+    >
+        &lt;
+    </td>
+    <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 }}
+
+    {{ if .Description }}
+      <td class="whitespace-nowrap px-6 py-4">{{.Description}}</td>
+    {{ else }}
+      <td class="whitespace-nowrap px-6 py-4">...</td>
+    {{ end }}
+
+    {{ if .Notes }}
+      <td class="whitespace-nowrap px-6 py-4">{{.Notes}}</td>
+    {{ else }}
+      <td class="whitespace-nowrap px-6 py-4">...</td>
+    {{ end }}
+
+    <td class="whitespace-nowrap px-6 py-4">
+      <button
+        hx-get="/items/edit/{{ .ID }}"
+        hx-target="#boxrow-{{ .ID }}"
+        hx-swap="outerHTML"
+        class="inline-flex items-center h-8 px-4 m-2 text-sm text-yellow-100 transition-colors duration-150 bg-yellow-700 rounded-lg focus:shadow-outline hover:bg-yellow-800"
+      >
+        Edit
+      </button>
+  </tr>

templates/companies.html

@@ -1,38 +0,0 @@
-<div id="companies">
-  <div id="processing" class="htmx-indicator">Processing...</div>
-  <div class="flex flex-col">
-    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
-        <div class="overflow-hidden">
-          <div class="flex justify-end">
-            <button
-              hx-get="/company/add"
-              hx-target="#table-body"
-              hx-swap="outerHTML"
-              hx-indicator="#processing"
-              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
-            </button>
-          </div>
-          <table class="min-w-full text-left text-sm font-light">
-            <thead class="border-b font-medium dark:border-neutral-500">
-              <tr>
-                <th scope="col" class="px-6 py-4">#</th>
-                <th scope="col" class="px-6 py-4">Company</th>
-                <th scope="col" class="px-6 py-4">Contact</th>
-                <th scope="col" class="px-6 py-4">Country</th>
-              </tr>
-            </thead>
-            <tbody id="table-body">
-              {{range .}}
-                {{ template "row.html". }}
-              {{end}}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

templates/company-add.html

@@ -1,6 +0,0 @@
-<tbody id="table-body">
-  {{ template "row-add.html" . }}
-	{{range .}}
-		{{ template "row.html". }}
-	{{end}}
-</tbody>

templates/index.html

@@ -36,7 +36,7 @@
         <br/>
         <span class="text-xl">Items</span>
         <div id="home-page-container">
-          {{ template "entity-list.html" . }}
+          {{ template "items/entity-list.html" . }}
         </div>
       </div>
     </main>

templates/items/entity-list.html

@@ -6,7 +6,7 @@
           <div class="overflow-hidden">
             <!-- <div class="flex justify-end">
               <button
-                hx-get="/item/add"
+                hx-get="/items/add"
                 hx-target="#table-body"
                 hx-swap="beforeend"
                 hx-indicator="#processing"
@@ -30,10 +30,10 @@
               </thead>
               <tbody id="table-body">
                 {{range .}}
-                  {{ template "entity-row.html" . }}
+                  {{ template "items/entity-row.html" . }}
                 {{end}}
 
-                {{ template "entity-add.html" . }}
+                {{ template "items/entity-add.html" . }}
               </tbody>
             </table>
           </div>

templates/items/entity-row.html

@@ -2,9 +2,9 @@
   <td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
   <td class="whitespace-nowrap px-6 py-4">{{.Name}}</td>
 
-  {{ template "parsed-packing-stage.html" .Stage }}
+  {{ template "components/parsed-packing-stage.html" .Stage }}
 
-  {{ template "parsed-category.html" .Category }}
+  {{ template "components/parsed-category.html" .Category }}
 
   {{ if .Description }}
     <td class="whitespace-nowrap px-6 py-4">{{.Description}}</td>
@@ -23,7 +23,7 @@
       hx-get="/items/edit/{{ .ID }}"
       hx-target="#datarow-{{ .ID }}"
       hx-swap="outerHTML"
-      class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-yellow-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
+      class="inline-flex items-center h-8 px-4 m-2 text-sm text-yellow-100 transition-colors duration-150 bg-yellow-700 rounded-lg focus:shadow-outline hover:bg-yellow-800"
     >
       Edit
     </button>

templates/row-add.html

@@ -1,51 +0,0 @@
-<tr id="datarow-add" class="border-b dark:border-neutral-500">
-  <td class="whitespace-nowrap px-6 py-4"></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-add=""
-      name="company"
-      value=""
-    />
-  </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-add=""
-      name="contact"
-      value=""
-    />
-  </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-add=""
-      name="country"
-      value=""
-    />
-  </td>
-  <td class="whitespace-nowrap px-1 py-1">
-    <a
-      hx-post="/company/"
-      hx-target="#companies"
-      hx-indicator="#processing"
-      hx-include="input[data-include-add]"
-      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
-    >
-  </td>
-  <td class="whitespace-nowrap px-1 py-1">
-    <a
-      hx-get="/company/"
-      hx-target="#companies"
-      hx-indicator="#processing"
-      class="inline-flex items-center h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800"
-      href=""
-      >Cancel</a
-    >
-  </td>
-</tr>

templates/row.html

@@ -1,29 +0,0 @@
-<tr id="datarow-{{.ID}}" class="border-b dark:border-neutral-500">
-  <td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
-  <td class="whitespace-nowrap px-6 py-4">{{.Company}}</td>
-  <td class="whitespace-nowrap px-6 py-4">{{.Contact}}</td>
-  <td class="whitespace-nowrap px-6 py-4">{{.Country}}</td>
-  <td class="whitespace-nowrap px-1 py-1">
-    <a
-      hx-get="/company/edit/{{.ID}}"
-      hx-target="#datarow-{{.ID}}"
-      hx-swap="outerHTML"
-      hx-indicator="#processing"
-      class="hover:underline text-blue-700"
-      href=""
-    >
-      Edit
-    </a>
-  </td>
-  <td class="whitespace-nowrap px-1 py-1">
-    <a
-      hx-delete="/company/{{.ID}}"
-      hx-target="#companies"
-      hx-confirm="Are you sure you want to delete {{.Company}}?"
-      hx-indicator="#processing"
-      class="hover:underline text-blue-700"
-      href=""
-      >Delete</a
-    >
-  </td>
-</tr>