323 lines
11 KiB
JavaScript
323 lines
11 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
|
||
import {
|
||
getProjects,
|
||
getToggleTab,
|
||
modalToggle,
|
||
setAllProjects,
|
||
setToggleTab
|
||
} from "@redux/projectsTrackerSlice";
|
||
|
||
import { apiRequest } from "@api/request";
|
||
|
||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||
import { Footer } from "@components/Common/Footer/Footer";
|
||
import { Loader } from "@components/Common/Loader/Loader";
|
||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||
import { Navigation } from "@components/Navigation/Navigation";
|
||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||
import AllTaskTableTracker from "@components/TrackerComponents/AllTaskTableTracker/AllTaskTableTracker";
|
||
import Archive from "@components/TrackerComponents/Archive/Archive";
|
||
import ProjectTicket from "@components/TrackerComponents/ProjectTicket/ProjectTicket";
|
||
|
||
import addProjectImg from "assets/icons/addProjectImg.svg";
|
||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||
import filterIcon from "assets/icons/filterIcon.svg";
|
||
import search from "assets/icons/serchIcon.png";
|
||
import project from "assets/icons/trackerProject.svg";
|
||
import tasks from "assets/icons/trackerTasks.svg";
|
||
import archive from "assets/images/archiveIcon.png";
|
||
import downloadExcel from "assets/images/downloadExcel.svg";
|
||
import noProjects from "assets/images/noProjects.png";
|
||
import statusTimeTask from "assets/images/statusTimeTask.svg";
|
||
|
||
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 [loader, setLoader] = useState(false);
|
||
const [filterCompleteTasks, setFilterCompleteTasks] = useState([]);
|
||
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
|
||
|
||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setLoader(true);
|
||
apiRequest(
|
||
`/project/project-list?user_id=${localStorage.getItem(
|
||
"id"
|
||
)}&expand=columns`
|
||
).then((el) => {
|
||
dispatch(setAllProjects(el.projects));
|
||
setLoader(false);
|
||
// setAllCompletedTasks(el.projects.filter((project) => {
|
||
// if (project.status === 10 && project.columns.length) {
|
||
// return project
|
||
// }
|
||
// }).map((project) => { return project.columns}).reduce((acu, curr) => {
|
||
// curr.forEach((item) => {
|
||
// acu.push(...item.tasks)
|
||
// })
|
||
// return acu
|
||
// }, []))
|
||
});
|
||
apiRequest(
|
||
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}&expand=timers`
|
||
).then((el) => {
|
||
const allTasks = el ? el.filter((item) => item.status !== 0) : [];
|
||
const completedTasks = el ? el.filter((item) => item.status === 0) : [];
|
||
setAllTasks(allTasks);
|
||
setFilteredAllTasks(allTasks);
|
||
setAllCompletedTasks(completedTasks);
|
||
setFilterCompleteTasks(completedTasks);
|
||
});
|
||
}, []);
|
||
|
||
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;
|
||
}
|
||
})
|
||
);
|
||
}
|
||
|
||
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"
|
||
}
|
||
>
|
||
<TrackerModal
|
||
active={modalCreateProject}
|
||
setActive={setModalCreateProject}
|
||
titleProject={"Укажите название проекта:"}
|
||
></TrackerModal>
|
||
|
||
{loader && <Loader style="green" />}
|
||
|
||
{projects &&
|
||
Boolean(projects.length) &&
|
||
!loader &&
|
||
projects?.map((project, index) => {
|
||
return project.status !== 10 ? (
|
||
<ProjectTicket key={index} project={project} />
|
||
) : (
|
||
""
|
||
);
|
||
})}
|
||
{typeof projects === "object" &&
|
||
(!Boolean(projects.length) ||
|
||
!Boolean(
|
||
projects?.filter((project) => project.status !== 10).length
|
||
)) &&
|
||
!loader && (
|
||
<div className="no-projects">
|
||
<div className="no-projects__create-new">
|
||
<div>
|
||
<img src={noProjects} alt="noProjectImg" />
|
||
<p>Создайте свой первый проект</p>
|
||
</div>
|
||
|
||
<BaseButton
|
||
styles={"create-project-btn"}
|
||
onClick={() => {
|
||
dispatch(modalToggle("create-project"));
|
||
setModalCreateProject(true);
|
||
}}
|
||
>
|
||
<img src={addProjectImg} alt="#"></img>
|
||
<p className="create-project-btn__text">
|
||
Ставьте задачи, следите за прогрессом, ведите учёт
|
||
рабочего времени
|
||
</p>
|
||
</BaseButton>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{projects && Boolean(projects.length) && !loader && (
|
||
<>
|
||
<BaseButton
|
||
styles="create-project-btn"
|
||
onClick={() => {
|
||
dispatch(modalToggle("create-project"));
|
||
setModalCreateProject(true);
|
||
}}
|
||
>
|
||
<img src={addProjectImg} alt="#"></img>
|
||
<p className="create-project-btn__text">Добавить проект</p>
|
||
</BaseButton>
|
||
</>
|
||
)}
|
||
</div>
|
||
<div
|
||
className={
|
||
tab === 2
|
||
? "tracker__tabs__content__allTasks taskList tasks active__content"
|
||
: "tracker__tabs__content__projects"
|
||
}
|
||
>
|
||
<div className="taskList__head">
|
||
<div className="taskList__tasks-period">
|
||
<div className="month-period">
|
||
<p>
|
||
{25} - {35}
|
||
</p>
|
||
<h3>Сентября,</h3>
|
||
<h3>2023</h3>
|
||
</div>
|
||
|
||
<div className="buttons-month">
|
||
<button>
|
||
<img src={arrowViewReport} alt="<"></img>
|
||
</button>
|
||
<button>
|
||
<img src={arrowViewReport} alt=">"></img>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="taskList__head__search">
|
||
<img src={search} alt="search" />
|
||
<input
|
||
type="text"
|
||
placeholder="Найти задачу"
|
||
onChange={(event) => filterAllTask(event)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="taskList__filters">
|
||
<BaseButton styles={"taskList__filters-filter"}>
|
||
<img src={filterIcon} alt="#" />
|
||
<p>Фильтр</p>
|
||
</BaseButton>
|
||
<BaseButton styles={"taskList__filters-clear"}>
|
||
<p> Очистить фильтр</p>
|
||
</BaseButton>
|
||
</div>
|
||
</div>
|
||
|
||
{loader && <Loader style="green" />}
|
||
|
||
<AllTaskTableTracker
|
||
loader={loader}
|
||
filteredAllTasks={filteredAllTasks}
|
||
projects={projects}
|
||
/>
|
||
|
||
<div className="taskList__time">
|
||
<div className="taskList__time-compited">
|
||
<h4>Учет моего рабочего времени за день</h4>
|
||
<h3>
|
||
Задач выполнено: <p>{2}</p>
|
||
</h3>
|
||
</div>
|
||
<div className="taskList__time-all">
|
||
<h3>Общее время:</h3>
|
||
<p>{"4 ч 34 мин"}</p>
|
||
</div>
|
||
<div className="taskList__time-status">
|
||
<div>
|
||
<img src={statusTimeTask} alt="#" />
|
||
<p>Сверка пройдена</p>
|
||
</div>
|
||
<div>
|
||
<img src={downloadExcel} alt="#" />
|
||
<p>Скачать Excel-отчет</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="taskList__end">
|
||
<BaseButton styles={"close-day"}>
|
||
Закрыть сегодняшний день
|
||
</BaseButton>
|
||
<p>
|
||
Нажимая кнопку “Закрыть сегодняшний день”, вы отправляете
|
||
потраченное время на сверку
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className={
|
||
tab === 3
|
||
? "tracker__tabs__content__archive active__content"
|
||
: "tracker__tabs__content__projects"
|
||
}
|
||
>
|
||
<Archive
|
||
projects={projects}
|
||
loader={loader}
|
||
filterCompleteTasks={filterCompleteTasks}
|
||
allCompletedTasks={allCompletedTasks}
|
||
setFilterCompleteTasks={setFilterCompleteTasks}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
};
|