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

Seperate Modal State

Browse Source
This commit is contained in:
sosokker 2023-11-21 06:12:56 +07:00
parent ddac2bc5ee
commit 5b4a11b374
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import TaskDetailModal from "./taskDetailModal";
function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty, challenge, importance}) {
function TaskCard({ task, deleteTask, updateTask}) {
const [mouseIsOver, setMouseIsOver] = useState(false);
const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
@ -40,6 +40,7 @@ function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty,
return (
<div>
<TaskDetailModal
taskId={task.id}
title={task.content}
description={task.description}
tags={task.tags}
@ -61,7 +62,7 @@ function TaskCard({ task, deleteTask, updateTask, description, tags, difficulty,
}}>
<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").showModal()}>
onClick={() => document.getElementById(`task_detail_modal_${task.id}`).showModal()}>
{task.content}
</p>

4
frontend/src/components/kanbanBoard/taskDetailModal.jsx
View File

@ -3,7 +3,7 @@ import { FaTasks, FaRegListAlt } from "react-icons/fa";
import { FaPlus } from "react-icons/fa6";
import { TbChecklist } from "react-icons/tb";
function TaskDetailModal({ title, description, tags, difficulty, challenge, importance }) {
function TaskDetailModal({ title, description, tags, difficulty, challenge, importance, taskId }) {
const [isChallengeChecked, setChallengeChecked] = useState(challenge);
const [isImportantChecked, setImportantChecked] = useState(importance);
const [currentDifficulty, setCurrentDifficulty] = useState(difficulty);
@ -21,7 +21,7 @@ function TaskDetailModal({ title, description, tags, difficulty, challenge, impo
};
return (
<dialog id="task_detail_modal" className="modal">
<dialog id={`task_detail_modal_${taskId}`} className="modal">
<div className="modal-box w-4/5 max-w-3xl">
{/* Title */}
<div className="flex flex-col py-2">