apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #85 from apuc/fix-modal-state

Browse Source 
Modal rework
This commit is contained in:
MaxOvs19 2023-05-05 17:27:48 +03:00 committed by GitHub
commit 84647c8257
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 487 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ProjectTiket/ProjectTiket.jsx
View File

@ -5,7 +5,7 @@ import { apiRequest } from "../../api/request";
import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice"; import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
import { ModalSelect } from "../UI/ModalSelect/ModalSelect"; 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 link from "../../images/link.svg";
import archiveSet from "../../images/archive.svg"; import archiveSet from "../../images/archive.svg";
@ -67,11 +67,11 @@ export const ProjectTiket = ({ project, index }) => {
</span> </span>
</div> </div>
<ModalAdd <TrackerModal
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
defautlInput={project.name} defautlInput={project.name}
></ModalAdd> ></TrackerModal>
<ModalSelect active={modalSelect}> <ModalSelect active={modalSelect}>
<div className="project__settings-menu"> <div className="project__settings-menu">

11
src/components/UI/ModalAspt/ModalAspt.jsx
View File

@ -1,13 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom";
import ModalLayout from "../ModalLayout/ModalLayout";
import avatar from "../../../images/mokPerson.png"; import avatar from "../../../images/mokPerson.png";
import logoTg from "../../../images/TgLogo.svg"; import logoTg from "../../../images/TgLogo.svg";
import arrow from "../../../images/right-arrow.png"; import arrow from "../../../images/right-arrow.png";
import interview from "../../../images/interviewLogo.svg"; import interview from "../../../images/interviewLogo.svg";
import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import "./modalAspt.scss"; import "./modalAspt.scss";
export const ModalAspt = ({ active, setActive, level }) => { export const ModalAspt = ({ active, setActive, level }) => {
@ -82,7 +82,8 @@ export const ModalAspt = ({ active, setActive, level }) => {
</div> </div>
<span className="exit" onClick={() => setActive(false)}></span> <span className="exit" onClick={() => setActive(false)}></span>
</div> </div>
<ModalAdd active={modalSend} setActive={setModalSend}>
<ModalLayout active={modalSend} setActive={setModalSend}>
<div className="send"> <div className="send">
<img src={interview}></img> <img src={interview}></img>
<h2>Спасибо, собеседование назначено</h2> <h2>Спасибо, собеседование назначено</h2>
@ -93,7 +94,7 @@ export const ModalAspt = ({ active, setActive, level }) => {
Время собеседования: <span>{time}</span> Время собеседования: <span>{time}</span>
</p> </p>
</div> </div>
</ModalAdd> </ModalLayout>
</div> </div>
); );
}; };

60
src/components/UI/ModalCreate/ModalCreate.jsx
View File

@ -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;

77
src/components/UI/ModalCreate/ModalCreate.scss
View File

@ -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
View 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;

56
src/components/UI/ModalTicket/ModalTicket.jsx
View File

@ -1,9 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd"; import TrackerModal from "../TrackerModal/TrackerModal";
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,14 +108,15 @@ 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) &&
return ( task.taskUsers.map((worker, index) => {
<div className="worker" key={index}> return (
<img src={worker.avatar}></img> <div className="worker" key={index}>
<p>{worker.name}</p> <img src={worker.avatar}></img>
</div> <p>{worker.name}</p>
); </div>
})} );
})}
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
@ -145,20 +157,12 @@ export const ModalTiсket = ({
</div> </div>
</div> </div>
</div> </div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask"> <TrackerModal
<h4> active={addSubtask}
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p> setActive={setAddSubtask}
</h4> defautlInput={task.column_id}
<p className="title-project__decs">Введите текст</p> ></TrackerModal>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
</div> </div>
); );
}; };

68
src/components/UI/TicketFullScreen/TicketFullScreen.jsx
View File

