delete modal create, and fixed modal add
This commit is contained in:
parent
5256159e2b
commit
f32a8f64e5
@ -5,23 +5,34 @@ import { apiRequest } from "../../../api/request";
|
|||||||
import {
|
import {
|
||||||
getProjectBoard,
|
getProjectBoard,
|
||||||
getValueModalType,
|
getValueModalType,
|
||||||
|
setProject,
|
||||||
setProjectBoardFetch,
|
setProjectBoardFetch,
|
||||||
} from "../../../redux/projectsTrackerSlice";
|
} from "../../../redux/projectsTrackerSlice";
|
||||||
|
|
||||||
import "./modalAdd.scss";
|
import "./modalAdd.scss";
|
||||||
|
|
||||||
export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
export const ModalAdd = ({
|
||||||
|
active,
|
||||||
|
setActive,
|
||||||
|
selectedTab,
|
||||||
|
defautlInput,
|
||||||
|
titleProject,
|
||||||
|
}) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const projectBoard = useSelector(getProjectBoard);
|
const projectBoard = useSelector(getProjectBoard);
|
||||||
|
|
||||||
const modalType = useSelector(getValueModalType);
|
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 [valueTiket, setValueTiket] = useState("");
|
||||||
const [valueColl, setValueColl] = useState("");
|
|
||||||
const [descriptionTicket, setDescriptionTicket] = useState("");
|
const [descriptionTicket, setDescriptionTicket] = useState("");
|
||||||
|
|
||||||
function createTab() {
|
function createTab() {
|
||||||
if (!valueColl) {
|
if (!valueColumn) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,12 +40,12 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
method: "POST",
|
method: "POST",
|
||||||
data: {
|
data: {
|
||||||
project_id: projectBoard.id,
|
project_id: projectBoard.id,
|
||||||
title: valueColl,
|
title: valueColumn,
|
||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||||
});
|
});
|
||||||
setValueColl("");
|
setValueColumn("");
|
||||||
setActive(false);
|
setActive(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,62 +73,64 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
setDescriptionTicket("");
|
setDescriptionTicket("");
|
||||||
}
|
}
|
||||||
|
|
||||||
function editProject() {
|
function editProject() {}
|
||||||
|
|
||||||
|
function editProjectName(value) {
|
||||||
|
setProjectName(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
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("");
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getModal() {
|
|
||||||
switch (modalType) {
|
|
||||||
case "createColumn":
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal-add__content"
|
className={active ? "modal-add active" : "modal-add"}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={() => setActive(false)}
|
||||||
>
|
|
||||||
<div className="title-project">
|
|
||||||
<h4>Введите название колонки</h4>
|
|
||||||
<div className="input-container">
|
|
||||||
<input
|
|
||||||
className="name-project"
|
|
||||||
value={valueColl}
|
|
||||||
onChange={(e) => setValueColl(e.target.value)}
|
|
||||||
></input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="button-add" onClick={createTab}>
|
|
||||||
Создать
|
|
||||||
</button>
|
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case "addWorker":
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="modal-add__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
>
|
||||||
|
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||||
|
{modalType === "addWorker" && (
|
||||||
|
<div>
|
||||||
<div className="title-project">
|
<div className="title-project">
|
||||||
<h4>Добавьте участника</h4>
|
<h4>Добавьте участника</h4>
|
||||||
<p className="title-project__decs">Введите имя или e-mail </p>
|
<p className="title-project__decs">Введите имя или e-mail </p>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<input
|
<input
|
||||||
className="name-project"
|
className="name-project"
|
||||||
value={valueTiket}
|
value={emailWorker}
|
||||||
onChange={(e) => setValueTiket(e.target.value)}
|
onChange={(e) => setEmailWorker(e.target.value)}
|
||||||
></input>
|
></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
<button
|
||||||
|
className="button-add"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setActive(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
Добавить
|
Добавить
|
||||||
</button>
|
</button>
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
case "createTiketProject":
|
{modalType === "createTiketProject" && (
|
||||||
return (
|
<div>
|
||||||
<div
|
|
||||||
className="modal-add__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="title-project">
|
<div className="title-project">
|
||||||
<h4>Введите название и описание задачи</h4>
|
<h4>Введите название и описание задачи</h4>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
@ -140,37 +153,79 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
<button className="button-add" onClick={createTiket}>
|
<button className="button-add" onClick={createTiket}>
|
||||||
Создать
|
Создать
|
||||||
</button>
|
</button>
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
case "editProject":
|
{modalType === "editProject" && (
|
||||||
return (
|
<div>
|
||||||
<div
|
|
||||||
className="modal-add__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="title-project">
|
<div className="title-project">
|
||||||
<h4>Введите новое название</h4>
|
<h4>Введите новое название</h4>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<input
|
<input
|
||||||
className="name-project"
|
className="name-project"
|
||||||
value={defautlInput}
|
value={ProjectName}
|
||||||
onChange={(e) => setValueTiket(e.target.value)}
|
onChange={(e) => editProjectName(e.target.value)}
|
||||||
></input>
|
></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button className="button-add" onClick={editProject}>
|
<button className="button-add" onClick={editProject}>
|
||||||
Сохранить
|
Сохранить
|
||||||
</button>
|
</button>
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
case "editColumn":
|
{modalType === "createProject" && (
|
||||||
return (
|
<div>
|
||||||
<div
|
<div className="title-project">
|
||||||
className="modal-add__content"
|
<h4>{titleProject}</h4>
|
||||||
onClick={(e) => e.stopPropagation()}
|
<div className="input-container">
|
||||||
>
|
<input
|
||||||
|
className="name-project"
|
||||||
|
value={nameProject}
|
||||||
|
onChange={(e) => setNameProject(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className="button-add" onClick={createProject}>
|
||||||
|
Создать
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{modalType === "addSubtask" && (
|
||||||
|
<div>
|
||||||
|
<div className="title-project subtask">
|
||||||
|
<h4>
|
||||||
|
Вы добавляете подзадачу{" "}
|
||||||
|
<p>в колонку(id) задачи "{defautlInput}"</p>
|
||||||
|
</h4>
|
||||||
|
<p className="title-project__decs">Введите текст</p>
|
||||||
|
<div>
|
||||||
|
<textarea className="title-project__textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{modalType === "createColumn" && (
|
||||||
|
<div>
|
||||||
|
<div className="title-project">
|
||||||
|
<h4>Введите название колонки</h4>
|
||||||
|
<div className="input-container">
|
||||||
|
<input
|
||||||
|
className="name-project"
|
||||||
|
value={valueColumn}
|
||||||
|
onChange={(e) => setValueColumn(e.target.value)}
|
||||||
|
></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="button-add" onClick={createTab}>
|
||||||
|
Создать
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* TODO: fix state */}
|
||||||
|
{modalType === "editColumn" && (
|
||||||
|
<div>
|
||||||
<div className="title-project">
|
<div className="title-project">
|
||||||
<h4>Введите новое название</h4>
|
<h4>Введите новое название</h4>
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
@ -184,20 +239,11 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||||
Сохранить
|
Сохранить
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
<span className="exit" onClick={() => setActive(false)}></span>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={active ? "modal-add active" : "modal-add"}
|
|
||||||
onClick={() => setActive(false)}
|
|
||||||
>
|
|
||||||
{getModal()}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 17px;
|
font-size: 22px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
color: #263238 !important;
|
color: #263238 !important;
|
||||||
}
|
}
|
||||||
|
@ -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 (
|
|
||||||
<div
|
|
||||||
className={active ? "modal-project active" : "modal-project"}
|
|
||||||
onClick={() => setActive(false)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="modal-project__content"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div className="title-project">
|
|
||||||
<h4>{title}</h4>
|
|
||||||
<div className="input-container">
|
|
||||||
<input
|
|
||||||
className="name-project"
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button className="create-project" onClick={createName}>
|
|
||||||
Создать
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ModalCreate;
|
|
@ -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);
|
|
||||||
}
|
|
@ -3,7 +3,10 @@ import { Link } from "react-router-dom";
|
|||||||
import ModalAdd from "../ModalAdd/ModalAdd";
|
import ModalAdd from "../ModalAdd/ModalAdd";
|
||||||
import { apiRequest } from "../../../api/request";
|
import { apiRequest } from "../../../api/request";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice";
|
import {
|
||||||
|
modalToggle,
|
||||||
|
setProjectBoardFetch,
|
||||||
|
} from "../../../redux/projectsTrackerSlice";
|
||||||
|
|
||||||
import category from "../../../images/category.png";
|
import category from "../../../images/category.png";
|
||||||
import watch from "../../../images/watch.png";
|
import watch from "../../../images/watch.png";
|
||||||
@ -56,7 +59,10 @@ export const ModalTiсket = ({
|
|||||||
<h3 className="title-project">
|
<h3 className="title-project">
|
||||||
<img src={category} className="title-project__category"></img>
|
<img src={category} className="title-project__category"></img>
|
||||||
Проект: {projectName}
|
Проект: {projectName}
|
||||||
<Link to={`/tracker/task/${task.id}`} className="title-project__full">
|
<Link
|
||||||
|
to={`/tracker/task/${task.id}`}
|
||||||
|
className="title-project__full"
|
||||||
|
>
|
||||||
<img src={fullScreen}></img>
|
<img src={fullScreen}></img>
|
||||||
</Link>
|
</Link>
|
||||||
</h3>
|
</h3>
|
||||||
@ -71,7 +77,12 @@ export const ModalTiсket = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className="content__communication">
|
<div className="content__communication">
|
||||||
<p className="tasks">
|
<p className="tasks">
|
||||||
<button onClick={() => setAddSubtask(true)}>
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
dispatch(modalToggle("addSubtask"));
|
||||||
|
setAddSubtask(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<img src={plus}></img>
|
<img src={plus}></img>
|
||||||
Добавить под задачу
|
Добавить под задачу
|
||||||
</button>
|
</button>
|
||||||
@ -97,7 +108,8 @@ export const ModalTiсket = ({
|
|||||||
<span>{task.title}</span>
|
<span>{task.title}</span>
|
||||||
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
||||||
<div>
|
<div>
|
||||||
{Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => {
|
{Boolean(task.taskUsers?.length) &&
|
||||||
|
task.taskUsers.map((worker, index) => {
|
||||||
return (
|
return (
|
||||||
<div className="worker" key={index}>
|
<div className="worker" key={index}>
|
||||||
<img src={worker.avatar}></img>
|
<img src={worker.avatar}></img>
|
||||||
@ -145,20 +157,12 @@ export const ModalTiсket = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
|
|
||||||
<div className="title-project subtask">
|
<ModalAdd
|
||||||
<h4>
|
active={addSubtask}
|
||||||
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
|
setActive={setAddSubtask}
|
||||||
</h4>
|
defautlInput={task.column_id}
|
||||||
<p className="title-project__decs">Введите текст</p>
|
></ModalAdd>
|
||||||
<div>
|
|
||||||
<textarea className="title-project__textarea"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
|
||||||
Добавить
|
|
||||||
</button>
|
|
||||||
</ModalAdd>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,18 +1,24 @@
|
|||||||
import React, {useEffect, useState} from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
|
||||||
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
||||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { Footer } from "../../components/Footer/Footer";
|
import { Footer } from "../../components/Footer/Footer";
|
||||||
import {apiRequest} from "../../api/request";
|
import { apiRequest } from "../../api/request";
|
||||||
import { Navigation } from "../../components/Navigation/Navigation";
|
import { Navigation } from "../../components/Navigation/Navigation";
|
||||||
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
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 ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
|
||||||
import { urlForLocal } from '../../helper'
|
import { urlForLocal } from "../../helper";
|
||||||
import { getCorrectDate} from "../../components/Calendar/calendarHelper";
|
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
|
||||||
import { Loader } from "../../components/Loader/Loader";
|
import { Loader } from "../../components/Loader/Loader";
|
||||||
|
|
||||||
import project from "../../images/trackerProject.svg";
|
import project from "../../images/trackerProject.svg";
|
||||||
@ -27,10 +33,11 @@ import "./tracker.scss";
|
|||||||
export const Tracker = () => {
|
export const Tracker = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const projects = useSelector(getProjects);
|
const projects = useSelector(getProjects);
|
||||||
const tab = useSelector(getToggleTab)
|
const tab = useSelector(getToggleTab);
|
||||||
const [allTasks, setAllTasks] = useState([])
|
|
||||||
|
const [allTasks, setAllTasks] = useState([]);
|
||||||
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
|
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
|
||||||
const [loader, setLoader] = useState(false)
|
const [loader, setLoader] = useState(false);
|
||||||
|
|
||||||
const [archiveProjects] = useState([
|
const [archiveProjects] = useState([
|
||||||
{
|
{
|
||||||
@ -40,7 +47,7 @@ export const Tracker = () => {
|
|||||||
{
|
{
|
||||||
name: "Будущее России",
|
name: "Будущее России",
|
||||||
date: "7 марта 2023 г",
|
date: "7 марта 2023 г",
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const [completeTasks] = useState([
|
const [completeTasks] = useState([
|
||||||
@ -64,7 +71,7 @@ export const Tracker = () => {
|
|||||||
dateComplete: "7 марта 2023 г",
|
dateComplete: "7 марта 2023 г",
|
||||||
avatarDo: avatarTest,
|
avatarDo: avatarTest,
|
||||||
project: "Будущее России",
|
project: "Будущее России",
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
|
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
|
||||||
@ -73,19 +80,25 @@ export const Tracker = () => {
|
|||||||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoader(true)
|
setLoader(true);
|
||||||
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
|
apiRequest(
|
||||||
dispatch(setAllProjects(el.projects))
|
`/project/project-list?user_id=${localStorage.getItem(
|
||||||
setLoader(false)
|
"id"
|
||||||
})
|
)}&expand=columns`
|
||||||
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
|
).then((el) => {
|
||||||
setAllTasks(el)
|
dispatch(setAllProjects(el.projects));
|
||||||
setFilteredAllTasks(el)
|
setLoader(false);
|
||||||
})
|
});
|
||||||
}, [])
|
apiRequest(
|
||||||
|
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
|
||||||
|
).then((el) => {
|
||||||
|
setAllTasks(el);
|
||||||
|
setFilteredAllTasks(el);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
const toggleTabs = (index) => {
|
const toggleTabs = (index) => {
|
||||||
dispatch(setToggleTab(index))
|
dispatch(setToggleTab(index));
|
||||||
};
|
};
|
||||||
|
|
||||||
function filterAllTask(e) {
|
function filterAllTask(e) {
|
||||||
@ -171,28 +184,28 @@ export const Tracker = () => {
|
|||||||
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
|
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<ModalCreate
|
<ModalAdd
|
||||||
active={modalCreateProject}
|
active={modalCreateProject}
|
||||||
setActive={setModalCreateProject}
|
setActive={setModalCreateProject}
|
||||||
title={"Укажите название проекта:"}
|
titleProject={"Укажите название проекта:"}
|
||||||
/>
|
></ModalAdd>
|
||||||
|
|
||||||
{loader &&
|
{loader && <Loader style="green" />}
|
||||||
<Loader style='green'/>
|
|
||||||
}
|
|
||||||
|
|
||||||
{Boolean(projects.length) && !loader &&
|
{Boolean(projects.length) &&
|
||||||
|
!loader &&
|
||||||
projects.map((project, index) => {
|
projects.map((project, index) => {
|
||||||
return (
|
return project.status !== 10 ? (
|
||||||
project.status !== 10 ?
|
<ProjectTiket key={index} project={project}></ProjectTiket>
|
||||||
<ProjectTiket
|
) : (
|
||||||
key={index}
|
""
|
||||||
project={project}
|
|
||||||
></ProjectTiket>
|
|
||||||
: ''
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
|
{(!Boolean(projects.length) ||
|
||||||
|
!Boolean(
|
||||||
|
projects.filter((project) => project.status !== 10).length
|
||||||
|
)) &&
|
||||||
|
!loader && (
|
||||||
<div className="no-projects">
|
<div className="no-projects">
|
||||||
<div className="no-projects__createNew">
|
<div className="no-projects__createNew">
|
||||||
<div>
|
<div>
|
||||||
@ -201,7 +214,10 @@ export const Tracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
className="createProjectBtn"
|
className="createProjectBtn"
|
||||||
onClick={() => setModalCreateProject(true)}
|
onClick={() => {
|
||||||
|
dispatch(modalToggle("createProject"));
|
||||||
|
setModalCreateProject(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span>+</span>Создать проект
|
<span>+</span>Создать проект
|
||||||
</button>
|
</button>
|
||||||
@ -216,7 +232,10 @@ export const Tracker = () => {
|
|||||||
<div className="create-newProject">
|
<div className="create-newProject">
|
||||||
<button
|
<button
|
||||||
className="createProjectBtn"
|
className="createProjectBtn"
|
||||||
onClick={() => setModalCreateProject(true)}
|
onClick={() => {
|
||||||
|
dispatch(modalToggle("createProject"));
|
||||||
|
setModalCreateProject(true);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span>+</span>Создать проект
|
<span>+</span>Создать проект
|
||||||
</button>
|
</button>
|
||||||
@ -245,12 +264,11 @@ export const Tracker = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{loader &&
|
{loader && <Loader style="green" />}
|
||||||
<Loader style='green' />
|
{!loader && (
|
||||||
}
|
|
||||||
{!loader &&
|
|
||||||
<div className="taskList__wrapper">
|
<div className="taskList__wrapper">
|
||||||
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
|
{Boolean(filteredAllTasks.length) &&
|
||||||
|
filteredAllTasks.map((task) => {
|
||||||
return (
|
return (
|
||||||
<div className="task" key={task.id}>
|
<div className="task" key={task.id}>
|
||||||
<div className="task__info">
|
<div className="task__info">
|
||||||
@ -258,7 +276,10 @@ export const Tracker = () => {
|
|||||||
<p>{task.description}</p>
|
<p>{task.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="task__person">
|
<div className="task__person">
|
||||||
<img src={urlForLocal(task.user.avatar)} alt="avatar" />
|
<img
|
||||||
|
src={urlForLocal(task.user.avatar)}
|
||||||
|
alt="avatar"
|
||||||
|
/>
|
||||||
<div className="task__project">
|
<div className="task__project">
|
||||||
<p>{task.user.fio}</p>
|
<p>{task.user.fio}</p>
|
||||||
<span>{getCorrectDate(task.created_at)}</span>
|
<span>{getCorrectDate(task.created_at)}</span>
|
||||||
@ -268,7 +289,7 @@ export const Tracker = () => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
|
Loading…
Reference in New Issue
Block a user