Basic form submission handling in javascript. Next need to look at what a lit error thing would look like.

common/errors.go

@@ -15,6 +15,8 @@ func Fail(err error, format string, v ...any) error {
 func ApiError(c *fiber.Ctx, format string, args ...any) error {
   c.Status(500)
 
+  log.Printf(format, args...)
+
   return c.JSON(fiber.Map{
     "error": fmt.Sprintf(format, args...),
   })

features/admin/api.go

@@ -3,7 +3,6 @@ package features_admin
 import (
   "maps"
   "reflect"
-  "fmt"
   "github.com/gofiber/fiber/v2"
   "MY/webapp/data"
   . "MY/webapp/common"
@@ -27,7 +26,9 @@ func GetApiSelectAll(c *fiber.Ctx) error {
   if err != nil { return c.Redirect("/") }
 
   table := c.Params("table")
-  if table == "" { return c.Redirect("/admin/table/") }
+  if table == "" {
+    return c.Redirect("/admin/table/")
+  }
 
   page := c.QueryInt("page", 0)
   if page < 0 { page = 0 }
@@ -95,19 +96,26 @@ func GetApiInsert(c *fiber.Ctx) error {
 
 func PostApiInsert(c *fiber.Ctx) error {
   _, err := AuthCheck(c, true)
-  if err != nil { return c.Redirect("/") }
+  if err != nil {
+    return ApiError(c, "login required") 
+  }
 
   table := c.Params("table")
 
   typeOf := data.Models()[table]
   obj, err := ReflectOnPost(typeOf, c)
-  if err != nil { return IfErrNil(err, c) }
+
+  if err != nil {
+    return ApiError(c, "failed reflect") 
+  }
 
   id, _, err := Insert(table, obj.Elem())
 
-  if err != nil { return IfErrNil(err, c) }
+  if err != nil { 
+    return ApiError(c, "failed insert") 
+  }
 
-  return c.Redirect(fmt.Sprintf("/admin/table/%s/%d/", table, id), 303)
+  return c.JSON(fiber.Map{ "id": id, "table": table})
 }
 
 func DeleteApi(c *fiber.Ctx) error {

static/js/jzed.js

@@ -250,13 +250,60 @@ const $switch = (template_id, data) => {
   return null;
 }
 
-const $no_error = (data, err) => {
-  if(err === null) {
-    return true;
-  } else {
+const $render_error = (data) => {
   const target = $id('error');
+
+  if(!target) {
+    console.error("No id=error to display the error.");
+    return;
+  }
+
   const templ = $id('error-template');
+
+  if(!templ) {
+    console.error("template with id=error-template to display error.");
+    return;
+  }
+
   $replace_with(target, $render(templ, data));
+}
+
+const $has_error = (data, err) => {
+  if(err === 200) {
     return false;
+  } else {
+    $render_error(data);
+    return true;
+  }
+}
+
+const $no_error = (data, err) => {
+  return !$has_error(data, err);
+}
+
+const $redirect = (url, replace=false) => {
+    window.location.replace(url);
+}
+
+const $form_submit = async (form_id, event) => {
+  event.preventDefault();
+ 
+  const form = event.target;
+  const fd = new FormData(form);
+
+  const resp = await fetch(form.action,
+      {method: form.method, body: fd});
+  const data = await resp.json();
+  
+  return [data, resp.status];
+}
+
+const $handle_form = (form_id, cb) => {
+  const submitter = async (event) => {
+    const [data, status] = await $form_submit(form_id, event);
+    cb(data, status);
   }
+
+  $id('form').addEventListener('submit', submitter);
 }
+

views/admin/table/new.html

@@ -1,18 +1,19 @@
 <script>
 const GetJsonErr = async (url) => {
   const resp = await fetch(url);
-
-  if(resp.status == 200) {
-    return [await resp.json(), null];
-  } else {
   return [await resp.json(), resp.status];
+}
+
+const post_user = (data, status) => {
+  if($no_error(data, status)) {
+    $redirect(`/admin/table/${data.table}/${data.id}`, true);
   }
 }
 
 $boot(async () => {
-  let [resp, err] = await GetJsonErr('/api/admin/table/new/{{ .table }}');
+  let [resp, status] = await GetJsonErr('/api/admin/table/new/{{ .table }}');
 
-  if($no_error(resp, err)) {
+  if($no_error(resp, status)) {
     let data = [];
 
     for(let key of Object.keys(resp)) {
@@ -20,6 +21,7 @@ $boot(async () => {
     }
 
     $render_data('data-template', 'data-form', data);
+    $handle_form('form', post_user);
   }
 });
 </script>
@@ -32,7 +34,7 @@ $boot(async () => {
     <aside id='error'><mark class="alert">${ error }</mark></aside>
   </template>
 
-  <form method="POST" action="/api/admin/table/new/{{ .table }}">
+  <form id="form" method="POST" action="/api/admin/table/new/{{ .table }}">
     <card>
     <top><h2>New {{ .table }}</h2></top>