From b901b31d88595447e8fe449a7ac228a400d09203 Mon Sep 17 00:00:00 2001
From: Emanuel Turis <hello@emanuelturis.com>
Date: Fri, 20 Oct 2023 09:59:02 +0300
Subject: [PATCH] Delete task and toggle edit state

---
 handler.go           |  36 ++++++++++++++++++++++++++++++++
 main.go              |   2 ++
 sqlite3.db           | Bin 8192 -> 8192 bytes
 static/index.css     |  45 ++++++++++++++++++++++++++++++++++++++++
 templates/form.html  |  48 ++++++++++++++++++++++++++++++++++++++++---
 templates/index.html |   2 +-
 6 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/handler.go b/handler.go
index 211cfc3..deec36f 100644
--- a/handler.go
+++ b/handler.go
@@ -70,3 +70,39 @@ func handleToggleTask(w http.ResponseWriter, r *http.Request) {
 	}
 	tmpl.ExecuteTemplate(w, "CompletedCount", map[string]any{"Count": completedCount, "SwapOOB": true})
 }
+
+func handleDeleteTask(w http.ResponseWriter, r *http.Request) {
+	id, err := strconv.Atoi(chi.URLParam(r, "id"))
+	if err != nil {
+		log.Printf("error parsing id into int %v", err)
+		return
+	}
+	err = deleteTask(r.Context(), id)
+	if err != nil {
+		log.Printf("error deleting task %v", err)
+	}
+	count, err := fetchCount()
+	if err != nil {
+		log.Printf("error fetching count %v", err)
+	}
+	completedCount, err := fetchCompletedCount()
+	if err != nil {
+		log.Printf("error fetching completed count %v", err)
+	}
+	tmpl.ExecuteTemplate(w, "TotalCount", map[string]any{"Count": count, "SwapOOB": true})
+	tmpl.ExecuteTemplate(w, "CompletedCount", map[string]any{"Count": completedCount, "SwapOOB": true})
+}
+
+func handleEditTask(w http.ResponseWriter, r *http.Request) {
+	id, err := strconv.Atoi(chi.URLParam(r, "id"))
+	if err != nil {
+		log.Printf("error parsing id into int %v", err)
+		return
+	}
+	task, err := fetchTask(id)
+	if err != nil {
+		log.Printf("error fetching task with id %d %v", id, err)
+		return
+	}
+	tmpl.ExecuteTemplate(w, "Item", map[string]any{"Item": task, "Editing": true})
+}
diff --git a/main.go b/main.go
index 084f397..fb0173a 100644
--- a/main.go
+++ b/main.go
@@ -28,5 +28,7 @@ func main() {
 	r.Get("/", handleGetTasks)
 	r.Post("/tasks", handleCreateTask)
 	r.Put("/tasks/{id}/toggle", handleToggleTask)
+	r.Delete("/tasks/{id}", handleDeleteTask)
+	r.Get("/tasks/{id}/edit", handleEditTask)
 	http.ListenAndServe("localhost:3000", r)
 }
diff --git a/sqlite3.db b/sqlite3.db
index 32c61a4d4d8b02b6e4f06728a8b62a254f6c0c52..ea8eedb7f0a84abd3e76a6ef71278c1d12d5313f 100644
GIT binary patch
delta 127
zcmZp0XmFSy&8Rt1#+gxbW5N=C2^RiS4E&$@pYh+|KgFMofSVNsy!a;uuujgF=XYUY
uU|{f<<zP(APc2O>O)UlS?P2`<QZQd%k`pQql2w$4s?LWh7nr<H-U$Ghe;}a%

delta 127
zcmZp0XmFSy%_uTa#+gxMW5N=C2`>I@2L8|d&-icfpW@%ezmk78e>Z<MfA(fY0WbcE
z0j!g=<@sGW`8Zh_WH}fU^HWO`OH)fZ_&5;!{L)f(9(Gm+NlvId8$TN>gFIAqK2SL;
MA1f=v<bCo^0HPKktpET3

diff --git a/static/index.css b/static/index.css
index 070a997..1ac1797 100644
--- a/static/index.css
+++ b/static/index.css
@@ -534,6 +534,27 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-2\.5 {
+  right: 0.625rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -595,6 +616,10 @@ video {
   max-width: 768px;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .cursor-move {
   cursor: move;
 }
@@ -696,6 +721,26 @@ video {
   padding-bottom: 0.625rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .text-center {
   text-align: center;
 }
diff --git a/templates/form.html b/templates/form.html
index f860484..7283268 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -39,11 +39,47 @@
           />
         </svg>
       </button>
-      <p class="title">{{ .Item.Title }}</p>
+      {{ if .Editing }}
+        <form class="flex items-center justify-between flex-1">
+          <div class="relative">
+            <span class="absolute inset-y-0 right-2.5 flex items-center">
+              <button class="text-blue-500 hover:text-blue-700">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M4.5 12.75l6 6 9-13.5"
+                  />
+                </svg>
+              </button>
+            </span>
+            <input
+              name="title"
+              value="{{ .Item.Title }}"
+              class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-1.5"
+            />
+          </div>
+        </form>
+      {{ else }}
+        <p class="title">{{ .Item.Title }}</p>
+      {{ end }}
     </div>
 
     <div class="flex items-center space-x-2.5">
-      <button type="button" class="text-red-500 hover:text-red-700">
+      <button
+        hx-delete="/tasks/{{ .Item.ID }}"
+        hx-target="#task-{{ .Item.ID }}"
+        hx-swap="outerHTML"
+        type="button"
+        class="text-red-500 hover:text-red-700"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
@@ -60,7 +96,13 @@
         </svg>
       </button>
 
-      <button type="button" class="edit text-blue-500 hover:text-blue-700">
+      <button
+        hx-get="/tasks/{{ .Item.ID }}/edit"
+        hx-target="#task-{{ .Item.ID }}"
+        hx-swap="outerHTML"
+        type="button"
+        class="edit text-blue-500 hover:text-blue-700"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
diff --git a/templates/index.html b/templates/index.html
index f5caf65..15d3f14 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,7 +20,7 @@
 
         <div id="items" class="space-y-2.5 mt-4">
           {{ range .Items }}
-            {{ template "Item" dict "Item" . "SwapOOB" false }}
+            {{ template "Item" dict "Item" . "SwapOOB" false "Editing" false }}
           {{ end }}
         </div>
       </div>