diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 04c165bb..6655b266 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/src/pages/ProjectTracker/ProjectTracker.js @@ -22,7 +22,8 @@ import { setColumnPriority, deletePersonOnProject, filterCreatedByMe, - filteredParticipateTasks + filteredParticipateTasks, + movePositionProjectTask } from "../../redux/projectsTrackerSlice"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; @@ -47,6 +48,7 @@ export const ProjectTracker = () => { const [selectedTab, setSelectedTab] = useState(0); const [priorityTask, setPriorityTask] = useState(0); const [wrapperHover, setWrapperHover] = useState({}); + const [taskHover, setTaskHover] = useState({}) const [modalAdd, setModalAdd] = useState(false); const [modalActiveTicket, setModalActiveTicket] = useState(false); const [selectedTicket, setSelectedTicket] = useState({}); @@ -63,29 +65,56 @@ export const ProjectTracker = () => { }, []); useEffect(() => { + const tasksHover = {} + const columnHover = {} if (Object.keys(projectBoard).length) { projectBoard.columns.forEach((column) => { setOpenColumnSelect((prevState) => ({ ...prevState, [column.id]: false, })); - setWrapperHover((prevState) => ({ ...prevState, [column.id]: false })); + columnHover[column.id] = false + column.tasks.forEach(task => tasksHover[task.id] = false) }); } + setWrapperHover(columnHover) + setTaskHover(tasksHover) }, [projectBoard]); function dragStartHandler(e, task, columnId) { startWrapperIndexTest.current = { task: task, index: columnId }; - setTimeout(() => { - e.target.classList.add("tasks__board__item__hide"); - }, 0); } - function dragEndHandler(e) { + function dragOverTaskHandler(e, task) { + e.preventDefault() + if (startWrapperIndexTest.current.task.id === task.id) { + return + } + setTaskHover((prevState) => ({[prevState]: false, [task.id]: true})) + } + + function dragLeaveTaskHandler(e) { + setTaskHover((prevState) => ({[prevState]: false})) + } + + function dragEndTaskHandler() { + setTaskHover((prevState) => ({[prevState]: false})) setWrapperHover((prevState) => ({ [prevState]: false, })); - e.target.classList.remove("tasks__board__item__hide"); + } + + function dragDropTaskHandler(e, task, column) { + e.preventDefault() + if (task.id === startWrapperIndexTest.current.task.id) { + return + } + const finishTask = column.tasks.indexOf(task) + dispatch(movePositionProjectTask({ + startTask: startWrapperIndexTest.current.task, + finishTask: task, + finishIndex: finishTask + })) } function dragOverHandler(e) { @@ -102,16 +131,20 @@ export const ProjectTracker = () => { [columnId]: true, })); } + function dragDropHandler(e, columnId) { e.preventDefault(); - if (startWrapperIndexTest.current.index === columnId) { - return; - } setWrapperHover((prevState) => ({ [prevState]: false, })); + if (startWrapperIndexTest.current.index === columnId + || + e.target.className.includes('__item')) { + return; + } + if (columnId !== startWrapperIndexTest.current.index) { dispatch( moveProjectTask({ @@ -126,7 +159,7 @@ export const ProjectTracker = () => { setSelectedTab(columnId); dispatch(modalToggle("createTiketProject")); setModalAdd(true); - setPriorityTask(length + 1) + setPriorityTask(length) } function openTicket(e, task) { @@ -404,20 +437,23 @@ export const ProjectTracker = () => { )} - {column.tasks.map((task, index) => { + {column.tasks.map((task) => { return (
{task.title}
+{task.title}
{task.description} diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 0040e0f6..7c9e2395 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -534,6 +534,10 @@ 0px 1px 1px rgba(0, 0, 0, 0.06); } + .task__hover { + box-shadow: 0 0 5px gray; + } + &__item { width: 328px; max-height: 250px; diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 9a1704be..51a33625 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -51,12 +51,13 @@ export const projectsTrackerSlice = createSlice({ moveProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.columnId) { - column.tasks.push(action.payload.startWrapperIndex.task); + column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id}); apiRequest(`/task/update-task`, { method: "PUT", data: { task_id: action.payload.startWrapperIndex.task.id, column_id: column.id, + priority: column.tasks.length - 1 }, }).then(() => {}); } @@ -67,6 +68,38 @@ export const projectsTrackerSlice = createSlice({ } }); }, + movePositionProjectTask: (state, action) => { + state.projectBoard.columns.forEach((column, index) => { + if (column.id === action.payload.startTask.column_id) { + state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id) + } + if (column.id === action.payload.finishTask.column_id) { + column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id}) + apiRequest(`/task/update-task`, { + method: "PUT", + data: { + task_id: action.payload.startTask.id, + column_id: column.id, + }, + }).then(() => {}); + const priorityTasks = [] + column.tasks.forEach((task, index) => { + const curTask = { + task_id: task.id, + priority: index + } + priorityTasks.push(curTask) + }) + apiRequest(`/task/set-priority`, { + method: "POST", + data: { + data: JSON.stringify(priorityTasks), + column_id: column.id, + }, + }).then(() => {}); + } + }) + }, filterCreatedByMe: (state, action) => { state.projectBoard.columns.forEach((column) => { column.tasks = column.tasks.filter((task) => task.user_id === action.payload) @@ -128,7 +161,8 @@ export const { deletePersonOnProject, addPersonToProject, filterCreatedByMe, - filteredParticipateTasks + filteredParticipateTasks, + movePositionProjectTask } = projectsTrackerSlice.actions; export const getProjects = (state) => state.tracker.projects;