@ -4,11 +4,11 @@ import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../Footer/Footer"; import { Footer } from "../../Footer/Footer";
import { Link, useParams, useNavigate } from "react-router-dom"; import { Link, useParams, useNavigate } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd"; import TrackerModal from "../TrackerModal/TrackerModal";
import { Navigation } from "../../Navigation/Navigation"; import { Navigation } from "../../Navigation/Navigation";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { setToggleTab } from "../../../redux/projectsTrackerSlice"; import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
import { apiRequest } from "../../../api/request"; import { apiRequest } from "../../../api/request";
import project from "../../../images/trackerProject.svg"; import project from "../../../images/trackerProject.svg";
@ -31,9 +31,7 @@ import edit from "../../../images/edit.svg";
import "./ticketFullScreen.scss"; import "./ticketFullScreen.scss";
export const TicketFullScreen = ({}) => { export const TicketFullScreen = ({}) => {
const [addSubtask, setAddSubtask] = useState(false);
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const [valueTiket, setValueTiket] = useState("");
const ticketId = useParams(); const ticketId = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
@ -114,31 +112,22 @@ export const TicketFullScreen = ({}) => {
<div className="tasks__head__wrapper"> <div className="tasks__head__wrapper">
<h4>Проект : {projectInfo.name}</h4> <h4>Проект : {projectInfo.name}</h4>
<ModalAdd active={modalAddWorker} setActive={setModalAddWorker}> <TrackerModal
<div className="title-project"> active={modalAddWorker}
<h4>Добавьте участника</h4> setActive={setModalAddWorker}
<p className="title-project__decs">Введите имя или e-mail</p> ></TrackerModal>
<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>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span className="addPerson" onClick={setModalAddWorker}> <span
className="addPerson"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+ +
</span> </span>
<p>добавить участника в проект</p> <p>добавить участника в проект</p>
@ -172,7 +161,12 @@ export const TicketFullScreen = ({}) => {
</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"));
setModalAddWorker(true);
}}
>
<img src={plus}></img> <img src={plus}></img>
Добавить под задачу Добавить под задачу
</button> </button>
@ -210,7 +204,14 @@ export const TicketFullScreen = ({}) => {
</div> </div>
<div className="add-worker moreItems"> <div className="add-worker moreItems">
<button>+</button> <button
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
}}
>
+
</button>
<span>Добавить участников</span> <span>Добавить участников</span>
</div> </div>
</div> </div>
@ -247,21 +248,6 @@ export const TicketFullScreen = ({}) => {
</div> </div>
</div> </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> </div>
<Footer /> <Footer />
</section> </section>

312
src/components/UI/ModalAdd/ModalAdd.jsx → src/components/UI/TrackerModal/TrackerModal.jsx
View File

@ -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 "./trackerModal.scss";
export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => { export const TrackerModal = ({
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,133 +73,29 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
setDescriptionTicket(""); setDescriptionTicket("");
} }
function editProject() { function editProject() {}
function editProjectName(value) {
setProjectName(value);
} }
function getModal() { function createProject() {
switch (modalType) { if (nameProject === "") {
case "createColumn": return;
return ( } else {
<div apiRequest("/project/create", {
className="modal-add__content" method: "POST",
onClick={(e) => e.stopPropagation()} data: {
> user_id: localStorage.getItem("id"),
<div className="title-project"> name: nameProject,
<h4>Введите название колонки</h4> status: 1,
<div className="input-container"> },
<input }).then((res) => {
className="name-project" const result = { ...res, columns: [] };
value={valueColl} dispatch(setProject(result));
onChange={(e) => setValueColl(e.target.value)} setActive(false);
></input> setNameProject("");
</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;
} }
} }
@ -197,9 +104,148 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
className={active ? "modal-add active" : "modal-add"} className={active ? "modal-add active" : "modal-add"}
onClick={() => setActive(false)} 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> </div>
); );
}; };
export default ModalAdd; export default TrackerModal;

2
src/components/UI/ModalAdd/modalAdd.scss → src/components/UI/TrackerModal/trackerModal.scss
View File

@ -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;
} }

