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

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

Browse Source 
Tracker connect back
This commit is contained in:
NikoM1k 2023-05-05 00:51:55 +03:00 committed by GitHub
commit 5256159e2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 178 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Loader/Loader.js
View File

@ -3,10 +3,10 @@ import './loader.scss'
import React from "react"; import React from "react";
export const Loader = ({width = 50, height = 50}) => { export const Loader = ({width = 50, height = 50, style}) => {
return ( return (
<div className='loader'> <div className='loader'>
<SVGLoader type='Circles' color='#fff' height={height} width={width}/> <SVGLoader type='Circles' color={style ? style : `#fff`} height={height} width={width}/>
</div> </div>
) )
}; };

2
src/components/ProjectTiket/ProjectTiket.jsx
View File

@ -43,7 +43,7 @@ export const ProjectTiket = ({ project, index }) => {
method: "PUT", method: "PUT",
data: { data: {
project_id: project.id, project_id: project.id,
status: 0, status: 10,
}, },
}).then((res) => { }).then((res) => {
dispatch(deleteProject(project)); dispatch(deleteProject(project));

5
src/components/UI/ModalAdd/ModalAdd.jsx
View File

@ -62,6 +62,9 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
setDescriptionTicket(""); setDescriptionTicket("");
} }
function editProject() {
}
function getModal() { function getModal() {
switch (modalType) { switch (modalType) {
case "createColumn": case "createColumn":
@ -156,7 +159,7 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
></input> ></input>
</div> </div>
</div> </div>
<button className="button-add" onClick={(e) => e.preventDefault()}> <button className="button-add" onClick={editProject}>
Сохранить Сохранить
</button> </button>
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>

5
src/components/UI/ModalCreate/ModalCreate.jsx
View File

@ -21,7 +21,8 @@ export const ModalCreate = ({ active, setActive, title }) => {
status: 1, status: 1,
} }
}).then((res) => { }).then((res) => {
dispatch(setProject(res)); const result = {...res, columns: []}
dispatch(setProject(result));
setActive(false); setActive(false);
setInputValue(""); setInputValue("");
}) })
@ -44,7 +45,7 @@ export const ModalCreate = ({ active, setActive, title }) => {
className="name-project" className="name-project"
value={inputValue} value={inputValue}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
></input> />
</div> </div>
<button className="create-project" onClick={createName}> <button className="create-project" onClick={createName}>
Создать Создать

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

@ -4,15 +4,18 @@ 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 { Navigation } from "../../components/Navigation/Navigation"; import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../api/request"; import { apiRequest } from "../../api/request";
import { import {
getProjectBoard, getProjectBoard,
getBoarderLoader,
modalToggle, modalToggle,
moveProjectTask, moveProjectTask,
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
activeLoader
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@ -42,8 +45,10 @@ export const ProjectTracker = () => {
const startWrapperIndexTest = useRef({}); const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader)
useEffect(() => { useEffect(() => {
dispatch(activeLoader())
dispatch(setProjectBoardFetch(projectId.id)); dispatch(setProjectBoardFetch(projectId.id));
}, []); }, []);
@ -186,23 +191,27 @@ export const ProjectTracker = () => {
</Link> </Link>
</div> </div>
<div className="tracker__tabs__content"> <div className="tracker__tabs__content">
{loader &&
<Loader style='green' />
}
{!loader &&
<div className="tracker__tabs__content__tasks tasks active__content"> <div className="tracker__tabs__content__tasks tasks active__content">
<div className="tasks__head"> <div className="tasks__head">
<div className="tasks__head__wrapper"> <div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4> <h4>Проект : {projectBoard.name}</h4>
<ModalAdd <ModalAdd
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
selectedTab={selectedTab} selectedTab={selectedTab}
></ModalAdd> ></ModalAdd>
<div className="tasks__head__add"> <div className="tasks__head__add">
<span <span
onClick={() => { onClick={() => {
dispatch(modalToggle("createColumn")); dispatch(modalToggle("createColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
@ -213,11 +222,11 @@ export const ProjectTracker = () => {
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span <span
className="addPerson" className="addPerson"
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
@ -239,76 +248,76 @@ export const ProjectTracker = () => {
</div> </div>
<ModalTicket <ModalTicket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
task={selectedTicket} task={selectedTicket}
projectId={projectBoard.id} projectId={projectBoard.id}
projectName={projectBoard.name} projectName={projectBoard.name}
/> />
<div className="tasks__container"> <div className="tasks__container">
{Boolean(projectBoard?.columns) && {Boolean(projectBoard?.columns) &&
Boolean(projectBoard.columns.length) && Boolean(projectBoard.columns.length) &&
projectBoard.columns.map((column) => { projectBoard.columns.map((column) => {
return ( return (
<div <div
key={column.id} key={column.id}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(column.id)} onDragEnter={(e) => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, column.id)} onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${ className={`tasks__board ${
column.tasks.length >= 3 ? "tasks__board__more" : "" column.tasks.length >= 3 ? "tasks__board__more" : ""
} ${ } ${
wrapperHover[column.id] ? "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" : ""}>*/}
<span>{column.title}</span> <span>{column.title}</span>
<div> <div>
<span <span
className="add" className="add"
onClick={() => selectedTabTask(column.id)} onClick={() => selectedTabTask(column.id)}
> >
+ +
</span> </span>
<span <span
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
[column.id]: true, [column.id]: true,
})); }));
}} }}
className="more" className="more"
> >
... ...
</span> </span>
</div> </div>
</div> </div>
{openColumnSelect[column.id] && ( {openColumnSelect[column.id] && (
<div className="column__select"> <div className="column__select">
<div <div
className="column__select__item" className="column__select__item"
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
[column.id]: false, [column.id]: false,
})); }));
dispatch(modalToggle("editColumn")); dispatch(modalToggle("editColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
<img src={edit} alt="edit" /> <img src={edit} alt="edit" />
<span>Изменить</span> <span>Изменить</span>
</div>
<div
className="column__select__item"
onClick={() => deleteColumn(column.id)}
>
<img src={del} alt="delete" />
<span>Удалить</span>
</div>
</div> </div>
<div
className="column__select__item"
onClick={() => deleteColumn(column.id)}
>
<img src={del} alt="delete" />
<span>Удалить</span>
</div>
</div>
)} )}
{column.tasks.map((task, index) => { {column.tasks.map((task, index) => {
if (index > 2) { if (index > 2) {
@ -317,56 +326,63 @@ export const ProjectTracker = () => {
} }
} }
return ( return (
<div <div
key={task.id} key={task.id}
className="tasks__board__item" className="tasks__board__item"
draggable={true} draggable={true}
onDragStart={(e) => onDragStart={(e) =>
dragStartHandler(e, task, column.id) dragStartHandler(e, task, column.id)
} }
onDragEnd={(e) => dragEndHandler(e)} onDragEnd={(e) => dragEndHandler(e)}
onClick={(e) => openTicket(e, task)} onClick={(e) => openTicket(e, task)}
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.title}</p> <p>{task.title}</p>
</div>
<p className="tasks__board__item__description">
{task.description}
</p>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comments} коментариев</span>
</div> </div>
<div className="tasks__board__item__info__more"> <p className="tasks__board__item__description">
<img src={filesBoard} alt="filesImg" /> {task.description}
<span>{task.files} файлов</span> </p>
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comments} коментариев</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span>
</div>
{/*<div className="tasks__board__item__info__avatars">*/}
{/* <img src={task.avatarCreated} alt="avatar" />*/}
{/* <img src={task.avatarDo} alt="avatar" />*/}
{/*</div>*/}
</div> </div>
{/*<div className="tasks__board__item__info__avatars">*/}
{/* <img src={task.avatarCreated} alt="avatar" />*/}
{/* <img src={task.avatarDo} alt="avatar" />*/}
{/*</div>*/}
</div> </div>
</div>
); );
})} })}
{column.tasks.length > 3 && ( {column.tasks.length > 3 && (
<span <span
className={ className={
column.open column.open
? "lessItems openItems" ? "lessItems openItems"
: "moreItems openItems" : "moreItems openItems"
} }
// onClick={() => toggleMoreTasks(column.id)} // onClick={() => toggleMoreTasks(column.id)}
> >
{column.open ? "-" : "+"} {column.open ? "-" : "+"}
</span> </span>
)} )}
</div> </div>
); );
})} })}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) &&
<div className='tasks__board__noItems'>
В проекте нет задач.
</div>
}
</div> </div>
</div> </div>
}
</div> </div>
</div> </div>
<Footer /> <Footer />

63
src/pages/Tracker/Tracker.js
View File

@ -13,6 +13,7 @@ import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import { urlForLocal } from '../../helper' import { urlForLocal } from '../../helper'
import { getCorrectDate} from "../../components/Calendar/calendarHelper"; import { getCorrectDate} from "../../components/Calendar/calendarHelper";
import { Loader } from "../../components/Loader/Loader";
import project from "../../images/trackerProject.svg"; import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg"; import tasks from "../../images/trackerTasks.svg";
@ -29,6 +30,7 @@ export const Tracker = () => {
const tab = useSelector(getToggleTab) const tab = useSelector(getToggleTab)
const [allTasks, setAllTasks] = useState([]) const [allTasks, setAllTasks] = useState([])
const [filteredAllTasks, setFilteredAllTasks] = useState([]); const [filteredAllTasks, setFilteredAllTasks] = useState([]);
const [loader, setLoader] = useState(false)
const [archiveProjects] = useState([ const [archiveProjects] = useState([
{ {
@ -71,8 +73,10 @@ export const Tracker = () => {
const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false);
useEffect(() => { useEffect(() => {
setLoader(true)
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)) dispatch(setAllProjects(el.projects))
setLoader(false)
}) })
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => { apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
setAllTasks(el) setAllTasks(el)
@ -173,16 +177,22 @@ export const Tracker = () => {
title={"Укажите название проекта:"} title={"Укажите название проекта:"}
/> />
{Boolean(projects.length) && {loader &&
<Loader style='green'/>
}
{Boolean(projects.length) && !loader &&
projects.map((project, index) => { projects.map((project, index) => {
return ( return (
<ProjectTiket project.status !== 10 ?
key={index} <ProjectTiket
project={project} key={index}
></ProjectTiket> project={project}
></ProjectTiket>
: ''
); );
})} })}
{!Boolean(projects.length) && ( {(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
<div className="no-projects"> <div className="no-projects">
<div className="no-projects__createNew"> <div className="no-projects__createNew">
<div> <div>
@ -202,7 +212,7 @@ export const Tracker = () => {
</p> </p>
</div> </div>
)} )}
{Boolean(projects.length) && ( {Boolean(projects.length) && !loader && (
<div className="create-newProject"> <div className="create-newProject">
<button <button
className="createProjectBtn" className="createProjectBtn"
@ -235,25 +245,30 @@ export const Tracker = () => {
/> />
</div> </div>
</div> </div>
<div className="taskList__wrapper"> {loader &&
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => { <Loader style='green' />
return ( }
<div className="task" key={task.id}> {!loader &&
<div className="task__info"> <div className="taskList__wrapper">
<h5>{task.title}</h5> {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
<p>{task.description}</p> return (
</div> <div className="task" key={task.id}>
<div className="task__person"> <div className="task__info">
<img src={urlForLocal(task.user.avatar)} alt="avatar" /> <h5>{task.title}</h5>
<div className="task__project"> <p>{task.description}</p>
<p>{task.user.fio}</p> </div>
<span>{getCorrectDate(task.created_at)}</span> <div className="task__person">
<img src={urlForLocal(task.user.avatar)} alt="avatar" />
<div className="task__project">
<p>{task.user.fio}</p>
<span>{getCorrectDate(task.created_at)}</span>
</div>
</div> </div>
</div> </div>
</div> );
); })}
})} </div>
</div> }
</div> </div>
<div <div
className={ className={

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

@ -507,8 +507,9 @@
padding: 15px; padding: 15px;
background: #e1fccf; background: #e1fccf;
border-radius: 12px; border-radius: 12px;
right: -75px; right: -20px;
z-index: 10; top: 5px;
z-index: 7;
row-gap: 10px; row-gap: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -526,6 +527,11 @@
} }
} }
} }
&__noItems {
font-weight: 500;
font-size: 25px;
}
} }
.board { .board {

7
src/redux/projectsTrackerSlice.js
View File

@ -6,6 +6,7 @@ const initialState = {
projectBoard: {}, projectBoard: {},
toggleTab: 1, toggleTab: 1,
modalType: "", modalType: "",
boardLoader: false
}; };
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -30,6 +31,9 @@ export const projectsTrackerSlice = createSlice({
(project) => project.id !== action.payload.id (project) => project.id !== action.payload.id
); );
}, },
activeLoader: (state) => {
state.boardLoader = true
},
moveProjectTask: (state, action) => { moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.columnId) { if (column.id === action.payload.columnId) {
@ -56,6 +60,7 @@ export const projectsTrackerSlice = createSlice({
extraReducers: { extraReducers: {
[setProjectBoardFetch.fulfilled]: (state, action) => { [setProjectBoardFetch.fulfilled]: (state, action) => {
state.projectBoard = action.payload; state.projectBoard = action.payload;
state.boardLoader = false
}, },
}, },
}); });
@ -67,11 +72,13 @@ export const {
moveProjectTask, moveProjectTask,
setToggleTab, setToggleTab,
modalToggle, modalToggle,
activeLoader
} = projectsTrackerSlice.actions; } = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.projects; export const getProjects = (state) => state.tracker.projects;
export const getProjectBoard = (state) => state.tracker.projectBoard; export const getProjectBoard = (state) => state.tracker.projectBoard;
export const getToggleTab = (state) => state.tracker.toggleTab; export const getToggleTab = (state) => state.tracker.toggleTab;
export const getValueModalType = (state) => state.tracker.modalType; export const getValueModalType = (state) => state.tracker.modalType;
export const getBoarderLoader = (state) => state.tracker.boardLoader
export default projectsTrackerSlice.reducer; export default projectsTrackerSlice.reducer;