commit
84647c8257
@ -5,7 +5,7 @@ import { apiRequest } from "../../api/request";
|
||||
import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
|
||||
|
||||
import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
|
||||
import ModalAdd from "../UI/ModalAdd/ModalAdd";
|
||||
import TrackerModal from "../UI/TrackerModal/TrackerModal";
|
||||
|
||||
import link from "../../images/link.svg";
|
||||
import archiveSet from "../../images/archive.svg";
|
||||
@ -67,11 +67,11 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ModalAdd
|
||||
<TrackerModal
|
||||
active={modalAdd}
|
||||
setActive={setModalAdd}
|
||||
defautlInput={project.name}
|
||||
></ModalAdd>
|
||||
></TrackerModal>
|
||||
|
||||
<ModalSelect active={modalSelect}>
|
||||
<div className="project__settings-menu">
|
||||
|
@ -1,13 +1,13 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalLayout from "../ModalLayout/ModalLayout";
|
||||
|
||||
import avatar from "../../../images/mokPerson.png";
|
||||
import logoTg from "../../../images/TgLogo.svg";
|
||||
import arrow from "../../../images/right-arrow.png";
|
||||
import interview from "../../../images/interviewLogo.svg";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalAdd from "../ModalAdd/ModalAdd";
|
||||
|
||||
import "./modalAspt.scss";
|
||||
|
||||
export const ModalAspt = ({ active, setActive, level }) => {
|
||||
@ -82,7 +82,8 @@ export const ModalAspt = ({ active, setActive, level }) => {
|
||||
</div>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
<ModalAdd active={modalSend} setActive={setModalSend}>
|
||||
|
||||
<ModalLayout active={modalSend} setActive={setModalSend}>
|
||||
<div className="send">
|
||||
<img src={interview}></img>
|
||||
<h2>Спасибо, собеседование назначено</h2>
|
||||
@ -93,7 +94,7 @@ export const ModalAspt = ({ active, setActive, level }) => {
|
||||
Время собеседования: <span>{time}</span>
|
||||
</p>
|
||||
</div>
|
||||
</ModalAdd>
|
||||
</ModalLayout>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -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);
|
||||
}
|
16
src/components/UI/ModalLayout/ModalLayout.jsx
Normal file
16
src/components/UI/ModalLayout/ModalLayout.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
|
||||
export const ModalLayout = ({ active, setActive, children }) => {
|
||||
return (
|
||||
<div
|
||||
className={active ? "modal-add active" : "modal-add"}
|
||||
onClick={() => setActive(false)}
|
||||
>
|
||||
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalLayout;
|
@ -1,9 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalAdd from "../ModalAdd/ModalAdd";
|
||||
import TrackerModal from "../TrackerModal/TrackerModal";
|
||||
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 = ({
|
||||
<h3 className="title-project">
|
||||
<img src={category} className="title-project__category"></img>
|
||||
Проект: {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>
|
||||
</Link>
|
||||
</h3>
|
||||
@ -71,7 +77,12 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
<p className="tasks">
|
||||
<button onClick={() => setAddSubtask(true)}>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setAddSubtask(true);
|
||||
}}
|
||||
>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</button>
|
||||
@ -97,7 +108,8 @@ export const ModalTiсket = ({
|
||||
<span>{task.title}</span>
|
||||
<p className="workers__creator">Создатель : {task.user?.fio}</p>
|
||||
<div>
|
||||
{Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => {
|
||||
{Boolean(task.taskUsers?.length) &&
|
||||
task.taskUsers.map((worker, index) => {
|
||||
return (
|
||||
<div className="worker" key={index}>
|
||||
<img src={worker.avatar}></img>
|
||||
@ -145,20 +157,12 @@ export const ModalTiсket = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
|
||||
<div className="title-project subtask">
|
||||
<h4>
|
||||
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</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>
|
||||
</ModalAdd>
|
||||
|
||||
<TrackerModal
|
||||
active={addSubtask}
|
||||
setActive={setAddSubtask}
|
||||
defautlInput={task.column_id}
|
||||
></TrackerModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -4,11 +4,11 @@ import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "../../Footer/Footer";
|
||||
import { Link, useParams, useNavigate } from "react-router-dom";
|
||||
import ModalAdd from "../ModalAdd/ModalAdd";
|
||||
import TrackerModal from "../TrackerModal/TrackerModal";
|
||||
import { Navigation } from "../../Navigation/Navigation";
|
||||
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setToggleTab } from "../../../redux/projectsTrackerSlice";
|
||||
import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
|
||||
import { apiRequest } from "../../../api/request";
|
||||
|
||||
import project from "../../../images/trackerProject.svg";
|
||||
@ -31,9 +31,7 @@ import edit from "../../../images/edit.svg";
|
||||
import "./ticketFullScreen.scss";
|
||||
|
||||
export const TicketFullScreen = ({}) => {
|
||||
const [addSubtask, setAddSubtask] = useState(false);
|
||||
const [modalAddWorker, setModalAddWorker] = useState(false);
|
||||
const [valueTiket, setValueTiket] = useState("");
|
||||
const ticketId = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
@ -114,31 +112,22 @@ export const TicketFullScreen = ({}) => {
|
||||
<div className="tasks__head__wrapper">
|
||||
<h4>Проект : {projectInfo.name}</h4>
|
||||
|
||||
<ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
|
||||
<div className="title-project">
|
||||
<h4>Добавьте участника</h4>
|
||||
<p className="title-project__decs">Введите имя или e-mail</p>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="button-add"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
>
|
||||
Добавить
|
||||
</button>
|
||||
</ModalAdd>
|
||||
<TrackerModal
|
||||
active={modalAddWorker}
|
||||
setActive={setModalAddWorker}
|
||||
></TrackerModal>
|
||||
|
||||
<div className="tasks__head__persons">
|
||||
<img src={avatarTest} alt="avatar" />
|
||||
<img src={avatarTest} alt="avatar" />
|
||||
<span className="countPersons">+9</span>
|
||||
<span className="addPerson" onClick={setModalAddWorker}>
|
||||
<span
|
||||
className="addPerson"
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</span>
|
||||
<p>добавить участника в проект</p>
|
||||
@ -172,7 +161,12 @@ export const TicketFullScreen = ({}) => {
|
||||
</div>
|
||||
<div className="content__communication">
|
||||
<p className="tasks">
|
||||
<button onClick={() => setAddSubtask(true)}>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addSubtask"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
<img src={plus}></img>
|
||||
Добавить под задачу
|
||||
</button>
|
||||
@ -210,7 +204,14 @@ export const TicketFullScreen = ({}) => {
|
||||
</div>
|
||||
|
||||
<div className="add-worker moreItems">
|
||||
<button>+</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("addWorker"));
|
||||
setModalAddWorker(true);
|
||||
}}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span>Добавить участников</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,21 +248,6 @@ export const TicketFullScreen = ({}) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
|
||||
<div className="title-project subtask">
|
||||
<h4>
|
||||
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</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>
|
||||
</ModalAdd>
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
|
@ -5,23 +5,34 @@ import { apiRequest } from "../../../api/request";
|
||||
import {
|
||||
getProjectBoard,
|
||||
getValueModalType,
|
||||
setProject,
|
||||
setProjectBoardFetch,
|
||||
} from "../../../redux/projectsTrackerSlice";
|
||||
|
||||
import "./modalAdd.scss";
|
||||
import "./trackerModal.scss";
|
||||
|
||||
export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
||||
export const TrackerModal = ({
|
||||
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,133 +73,29 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
||||
setDescriptionTicket("");
|
||||
}
|
||||
|
||||
function editProject() {
|
||||
function editProject() {}
|
||||
|
||||
function editProjectName(value) {
|
||||
setProjectName(value);
|
||||
}
|
||||
|
||||
function getModal() {
|
||||
switch (modalType) {
|
||||
case "createColumn":
|
||||
return (
|
||||
<div
|
||||
className="modal-add__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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="title-project">
|
||||
<h4>Добавьте участника</h4>
|
||||
<p className="title-project__decs">Введите имя или e-mail </p>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||
Добавить
|
||||
</button>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
case "createTiketProject":
|
||||
return (
|
||||
<div
|
||||
className="modal-add__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="title-project">
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
placeholder="Название задачи"
|
||||
></input>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={descriptionTicket}
|
||||
onChange={(e) => setDescriptionTicket(e.target.value)}
|
||||
placeholder="Описание задачи"
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={createTiket}>
|
||||
Создать
|
||||
</button>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
case "editProject":
|
||||
return (
|
||||
<div
|
||||
className="modal-add__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={defautlInput}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={editProject}>
|
||||
Сохранить
|
||||
</button>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
case "editColumn":
|
||||
return (
|
||||
<div
|
||||
className="modal-add__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={defautlInput}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||
Сохранить
|
||||
</button>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
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("");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,9 +104,148 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
||||
className={active ? "modal-add active" : "modal-add"}
|
||||
onClick={() => setActive(false)}
|
||||
>
|
||||
{getModal()}
|
||||
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||
{modalType === "addWorker" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Добавьте участника</h4>
|
||||
<p className="title-project__decs">Введите имя или e-mail </p>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={emailWorker}
|
||||
onChange={(e) => setEmailWorker(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="button-add"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setActive(false);
|
||||
}}
|
||||
>
|
||||
Добавить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createTiketProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите название и описание задачи</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={valueTiket}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
placeholder="Название задачи"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={descriptionTicket}
|
||||
onChange={(e) => setDescriptionTicket(e.target.value)}
|
||||
placeholder="Описание задачи"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={createTiket}>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "editProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={ProjectName}
|
||||
onChange={(e) => editProjectName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={editProject}>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{modalType === "createProject" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>{titleProject}</h4>
|
||||
<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)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={createTab}>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* TODO: fix state */}
|
||||
{modalType === "editColumn" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={defautlInput}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalAdd;
|
||||
export default TrackerModal;
|
@ -39,7 +39,7 @@
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #263238 !important;
|
||||
}
|
@ -13,7 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
|
||||
import { Footer } from "../../components/Footer/Footer";
|
||||
import { Navigation } from "../../components/Navigation/Navigation";
|
||||
import { Loader } from "../../components/Loader/Loader";
|
||||
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
|
||||
import ModalLayout from "../../components/UI/ModalLayout/ModalLayout";
|
||||
|
||||
import { apiRequest } from "../../api/request";
|
||||
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
|
||||
@ -76,7 +76,7 @@ export const PartnerBid = () => {
|
||||
<div className="partnerBid">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
<ModalAdd active={modalDelete} setActive={setModalDelete}>
|
||||
<ModalLayout active={modalDelete} setActive={setModalDelete}>
|
||||
<div className="title-project modal-title-delete">
|
||||
<h4>Подтверждение удаления</h4>
|
||||
<p className="title-project__decs modal-decs">
|
||||
@ -99,7 +99,7 @@ export const PartnerBid = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalAdd>
|
||||
</ModalLayout>
|
||||
|
||||
<div className="container">
|
||||
<ProfileBreadcrumbs
|
||||
|
@ -15,11 +15,11 @@ import {
|
||||
moveProjectTask,
|
||||
setProjectBoardFetch,
|
||||
setToggleTab,
|
||||
activeLoader
|
||||
activeLoader,
|
||||
} from "../../redux/projectsTrackerSlice";
|
||||
|
||||
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
|
||||
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
|
||||
import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
|
||||
|
||||
import project from "../../images/trackerProject.svg";
|
||||
import tasks from "../../images/trackerTasks.svg";
|
||||
@ -45,10 +45,10 @@ export const ProjectTracker = () => {
|
||||
|
||||
const startWrapperIndexTest = useRef({});
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const loader = useSelector(getBoarderLoader)
|
||||
const loader = useSelector(getBoarderLoader);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(activeLoader())
|
||||
dispatch(activeLoader());
|
||||
dispatch(setProjectBoardFetch(projectId.id));
|
||||
}, []);
|
||||
|
||||
@ -191,20 +191,18 @@ export const ProjectTracker = () => {
|
||||
</Link>
|
||||
</div>
|
||||
<div className="tracker__tabs__content">
|
||||
{loader &&
|
||||
<Loader style='green' />
|
||||
}
|
||||
{!loader &&
|
||||
{loader && <Loader style="green" />}
|
||||
{!loader && (
|
||||
<div className="tracker__tabs__content__tasks tasks active__content">
|
||||
<div className="tasks__head">
|
||||
<div className="tasks__head__wrapper">
|
||||
<h4>Проект : {projectBoard.name}</h4>
|
||||
|
||||
<ModalAdd
|
||||
<TrackerModal
|
||||
active={modalAdd}
|
||||
setActive={setModalAdd}
|
||||
selectedTab={selectedTab}
|
||||
></ModalAdd>
|
||||
></TrackerModal>
|
||||
|
||||
<div className="tasks__head__add">
|
||||
<span
|
||||
@ -375,14 +373,14 @@ export const ProjectTracker = () => {
|
||||
);
|
||||
})}
|
||||
{Boolean(projectBoard?.columns) &&
|
||||
!Boolean(projectBoard.columns.length) &&
|
||||
<div className='tasks__board__noItems'>
|
||||
!Boolean(projectBoard.columns.length) && (
|
||||
<div className="tasks__board__noItems">
|
||||
В проекте нет задач.
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
@ -7,11 +7,17 @@ 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 TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
|
||||
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
|
||||
import { urlForLocal } from '../../helper'
|
||||
import { urlForLocal } from "../../helper";
|
||||
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
|
||||
import { Loader } from "../../components/Loader/Loader";
|
||||
|
||||
@ -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,19 +80,25 @@ 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) {
|
||||
@ -171,28 +184,28 @@ export const Tracker = () => {
|
||||
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
|
||||
}
|
||||
>
|
||||
<ModalCreate
|
||||
<TrackerModal
|
||||
active={modalCreateProject}
|
||||
setActive={setModalCreateProject}
|
||||
title={"Укажите название проекта:"}
|
||||
/>
|
||||
titleProject={"Укажите название проекта:"}
|
||||
></TrackerModal>
|
||||
|
||||
{loader &&
|
||||
<Loader style='green'/>
|
||||
}
|
||||
{loader && <Loader style="green" />}
|
||||
|
||||
{Boolean(projects.length) && !loader &&
|
||||
{Boolean(projects.length) &&
|
||||
!loader &&
|
||||
projects.map((project, index) => {
|
||||
return (
|
||||
project.status !== 10 ?
|
||||
<ProjectTiket
|
||||
key={index}
|
||||
project={project}
|
||||
></ProjectTiket>
|
||||
: ''
|
||||
return project.status !== 10 ? (
|
||||
<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__createNew">
|
||||
<div>
|
||||
@ -201,7 +214,10 @@ export const Tracker = () => {
|
||||
</div>
|
||||
<button
|
||||
className="createProjectBtn"
|
||||
onClick={() => setModalCreateProject(true)}
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createProject"));
|
||||
setModalCreateProject(true);
|
||||
}}
|
||||
>
|
||||
<span>+</span>Создать проект
|
||||
</button>
|
||||
@ -216,7 +232,10 @@ export const Tracker = () => {
|
||||
<div className="create-newProject">
|
||||
<button
|
||||
className="createProjectBtn"
|
||||
onClick={() => setModalCreateProject(true)}
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("createProject"));
|
||||
setModalCreateProject(true);
|
||||
}}
|
||||
>
|
||||
<span>+</span>Создать проект
|
||||
</button>
|
||||
@ -245,12 +264,11 @@ export const Tracker = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{loader &&
|
||||
<Loader style='green' />
|
||||
}
|
||||
{!loader &&
|
||||
{loader && <Loader style="green" />}
|
||||
{!loader && (
|
||||
<div className="taskList__wrapper">
|
||||
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
|
||||
{Boolean(filteredAllTasks.length) &&
|
||||
filteredAllTasks.map((task) => {
|
||||
return (
|
||||
<div className="task" key={task.id}>
|
||||
<div className="task__info">
|
||||
@ -258,7 +276,10 @@ export const Tracker = () => {
|
||||
<p>{task.description}</p>
|
||||
</div>
|
||||
<div className="task__person">
|
||||
<img src={urlForLocal(task.user.avatar)} alt="avatar" />
|
||||
<img
|
||||
src={urlForLocal(task.user.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
<div className="task__project">
|
||||
<p>{task.user.fio}</p>
|
||||
<span>{getCorrectDate(task.created_at)}</span>
|
||||
@ -268,7 +289,7 @@ export const Tracker = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
|
Loading…
Reference in New Issue
Block a user