fix: fixup last two commits

Author: matthiasschaub

esbuild.mjs

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

maat/app/maat-ui.hoon

@@ -26,7 +26,6 @@
 /*  ttf-soria                 %ttf    /app/ui/ttf/soria/ttf
 /*  js-index                  %js     /app/ui/js/index/js
 /*  js-helper                 %js     /app/ui/js/helper/js
-/*  js-tasks                  %js     /app/ui/js/tasks/js
 /*  js-edit-task              %js     /app/ui/js/edit-task/js
 /*  js-json-enc               %js     /app/ui/js/json-enc/js
 /*  js-path-deps              %js     /app/ui/js/path-deps/js
@@ -155,8 +154,6 @@
         [(send [200 ~ [%html html-create]]) state]
       [%apps %maat %helper ~]
         [(send [200 ~ [%js js-helper]]) state]
-      [%apps %maat %tasks ~]
-        [(send [200 ~ [%js js-tasks]]) state]
       [%apps %maat %edit-task ~]
         [(send [200 ~ [%js js-edit-task]]) state]
       [%apps %maat %json-enc ~]

ui/html/tasks.html

@@ -137,7 +137,7 @@
       id="{{tid}}"
       class="icon icon-circle"
       hx-put="/api/lists/{{gid}}/tasks"
-      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: true, tags: {{tags}}}'
+      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: true, tags: "{{tags}}"}'
       hx-ext="json-enc"
       hx-trigger="click"
     >
@@ -160,11 +160,13 @@
 <template id="tasks-done-template">
   {{#.}}
   <li>
+    <!-- mark task as undone -->
+    <!-- NOTE: be careful with the js prefix for hx-vals when dealing with user input -->
     <a
       id="{{tid}}"
       class="icon icon-circle-checked"
       hx-put="/api/lists/{{gid}}/tasks"
-      hx-vals='{"gid": "{{gid}}", "tid": "{{tid}}", "title": "{{title}}", "desc": "{{desc}}", "date": {{date}}, "done": false, "tags": "{{tags}}"}'
+      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: false, tags: "{{tags}}"}'
       hx-ext="json-enc"
       hx-trigger="click"
     >
@@ -197,7 +199,6 @@
     </form>
   </li>
 </ul>
-<script src="/apps/maat/tasks.js"></script>
 <!-- <div class="done"> -->
 <!--   <h3>Done</h3> -->
 <!--   <ul> -->

ui/js/index.js

@@ -2,41 +2,41 @@ import htmx from "htmx.org";
 import Mustache from "mustache";
 
 htmx.defineExtension("client-side-formats", {
-  transformResponse: (text, _xhr, elt) => {
-    switch (elt.id) {
-      case "invites": {
-        let data = JSON.parse(text);
-        if (data.length > 0) {
-          data = { invites: [true] };
-        } else {
-          data = { invites: [] };
+    transformResponse: (text, _xhr, elt) => {
+        switch (elt.id) {
+            case "invites": {
+                let data = JSON.parse(text);
+                if (data.length > 0) {
+                    data = { invites: [true] };
+                } else {
+                    data = { invites: [] };
+                }
+                return JSON.stringify(data);
+            }
+            case "tags": {
+                let data = JSON.parse(text);
+                data = data.join();
+                return JSON.stringify(data);
+            }
         }
-        return JSON.stringify(data);
-      }
-      case "tags": {
-        let data = JSON.parse(text);
-        data = data.join();
-        return JSON.stringify(data);
-      }
-    }
-  },
+    },
 });
 
 window.addEventListener("htmx:configRequest", (event) => {
-  // send tags as list
-  if ("tags" in event.detail.parameters) {
-    const tags = event.detail.parameters.tags;
-    console.log(tags);
-    if (typeof tags === "string" || tags instanceof String) {
-      console.log("yes");
-      const tagsArray = tags
-        .replace(/\s+/g, " ")
-        .trim()
-        .replaceAll(" ", "")
-        .split(",");
-      event.detail.parameters.tags = tagsArray.filter((str) => str !== "");
+    // send tags as list
+    if ("tags" in event.detail.parameters) {
+        const tags = event.detail.parameters.tags;
+        if (typeof tags === "string" || tags instanceof String) {
+            const tagsArray = tags
+                .replace(/\s+/g, " ")
+                .trim()
+                .replaceAll(" ", "")
+                .split(",");
+            event.detail.parameters.tags = tagsArray.filter((str) =>
+                str !== ""
+            );
+        }
     }
-  }
 });
 
 window.htmx = htmx;

ui/templates/tasks.html

@@ -44,7 +44,7 @@
       id="{{tid}}"
       class="icon icon-circle"
       hx-put="/api/lists/{{gid}}/tasks"
-      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: true, tags: {{tags}}}'
+      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: true, tags: "{{tags}}"}'
       hx-ext="json-enc"
       hx-trigger="click"
     >
@@ -67,11 +67,13 @@
 <template id="tasks-done-template">
   {{#.}}
   <li>
+    <!-- mark task as undone -->
+    <!-- NOTE: be careful with the js prefix for hx-vals when dealing with user input -->
     <a
       id="{{tid}}"
       class="icon icon-circle-checked"
       hx-put="/api/lists/{{gid}}/tasks"
-      hx-vals='{"gid": "{{gid}}", "tid": "{{tid}}", "title": "{{title}}", "desc": "{{desc}}", "date": {{date}}, "done": false, "tags": "{{tags}}"}'
+      hx-vals='js:{gid: "{{gid}}", tid: "{{tid}}", title: "{{title}}", desc: `{{desc}}`, date: {{date}}, done: false, tags: "{{tags}}"}'
       hx-ext="json-enc"
       hx-trigger="click"
     >
@@ -104,7 +106,6 @@
     </form>
   </li>
 </ul>
-<script src="/apps/maat/tasks.js"></script>
 <!-- <div class="done"> -->
 <!--   <h3>Done</h3> -->
 <!--   <ul> -->