6
src/pages/PartnerBid/PartnerBid.jsx
View File

@ -13,7 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
import { Footer } from "../../components/Footer/Footer"; import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation"; import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader"; 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 { apiRequest } from "../../api/request";
import { getCorrectDate } from "../../components/Calendar/calendarHelper"; import { getCorrectDate } from "../../components/Calendar/calendarHelper";
@ -76,7 +76,7 @@ export const PartnerBid = () => {
<div className="partnerBid"> <div className="partnerBid">
<ProfileHeader /> <ProfileHeader />
<Navigation /> <Navigation />
<ModalAdd active={modalDelete} setActive={setModalDelete}> <ModalLayout active={modalDelete} setActive={setModalDelete}>
<div className="title-project modal-title-delete"> <div className="title-project modal-title-delete">
<h4>Подтверждение удаления</h4> <h4>Подтверждение удаления</h4>
<p className="title-project__decs modal-decs"> <p className="title-project__decs modal-decs">
@ -99,7 +99,7 @@ export const PartnerBid = () => {
</button> </button>
</div> </div>
</div> </div>
</ModalAdd> </ModalLayout>
<div className="container"> <div className="container">
<ProfileBreadcrumbs <ProfileBreadcrumbs

228
src/pages/ProjectTracker/ProjectTracker.js
View File

@ -15,11 +15,11 @@ import {
moveProjectTask, moveProjectTask,
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
activeLoader activeLoader,
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; 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 project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg"; import tasks from "../../images/trackerTasks.svg";
@ -45,10 +45,10 @@ export const ProjectTracker = () => {
const startWrapperIndexTest = useRef({}); const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader) const loader = useSelector(getBoarderLoader);
useEffect(() => { useEffect(() => {
dispatch(activeLoader()) dispatch(activeLoader());
dispatch(setProjectBoardFetch(projectId.id)); dispatch(setProjectBoardFetch(projectId.id));
}, []); }, []);
@ -191,97 +191,95 @@ export const ProjectTracker = () => {
</Link> </Link>
</div> </div>
<div className="tracker__tabs__content"> <div className="tracker__tabs__content">
{loader && {loader && <Loader style="green" />}
<Loader style='green' /> {!loader && (
} <div className="tracker__tabs__content__tasks tasks active__content">
{!loader && <div className="tasks__head">
<div className="tracker__tabs__content__tasks tasks active__content"> <div className="tasks__head__wrapper">
<div className="tasks__head"> <h4>Проект : {projectBoard.name}</h4>
<div className="tasks__head__wrapper">
<h4>Проект : {projectBoard.name}</h4>
<ModalAdd <TrackerModal
active={modalAdd} active={modalAdd}
setActive={setModalAdd} setActive={setModalAdd}
selectedTab={selectedTab} selectedTab={selectedTab}
></ModalAdd> ></TrackerModal>
<div className="tasks__head__add"> <div className="tasks__head__add">
<span <span
onClick={() => { onClick={() => {
dispatch(modalToggle("createColumn")); dispatch(modalToggle("createColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
<p>добавить колонку</p> <p>добавить колонку</p>
</div> </div>
<div className="tasks__head__persons"> <div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" /> <img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span> <span className="countPersons">+9</span>
<span <span
className="addPerson" className="addPerson"
onClick={() => { onClick={() => {
dispatch(modalToggle("addWorker")); dispatch(modalToggle("addWorker"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
+ +
</span> </span>
<p>добавить участника</p> <p>добавить участника</p>
</div>
<div className="tasks__head__select">
<span>Участвую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</Link>
</div> </div>
<div className="tasks__head__select">
<span>Участвую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</Link>
</div> </div>
</div>
<ModalTicket <ModalTicket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
task={selectedTicket} task={selectedTicket}
projectId={projectBoard.id} projectId={projectBoard.id}
projectName={projectBoard.name} projectName={projectBoard.name}
/> />
<div className="tasks__container"> <div className="tasks__container">
{Boolean(projectBoard?.columns) && {Boolean(projectBoard?.columns) &&
Boolean(projectBoard.columns.length) && Boolean(projectBoard.columns.length) &&
projectBoard.columns.map((column) => { projectBoard.columns.map((column) => {
return ( return (
<div <div
key={column.id} key={column.id}
onDragOver={(e) => dragOverHandler(e)} onDragOver={(e) => dragOverHandler(e)}
onDragEnter={(e) => dragEnterHandler(column.id)} onDragEnter={(e) => dragEnterHandler(column.id)}
onDrop={(e) => dragDropHandler(e, column.id)} onDrop={(e) => dragDropHandler(e, column.id)}
className={`tasks__board ${ className={`tasks__board ${
column.tasks.length >= 3 ? "tasks__board__more" : "" column.tasks.length >= 3 ? "tasks__board__more" : ""
} ${ } ${
wrapperHover[column.id] ? "tasks__board__hover" : "" wrapperHover[column.id] ? "tasks__board__hover" : ""
}`} }`}
> >
<div className="board__head"> <div className="board__head">
{/*<span className={wrapperIndex === 3 ? "done" : ""}>*/} {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
<span>{column.title}</span> <span>{column.title}</span>
<div> <div>
<span <span
className="add" className="add"
onClick={() => selectedTabTask(column.id)} onClick={() => selectedTabTask(column.id)}
> >
+ +
</span> </span>
<span <span
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
@ -289,52 +287,52 @@ export const ProjectTracker = () => {
})); }));
}} }}
className="more" className="more"
> >
... ...
</span> </span>
</div>
</div> </div>
</div> {openColumnSelect[column.id] && (
{openColumnSelect[column.id] && (
<div className="column__select"> <div className="column__select">
<div <div
className="column__select__item" className="column__select__item"
onClick={() => { onClick={() => {
setOpenColumnSelect((prevState) => ({ setOpenColumnSelect((prevState) => ({
...prevState, ...prevState,
[column.id]: false, [column.id]: false,
})); }));
dispatch(modalToggle("editColumn")); dispatch(modalToggle("editColumn"));
setModalAdd(true); setModalAdd(true);
}} }}
> >
<img src={edit} alt="edit" /> <img src={edit} alt="edit" />
<span>Изменить</span> <span>Изменить</span>
</div> </div>
<div <div
className="column__select__item" className="column__select__item"
onClick={() => deleteColumn(column.id)} onClick={() => deleteColumn(column.id)}
> >
<img src={del} alt="delete" /> <img src={del} alt="delete" />
<span>Удалить</span> <span>Удалить</span>
</div> </div>
</div> </div>
)} )}
{column.tasks.map((task, index) => { {column.tasks.map((task, index) => {
if (index > 2) { if (index > 2) {
if (!column.open) { if (!column.open) {
return; return;
}
} }
} return (
return (
<div <div
key={task.id} key={task.id}
className="tasks__board__item" className="tasks__board__item"
draggable={true} draggable={true}
onDragStart={(e) => onDragStart={(e) =>
dragStartHandler(e, task, column.id) dragStartHandler(e, task, column.id)
} }
onDragEnd={(e) => dragEndHandler(e)} onDragEnd={(e) => dragEndHandler(e)}
onClick={(e) => openTicket(e, task)} onClick={(e) => openTicket(e, task)}
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.title}</p> <p>{task.title}</p>
@ -357,32 +355,32 @@ export const ProjectTracker = () => {
{/*</div>*/} {/*</div>*/}
</div> </div>
</div> </div>
); );
})} })}
{column.tasks.length > 3 && ( {column.tasks.length > 3 && (
<span <span
className={ className={
column.open column.open
? "lessItems openItems" ? "lessItems openItems"
: "moreItems openItems" : "moreItems openItems"
} }
// onClick={() => toggleMoreTasks(column.id)} // onClick={() => toggleMoreTasks(column.id)}
> >
{column.open ? "-" : "+"} {column.open ? "-" : "+"}
</span> </span>
)} )}
</div>
);
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) && (
<div className="tasks__board__noItems">
В проекте нет задач.
</div> </div>
); )}
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) &&
<div className='tasks__board__noItems'>
В проекте нет задач.
</div> </div>
}
</div> </div>
</div> )}
}
</div> </div>
</div> </div>
<Footer /> <Footer />

197
src/pages/Tracker/Tracker.js
View File

@ -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 TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
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,36 +80,42 @@ 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) {
setFilteredAllTasks( setFilteredAllTasks(
allTasks.filter((item) => { allTasks.filter((item) => {
if (!e.target.value) { if (!e.target.value) {
return item; return item;
} }
if ( if (
item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) || item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
item.description item.description
.toLowerCase() .toLowerCase()
.startsWith(e.target.value.toLowerCase()) .startsWith(e.target.value.toLowerCase())
) { ) {
return item; return item;
} }
}) })
); );
} }
@ -171,52 +184,58 @@ export const Tracker = () => {
: "tracker__tabs__content__projects tracker__tabs__content__wrapper" : "tracker__tabs__content__projects tracker__tabs__content__wrapper"
} }
> >
<ModalCreate <TrackerModal
active={modalCreateProject} active={modalCreateProject}
setActive={setModalCreateProject} setActive={setModalCreateProject}
title={"Укажите название проекта:"} titleProject={"Укажите название проекта:"}
/> ></TrackerModal>
{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) ||
<div className="no-projects"> !Boolean(
<div className="no-projects__createNew"> projects.filter((project) => project.status !== 10).length
<div> )) &&
<img src={noProjects} alt="noProjectImg" /> !loader && (
<p>Создайте свой первый проект</p> <div className="no-projects">
<div className="no-projects__createNew">
<div>
<img src={noProjects} alt="noProjectImg" />
<p>Создайте свой первый проект</p>
</div>
<button
className="createProjectBtn"
onClick={() => {
dispatch(modalToggle("createProject"));
setModalCreateProject(true);
}}
>
<span>+</span>Создать проект
</button>
</div> </div>
<button <p className="no-projects__info">
className="createProjectBtn" Ставьте задачи, следите за прогрессом, ведите учёт рабочего
onClick={() => setModalCreateProject(true)} времени
> </p>
<span>+</span>Создать проект
</button>
</div> </div>
<p className="no-projects__info"> )}
Ставьте задачи, следите за прогрессом, ведите учёт рабочего
времени
</p>
</div>
)}
{Boolean(projects.length) && !loader && ( {Boolean(projects.length) && !loader && (
<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,30 +264,32 @@ 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) &&
return ( filteredAllTasks.map((task) => {
<div className="task" key={task.id}> return (
<div className="task__info"> <div className="task" key={task.id}>
<h5>{task.title}</h5> <div className="task__info">
<p>{task.description}</p> <h5>{task.title}</h5>
</div> <p>{task.description}</p>
<div className="task__person"> </div>
<img src={urlForLocal(task.user.avatar)} alt="avatar" /> <div className="task__person">
<div className="task__project"> <img
<p>{task.user.fio}</p> src={urlForLocal(task.user.avatar)}
<span>{getCorrectDate(task.created_at)}</span> alt="avatar"
/>
<div className="task__project">
<p>{task.user.fio}</p>
<span>{getCorrectDate(task.created_at)}</span>
</div>
</div> </div>
</div> </div>
</div> );
); })}
})}
</div> </div>
} )}
</div> </div>
<div <div
className={ className={