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

Compare commits

base: apuc:43cd44f0a95ebd18c4d1b8dd07385564dcfc6988
Branches Tags
apuc:main
apuc:fixes_tasks
apuc:developer_resume
apuc:page_under_construction
apuc:vacancy
apuc:summary_fix
apuc:current-design
..
compare: apuc:7a5d6fc9ecac587b560321cb50cbe9b7966f85bd
Branches Tags
apuc:main
apuc:fixes_tasks
apuc:developer_resume
apuc:page_under_construction
apuc:vacancy
apuc:summary_fix
apuc:current-design

No commits in common. "43cd44f0a95ebd18c4d1b8dd07385564dcfc6988" and "7a5d6fc9ecac587b560321cb50cbe9b7966f85bd" have entirely different histories.
43cd44f0a9 ... 7a5d6fc9ec

5 changed files with 197 additions and 56 deletions
Show Stats Expand all files Collapse all files

188
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -7,7 +7,13 @@ import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useNavigate, useParams } from "react-router-dom";
import { getProfileInfo } from "@redux/outstaffingSlice"; import { getProfileInfo } from "@redux/outstaffingSlice";
import { getBoarderLoader, setToggleTab } from "@redux/projectsTrackerSlice"; import {
deletePersonOnProject,
getBoarderLoader,
modalToggle,
setProjectBoardFetch,
setToggleTab
} from "@redux/projectsTrackerSlice";
import { import {
backendImg, backendImg,
@ -26,6 +32,7 @@ import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader"; import { Loader } from "@components/Common/Loader/Loader";
import FileTracker from "@components/FileTracker/FileTracker"; import FileTracker from "@components/FileTracker/FileTracker";
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal"; import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation"; import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -53,6 +60,7 @@ import "./ticketFullScreen.scss";
registerLocale("ru", ru); registerLocale("ru", ru);
export const TicketFullScreen = () => { export const TicketFullScreen = () => {
const [modalAddWorker, setModalAddWorker] = useState(false);
const ticketId = useParams(); const ticketId = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); const navigate = useNavigate();
@ -63,6 +71,7 @@ export const TicketFullScreen = () => {
const [inputsValue, setInputsValue] = useState({}); const [inputsValue, setInputsValue] = useState({});
const [loader, setLoader] = useState(true); const [loader, setLoader] = useState(true);
const [comments, setComments] = useState([]); const [comments, setComments] = useState([]);
const [personListOpen, setPersonListOpen] = useState(false);
const [timerStart, setTimerStart] = useState(false); const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({}); const [timerInfo, setTimerInfo] = useState({});
const [currentTimerCount, setCurrentTimerCount] = useState({ const [currentTimerCount, setCurrentTimerCount] = useState({
@ -283,6 +292,18 @@ export const TicketFullScreen = () => {
}); });
} }
function deletePerson(userId) {
apiRequest("/project/del-user", {
method: "DELETE",
data: {
project_id: projectInfo.id,
user_id: userId
}
}).then(() => {
dispatch(deletePersonOnProject(userId));
});
}
function commentDelete(comment) { function commentDelete(comment) {
setComments((prevValue) => setComments((prevValue) =>
prevValue.filter((item) => item.id !== comment.id) prevValue.filter((item) => item.id !== comment.id)
@ -595,6 +616,18 @@ export const TicketFullScreen = () => {
) { ) {
setSelectTagsOpen(false); setSelectTagsOpen(false);
} }
if (
event &&
!path.find(
(div) =>
div.classList &&
(div.classList.contains("addPerson") ||
div.classList.contains("persons__list"))
)
) {
setPersonListOpen(false);
}
}; };
return ( return (
@ -647,6 +680,98 @@ export const TicketFullScreen = () => {
<div className="tasks__head"> <div className="tasks__head">
<div className="tasks__head__wrapper tasks__head__wrapper__fullScreen"> <div className="tasks__head__wrapper tasks__head__wrapper__fullScreen">
<h5>{projectInfo.name}</h5> <h5>{projectInfo.name}</h5>
<TrackerModal
active={modalAddWorker}
setActive={setModalAddWorker}
/>
<div className="tasks__head__persons">
<div className="projectPersons">
{projectInfo.projectUsers?.length &&
projectInfo.projectUsers.slice(0, 3).map((person) => {
return (
<img
key={person.user_id}
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
);
})}
</div>
{projectInfo.projectUsers?.length > 3 && (
<span className="countPersons">+1</span>
)}
<span
className="addPerson"
onClick={() => {
setPersonListOpen(true);
}}
>
+
</span>
<p>добавить участника</p>
{personListOpen && (
<div className="persons__list">
<img
className="persons__list__close"
src={close}
alt="close"
onClick={() => setPersonListOpen(false)}
/>
<div className="persons__list__count">
<span>{projectInfo.projectUsers?.length}</span>
участник
</div>
<div className="persons__list__info">
<span>В проекте - </span>
<p>“{projectInfo.name}”</p>
</div>
<div className="persons__list__items">
{projectInfo.projectUsers?.map((person) => {
return (
<div
className="persons__list__item"
key={person.user_id}
>
<img
className="avatar"
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
<span>{person.user.fio}</span>
<img
className="delete"
src={close}
alt="delete"
onClick={() => deletePerson(person.user_id)}
/>
</div>
);
})}
</div>
<div
className="persons__list__add"
onClick={() => {
dispatch(modalToggle("addWorker"));
setModalAddWorker(true);
setPersonListOpen(false);
}}
>
<span className="addPerson">+</span>
<p>Добавить участников</p>
</div>
</div>
)}
</div>
<Link <Link
to={`/tracker/project/${taskInfo.project_id}`} to={`/tracker/project/${taskInfo.project_id}`}
className="link" className="link"
@ -675,6 +800,7 @@ export const TicketFullScreen = () => {
/> />
) : ( ) : (
<h5 className="fullName nameFullScreen"> <h5 className="fullName nameFullScreen">
<span>Название задачи:</span>
{inputsValue.title} {inputsValue.title}
</h5> </h5>
)} )}
@ -707,7 +833,12 @@ export const TicketFullScreen = () => {
/> />
) : ( ) : (
<div className="ticket__description"> <div className="ticket__description">
<div <span>
Описание
<br />
задачи:{" "}
</span>
<p
className="fullDescription fullScreenDescription" className="fullDescription fullScreenDescription"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: inputsValue.description __html: inputsValue.description
@ -753,6 +884,18 @@ export const TicketFullScreen = () => {
</div> </div>
)} )}
<div className="content__communication"> <div className="content__communication">
{/*<p className="tasks">*/}
{/* <BaseButton*/}
{/* onClick={() => {*/}
{/* dispatch(modalToggle("addSubtask"));*/}
{/* setModalAddWorker(true);*/}
{/* }}*/}
{/* styles={"button-green-add"}*/}
{/* >*/}
{/* <img src={plus}></img>*/}
{/* Добавить под задачу*/}
{/* </BaseButton>*/}
{/*</p>*/}
<div className="file"> <div className="file">
<div className="input__wrapper"> <div className="input__wrapper">
<input <input
@ -811,30 +954,27 @@ export const TicketFullScreen = () => {
</div> </div>
<div className="workers fullScreenWorkers"> <div className="workers fullScreenWorkers">
<div className="workers_box task__info"> <div className="workers_box task__info">
<div className="workers__creator"> <p className="workers__creator">
Создатель: <p>&nbsp;{taskInfo.user?.fio}</p> Создатель :<p>&nbsp;{taskInfo.user?.fio}</p>
</div> </p>
{taskInfo.executor ? ( {taskInfo.executor ? (
<> <div className="executor">
<h5>Исполнитель: </h5> <p>Исполнитель: {taskInfo.executor.fio}</p>
<div className="executor"> <img
<p>{taskInfo.executor.fio}</p> src={
<img taskInfo.executor?.avatar
src={ ? urlForLocal(taskInfo.executor.avatar)
taskInfo.executor?.avatar : avatarMok
? urlForLocal(taskInfo.executor.avatar) }
: avatarMok alt="avatar"
} />
alt="avatar" <img
/> src={close}
<img className="delete"
src={close} onClick={() => deleteTaskExecutor()}
className="delete" />
onClick={() => deleteTaskExecutor()} </div>
/>
</div>
</>
) : ( ) : (
<div className="add-worker moreItems "> <div className="add-worker moreItems ">
<button <button

8
src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
View File

@ -484,7 +484,7 @@ export const TrackerModal = ({
<div className="title-project"> <div className="title-project">
<div className="createTaskHead"> <div className="createTaskHead">
<div className="createTaskBody__right__owner"> <div className="createTaskBody__right__owner">
<p>Создатель: {profileInfo?.fio}</p> <p>Создатель : {profileInfo?.fio}</p>
<img <img
src={ src={
profileInfo.photo profileInfo.photo
@ -711,11 +711,11 @@ export const TrackerModal = ({
}} }}
/> />
</div> </div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div> </div>
</div> </div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div> </div>
</> </>
)} )}

20
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -31,7 +31,7 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
row-gap: 8px; row-gap: 8px;
padding-bottom: 10px; margin-bottom: 10px;
.select-priority { .select-priority {
background-color: white; background-color: white;
@ -296,7 +296,7 @@
.createTaskHead { .createTaskHead {
width: 100%; width: 100%;
padding: 5px 10px; padding: 30px 42px 18px;
display: flex; display: flex;
column-gap: 9.5px; column-gap: 9.5px;
align-items: center; align-items: center;
@ -325,9 +325,9 @@
} }
.createTaskBody { .createTaskBody {
padding: 10px; padding: 13px 43px 46px 42px;
display: flex; display: flex;
column-gap: 20px; column-gap: 55px;
&__left { &__left {
display: flex; display: flex;
@ -336,8 +336,7 @@
color: #263238 !important; color: #263238 !important;
font-size: 16px; font-size: 16px;
line-height: 19.2px; line-height: 19.2px;
margin-bottom: 15px; margin-bottom: 25px;
margin-left: 5px;
} }
.input-container { .input-container {
@ -361,8 +360,8 @@
} }
.ck-editor__editable.ck-rounded-corners { .ck-editor__editable.ck-rounded-corners {
min-height: 130px; min-height: 110px;
max-height: 130px; max-height: 110px;
} }
} }
@ -400,7 +399,7 @@
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;
font-size: 15px; font-size: 15px;
margin-bottom: 10px; margin-bottom: 17.5px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -580,6 +579,7 @@
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;
font-size: 15px; font-size: 15px;
margin-bottom: 27px;
z-index: 100; z-index: 100;
} }
@ -600,7 +600,7 @@
line-height: 18px; line-height: 18px;
font-size: 15px; font-size: 15px;
position: relative; position: relative;
margin: 8px 0 30px; margin-bottom: 22px;
span { span {
color: #6f6f6f; color: #6f6f6f;

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

@ -964,17 +964,17 @@ export const ProjectTracker = () => {
/> />
<span> <span>
{task.comment_count}{" "} {task.comment_count}{" "}
{/* {caseOfNum( {caseOfNum(
task.comment_count, task.comment_count,
"comments" "comments"
)} */} )}
</span> </span>
</div> </div>
<div className="tasks__board__item__info__more"> <div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" /> <img src={filesBoard} alt="filesImg" />
<span> <span>
{task.files ? task.files : 0}{" "} {task.files ? task.files : 0}{" "}
{/* {caseOfNum(0, "files")} */} {caseOfNum(0, "files")}
</span> </span>
</div> </div>
</div> </div>

31
src/pages/Tracker/tracker.scss
View File

@ -130,7 +130,7 @@
&__content { &__content {
width: 100%; width: 100%;
background: #ffffff; background: #ffffff;
padding: 15px 0; padding: 27px 0 29px;
margin-bottom: 50px; margin-bottom: 50px;
&__wrapper { &__wrapper {
@ -705,9 +705,9 @@
} }
&__container { &__container {
padding: 10px; padding: 30px 25px 30px;
display: flex; display: flex;
column-gap: 15px; column-gap: 25px;
margin: 0 auto; margin: 0 auto;
overflow: auto; overflow: auto;
max-width: 100%; max-width: 100%;
@ -730,9 +730,9 @@
} }
@media (max-width: 900px) { @media (max-width: 900px) {
padding: 5px; padding: 15px;
flex-direction: column; flex-direction: column;
row-gap: 15px; row-gap: 25px;
transform: none; transform: none;
} }
} }
@ -744,7 +744,8 @@
0px 1px 1px rgba(0, 0, 0, 0.06); 0px 1px 1px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
padding: 12px 10px 12px 8px; padding: 12px 10px 12px 8px;
width: 360px; min-width: 365px;
max-width: 380px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 10px; row-gap: 10px;
@ -764,10 +765,10 @@
.tasksContainer { .tasksContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 8px; row-gap: 16px;
max-height: 750px; max-height: 750px;
overflow: auto; overflow: auto;
padding: 5px; padding: 8px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 3px; width: 3px;
@ -797,7 +798,7 @@
&__item { &__item {
width: 328px; width: 328px;
padding: 6px 10px; padding: 4px 10px;
position: relative; position: relative;
box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
0px 5px 3px -2px rgba(0, 0, 0, 0.02); 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
@ -865,7 +866,7 @@
color: #5c6165; color: #5c6165;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 120%; line-height: 110%;
max-height: 100px; max-height: 100px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -876,7 +877,7 @@
&__info { &__info {
display: flex; display: flex;
column-gap: 10px; justify-content: space-between;
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
@ -907,8 +908,8 @@
&__priority { &__priority {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
column-gap: 5px;
margin-bottom: 8px; margin-bottom: 8px;
p { p {
@ -937,8 +938,8 @@
&__deadLine { &__deadLine {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 5px; justify-content: space-between;
margin-bottom: 8px; margin-bottom: 10px;
p { p {
font-weight: 500; font-weight: 500;
@ -978,7 +979,7 @@
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 6px; column-gap: 6px;
row-gap: 3px; row-gap: 3px;
margin: 5px 0 8px; margin-bottom: 5px;
.tagItem { .tagItem {
padding: 3px 10px; padding: 3px 10px;