335 lines
12 KiB
JavaScript
335 lines
12 KiB
JavaScript
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 {apiRequest} from "../../api/request";
|
||
import { Navigation } from "../../components/Navigation/Navigation";
|
||
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { setAllProjects, getProjects, setToggleTab, getToggleTab } from "../../redux/projectsTrackerSlice";
|
||
|
||
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
|
||
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
|
||
import { urlForLocal } from '../../helper'
|
||
import { getCorrectDate} from "../../components/Calendar/calendarHelper";
|
||
|
||
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 search from "../../images/serchIcon.png";
|
||
import noProjects from "../../images/noProjects.png";
|
||
|
||
import "./tracker.scss";
|
||
|
||
export const Tracker = () => {
|
||
const dispatch = useDispatch();
|
||
const projects = useSelector(getProjects);
|
||
const tab = useSelector(getToggleTab)
|
||
const [allTasks, setAllTasks] = useState([])
|
||
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
|
||
|
||
const [archiveProjects] = useState([
|
||
{
|
||
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: "Будущее России",
|
||
}
|
||
]);
|
||
|
||
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
|
||
|
||
// Modal State
|
||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||
|
||
useEffect(() => {
|
||
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
|
||
dispatch(setAllProjects(el.projects))
|
||
})
|
||
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
|
||
setAllTasks(el)
|
||
setFilteredAllTasks(el)
|
||
})
|
||
}, [])
|
||
|
||
const toggleTabs = (index) => {
|
||
dispatch(setToggleTab(index))
|
||
};
|
||
|
||
function filterAllTask(e) {
|
||
setFilteredAllTasks(
|
||
allTasks.filter((item) => {
|
||
if (!e.target.value) {
|
||
return item;
|
||
}
|
||
if (
|
||
item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
|
||
item.description
|
||
.toLowerCase()
|
||
.startsWith(e.target.value.toLowerCase())
|
||
) {
|
||
return item;
|
||
}
|
||
})
|
||
);
|
||
}
|
||
|
||
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;
|
||
}
|
||
})
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="tracker">
|
||
<ProfileHeader />
|
||
<Navigation />
|
||
<div className="container">
|
||
<div className="tracker__content">
|
||
<ProfileBreadcrumbs
|
||
links={[
|
||
{ name: "Главная", link: "/profile" },
|
||
{ name: "Трекер", link: "/profile/tracker" },
|
||
]}
|
||
/>
|
||
<h2 className="tracker__title">Управление проектами с трекером</h2>
|
||
</div>
|
||
</div>
|
||
<div className="tracker__tabs">
|
||
<div className="tracker__tabs__head">
|
||
<div
|
||
className={tab === 1 ? "tab active-tab" : "tab"}
|
||
onClick={() => toggleTabs(1)}
|
||
>
|
||
<img src={project} alt="img" />
|
||
<p>Проекты </p>
|
||
</div>
|
||
<div
|
||
className={tab === 2 ? "tab active-tab" : "tab"}
|
||
onClick={() => toggleTabs(2)}
|
||
>
|
||
<img src={tasks} alt="img" />
|
||
<p>Все мои задачи</p>
|
||
</div>
|
||
<div
|
||
className={tab === 3 ? "tab active-tab" : "tab"}
|
||
onClick={() => toggleTabs(3)}
|
||
>
|
||
<img src={archive} alt="img" />
|
||
<p>Архив</p>
|
||
</div>
|
||
</div>
|
||
<div className="tracker__tabs__content">
|
||
<div
|
||
className={
|
||
tab === 1
|
||
? "tracker__tabs__content__projects active__content tracker__tabs__content__wrapper"
|
||
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
|
||
}
|
||
>
|
||
<ModalCreate
|
||
active={modalCreateProject}
|
||
setActive={setModalCreateProject}
|
||
title={"Укажите название проекта:"}
|
||
/>
|
||
|
||
{Boolean(projects.length) &&
|
||
projects.map((project, index) => {
|
||
return (
|
||
<ProjectTiket
|
||
key={index}
|
||
project={project}
|
||
></ProjectTiket>
|
||
);
|
||
})}
|
||
{!Boolean(projects.length) && (
|
||
<div className="no-projects">
|
||
<div className="no-projects__createNew">
|
||
<div>
|
||
<img src={noProjects} alt="noProjectImg" />
|
||
<p>Создайте свой первый проект</p>
|
||
</div>
|
||
<button
|
||
className="createProjectBtn"
|
||
onClick={() => setModalCreateProject(true)}
|
||
>
|
||
<span>+</span>Создать проект
|
||
</button>
|
||
</div>
|
||
<p className="no-projects__info">
|
||
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
|
||
времени
|
||
</p>
|
||
</div>
|
||
)}
|
||
{Boolean(projects.length) && (
|
||
<div className="create-newProject">
|
||
<button
|
||
className="createProjectBtn"
|
||
onClick={() => setModalCreateProject(true)}
|
||
>
|
||
<span>+</span>Создать проект
|
||
</button>
|
||
<p>
|
||
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
|
||
времени
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className={
|
||
tab === 2
|
||
? "tracker__tabs__content__allTasks taskList tasks active__content"
|
||
: "tracker__tabs__content__projects"
|
||
}
|
||
>
|
||
<div className="taskList__head">
|
||
<h3>Список всех задач</h3>
|
||
<div className="taskList__head__search">
|
||
<img src={search} alt="search" />
|
||
<input
|
||
type="text"
|
||
placeholder="Найти задачу"
|
||
onChange={(event) => filterAllTask(event)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="taskList__wrapper">
|
||
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
|
||
return (
|
||
<div className="task" key={task.id}>
|
||
<div className="task__info">
|
||
<h5>{task.title}</h5>
|
||
<p>{task.description}</p>
|
||
</div>
|
||
<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
|
||
className={
|
||
tab === 3
|
||
? "tracker__tabs__content__archive active__content"
|
||
: "tracker__tabs__content__projects"
|
||
}
|
||
>
|
||
<div className="archive__tasks">
|
||
<div className="archive__title">
|
||
<h3>Архив задач:</h3>
|
||
<p>{filterCompleteTasks.length} задач(а)</p>
|
||
<div className="archive__tasks__search">
|
||
<img src={search} alt="search" />
|
||
<input
|
||
type="text"
|
||
placeholder="Найти задачу"
|
||
onChange={(event) => filterArchiveTasks(event)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="archive__tasksWrapper">
|
||
{Boolean(filterCompleteTasks.length) ? (
|
||
filterCompleteTasks.map((task, index) => {
|
||
return (
|
||
<div className="archive__completeTask" key={index}>
|
||
<div className="archive__completeTask__description">
|
||
<p>{task.description}</p>
|
||
<p className="date">{task.dateComplete}</p>
|
||
</div>
|
||
<div className="archive__completeTask__info">
|
||
<img src={task.avatarDo} alt="avatar" />
|
||
<div className="archive__completeTask__info__project">
|
||
<span>Проект</span>
|
||
<p>{task.project}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div className="archive__noItem">
|
||
<p>В архиве задач нет</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="archive__projects">
|
||
<div className="archive__title">
|
||
<h3>Архив проектов:</h3>
|
||
<p>{archiveProjects.length} проект(ов)</p>
|
||
</div>
|
||
<div className="archive__tasksWrapper">
|
||
{Boolean(archiveProjects) ? (
|
||
archiveProjects.map((project, index) => {
|
||
return (
|
||
<div className="archive__completeTask" key={index}>
|
||
<div className="archive__completeTask__description">
|
||
<p>{project.name}</p>
|
||
<p className="date">{project.date}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})
|
||
) : (
|
||
<div className="archive__noItem">
|
||
<p>В архиве проектов нет</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|