Fixed imports in pages
This commit is contained in:
MaxOvs19
14
src/components/Modal/ModalSelect/ModalSelect.jsx
Normal file
14
src/components/Modal/ModalSelect/ModalSelect.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
|
||||
import "./modalSelect.scss";
|
||||
|
||||
export const ModalSelect = ({ active, children }) => {
|
||||
return (
|
||||
<div className={active ? "project__settings active" : "project__settings "}>
|
||||
<span className="project__settings-ellipsis">...</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalSelect;
|
||||
38
src/components/Modal/ModalSelect/modalSelect.scss
Normal file
38
src/components/Modal/ModalSelect/modalSelect.scss
Normal file
@ -0,0 +1,38 @@
|
||||
.project {
|
||||
&__settings {
|
||||
position: absolute;
|
||||
padding: 32px 23px 10px 11px;
|
||||
background: #e1fccf;
|
||||
border-radius: 12px;
|
||||
transform: scale(0);
|
||||
bottom: -148px;
|
||||
right: -120px;
|
||||
|
||||
&-menu {
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-ellipsis {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 10px;
|
||||
font-size: 21px;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
}
|
||||
|
||||
&__settings.active {
|
||||
transform: scale(1);
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,7 @@ import { urlForLocal } from "@utils/helper";
|
||||
import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
|
||||
import TrackerModal from "@components/UI/TrackerModal/TrackerModal";
|
||||
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||
import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
|
||||
|
||||
@ -4,12 +4,12 @@ import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { Footer } from "@components/Footer/Footer";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import BaseButton from "@components/Common/BaseButton/BaseButton";
|
||||
import TrackerModal from "@components/UI/TrackerModal/TrackerModal";
|
||||
import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { Loader } from "@components/Loader/Loader";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
|
||||
import {
|
||||
deletePersonOnProject,
|
||||
|
||||
351
src/components/Modal/TrackerModal/TrackerModal.jsx
Normal file
351
src/components/Modal/TrackerModal/TrackerModal.jsx
Normal file
@ -0,0 +1,351 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
import { urlForLocal } from "@utils/helper";
|
||||
import {
|
||||
setColumnName,
|
||||
getProjectBoard,
|
||||
getValueModalType,
|
||||
setProject,
|
||||
setProjectBoardFetch,
|
||||
editProjectName,
|
||||
editColumnName,
|
||||
getColumnName,
|
||||
getColumnId,
|
||||
addPersonToProject,
|
||||
} from "@redux/projectsTrackerSlice";
|
||||
|
||||
import arrowDown from "assets/icons/arrows/selectArrow.png";
|
||||
|
||||
import "./trackerModal.scss";
|
||||
|
||||
export const TrackerModal = ({
|
||||
active,
|
||||
setActive,
|
||||
selectedTab,
|
||||
defautlInput,
|
||||
titleProject,
|
||||
projectId,
|
||||
priorityTask,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
const columnName = useSelector(getColumnName);
|
||||
const columnId = useSelector(getColumnId);
|
||||
|
||||
const modalType = useSelector(getValueModalType);
|
||||
const [projectName, setProjectName] = useState(defautlInput);
|
||||
const [valueColumn, setValueColumn] = useState("");
|
||||
const [nameProject, setNameProject] = useState("");
|
||||
const [valueTiket, setValueTiket] = useState("");
|
||||
const [descriptionTicket, setDescriptionTicket] = useState("");
|
||||
const [workers, setWorkers] = useState([]);
|
||||
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
|
||||
const [selectedWorker, setSelectedWorker] = useState(null);
|
||||
|
||||
function createTab() {
|
||||
if (!valueColumn) {
|
||||
return;
|
||||
}
|
||||
|
||||
apiRequest("/project-column/create-column", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
title: valueColumn,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
});
|
||||
setValueColumn("");
|
||||
setActive(false);
|
||||
}
|
||||
|
||||
function createTiket() {
|
||||
if (!valueTiket || !descriptionTicket) {
|
||||
return;
|
||||
}
|
||||
|
||||
apiRequest("/task/create-task", {
|
||||
method: "POST",
|
||||
data: {
|
||||
project_id: projectBoard.id,
|
||||
title: valueTiket,
|
||||
description: descriptionTicket,
|
||||
status: 1,
|
||||
user_id: localStorage.getItem("id"),
|
||||
column_id: selectedTab,
|
||||
priority: priorityTask,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(setProjectBoardFetch(projectBoard.id));
|
||||
});
|
||||
|
||||
setActive(false);
|
||||
setValueTiket("");
|
||||
setDescriptionTicket("");
|
||||
}
|
||||
|
||||
function editProject() {
|
||||
apiRequest("/project/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
project_id: projectId,
|
||||
name: projectName,
|
||||
},
|
||||
}).then((res) => {
|
||||
setActive(false);
|
||||
dispatch(editProjectName({ id: projectId, name: projectName }));
|
||||
});
|
||||
}
|
||||
|
||||
function changeColumnName() {
|
||||
apiRequest("/project-column/update-column", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
column_id: columnId,
|
||||
title: columnName,
|
||||
},
|
||||
}).then((res) => {
|
||||
setActive(false);
|
||||
dispatch(editColumnName({ id: columnId, title: columnName }));
|
||||
});
|
||||
}
|
||||
|
||||
function createProject() {
|
||||
if (nameProject === "") {
|
||||
return;
|
||||
} else {
|
||||
apiRequest("/project/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
name: nameProject,
|
||||
status: 19,
|
||||
},
|
||||
}).then((res) => {
|
||||
const result = { ...res, columns: [] };
|
||||
dispatch(setProject(result));
|
||||
setActive(false);
|
||||
setNameProject("");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addUserToProject() {
|
||||
apiRequest("/project/add-user", {
|
||||
method: "POST",
|
||||
data: {
|
||||
user_id: selectedWorker.user_id,
|
||||
project_id: projectBoard.id,
|
||||
},
|
||||
}).then((el) => {
|
||||
dispatch(addPersonToProject(el));
|
||||
setActive(false);
|
||||
setSelectedWorker("");
|
||||
setSelectWorkersOpen(false);
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
modalType === "addWorker"
|
||||
? apiRequest("/project/my-employee").then((el) => {
|
||||
let persons = el.managerEmployees;
|
||||
let ids = projectBoard.projectUsers.map((user) => user.user_id);
|
||||
setWorkers(
|
||||
persons.reduce((acc, cur) => {
|
||||
if (!ids.includes(cur.user_id)) acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
})
|
||||
: "";
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={active ? "modal-add active" : "modal-add"}
|
||||
onClick={() => {
|
||||
setActive(false);
|
||||
setSelectWorkersOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
|
||||
{modalType === "addWorker" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Добавьте участника</h4>
|
||||
{/*<div className="input-container">*/}
|
||||
{/* <input*/}
|
||||
{/* className="name-project"*/}
|
||||
{/* value={emailWorker}*/}
|
||||
{/* onChange={(e) => setEmailWorker(e.target.value)}*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
<div
|
||||
className={
|
||||
selectWorkersOpen ? "select__worker open" : "select__worker"
|
||||
}
|
||||
onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
|
||||
>
|
||||
<p>
|
||||
{selectedWorker
|
||||
? selectedWorker.employee.fio
|
||||
: "Выберите пользователя"}
|
||||
</p>
|
||||
<img className="arrow" src={arrowDown} alt="arrow" />
|
||||
{Boolean(selectWorkersOpen) && (
|
||||
<div className="select__worker__dropDown">
|
||||
{Boolean(workers.length) ? (
|
||||
workers.map((worker) => {
|
||||
if (worker === selectedWorker) {
|
||||
return;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="worker"
|
||||
key={worker.id}
|
||||
onClick={() => {
|
||||
setSelectedWorker(worker);
|
||||
}}
|
||||
>
|
||||
<p>{worker.employee.fio}</p>
|
||||
<img
|
||||
src={urlForLocal(worker.employee.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div>Нет пользователей</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={addUserToProject}>
|
||||
Добавить
|
||||
</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) => setProjectName(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>
|
||||
)}
|
||||
{modalType === "editColumn" && (
|
||||
<div>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={columnName}
|
||||
onChange={(e) => dispatch(setColumnName(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={changeColumnName}>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrackerModal;
|
||||
167
src/components/Modal/TrackerModal/trackerModal.scss
Normal file
167
src/components/Modal/TrackerModal/trackerModal.scss
Normal file
@ -0,0 +1,167 @@
|
||||
.modal-add {
|
||||
z-index: 9;
|
||||
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;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 24px;
|
||||
|
||||
padding: 60px 60px 30px 60px;
|
||||
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;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #263238 !important;
|
||||
}
|
||||
|
||||
&__decs {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
resize: none;
|
||||
width: 302px;
|
||||
height: 83px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.select__worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&__dropDown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
row-gap: 5px;
|
||||
|
||||
.worker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-project {
|
||||
margin-left: 10px;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
margin: 20px;
|
||||
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-add.active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #263238;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user