tracker-connect

This commit is contained in:
Николай Полтщук 2023-04-28 14:56:59 +03:00
parent 2ecc569710
commit eeca39671a
6 changed files with 179 additions and 127 deletions

View File

@ -6,10 +6,15 @@ import archiveSet from "../../images/archive.svg";
import del from "../../images/delete.svg"; import del from "../../images/delete.svg";
import edit from "../../images/edit.svg"; import edit from "../../images/edit.svg";
// import {apiRequest} from "../../api/request";
import {useDispatch} from "react-redux";
import { setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
import "./projectTiket.scss"; import "./projectTiket.scss";
export const ProjectTiket = ({ project, index, setOpenProject }) => { export const ProjectTiket = ({ project, index, setOpenProject }) => {
const [modalSettings, setModalSettings] = useState(false); const [modalSettings, setModalSettings] = useState(false);
const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
initListeners(); initListeners();
@ -32,11 +37,14 @@ export const ProjectTiket = ({ project, index, setOpenProject }) => {
return ( return (
<div className="project" key={index}> <div className="project" key={index}>
<h3 onClick={() => setOpenProject(true)}>{project.name}</h3> <h3 onClick={() =>{
setOpenProject(true)
dispatch(setProjectBoardFetch(project.id))
}}>{project.name}</h3>
<div className="project__info"> <div className="project__info">
<p>Открытые задачи</p> <p>Открытые задачи</p>
<span className="count">{project.count}</span> <span className="count">-</span>
<span className="add">+</span> {/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
<span className="menu-settings" onClick={() => setModalSettings(true)}> <span className="menu-settings" onClick={() => setModalSettings(true)}>
... ...
</span> </span>

View File

@ -20,7 +20,7 @@
padding: 60px 60px 30px 60px; padding: 60px 60px 30px 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: center;
justify-content: center; justify-content: center;
} }
@ -34,14 +34,14 @@
height: 35px; height: 35px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
margin-top: 12px;
} }
h4 { h4 {
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 17px;
line-height: 26px; line-height: 26px;
color: #263238 !important; color: #263238 !important;
margin-bottom: 22px !important;
} }
&__decs { &__decs {
@ -73,7 +73,7 @@
} }
.button-add { .button-add {
margin: 20px 40% 0 0; margin: 20px;
width: 130px; width: 130px;
height: 37px; height: 37px;
background: #52b709; background: #52b709;

View File

@ -13,21 +13,15 @@ export const ModalCreate = ({ active, setActive, title }) => {
if (inputValue === "") { if (inputValue === "") {
return; return;
} else { } else {
let newItem = {
name: inputValue,
count: 0,
};
apiRequest('/project/create', { apiRequest('/project/create', {
method: 'POST', method: 'POST',
data: { data: {
user_id: localStorage.getItem('id'), user_id: localStorage.getItem('id'),
name: inputValue, name: inputValue,
status: 1, status: 1,
// description: '',
// company_id: 3
} }
}).then((res) => { }).then((res) => {
dispatch(setProject(newItem)); dispatch(setProject(res));
setActive(false); setActive(false);
setInputValue(""); setInputValue("");
}) })

View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useRef, useState} from "react";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getProjects } from "../../redux/projectsTrackerSlice"; import { setAllProjects, getProjects, getProjectBoard, moveProjectTask, setProjectBoardFetch } from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
@ -26,10 +26,10 @@ import arrow from "../../images/arrowCalendar.png";
import {apiRequest} from "../../api/request"; import {apiRequest} from "../../api/request";
import { Navigation } from "../../components/Navigation/Navigation"; import { Navigation } from "../../components/Navigation/Navigation";
import "./tracker.scss"; import "./tracker.scss";
export const Tracker = () => { export const Tracker = () => {
const dispatch = useDispatch();
const [toggleTab, setToggleTab] = useState(1); const [toggleTab, setToggleTab] = useState(1);
const [tabTaskMok, setTabTaskMok] = useState([ const [tabTaskMok, setTabTaskMok] = useState([
{ {
@ -369,18 +369,16 @@ export const Tracker = () => {
const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false);
const [modalCreateTiket, setModalCreateTiket] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false);
const [valueTiket, setValueTiket] = useState(""); const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("")
const [valueColl, setValueColl] = useState(""); const [valueColl, setValueColl] = useState("");
// //
const [projectTasksOpen, setProjectTasksOpen] = useState(false); const [projectTasksOpen, setProjectTasksOpen] = useState(false);
const [selectedTab, setSelectedTab] = useState({ const [selectedTab, setSelectedTab] = useState(0);
name: "",
indexTab: 0,
task: [],
});
const [startWrapperIndex, setStartWrapperIndex] = useState(null); const [startWrapperIndex, setStartWrapperIndex] = useState(null);
const startWrapperIndexTest = useRef({})
const [wrapperHover, setWrapperHover] = useState([ const [wrapperHover, setWrapperHover] = useState([
false, false,
false, false,
@ -390,11 +388,12 @@ export const Tracker = () => {
useEffect(() => { useEffect(() => {
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => { apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
dispatch(setAllProjects(el.projects))
}) })
}, []) }, [])
const projects = useSelector(getProjects); const projects = useSelector(getProjects);
const projectBoard = useSelector(getProjectBoard);
const toggleTabs = (index) => { const toggleTabs = (index) => {
if (projectTasksOpen) { if (projectTasksOpen) {
@ -403,10 +402,10 @@ export const Tracker = () => {
setToggleTab(index); setToggleTab(index);
}; };
function toggleMoreTasks(wrapperIndex) { function toggleMoreTasks(columnId) {
setTabTaskMok((prevArray) => setTabTaskMok((prevArray) =>
prevArray.map((elem, index) => { prevArray.map((elem, index) => {
if (wrapperIndex === index) { if (columnId === index) {
return { ...elem, open: !elem.open }; return { ...elem, open: !elem.open };
} else { } else {
return elem; return elem;
@ -415,8 +414,9 @@ export const Tracker = () => {
); );
} }
function dragStartHandler(e, task, wrapperIndex) { function dragStartHandler(e, task, columnId) {
setStartWrapperIndex({ task: task, index: wrapperIndex }); // setStartWrapperIndex({ task: task, index: columnId });
startWrapperIndexTest.current = { task: task, index: columnId };
setTimeout(() => { setTimeout(() => {
e.target.classList.add("tasks__board__item__hide"); e.target.classList.add("tasks__board__item__hide");
}, 0); }, 0);
@ -435,13 +435,13 @@ export const Tracker = () => {
e.preventDefault(); e.preventDefault();
} }
function dragEnterHandler(wrapperIndex) { function dragEnterHandler(columnId) {
if (wrapperIndex === startWrapperIndex.index) { if (columnId === startWrapperIndexTest.current.index) {
return; return;
} }
setWrapperHover((prevArray) => setWrapperHover((prevArray) =>
prevArray.map((elem, index) => { prevArray.map((elem, index) => {
if (index === wrapperIndex) { if (index === columnId) {
return true; return true;
} else { } else {
return false; return false;
@ -450,9 +450,9 @@ export const Tracker = () => {
); );
} }
function dragDropHandler(e, wrapperIndex) { function dragDropHandler(e, columnId) {
e.preventDefault(); e.preventDefault();
if (startWrapperIndex.index === wrapperIndex) { if (startWrapperIndexTest.current.index === columnId) {
return; return;
} }
setWrapperHover((prevArray) => setWrapperHover((prevArray) =>
@ -460,22 +460,27 @@ export const Tracker = () => {
return false; return false;
}) })
); );
setTabTaskMok((prevArray) =>
prevArray.map((elem, index) => { if (columnId !== startWrapperIndexTest.current.index) {
if (index === wrapperIndex) { dispatch(moveProjectTask({startWrapperIndex:startWrapperIndexTest.current, columnId}))
return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] }; }
} else if (index === startWrapperIndex.index) {
return { // setTabTaskMok((prevArray) =>
...elem, // prevArray.map((elem, index) => {
tasks: elem.tasks.filter((item) => { // if (index === columnId) {
return item.id !== startWrapperIndex.task.id; // return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] };
}), // } else if (index === startWrapperIndex.index) {
}; // return {
} else { // ...elem,
return elem; // tasks: elem.tasks.filter((item) => {
} // return item.id !== startWrapperIndex.task.id;
}) // }),
); // };
// } else {
// return elem;
// }
// })
// );
} }
function filterArchiveTasks(e) { function filterArchiveTasks(e) {
@ -496,9 +501,8 @@ export const Tracker = () => {
); );
} }
function selectedTabTask(e, wrapperIndex, name, tasks) { function selectedTabTask(columnId) {
let tab = { name: name, indexTab: wrapperIndex, task: tasks }; setSelectedTab(columnId);
setSelectedTab(tab);
setModalCreateTiket(true); setModalCreateTiket(true);
} }
@ -508,39 +512,64 @@ export const Tracker = () => {
} }
function createTiket() { function createTiket() {
tabTaskMok.filter((item) => { if (!valueTiket || !descriptionTicket) {
if (item.name == selectedTab.name) { return
let idItem = 0; }
item.tasks.forEach((item) => { apiRequest('/task/create-task', {
idItem = item.id; method: 'POST',
}); data: {
project_id: projectBoard.id,
let newTiket = { title: valueTiket,
task: valueTiket, description: descriptionTicket,
description: "Сверстать часть таблицы. Сверстать часть таблицы", status: 1,
comments: 0, user_id: localStorage.getItem('id'),
files: 0, column_id: selectedTab
avatarCreated: avatarTest,
avatarDo: avatarTest,
id: idItem + 1,
};
item.tasks.push(newTiket);
} }
}); }).then((res) => {
dispatch(setProjectBoardFetch(projectBoard.id))
})
setModalCreateTiket(false); setModalCreateTiket(false);
setValueTiket(""); setValueTiket("");
setDescriptionTicket("")
// tabTaskMok.filter((item) => {
// if (item.name == selectedTab.name) {
// let idItem = 0;
//
// item.tasks.forEach((item) => {
// idItem = item.id;
// });
//
// let newTiket = {
// task: valueTiket,
// description: descriptionTicket,
// comments: 0,
// files: 0,
// avatarCreated: avatarTest,
// avatarDo: avatarTest,
// id: idItem + 1,
// };
//
// item.tasks.push(newTiket);
// }
// });
} }
function createTab() { function createTab() {
let newTab = { if (!valueColl) {
name: valueColl, return
open: false, }
tasks: [],
};
tabTaskMok.unshift(newTab); apiRequest('/project-column/create-column', {
method: 'POST',
data: {
project_id: projectBoard.id,
title: valueColl
}
}).then((res) => {
dispatch(setProjectBoardFetch(projectBoard.id))
})
setValueColl(""); setValueColl("");
setModalCreateColl(false); setModalCreateColl(false);
} }
@ -653,7 +682,7 @@ export const Tracker = () => {
> >
<div className="tasks__head"> <div className="tasks__head">
<div className="tasks__head__wrapper"> <div className="tasks__head__wrapper">
<h4>Проект : Разработка трекера</h4> <h4>Проект : {projectBoard.name}</h4>
<ModalAdd <ModalAdd
active={modalCreateColl} active={modalCreateColl}
@ -735,12 +764,21 @@ export const Tracker = () => {
<ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}> <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
<div className="title-project"> <div className="title-project">
<h4>Введите название карточки</h4> <h4>Введите название и описание задачи</h4>
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"
value={valueTiket} value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)} onChange={(e) => setValueTiket(e.target.value)}
placeholder='Название задачи'
></input>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder='Описание задачи'
></input> ></input>
</div> </div>
</div> </div>
@ -750,59 +788,53 @@ export const Tracker = () => {
</ModalAdd> </ModalAdd>
<div className="tasks__container"> <div className="tasks__container">
{tabTaskMok.map((section, wrapperIndex) => { {Boolean(projectBoard?.columns) && Boolean(projectBoard.columns.length) && projectBoard.columns.map((column) => {
return ( return (
<div <div
key={wrapperIndex} key={column.id}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(wrapperIndex)} onDragEnter={(e) => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, wrapperIndex)} onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${ className={`tasks__board ${
section.tasks.length >= 3 ? "tasks__board__more" : "" column.tasks.length >= 3 ? "tasks__board__more" : ""
} ${ } ${
wrapperHover[wrapperIndex] ? "tasks__board__hover" : "" wrapperHover[column.id] ? "tasks__board__hover" : ""
}`} }`}
> >
<div className="board__head"> <div className="board__head">
<span className={wrapperIndex === 3 ? "done" : ""}> {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
{section.name} <span>
{column.title}
</span> </span>
<div> <div>
<span <span
className="add" className="add"
onClick={(e) => onClick={() => selectedTabTask(column.id)}
selectedTabTask(
e,
wrapperIndex,
section.name,
section.tasks
)
}
> >
+ +
</span> </span>
<span className="more">...</span> <span className="more">...</span>
</div> </div>
</div> </div>
{section.tasks.map((task, index) => { {column.tasks.map((task, index) => {
if (index > 2) { if (index > 2) {
if (!section.open) { if (!column.open) {
return; return;
} }
} }
return ( return (
<div <div
key={index} key={task.id}
className="tasks__board__item" className="tasks__board__item"
draggable={true} draggable={true}
onDragStart={(e) => onDragStart={(e) =>
dragStartHandler(e, task, wrapperIndex) dragStartHandler(e, task, column.id)
} }
onDragEnd={(e) => dragEndHandler(e)} onDragEnd={(e) => dragEndHandler(e)}
onClick={(e) => openTicket(e, index)} onClick={(e) => openTicket(e, task.id)}
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.task}</p> <p>{task.title}</p>
</div> </div>
<p className="tasks__board__item__description"> <p className="tasks__board__item__description">
{task.description} {task.description}
@ -816,24 +848,24 @@ export const Tracker = () => {
<img src={filesBoard} alt="filesImg" /> <img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span> <span>{task.files} файлов</span>
</div> </div>
<div className="tasks__board__item__info__avatars"> {/*<div className="tasks__board__item__info__avatars">*/}
<img src={task.avatarCreated} alt="avatar" /> {/* <img src={task.avatarCreated} alt="avatar" />*/}
<img src={task.avatarDo} alt="avatar" /> {/* <img src={task.avatarDo} alt="avatar" />*/}
</div> {/*</div>*/}
</div> </div>
</div> </div>
); );
})} })}
{section.tasks.length > 3 && ( {column.tasks.length > 3 && (
<span <span
className={ className={
section.open column.open
? "lessItems openItems" ? "lessItems openItems"
: "moreItems openItems" : "moreItems openItems"
} }
onClick={() => toggleMoreTasks(wrapperIndex)} onClick={() => toggleMoreTasks(column.id)}
> >
{section.open ? "-" : "+"} {column.open ? "-" : "+"}
</span> </span>
)} )}
</div> </div>

View File

@ -397,6 +397,9 @@
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
cursor: pointer; cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
&__hide { &__hide {
opacity: 0; opacity: 0;

View File

@ -1,34 +1,49 @@
import { createSlice } from "@reduxjs/toolkit"; import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import {apiRequest} from "../api/request";
import {act} from "@testing-library/react";
const initialState = { const initialState = {
project: [ projects: [],
{ projectBoard: {}
name: "Разработка трекера",
count: 4,
},
{
name: "Кинотеатр",
count: 4,
},
{
name: "Проект страхование",
count: 4,
},
],
}; };
export const setProjectBoardFetch = createAsyncThunk(
'userInfo',
(id) =>
apiRequest(`/project/get-project?project_id=${id}&expand=columns`)
);
export const projectsTrackerSlice = createSlice({ export const projectsTrackerSlice = createSlice({
name: "projectsTracker", name: "projectsTracker",
initialState, initialState,
reducers: { reducers: {
setProject: (state, action) => { setAllProjects: (state, action) => {
state.project.push(action.payload); state.projects = action.payload
}, },
setProject: (state, action) => {
state.projects.push(action.payload);
},
moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column) => {
if (column.id === action.payload.columnId) {
column.tasks.push(action.payload.startWrapperIndex.task)
}
if (column.id === action.payload.startWrapperIndex.index) {
column.tasks.splice(column.tasks.indexOf(action.payload.startWrapperIndex.task), 1)
}
})
}
}, },
extraReducers: {
[setProjectBoardFetch.fulfilled]: (state, action) => {
state.projectBoard = action.payload
}
}
}); });
export const { setProject } = projectsTrackerSlice.actions; export const { setProject, setAllProjects, moveProjectTask } = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.project; export const getProjects = (state) => state.tracker.projects;
export const getProjectBoard = (state) => state.tracker.projectBoard;
export default projectsTrackerSlice.reducer; export default projectsTrackerSlice.reducer;