From f9db1e65d1417bd1a111c1879d20c97b5b9bf41b Mon Sep 17 00:00:00 2001
From: Wissarut Kanasub <wissarut.dev@gmail.com>
Date: Sun, 26 Nov 2023 12:04:06 +0700
Subject: [PATCH] Add edit taskname button but still bad req

---
 .../src/components/kanbanBoard/taskCard.jsx   | 77 +++++++++++++------
 1 file changed, 55 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index 1a151c8..01ca05a 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -1,11 +1,13 @@
 import { useState } from "react";
-import { BsFillTrashFill } from "react-icons/bs";
+import { BsFillTrashFill, BsPencilSquare } from "react-icons/bs"; // Import the pencil icon
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { TaskDetailModal } from "./taskDetailModal";
 
 export function TaskCard({ task, deleteTask, updateTask }) {
   const [mouseIsOver, setMouseIsOver] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedTaskName, setEditedTaskName] = useState(task.content);
 
   const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id: task.id,
@@ -20,22 +22,29 @@ export function TaskCard({ task, deleteTask, updateTask }) {
     transform: CSS.Transform.toString(transform),
   };
 
-  {
-    /* If card is dragged */
-  }
   if (isDragging) {
     return (
       <div
         ref={setNodeRef}
         style={style}
-        className="
-        opacity-30
-      bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400  cursor-grab relative
-      "
+        className="opacity-30 bg-mainBackgroundColor p-2.5 items-center flex text-left rounded-xl border-2 border-gray-400 cursor-grab relative"
       />
     );
   }
 
+  const startEditing = () => {
+    setIsEditing(true);
+  };
+
+  const stopEditing = () => {
+    setIsEditing(false);
+    // Update the task name if it has changed
+    if (editedTaskName !== task.content) {
+      console.log("Updating task:", task.id, editedTaskName);
+      updateTask(task.id, { ...task, content: editedTaskName });
+    }
+  };
+
   return (
     <div>
       <TaskDetailModal
@@ -44,7 +53,7 @@ export function TaskCard({ task, deleteTask, updateTask }) {
         description={task.description}
         tags={task.tags}
         difficulty={task.difficulty}
-    f    challenge={task.challenge}
+        challenge={task.challenge}
         importance={task.importance}
       />
       <div
@@ -58,21 +67,45 @@ export function TaskCard({ task, deleteTask, updateTask }) {
         }}
         onMouseLeave={() => {
           setMouseIsOver(false);
-        }}>
-        <p
-          className="p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white"
-          onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
-          {task.content}
-        </p>
+        }}
+      >
+        {isEditing ? (
+          <input
+            type="text"
+            className="p-2.5 my-auto w-full rounded-xl shadow bg-white"
+            value={editedTaskName}
+            onChange={(e) => setEditedTaskName(e.target.value)}
+            onBlur={stopEditing}
+            autoFocus
+          />
+        ) : (
+          <p
+            className="p-2.5 my-auto w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl shadow bg-white"
+            onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}
+          >
+            {task.content}
+          </p>
+        )}
 
         {mouseIsOver && (
-          <button
-            onClick={() => {
-              deleteTask(task.id);
-            }}
-            className="stroke-white absolute right-0 top-1/2 rounded-full bg-white -translate-y-1/2 bg-columnBackgroundColor p-2 hover:opacity-100 ">
-            <BsFillTrashFill />
-          </button>
+          <div className="flex absolute right-0 top-1/2 transform -translate-y-1/2">
+            {!isEditing && (
+              <button
+                onClick={startEditing}
+                className="p-2 mx-1 bg-white rounded-full hover:opacity-100"
+              >
+                <BsPencilSquare />
+              </button>
+            )}
+            <button
+              onClick={() => {
+                deleteTask(task.id);
+              }}
+              className="p-2 mx-1 bg-white rounded-full hover:opacity-100"
+            >
+              <BsFillTrashFill />
+            </button>
+          </div>
         )}
       </div>
     </div>