Введите название и описание задачи
@@ -140,37 +153,79 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
- setActive(false)}>
- );
- case "editProject":
- return (
-
e.stopPropagation()}
- >
+ )}
+ {modalType === "editProject" && (
+
-
setActive(false)}>
- );
- case "editColumn":
- return (
-
e.stopPropagation()}
- >
+ )}
+ {modalType === "createProject" && (
+
+
+
{titleProject}
+
+ setNameProject(e.target.value)}
+ />
+
+
+
+
+ )}
+ {modalType === "addSubtask" && (
+
+
+
+ Вы добавляете подзадачу{" "}
+
в колонку(id) задачи "{defautlInput}"
+
+
Введите текст
+
+
+
+
+
+
+ )}
+ {modalType === "createColumn" && (
+
+
+
Введите название колонки
+
+ setValueColumn(e.target.value)}
+ >
+
+
+
+
+ )}
+ {/* TODO: fix state */}
+ {modalType === "editColumn" && (
+
Введите новое название
@@ -184,20 +239,11 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
- setActive(false)}>
- );
- default:
- return null;
- }
- }
+ )}
- return (
-
setActive(false)}
- >
- {getModal()}
+ setActive(false)}>
+
);
};
diff --git a/src/components/UI/ModalAdd/modalAdd.scss b/src/components/UI/ModalAdd/modalAdd.scss
index 9e54d8b4..ca46330b 100644
--- a/src/components/UI/ModalAdd/modalAdd.scss
+++ b/src/components/UI/ModalAdd/modalAdd.scss
@@ -39,7 +39,7 @@
h4 {
font-weight: 500;
- font-size: 17px;
+ font-size: 22px;
line-height: 26px;
color: #263238 !important;
}
diff --git a/src/components/UI/ModalCreate/ModalCreate.jsx b/src/components/UI/ModalCreate/ModalCreate.jsx
deleted file mode 100644
index b2a3fa27..00000000
--- a/src/components/UI/ModalCreate/ModalCreate.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import { useDispatch } from "react-redux";
-import { setProject } from "../../../redux/projectsTrackerSlice";
-import {apiRequest} from "../../../api/request";
-
-import "./ModalCreate.scss";
-
-export const ModalCreate = ({ active, setActive, title }) => {
- const [inputValue, setInputValue] = useState("");
- const dispatch = useDispatch();
-
- function createName() {
- if (inputValue === "") {
- return;
- } else {
- apiRequest('/project/create', {
- method: 'POST',
- data: {
- user_id: localStorage.getItem('id'),
- name: inputValue,
- status: 1,
- }
- }).then((res) => {
- const result = {...res, columns: []}
- dispatch(setProject(result));
- setActive(false);
- setInputValue("");
- })
- }
- }
-
- return (
-
setActive(false)}
- >
-
e.stopPropagation()}
- >
-
-
{title}
-
- setInputValue(e.target.value)}
- />
-
-
-
-
setActive(false)}>
-
-
- );
-};
-
-export default ModalCreate;
diff --git a/src/components/UI/ModalCreate/ModalCreate.scss b/src/components/UI/ModalCreate/ModalCreate.scss
deleted file mode 100644
index 5139572e..00000000
--- a/src/components/UI/ModalCreate/ModalCreate.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.modal-project {
- z-index: 9999;
- height: 100%;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.11);
- position: fixed;
- top: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- transform: scale(0);
-
- &__content {
- position: relative;
- width: 424px;
- height: 248px;
- background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
- border-radius: 40px;
-
- padding: 15px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- .title-project {
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-
- .input-container {
- width: 287px;
- height: 35px;
- background: #ffffff;
- border-radius: 8px;
- }
-
- h4 {
- font-weight: 500;
- font-size: 22px;
- line-height: 26px;
- color: #263238;
- margin-bottom: 22px;
- }
- }
-
- .name-project {
- margin-left: 10px;
- border: none;
- outline: none;
- height: 100%;
- width: 90%;
- font-size: 14px;
- }
-
- .create-project {
- margin: 30px 0 0 0;
- width: 130px;
- height: 37px;
- background: #52b709;
- border-radius: 44px;
- border: none;
- font-weight: 400;
- font-size: 15px;
- line-height: 32px;
- color: #ffffff;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
-}
-
-.modal-project.active {
- transform: scale(1);
-}
diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx
index 04c968d2..145ae3a2 100644
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/src/components/UI/ModalTicket/ModalTicket.jsx
@@ -3,7 +3,10 @@ import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import { apiRequest } from "../../../api/request";
import { useDispatch } from "react-redux";
-import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice";
+import {
+ modalToggle,
+ setProjectBoardFetch,
+} from "../../../redux/projectsTrackerSlice";
import category from "../../../images/category.png";
import watch from "../../../images/watch.png";
@@ -56,7 +59,10 @@ export const ModalTiсket = ({
Проект: {projectName}
-
+
@@ -71,7 +77,12 @@ export const ModalTiсket = ({
-
-
-
-
- Вы добавляете подзадачу
в колонку задачи {"Готово"}
-
-
Введите текст
-
-
-
-
- e.preventDefault()}>
- Добавить
-
-
+
+
);
};
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 0654e51c..f1b83edf 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -1,18 +1,24 @@
-import React, {useEffect, useState} from "react";
+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 { 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 {
+ setAllProjects,
+ getProjects,
+ setToggleTab,
+ getToggleTab,
+ modalToggle,
+} from "../../redux/projectsTrackerSlice";
-import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
+import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
-import { urlForLocal } from '../../helper'
-import { getCorrectDate} from "../../components/Calendar/calendarHelper";
+import { urlForLocal } from "../../helper";
+import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import { Loader } from "../../components/Loader/Loader";
import project from "../../images/trackerProject.svg";
@@ -27,10 +33,11 @@ import "./tracker.scss";
export const Tracker = () => {
const dispatch = useDispatch();
const projects = useSelector(getProjects);
- const tab = useSelector(getToggleTab)
- const [allTasks, setAllTasks] = useState([])
+ const tab = useSelector(getToggleTab);
+
+ const [allTasks, setAllTasks] = useState([]);
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
- const [loader, setLoader] = useState(false)
+ const [loader, setLoader] = useState(false);
const [archiveProjects] = useState([
{
@@ -40,7 +47,7 @@ export const Tracker = () => {
{
name: "Будущее России",
date: "7 марта 2023 г",
- }
+ },
]);
const [completeTasks] = useState([
@@ -64,7 +71,7 @@ export const Tracker = () => {
dateComplete: "7 марта 2023 г",
avatarDo: avatarTest,
project: "Будущее России",
- }
+ },
]);
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
@@ -73,36 +80,42 @@ export const Tracker = () => {
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)
- })
- apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
- setAllTasks(el)
- setFilteredAllTasks(el)
- })
- }, [])
+ setLoader(true);
+ apiRequest(
+ `/project/project-list?user_id=${localStorage.getItem(
+ "id"
+ )}&expand=columns`
+ ).then((el) => {
+ dispatch(setAllProjects(el.projects));
+ setLoader(false);
+ });
+ apiRequest(
+ `/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
+ ).then((el) => {
+ setAllTasks(el);
+ setFilteredAllTasks(el);
+ });
+ }, []);
const toggleTabs = (index) => {
- dispatch(setToggleTab(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;
- }
- })
+ 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;
+ }
+ })
);
}
@@ -171,52 +184,58 @@ export const Tracker = () => {
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
}
>
-
+ titleProject={"Укажите название проекта:"}
+ >
- {loader &&
-
- }
+ {loader &&
}
- {Boolean(projects.length) && !loader &&
+ {Boolean(projects.length) &&
+ !loader &&
projects.map((project, index) => {
- return (
- project.status !== 10 ?
-
- : ''
+ return project.status !== 10 ? (
+
+ ) : (
+ ""
);
})}
- {(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
-
-
-
-
-
Создайте свой первый проект
+ {(!Boolean(projects.length) ||
+ !Boolean(
+ projects.filter((project) => project.status !== 10).length
+ )) &&
+ !loader && (
+
+
+
+
+
Создайте свой первый проект
+
+
{
+ dispatch(modalToggle("createProject"));
+ setModalCreateProject(true);
+ }}
+ >
+ +Создать проект
+
-
setModalCreateProject(true)}
- >
- +Создать проект
-
+
+ Ставьте задачи, следите за прогрессом, ведите учёт рабочего
+ времени
+
-
- Ставьте задачи, следите за прогрессом, ведите учёт рабочего
- времени
-
-
- )}
+ )}
{Boolean(projects.length) && !loader && (
setModalCreateProject(true)}
+ onClick={() => {
+ dispatch(modalToggle("createProject"));
+ setModalCreateProject(true);
+ }}
>
+Создать проект
@@ -245,30 +264,32 @@ export const Tracker = () => {
/>
- {loader &&
-
- }
- {!loader &&
+ {loader &&
}
+ {!loader && (
- {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
- return (
-
-
-
{task.title}
-
{task.description}
-
-
-
-
-
{task.user.fio}
-
{getCorrectDate(task.created_at)}
+ {Boolean(filteredAllTasks.length) &&
+ filteredAllTasks.map((task) => {
+ return (
+
+
+
{task.title}
+
{task.description}
+
+
+
+
+
{task.user.fio}
+
{getCorrectDate(task.created_at)}
+
-
- );
- })}
+ );
+ })}
- }
+ )}