TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add edit taskname button but still bad req

Browse Source
This commit is contained in:
Wissarut Kanasub 2023-11-26 12:04:06 +07:00
parent 0158fe5a87
commit f9db1e65d1
1 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/components/kanbanBoard/taskCard.jsx
View File

@ -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>