fix: make setting public flag work

Author: matthiasschaub

esbuild.mjs

@@ -28,7 +28,6 @@ let ctx = await esbuild.context({
     "./ui/png/ios/180.png",
     "./ui/js/index.js",
     "./ui/js/helper.js",
-    "./ui/js/edit-task.js",
     "./node_modules/htmx-ext-path-deps/path-deps.js",
     "./node_modules/htmx-ext-json-enc/json-enc.js",
     "./node_modules/htmx-ext-client-side-templates/client-side-templates.js",

maat/desk.docket-0

@@ -1,4 +1,4 @@
-:~  title+'Maat (alpha)'
+:~  title+'Maat (beta)'
     info+'A todo app'
     color+0xff.fff3
     image+'https://raw.githubusercontent.com/matthiasschaub/maat/main/ui/png/ios/512.png'

ui/html/edit-list.html

@@ -103,9 +103,9 @@
   hx-get="/api/lists/{gid}"
   hx-trigger="load"
   hx-ext="client-side-templates"
-  mustache-template="list-template"
+  mustache-template="list_edit__template"
 ></div>
-<template id="list-template">
+<template id="list_edit__template">
   <h1>Update {{host}}/{{title}}</h1>
   <form
     id="update-list"
@@ -117,26 +117,24 @@ <h1>Update {{host}}/{{title}}</h1>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
       <input
-        autocomplete="false"
         id="update-title"
         name="title"
-        placeholder="{{title}}"
-        required
+        aria-label="Title"
+        autocomplete="false"
         spellcheck="false"
         type="text"
-        aria-label="Title"
+        value="{{title}}"
+        required
       />
       <label for="update-public">Public:</label>
       <select
-        autocomplete="false"
         id="update-public"
         name="public"
-        required
-        spellcheck="false"
+        aria-label="Public"
         type="text"
-        aria-label="Title"
+        required
       >
-        <option hidden disabled selected value>-- select an option --</option>
+        <option hidden disabled selected value>-- Select an option --</option>
         <option>Yes</option>
         <option>No</option>
       </select>

ui/html/edit-task.html

@@ -104,9 +104,9 @@ <h1>Update Task</h1>
   hx-get="/api/lists/{gid}/tasks/{tid}"
   hx-trigger="load"
   hx-ext="client-side-templates,client-side-formats"
-  mustache-template="task-template"
+  mustache-template="task_edit__template"
 ></div>
-<template id="task-template">
+<template id="task_edit__template">
   <form
     id="update-task"
     hx-put="/api/lists/{{gid}}/tasks"
@@ -118,15 +118,14 @@ <h1>Update Task</h1>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
       <input
-        autocomplete="false"
         id="update-title"
         name="title"
-        placeholder="{{title}}"
-        required
-        spellcheck="false"
-        type="text"
         aria-label="Title"
+        type="text"
         value="{{title}}"
+        autocomplete="false"
+        spellcheck="false"
+        required
       />
       <div class="stack--1">
         <label for="update-desc">Description:</label>
@@ -167,7 +166,20 @@ <h1>Update Task</h1>
       </button>
     </fieldset>
   </form>
-  <script src="/apps/maat/edit-task.js"></script>
+  <script>
+    document
+      .getElementById("update")
+      .addEventListener("htmx:afterSettle", (_event) => {
+        document.querySelectorAll("textarea").forEach((element) => {
+          element.dispatchEvent(
+            new Event("input", {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        });
+      });
+  </script>
 </template>
 
     </main>

ui/html/show-task.html

@@ -130,7 +130,7 @@
   <form>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
-      <input type="text" aria-label="Title" value="{{title}}" disabled/>
+      <input type="text" aria-label="Title" value="{{title}}" disabled />
       <div class="stack--1">
         <label for="update-desc">Description:</label>
         <div class="grow-wrap">
@@ -157,7 +157,20 @@
       </button>
     </fieldset>
   </form>
-  <script src="/apps/maat/edit-task.js"></script>
+  <script>
+    document
+      .getElementById("update")
+      .addEventListener("htmx:afterSettle", (_event) => {
+        document.querySelectorAll("textarea").forEach((element) => {
+          element.dispatchEvent(
+            new Event("input", {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        });
+      });
+  </script>
 </template>
 
     </main>

ui/js/edit-task.js

@@ -42,7 +42,6 @@ htmx.defineExtension("json-enc-maat", {
     xhr.overrideMimeType("text/json");
 
     const params = JSON.parse(JSON.stringify(parameters));
-    console.log(params);
 
     // send tags as list
     if (Object.keys(params).includes("tags")) {
@@ -59,9 +58,14 @@ htmx.defineExtension("json-enc-maat", {
 
     // send public flag as boolean
     if (Object.keys(params).includes("public")) {
-      // cast to bool
-      params.public = params.public === "true";
-      // console.log(params.public === "true");
+      if (params.public === "Yes") {
+        params.public = true;
+      } else if (params.public === "No") {
+        params.public = false;
+      } else {
+        // cast to bool
+        params.public = params.public === "true";
+      }
     }
 
     // send done flag as boolean

ui/js/index.js

@@ -4,9 +4,9 @@
   hx-get="/api/lists/{gid}"
   hx-trigger="load"
   hx-ext="client-side-templates"
-  mustache-template="list-template"
+  mustache-template="list_edit__template"
 ></div>
-<template id="list-template">
+<template id="list_edit__template">
   <h1>Update {{host}}/{{title}}</h1>
   <form
     id="update-list"
@@ -18,26 +18,24 @@ <h1>Update {{host}}/{{title}}</h1>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
       <input
-        autocomplete="false"
         id="update-title"
         name="title"
-        placeholder="{{title}}"
-        required
+        aria-label="Title"
+        autocomplete="false"
         spellcheck="false"
         type="text"
-        aria-label="Title"
+        value="{{title}}"
+        required
       />
       <label for="update-public">Public:</label>
       <select
-        autocomplete="false"
         id="update-public"
         name="public"
-        required
-        spellcheck="false"
+        aria-label="Public"
         type="text"
-        aria-label="Title"
+        required
       >
-        <option hidden disabled selected value>-- select an option --</option>
+        <option hidden disabled selected value>-- Select an option --</option>
         <option>Yes</option>
         <option>No</option>
       </select>

ui/templates/edit-list.html

@@ -5,9 +5,9 @@ <h1>Update Task</h1>
   hx-get="/api/lists/{gid}/tasks/{tid}"
   hx-trigger="load"
   hx-ext="client-side-templates,client-side-formats"
-  mustache-template="task-template"
+  mustache-template="task_edit__template"
 ></div>
-<template id="task-template">
+<template id="task_edit__template">
   <form
     id="update-task"
     hx-put="/api/lists/{{gid}}/tasks"
@@ -19,15 +19,14 @@ <h1>Update Task</h1>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
       <input
-        autocomplete="false"
         id="update-title"
         name="title"
-        placeholder="{{title}}"
-        required
-        spellcheck="false"
-        type="text"
         aria-label="Title"
+        type="text"
         value="{{title}}"
+        autocomplete="false"
+        spellcheck="false"
+        required
       />
       <div class="stack--1">
         <label for="update-desc">Description:</label>
@@ -68,5 +67,18 @@ <h1>Update Task</h1>
       </button>
     </fieldset>
   </form>
-  <script src="/apps/maat/edit-task.js"></script>
+  <script>
+    document
+      .getElementById("update")
+      .addEventListener("htmx:afterSettle", (_event) => {
+        document.querySelectorAll("textarea").forEach((element) => {
+          element.dispatchEvent(
+            new Event("input", {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        });
+      });
+  </script>
 </template>

ui/templates/edit-task.html

@@ -18,7 +18,7 @@
   <form>
     <fieldset class="stack">
       <label for="update-title">Title:</label>
-      <input type="text" aria-label="Title" value="{{title}}" disabled/>
+      <input type="text" aria-label="Title" value="{{title}}" disabled />
       <div class="stack--1">
         <label for="update-desc">Description:</label>
         <div class="grow-wrap">
@@ -45,5 +45,18 @@
       </button>
     </fieldset>
   </form>
-  <script src="/apps/maat/edit-task.js"></script>
+  <script>
+    document
+      .getElementById("update")
+      .addEventListener("htmx:afterSettle", (_event) => {
+        document.querySelectorAll("textarea").forEach((element) => {
+          element.dispatchEvent(
+            new Event("input", {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        });
+      });
+  </script>
 </template>