From d12817f4cc8ef69660866ed16e415e0aa9493a07 Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Thu, 17 Jul 2025 01:20:25 -0400
Subject: [PATCH] I can now list the contents of a table and display a form for
 one row to update/delete, but haven't implemented update and delete.

---
 public/admin/table/index.html   |  8 ++++----
 public/js/code.js               |  8 +++++++-
 views/admin/table/contents.html | 22 ++++++++++++++++------
 views/admin/table/view.html     | 28 ++++++++++++++++++++++------
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/public/admin/table/index.html b/public/admin/table/index.html
index 267ccd0..034d290 100644
--- a/public/admin/table/index.html
+++ b/public/admin/table/index.html
@@ -24,14 +24,14 @@
   </header>
 
   <script>
-  let Tables = new GetJson("/api/admin/table/")
-  console.log("Tables", Tables)
+  let Rows = new GetJson("/api/admin/table/")
+  console.log("Rows", Rows)
 </script>
 
 <blockstart>
-<h1>Admin Tables</h1>
+<h1>Admin Rows</h1>
 
-<block x-data="Tables">
+<block x-data="Rows">
   <ul>
     <template x-for="item in theData">
     <li><a x-bind:href="'/admin/table/' + item + '/'">
diff --git a/public/js/code.js b/public/js/code.js
index 89710df..9927262 100644
--- a/public/js/code.js
+++ b/public/js/code.js
@@ -3,6 +3,7 @@ class GetJson {
   constructor(url) {
     this.url = url;
     this.items = [];
+    this.item = undefined;
   }
 
   async theData() {
@@ -11,5 +12,10 @@ class GetJson {
     this.items = await resp.json();
     return this.items;
   }
-}
 
+  async oneThing() {
+    this.item = await this.theData();
+    console.log("ITEMS", this.items);
+    return this.item;
+  }
+}
diff --git a/views/admin/table/contents.html b/views/admin/table/contents.html
index 00b2200..d68896d 100644
--- a/views/admin/table/contents.html
+++ b/views/admin/table/contents.html
@@ -7,14 +7,24 @@
 <h1>Admin Tables</h1>
 
 <block x-data="Tables">
-  <ul>
+  <table>
     <template x-for="item in theData">
-      <table>
-        <td><a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'" x-text="item.id"></td>
-        <td x-text="item.Email"></td>
-      </table>
+        <tr>
+          <td>
+            <a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'">
+              ^
+            </a>
+          </td>
+          <template x-for="(value, key) in item">
+            <td x-text="value"></td>
+          </template>
+        </tr>
     </template>
-  </ul>
+  </table>
+  <block class="horizontal">
+    <a href="/admin/table/{{.Table}}/?page=2">Prev</a>
+    <a href="/admin/table/{{.Table}}/?page=2">Next</a>
+  </block>
 </block>
 
 </blockstart>
diff --git a/views/admin/table/view.html b/views/admin/table/view.html
index 2acdcea..117094e 100644
--- a/views/admin/table/view.html
+++ b/views/admin/table/view.html
@@ -1,15 +1,31 @@
 <script>
-  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/")
-  console.log("Data", Data)
+  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/");
 </script>
 
 <blockstart>
 <h1>Admin Tables</h1>
 
-<block x-data="Data">
-  <ul>
-    <h1 x-text="item.id"></h1>
-  </ul>
+<block x-init="item = await Data.oneThing()" x-data="{item: {}}">
+    <form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}/">
+      <card>
+      <top><h1>{{ .Table }} : {{ .Id }}</h1></top>
+      <middle>
+        <template x-for="(value, key) in item">
+          <div>
+            <label x-text="key" x-bind:for="key"></label>
+            <input x-text="value" x-bind:value="value" x-bind:id="key" />
+          </div>
+        </template>
+      </middle>
+      <bottom>
+        <button-group>
+          <button type="button">Back</button>
+          <button type="submit">Update</button>
+          <button type="button">Delete</button>
+        </button-group>
+      </bottom>
+      </card>
+    </form>
 </block>
 
 </blockstart>