[Task Actions] Implement task actions

api/server.js

@@ -4,17 +4,16 @@ const {host, port} = require("./settings")
 const app = express()
 
 app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
 
-app.delete("/api/v1/tasks/:uuid", (req, res) => {
-    const {uuid} = req.params
-    console.log(`DELETE Task('${uuid}')`)
+app.delete("/api/v1/tasks/:pk", (req, res) => {
     res.status(200).end()
 })
 
-app.patch("/api/v1/tasks/:uuid", (req, res) => {
-    const {uuid} = req.params
-    console.log(`PATCH Task('${uuid}')`)
-    res.status(200).end()
+app.patch("/api/v1/tasks/:pk", (req, res) => {
+    const {pk} = req.params
+    const completed = req.body.completed === "true"
+    res.status(200).json({pk, completed})
 })
 
 app.listen(port, host, () => {

src/index.js

@@ -18,3 +18,5 @@ import "./scss/list.scss"
 import "./scss/profile.scss"
 import "./scss/sign-in.scss"
 import "./scss/sign-up.scss"
+
+import "./js/tasks"

src/js/tasks.js

@@ -0,0 +1,65 @@
+const swapTaskListCompletedStatus = ({pk, completed}) => {
+    const element = document.getElementById(pk)
+    if (element) element.setAttribute("data-task-completed", completed)
+}
+
+
+const swapTaskDetailedCompletedStatus = ({completed}) => {
+    const element = document.querySelector("h1#summary")
+    if (!element) return
+
+    if (completed) {
+        const icon = document.createElement("i")
+        icon.classList.add("bi", "bi-check-lg", "text-success")
+        element.prepend(icon)
+    } else {
+        const icon = element.querySelector("i.bi.bi-check-lg")
+        element.removeChild(icon)
+    }
+}
+
+
+const updateListActionButton = (element, completed) => {
+    element.classList.remove("bi-arrow-repeat", "bi-check-lg")
+    if (completed) {
+        element.classList.add("bi-arrow-repeat")
+    } else {
+        element.classList.add("bi-check-lg")
+    }
+}
+
+
+const updateDetailActionButton = (element, completed) => {
+    element.classList.remove("btn-outline-warning", "btn-outline-success")
+    if (completed) {
+        element.classList.add("btn-outline-warning")
+        element.textContent = "Reopen"
+    } else {
+        element.classList.add("btn-outline-success")
+        element.textContent = "Complete"
+    }
+}
+
+
+const swapTaskPatchButton = ({element, completed}) => {
+    element.setAttribute("hx-vals", `js:{completed:${!completed}}`)
+    if (element.matches("i[role=button]")) updateListActionButton(element, completed)
+    if (element.matches("button.btn")) updateDetailActionButton(element, completed)
+}
+
+
+document.body.addEventListener("htmx:afterOnLoad", (event) => {
+    const xhr = event.detail.xhr
+    if (xhr.status !== 200) return  // do nothing if request wasn't successful
+
+    const triggeredElement = event.detail.elt
+    const action = triggeredElement.getAttribute("data-task-action")
+    let response = xhr.response
+
+    if (action === "patch" && xhr.responseURL.includes("tasks")) {
+        response = JSON.parse(response)
+        swapTaskPatchButton({...response, element: triggeredElement})
+        swapTaskDetailedCompletedStatus(response)
+        swapTaskListCompletedStatus(response)
+    }
+})

src/scss/list.scss

@@ -25,15 +25,11 @@ $list-img-max-size: 5rem;
   }
 
   // action buttons
-  [aria-label=complete] {
+  [data-task-action=patch] {
     color: var(--bs-success);
   }
 
-  [aria-label=reopen] {
-    color: var(--bs-warning);
-  }
-
-  [aria-label=delete] {
+  [data-task-action=delete] {
     color: var(--bs-danger);
   }
 }
@@ -43,4 +39,8 @@ $list-img-max-size: 5rem;
     color: var(--bs-secondary-color) !important;
     text-decoration: line-through !important;
   }
+
+  [data-task-action=patch] {
+    color: var(--bs-warning)
+  }
 }

src/views/partials/detail_main.hbs

@@ -1,9 +1,9 @@
 <main class="col col-md-10 col-lg-9">
   <div class="card shadow" id="taskDetailsContainer">
     <div class="card-header">
-      <h1 class="card-title h3 text-center">
-        {{#if completed}}<i class="bi bi-check-lg text-success"></i>&nbsp;{{/if}}
-        {{summary}}
+      <h1 class="card-title h3 text-center" id="summary">
+        {{#if completed}}<i class="bi bi-check-lg text-success"></i>{{/if}}
+        <span>{{summary}}</span>
       </h1>
       <hr class="border">
       <div class="row row-cols-1 row-cols-md-2">
@@ -33,12 +33,14 @@
         <div class="d-flex justify-content-end align-items-center">
           {{#if completed}}
             <button class="btn btn-outline-warning mx-3"
-                    data-task-target="{{pk}}" aria-label="reopen">  {{! TODO: patch? }}
+                    hx-patch="/api/v1/tasks/{{pk}}" hx-swap="none" hx-vals="js:{completed:false}"
+                    data-task-target="{{pk}}" data-task-action="patch">
               Reopen
             </button>
           {{else}}
             <button class="btn btn-outline-success mx-3"
-                    data-task-target="{{pk}}" aria-label="complete">  {{! TODO: patch? }}
+                    hx-patch="/api/v1/tasks/{{pk}}" hx-swap="none" hx-vals="js:{completed:true}"
+                    data-task-target="{{pk}}" data-task-action="patch">
               Complete
             </button>
           {{/if}}

src/views/partials/list_main.hbs

@@ -16,7 +16,7 @@
         <tbody id="taskContainer">
         {{! repeating tasks block }}
         {{>list_task
-            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            pk="d5870f6d-8431-47ac-84e4-ef9de83ee622"
             summary="Shield at the holodeck was the energy of assimilation, lowered to a chemical c-beam."
             description="The creature is more transformator now than starship. solid and always quirky.
             energy at the wormhole was the life of ellipse, grabed to a mysterious proton.
@@ -29,7 +29,7 @@
             can_edit=false
         }}
         {{>list_task
-            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            pk="1f380d72-ecf0-454a-99c8-7fde60c4d22f"
             summary="Sensor at the universe was the pattern of love, empowered to a futile alien."
             description="The nanomachine is more admiral now than processor. senior and patiently dead.
             pattern at the center was the death of attitude, loved to a biological ship.
@@ -42,7 +42,7 @@
             can_edit=true
         }}
         {{>list_task
-            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            pk="d04c3467-65a4-436e-82dd-5b81c954eb0f"
             summary="Flight at the ready room was the vision of alignment, empowered to a quirky vogon."
             description="The particle is more creature now than transformator. virtual and rudely lunar.
             starlight travel at the ready room was the powerdrain of faith, evacuated to a most unusual moon.

src/views/partials/list_task.hbs

@@ -14,13 +14,16 @@
     <div class="d-flex flex-row justify-content-between align-items-center">
       {{#if completed}}
         <i class="bi bi-arrow-repeat{{#unless can_edit}} disabled{{/unless}}" role="button"
-           data-task-target="{{pk}}" aria-label="reopen"></i> {{! TODO: patch-status ? }}
+           hx-patch="/api/v1/tasks/{{pk}}" hx-vals="js:{completed:false}" hx-swap="none"
+           data-task-target="{{pk}}" data-task-action="patch"></i>
       {{else}}
         <i class="bi bi-check-lg{{#unless can_edit}} disabled{{/unless}}" role="button"
-           data-task-target="{{pk}}" aria-label="complete"></i> {{! TODO: patch-status? }}
+           hx-patch="/api/v1/tasks/{{pk}}" hx-vals="js:{completed:true}" hx-swap="none"
+           data-task-target="{{pk}}" data-task-action="patch"></i>
       {{/if}}
       <i class="bi bi-trash{{#unless can_edit}} disabled{{/unless}}" role="button"
-         data-task-target="{{pk}}" aria-label="delete"></i>
+         hx-delete="/api/v1/tasks/{{pk}}" hx-target="closest tr" hx-swap="outerHTML"
+         data-task-target="{{pk}}" data-task-action="delete"></i>
     </div>
   </td>
 </tr>