From 348087ae1304c9be184774e92868bd4e8babc143 Mon Sep 17 00:00:00 2001
From: Ivan Isekeev <hi@ivanisekeev.com>
Date: Wed, 23 Oct 2024 20:12:28 +0600
Subject: [PATCH] Add editing task

---
 components/Task.vue | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/components/Task.vue b/components/Task.vue
index e72100a..6f06cd7 100644
--- a/components/Task.vue
+++ b/components/Task.vue
@@ -4,9 +4,17 @@
             :class="[{'task-text-overlay-effect': visibleOverlay}]"
             :value="task.description"
             class="task-text"
-            disabled
-            style="background: none; font-family: Inter; font-size: 1.2em; padding: 0; width: 100%; height: 100%; border: none"
+            style="
+                background: none;
+                font-family: Inter;
+                font-size: 1.2em;
+                width: 100%;
+                height: 100%;
+                border: none;
+                outline-color: #747bff55;
+            "
             type="text"
+            @input="updateDescription($event.target.value)"
         />
         <Transition>
             <div v-if="hover" class="info">
@@ -206,6 +214,23 @@ const getTime = () => {
     )
     return new Date(time * 1000).toISOString().slice(11, 19)
 }
+
+const updateDescription = (description: string) => {
+    editDescription({description})
+}
+
+const {mutate: editDescription} = useMutation({
+    mutationFn: ({description}: {description: string}) =>
+        putTask(props.task.id, {
+            data: {
+                ...props.task,
+                description
+            }
+        }),
+    onError(_, __, context) {
+        queryClient.setQueryData(['tasks', props.project?.id ?? null], context.previousTodos)
+    }
+})
 </script>
 
 <style scoped>