diff --git a/src/components/UI/ModalAdd/ModalAdd.jsx b/src/components/UI/ModalAdd/ModalAdd.jsx index 3f0fce74..fb4c87f4 100644 --- a/src/components/UI/ModalAdd/ModalAdd.jsx +++ b/src/components/UI/ModalAdd/ModalAdd.jsx @@ -5,23 +5,34 @@ import { apiRequest } from "../../../api/request"; import { getProjectBoard, getValueModalType, + setProject, setProjectBoardFetch, } from "../../../redux/projectsTrackerSlice"; import "./modalAdd.scss"; -export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { +export const ModalAdd = ({ + active, + setActive, + selectedTab, + defautlInput, + titleProject, +}) => { const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); const modalType = useSelector(getValueModalType); + const [emailWorker, setEmailWorker] = useState(""); + const [ProjectName, setProjectName] = useState(defautlInput); + const [valueColumn, setValueColumn] = useState(""); + const [nameProject, setNameProject] = useState(""); + const [valueTiket, setValueTiket] = useState(""); - const [valueColl, setValueColl] = useState(""); const [descriptionTicket, setDescriptionTicket] = useState(""); function createTab() { - if (!valueColl) { + if (!valueColumn) { return; } @@ -29,12 +40,12 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { method: "POST", data: { project_id: projectBoard.id, - title: valueColl, + title: valueColumn, }, }).then((res) => { dispatch(setProjectBoardFetch(projectBoard.id)); }); - setValueColl(""); + setValueColumn(""); setActive(false); } @@ -62,62 +73,64 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { setDescriptionTicket(""); } - function editProject() { + function editProject() {} + + function editProjectName(value) { + setProjectName(value); } - function getModal() { - switch (modalType) { - case "createColumn": - return ( -
e.stopPropagation()} - > -
-

Введите название колонки

-
- setValueColl(e.target.value)} - > -
-
- - setActive(false)}> -
- ); - case "addWorker": - return ( -
e.stopPropagation()} - > + function createProject() { + if (nameProject === "") { + return; + } else { + apiRequest("/project/create", { + method: "POST", + data: { + user_id: localStorage.getItem("id"), + name: nameProject, + status: 1, + }, + }).then((res) => { + const result = { ...res, columns: [] }; + dispatch(setProject(result)); + setActive(false); + setNameProject(""); + }); + } + } + + return ( +
setActive(false)} + > +
e.stopPropagation()}> + {modalType === "addWorker" && ( +

Добавьте участника

Введите имя или e-mail

setValueTiket(e.target.value)} + value={emailWorker} + onChange={(e) => setEmailWorker(e.target.value)} >
- - setActive(false)}>
- ); - case "createTiketProject": - return ( -
e.stopPropagation()} - > + )} + {modalType === "createTiketProject" && ( +

Введите название и описание задачи

@@ -140,37 +153,79 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { - setActive(false)}>
- ); - case "editProject": - return ( -
e.stopPropagation()} - > + )} + {modalType === "editProject" && ( +

Введите новое название

setValueTiket(e.target.value)} + value={ProjectName} + onChange={(e) => editProjectName(e.target.value)} >
- 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 = ({

- @@ -97,14 +108,15 @@ export const ModalTiсket = ({ {task.title}

Создатель : {task.user?.fio}

- {Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => { - return ( -
- -

{worker.name}

-
- ); - })} + {Boolean(task.taskUsers?.length) && + task.taskUsers.map((worker, index) => { + return ( +
+ +

{worker.name}

+
+ ); + })}
@@ -145,20 +157,12 @@ export const ModalTiсket = ({
- -
-

- Вы добавляете подзадачу

в колонку задачи {"Готово"}

-

-

Введите текст

-
- -
-
- -
+ +
); }; 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 && ( -
-
-
- noProjectImg -

Создайте свой первый проект

+ {(!Boolean(projects.length) || + !Boolean( + projects.filter((project) => project.status !== 10).length + )) && + !loader && ( +
+
+
+ noProjectImg +

Создайте свой первый проект

+
+
- +

+ Ставьте задачи, следите за прогрессом, ведите учёт рабочего + времени +

-

- Ставьте задачи, следите за прогрессом, ведите учёт рабочего - времени -

-
- )} + )} {Boolean(projects.length) && !loader && (
@@ -245,30 +264,32 @@ export const Tracker = () => { />
- {loader && - - } - {!loader && + {loader && } + {!loader && (
- {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => { - return ( -
-
-
{task.title}
-

{task.description}

-
-
- avatar -
-

{task.user.fio}

- {getCorrectDate(task.created_at)} + {Boolean(filteredAllTasks.length) && + filteredAllTasks.map((task) => { + return ( +
+
+
{task.title}
+

{task.description}

+
+
+ avatar +
+

{task.user.fio}

+ {getCorrectDate(task.created_at)} +
-
- ); - })} + ); + })}
- } + )}