import React, { useEffect, useState } from "react"; import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader"; import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { Footer } from "../../components/Footer/Footer"; import { useDispatch, useSelector } from "react-redux"; import { getProjects } from "../../redux/projectsTrackerSlice"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import project from "../../images/trackerProject.svg"; import tasks from "../../images/trackerTasks.svg"; import archive from "../../images/archiveTracker.svg"; import avatarTest from "../../images/AvatarTest .png"; import selectArrow from "../../images/select.svg"; import commentsBoard from "../../images/commentsBoard.svg"; import filesBoard from "../../images/filesBoard.svg"; import search from "../../images/serchIcon.png"; import noProjects from "../../images/noProjects.png"; import arrow from "../../images/arrowCalendar.png"; import "./tracker.scss"; import { Navigation } from "../../components/Navigation/Navigation"; export const Tracker = () => { const [toggleTab, setToggleTab] = useState(1); const [tabTaskMok, setTabTaskMok] = useState([ { name: "Открытые", open: false, tasks: [ { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 1, }, { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 2, }, ], }, { name: "В процессе", open: false, tasks: [ { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 3, }, ], }, { name: "На проверке", open: false, tasks: [ { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 4, }, { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 5, }, { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 6, }, { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 9, }, ], }, { name: "Готово", open: false, tasks: [ { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 7, }, { task: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 12, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: 8, }, ], }, ]); const [allTasks] = useState([ { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, ]); const [archiveProjects] = useState([ { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, { name: "Будущее России", date: "7 марта 2023 г", }, ]); const [completeTasks] = useState([ { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, { name: "PR - 2245", description: "Сверстать часть таблицы. Сверстать часть таблицы", dateComplete: "7 марта 2023 г", avatarDo: avatarTest, project: "Будущее России", }, ]); const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks); // Modal State const [modalActiveTicket, setModalActiveTicket] = useState(false); const [indexTicket, setIndexTicket] = useState(0); const [modalAddWorker, setModalAddWorker] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateTiket, setModalCreateTiket] = useState(false); const [valueTiket, setValueTiket] = useState(""); const [valueColl, setValueColl] = useState(""); // const [projectTasksOpen, setProjectTasksOpen] = useState(false); const [selectedTab, setSelectedTab] = useState({ name: "", indexTab: 0, task: [], }); const [startWrapperIndex, setStartWrapperIndex] = useState(null); const [wrapperHover, setWrapperHover] = useState([ false, false, false, false, ]); const projects = useSelector(getProjects); const toggleTabs = (index) => { if (projectTasksOpen) { setProjectTasksOpen(false); } setToggleTab(index); }; function toggleMoreTasks(wrapperIndex) { setTabTaskMok((prevArray) => prevArray.map((elem, index) => { if (wrapperIndex === index) { return { ...elem, open: !elem.open }; } else { return elem; } }) ); } function dragStartHandler(e, task, wrapperIndex) { setStartWrapperIndex({ task: task, index: wrapperIndex }); setTimeout(() => { e.target.classList.add("tasks__board__item__hide"); }, 0); } function dragEndHandler(e) { setWrapperHover((prevArray) => prevArray.map((elem) => { return false; }) ); e.target.classList.remove("tasks__board__item__hide"); } function dragOverHandler(e) { e.preventDefault(); } function dragEnterHandler(wrapperIndex) { if (wrapperIndex === startWrapperIndex.index) { return; } setWrapperHover((prevArray) => prevArray.map((elem, index) => { if (index === wrapperIndex) { return true; } else { return false; } }) ); } function dragDropHandler(e, wrapperIndex) { e.preventDefault(); if (startWrapperIndex.index === wrapperIndex) { return; } setWrapperHover((prevArray) => prevArray.map((elem) => { return false; }) ); setTabTaskMok((prevArray) => prevArray.map((elem, index) => { if (index === wrapperIndex) { return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] }; } else if (index === startWrapperIndex.index) { return { ...elem, tasks: elem.tasks.filter((item) => { return item.id !== startWrapperIndex.task.id; }), }; } else { return elem; } }) ); } function filterArchiveTasks(e) { setFilterCompleteTasks( completeTasks.filter((item) => { if (!e.target.value) { return item; } if ( item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) || item.description .toLowerCase() .startsWith(e.target.value.toLowerCase()) ) { return item; } }) ); } function selectedTabTask(e, wrapperIndex, name, tasks) { let tab = { name: name, indexTab: wrapperIndex, task: tasks }; setSelectedTab(tab); setModalCreateTiket(true); } function openTicket(e, iTicket) { setIndexTicket(iTicket); setModalActiveTicket(true); } function createTiket() { tabTaskMok.filter((item) => { if (item.name == selectedTab.name) { let idItem = 0; item.tasks.forEach((item) => { idItem = item.id; }); let newTiket = { task: valueTiket, description: "Сверстать часть таблицы. Сверстать часть таблицы", comments: 0, files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, id: idItem + 1, }; item.tasks.push(newTiket); } }); setModalCreateTiket(false); setValueTiket(""); } function createTab() { let newTab = { name: valueColl, open: false, tasks: [], }; tabTaskMok.unshift(newTab); setValueColl(""); setModalCreateColl(false); } return (
Проекты
Все мои задачи
Архив
Создайте свой первый проект
Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени
Ставьте задачи, следите за прогрессом, ведите учёт рабочего времени
Введите имя или e-mail{" "}
добавить задачу в проект
добавить участника в проект
Вернуться на проекты
{task.task}
{task.description}
{task.description}
{task.project}
{task.dateComplete}{filterCompleteTasks.length} задач(а)
{task.description}
{task.dateComplete}
{task.project}
В архиве задач нет
{archiveProjects.length} проект(ов)
{project.name}
{project.date}
В архиве проектов нет