Apply patch to version 1.0.4

api/server.js

@@ -6,14 +6,14 @@ const app = express()
 app.use(express.json())
 app.use(express.urlencoded({ extended: true }))
 
-app.delete("/api/v1/tasks/:pk", (req, res) => {
+app.delete("/api/v1/tasks/:uuid", (req, res) => {
     res.status(200).end()
 })
 
-app.patch("/api/v1/tasks/:pk", (req, res) => {
-    const {pk} = req.params
+app.patch("/api/v1/tasks/:uuid", (req, res) => {
+    const {uuid} = req.params
     const completed = req.body.completed === "true"
-    res.status(200).json({pk, completed})
+    res.status(200).json({uuid, completed})
 })
 
 app.listen(port, host, () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tasktracker-bootstrap",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "Task tracker site bootstrap5 templates",
   "private": true,
   "scripts": {

src/js/tasks.js

@@ -1,10 +1,12 @@
-const swapTaskListCompletedStatus = ({pk, completed}) => {
-    const element = document.getElementById(pk)
+const swapTaskListCompletedStatus = ({uuid, completed}) => {
+    console.debug("swap task list completed status")
+    const element = document.getElementById(uuid)
     if (element) element.setAttribute("data-task-completed", completed)
 }
 
 
 const swapTaskDetailedCompletedStatus = ({completed}) => {
+    console.debug("swap task detail completed status")
     const element = document.querySelector("h1#summary")
     if (!element) return
 
@@ -20,6 +22,7 @@ const swapTaskDetailedCompletedStatus = ({completed}) => {
 
 
 const updateListActionButton = (element, completed) => {
+    console.debug("update list action button")
     element.classList.remove("bi-arrow-repeat", "bi-check-lg")
     if (completed) {
         element.classList.add("bi-arrow-repeat")
@@ -30,6 +33,7 @@ const updateListActionButton = (element, completed) => {
 
 
 const updateDetailActionButton = (element, completed) => {
+    console.debug("update detail action button")
     element.classList.remove("btn-outline-warning", "btn-outline-success")
     if (completed) {
         element.classList.add("btn-outline-warning")
@@ -42,6 +46,7 @@ const updateDetailActionButton = (element, completed) => {
 
 
 const swapTaskPatchButton = ({element, completed}) => {
+    console.debug("swap task patch button")
     element.setAttribute("hx-vals", `js:{completed:${!completed}}`)
     if (element.matches("i[role=button]")) updateListActionButton(element, completed)
     if (element.matches("button.btn")) updateDetailActionButton(element, completed)

src/scss/list.scss

@@ -19,17 +19,17 @@ $list-img-max-size: 5rem;
 
   [aria-label=TaskActions] {
     .disabled {
-      pointer-events: none;
-      color: var(--bs-secondary-color);
+      pointer-events: none !important;
+      color: var(--bs-secondary-color) !important;
     }
   }
 
   // action buttons
-  [data-task-action=patch] {
+  [hx-patch] {
     color: var(--bs-success);
   }
 
-  [data-task-action=delete] {
+  [hx-delete] {
     color: var(--bs-danger);
   }
 }
@@ -40,7 +40,7 @@ $list-img-max-size: 5rem;
     text-decoration: line-through !important;
   }
 
-  [data-task-action=patch] {
+  [hx-patch] {
     color: var(--bs-warning)
   }
 }

src/views/partials/list_main.hbs

@@ -52,6 +52,19 @@
             assignee_first_name="Toby"
             assignee_last_name="Mugwort"
             completed=true
+            can_edit=false
+        }}
+        {{>list_task
+            pk="0b329fae-3b4f-45ca-bd50-5312c8bc4fe2"
+            summary="When the shark waves for jamaica, all comrades mark salty, weird woodchucks."
+            description="The yardarm sails with courage, fight the reef before it whines.
+            amnesty, faith, and malaria. undead, coal-black mainlands darkly drink a cloudy, lively gold.
+            yo-ho-ho, never fear a cockroach. the plank burns with fight, crush the brig until it sings.
+            Tobaccos whine from amnesties like fine shipmates?"
+            assignee_image="https://i.pravatar.cc/?u=WilcomeBrownlock@teleworm.us"
+            assignee_first_name="Wilcome"
+            assignee_last_name="Brownlock"
+            completed=true
             can_edit=true
         }}
         </tbody>

src/views/partials/profile_main.hbs

@@ -9,64 +9,25 @@
         <section class="col d-flex justify-content-center">
           <img src="{{image}}" alt="avatar" class="rounded-circle shadow avatar">
         </section>
-        <section class="col mt-3 mt-lg-0">
-          <ul class="nav nav-underline mb-3 justify-content-center" role="tablist">
-            <li class="nav-item" role="presentation">
-              <button class="nav-link active" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks-tab-pane"
-                      type="button" role="tab" aria-controls="tasks-tab-pane" aria-selected="true">
-                Recent active tasks
-              </button>
-            </li>
-            <li class="nav-item" role="presentation">
-              <button class="nav-link" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-tab-pane"
-                      type="button" role="tab" aria-controls="edit-tab-pane" aria-selected="false"
-                {{#unless is_owner}} disabled{{/unless}}>
-                Edit profile
-              </button>
-            </li>
-          </ul>
-          <div class="tab-content">
-            <div class="tab-pane fade show active" id="tasks-tab-pane"
-                 role="tabpanel" aria-labelledby="tasks-tab" tabindex="0">
-              <div class="list-group list-group-flush">
-                <a href="{{DetailView}}" class="list-group-item list-group-item-action">
-                  The delighted dosi proudly consumes the star.
-                </a>
-                <a href="{{DetailView}}" class="list-group-item list-group-item-action">
-                  Spacecrafts fly from attitudes like cold phenomenans.
-                </a>
-                <a href="{{DetailView}}" class="list-group-item list-group-item-action">
-                  Space suits die with attitude at the final parallel universe.
-                </a>
-                <a href="{{DetailView}}" class="list-group-item list-group-item-action">
-                  The ugly crewmate oddly deserves the alien.
-                </a>
-                <a href="{{DetailView}}" class="list-group-item list-group-item-action">
-                  The united pathway never observes the ship.
-                </a>
-              </div>
+        <section class="col mt-3 mt-lg-0" aria-labelledby="formUserdata">
+          <h2 class="text-center">Change user data</h2>
+          <form action="" id="formUserdata" aria-label="ChangeUserdata">
+            <div class="mb-3">
+              <label for="firstName" class="form-label">First name</label>
+              <input type="text" class="form-control" id="firstName" name="first_name">
             </div>
-            <div class="tab-pane fade" id="edit-tab-pane" role="tabpanel" aria-labelledby="edit-tab"
-                 tabindex="0">
-              <form action="" id="formUserdata" aria-label="ChangeUserdata">
-                <div class="mb-2">
-                  <label for="firstName" class="form-label">First name</label>
-                  <input type="text" class="form-control" id="firstName" name="first_name">
-                </div>
-                <div class="mb-2">
-                  <label for="lastName" class="form-label">Last name</label>
-                  <input type="text" class="form-control" id="lastName" name="last_name">
-                </div>
-                <div class="mb-2">
-                  <label for="image" class="form-label">User image</label>
-                  <input type="file" class="form-control" id="image" name="image">
-                </div>
-                <div class="d-flex flex-row justify-content-end my-2">
-                  <button type="submit" class="btn btn-primary">Submit</button>
-                </div>
-              </form>
+            <div class="mb-3">
+              <label for="lastName" class="form-label">Last name</label>
+              <input type="text" class="form-control" id="lastName" name="last_name">
             </div>
-          </div>
+            <div class="mb-3">
+              <label for="image" class="form-label">User image</label>
+              <input type="file" class="form-control" id="image" name="image">
+            </div>
+            <div>
+              <button type="submit" class="w-100 mt-2 btn btn-primary">Save</button>
+            </div>
+          </form>
         </section>
       </div>
     </div>