apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #102 from apuc/tracker-connect-back

Browse Source 
priority tasks
This commit is contained in:
NikoM1k 2023-06-15 21:47:24 +03:00 committed by GitHub
commit 07740c3369
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -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 = () => {
</div>
</div>
)}
{column.tasks.map((task, index) => {
{column.tasks.map((task) => {
return (
<div
key={task.id}
className="tasks__board__item"
className={`tasks__board__item ${
taskHover[task.id] ? "task__hover" : ""
}`}
draggable={true}
onDragStart={(e) =>
dragStartHandler(e, task, column.id)
}
onDragEnd={(e) => dragEndHandler(e)}
onDragStart={(e) => dragStartHandler(e, task, column.id)}
onDragOver={(e) => dragOverTaskHandler(e, task)}
onDragLeave={(e) => dragLeaveTaskHandler(e)}
onDragEnd={(e) => dragEndTaskHandler()}
onDrop={(e) => dragDropTaskHandler(e, task, column)}
onClick={(e) => openTicket(e, task)}
>
<div className="tasks__board__item__title">
<p>{task.title}</p>
<p className='task__board__item__title'>{task.title}</p>
</div>
<p className="tasks__board__item__description">
{task.description}

4
src/pages/Tracker/tracker.scss
View File

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

38
src/redux/projectsTrackerSlice.js
View File

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