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

tracker-tasks

Browse Source
This commit is contained in:
Николай Полтщук 2023-06-29 02:26:49 +03:00
parent 73bcd58d05
commit 4db278fdbd
10 changed files with 233 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/icons/calendar.svg
View File

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><g><g><image width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfUlEQVQ4jeXSMQrCUBCE4S9tII1HsU7hyXIQD+EZPEDwLIJi9Yg2+1QQMftaB/5iB3bYgeWlTaDBA1OQ9vYouCcpsWvB0HDBgJtI+9btl3euAcdGSg3YNXJ9rwDbYO38rFB1CNbOHwH/fEEnrw4XOGGWf6I5dvUY5Z9oRP8AEMJY2tGN6tUAAAAASUVORK5CYII="/></g></g></svg>
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
<path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 457 B

After

Width:  |  Height:  |  Size: 1.4 KiB

7
src/components/Calendar/calendarComponent.scss
View File

@ -160,12 +160,17 @@
a {
color: black;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 12px;
}
img {
width: 16px;
height: 16px;
margin: 0 10px 0 0;
margin: 0 5px 0 0;
@media (max-width: 968px) {
margin-right: 2px;

12
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -1,8 +1,8 @@
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
@ -69,7 +69,7 @@ export const ModalTiсket = ({
task_id: task.id,
status: 0,
},
}).then((res) => {
}).then(() => {
setActive(false);
dispatch(setProjectBoardFetch(projectId));
});
@ -334,9 +334,9 @@ export const ModalTiсket = ({
);
}, [members]);
function copyProjectLink() {
function copyTicketLink() {
navigator.clipboard.writeText(
`https://itguild.info/tracker/project/${projectId}`
`https://itguild.info/tracker/task/${task.id}`
);
}
@ -620,7 +620,7 @@ export const ModalTiсket = ({
</div>
<div>
<img src={link}></img>
<p onClick={copyProjectLink}>ссылка на проект</p>
<p onClick={copyTicketLink}>ссылка на задачу</p>
</div>
<div onClick={deleteTask}>
<img src={archive}></img>

10
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -129,6 +129,10 @@
width: 100%;
position: relative;
.ck-editor {
margin: 10px 0;
}
&__subComment {
&:before {
content: "";
@ -251,6 +255,11 @@
}
}
}
.comment__edit--open {
&:after {
display: none;
}
}
}
}
@ -508,7 +517,6 @@
&__creator {
font-size: 14px;
line-height: 32px;
font-weight: 500;
color: #2d4a17;
max-width: 200px;

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

@ -1,6 +1,8 @@
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate, useParams } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import {
deletePersonOnProject,
@ -27,7 +29,7 @@ import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskCommen
import archive from "assets/icons/archive.svg";
import archive2 from "assets/icons/archive.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrow2 from "assets/icons/arrows/arrowStart.png";
import arrowStart from "assets/icons/arrows/arrowStart.png";
import close from "assets/icons/close.png";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
@ -40,6 +42,7 @@ import tasks from "assets/icons/trackerTasks.svg";
import watch from "assets/icons/watch.svg";
import "./ticketFullScreen.scss";
import avatarMok from "assets/images/avatarMok.png";
export const TicketFullScreen = () => {
const [modalAddWorker, setModalAddWorker] = useState(false);
@ -56,6 +59,12 @@ export const TicketFullScreen = () => {
const [personListOpen, setPersonListOpen] = useState(false);
const [timerStart, setTimerStart] = useState(false);
const [timerInfo, setTimerInfo] = useState({});
const [currentTimerCount, setCurrentTimerCount] = useState({
hours: 0,
minute: 0,
seconds: 0,
});
const [timerId, setTimerId] = useState(null);
useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@ -80,12 +89,28 @@ export const TicketFullScreen = () => {
}, []);
setComments(comments);
});
taskInfo.timers.forEach((time) => {
if (!time.stopped_at) {
setTimerStart(true);
setTimerInfo(time);
apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then(
(res) => {
let timerSeconds = 0;
res.length &&
res.forEach((time) => {
timerSeconds += time.deltaSeconds;
setCurrentTimerCount({
hours: Math.floor(timerSeconds / 60 / 60),
minute: Math.floor((timerSeconds / 60) % 60),
seconds: timerSeconds % 60,
});
updateTimerHours = Math.floor(timerSeconds / 60 / 60);
updateTimerMinute = Math.floor((timerSeconds / 60) % 60);
updateTimerSec = timerSeconds % 60;
if (!time.stopped_at) {
setTimerStart(true);
startTimer();
setTimerInfo(time);
}
});
}
});
);
dispatch(setProjectBoardFetch(taskInfo.project_id));
setLoader(boardLoader);
});
@ -142,6 +167,7 @@ export const TicketFullScreen = () => {
}).then((res) => {
setTimerStart(true);
setTimerInfo(res);
startTimer();
});
}
@ -152,7 +178,10 @@ export const TicketFullScreen = () => {
timer_id: timerInfo.id,
stopped_at: getCorrectRequestDate(new Date()),
},
}).then(() => setTimerStart(false));
}).then(() => {
setTimerStart(false);
clearInterval(timerId);
});
}
function deletePerson(userId) {
@ -216,6 +245,41 @@ export const TicketFullScreen = () => {
);
}
function startTimer() {
setTimerId(
setInterval(() => {
run();
}, 1000)
);
}
let updateTimerSec = currentTimerCount.seconds,
updateTimerMinute = currentTimerCount.minute,
updateTimerHours = currentTimerCount.hours;
function run() {
updateTimerSec++;
if (updateTimerSec > 60) {
updateTimerMinute++;
updateTimerSec = 0;
}
if (updateTimerMinute === 60) {
updateTimerMinute = 0;
updateTimerHours++;
}
return setCurrentTimerCount({
hours: updateTimerHours,
minute: updateTimerMinute,
seconds: updateTimerSec,
});
}
function correctTimerTime(time) {
if (time < 10) return `0${time}`;
if (time > 10) return time;
}
return (
<section className="ticket-full-screen">
<ProfileHeader />
@ -273,9 +337,32 @@ export const TicketFullScreen = () => {
></TrackerModal>
<div className="tasks__head__persons">
<span className="countPersons">
{projectBoard.projectUsers?.length}
{projectBoard.projectUsers?.length > 3 &&
<span className="countPersons">
+1...
</span>
}
<div className="projectPersons">
{projectBoard.projectUsers?.length &&
projectBoard.projectUsers
.slice(
0,
projectBoard.length > 3 ? 3 : projectBoard.length
)
.map((person) => {
return (
<img
key={person.user_id}
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
);
})}
</div>
<span
className="addPerson"
onClick={() => {
@ -365,17 +452,33 @@ export const TicketFullScreen = () => {
)}
<div className="content__description">
{editOpen ? (
<input
value={inputsValue.description}
onChange={(e) => {
<CKEditor
editor={ClassicEditor}
data={inputsValue.description}
config={{
removePlugins: [
"CKFinderUploadAdapter",
"CKFinder",
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote",
],
}}
onChange={(event, editor) => {
const data = editor.getData();
setInputsValue((prevValue) => ({
...prevValue,
description: e.target.value,
description: data,
}));
}}
/>
) : (
<p>{inputsValue.description}</p>
<p dangerouslySetInnerHTML={{ __html: inputsValue.description }} />
)}
</div>
<div className="content__communication">
@ -430,9 +533,9 @@ export const TicketFullScreen = () => {
</div>
</div>
<div className="workers">
<div className="workers_box">
<div className="workers_box task__info">
<p className="workers__creator">
Создатель : <span>{taskInfo.user?.fio}</span>
Создатель : <br/>{taskInfo.user?.fio}
</p>
<div>
{Boolean(taskInfo.taskUsers?.length) &&
@ -475,26 +578,37 @@ export const TicketFullScreen = () => {
<div className="workers_box-middle">
<div className="time">
<img src={watch} alt="watch"></img>
<img src={watch}></img>
<span>Длительность : </span>
<p>{"0:00:00"}</p>
<p>
{correctTimerTime(currentTimerCount.hours)}:
{correctTimerTime(currentTimerCount.minute)}:
{correctTimerTime(currentTimerCount.seconds)}
</p>
</div>
{timerStart ? (
<button className="stop" onClick={() => stopTaskTimer()}>
<button
className={
taskInfo.executor_id === Number(localStorage.getItem("id"))
? "stop"
: "stop disable"
}
onClick={() => stopTaskTimer()}
>
Остановить
</button>
) : (
<button
className={
taskInfo.executor_id ===
Number(localStorage.getItem("id"))
taskInfo.executor_id === Number(localStorage.getItem("id"))
? "start"
: "start disable"
}
onClick={() => startTaskTimer()}
>
Начать делать <img src={arrow2} alt="arrow"></img>
Начать делать
<img src={arrowStart}></img>
</button>
)}
</div>

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

@ -1,5 +1,7 @@
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { getProfileInfo } from "@redux/outstaffingSlice";
import {
@ -27,6 +29,7 @@ import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import "./trackerModal.scss";
import avatarMok from "assets/images/avatarMok.png";
export const TrackerModal = ({
active,
@ -50,7 +53,7 @@ export const TrackerModal = ({
const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("Описание задачи");
const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null);
@ -114,13 +117,13 @@ export const TrackerModal = ({
dispatch(setProjectBoardFetch(projectBoard.id));
setActive(false);
setValueTiket("");
setDescriptionTicket("");
setDescriptionTicket("Описание задачи");
setSelectedExecutorTask("Выберите исполнителя задачи");
});
} else {
setActive(false);
setValueTiket("");
setDescriptionTicket("");
setDescriptionTicket("Описание задачи");
dispatch(setProjectBoardFetch(projectBoard.id));
}
});
@ -337,14 +340,20 @@ export const TrackerModal = ({
placeholder="Название задачи"
/>
</div>
<div className="input-container">
<input
className="name-project"
value={descriptionTicket}
onChange={(e) => setDescriptionTicket(e.target.value)}
placeholder="Описание задачи"
/>
</div>
<CKEditor
editor={ClassicEditor}
data={descriptionTicket}
config={{
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
removePlugins: [
"BlockQuote",
],
}}
onChange={(event, editor) => {
const data = editor.getData();
setDescriptionTicket(data);
}}
/>
<div
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
className={
@ -381,7 +390,11 @@ export const TrackerModal = ({
<span>{person.user.fio}</span>
<img
className="avatar"
src={urlForLocal(person.user.avatar)}
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
</div>

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

@ -31,6 +31,7 @@
align-items: center;
flex-direction: column;
margin: 0 0 15px 0;
row-gap: 5px;
.select-priority {
background-color: white;
@ -78,7 +79,7 @@
}
.input-container {
width: 287px;
width: 320px;
height: 35px;
background: #ffffff;
border-radius: 8px;
@ -89,8 +90,12 @@
}
}
.ck-editor {
max-width: 320px;
}
.select__executor {
width: 287px;
width: 320px;
background: white;
border-radius: 8px;
margin: 5px 0;

32
src/components/TrackerTaskComment/TrackerTaskComment.jsx
View File

@ -6,6 +6,8 @@ import { apiRequest } from "@api/request";
import { getCorrectDate } from "@components/Calendar/calendarHelper";
import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskComment";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
@ -76,6 +78,7 @@ export const TrackerTaskComment = ({
? "comments__list__item__main"
: "",
"comments__list__item",
commentsEditOpen ? 'comment__edit--open' : '',
comment.parent_id ? "comments__list__item__subComment" : "",
].join(" ")}
>
@ -106,17 +109,32 @@ export const TrackerTaskComment = ({
</div>
</div>
{commentsEditOpen ? (
<input
className="comments__list__item__text"
value={commentsEditText}
onChange={(e) => {
setCommentsEditText(e.target.value);
<CKEditor
editor={ClassicEditor}
data={commentsEditText}
config={{
removePlugins: [
"CKFinderUploadAdapter",
"CKFinder",
"EasyImage",
"Image",
"ImageCaption",
"ImageStyle",
"ImageToolbar",
"ImageUpload",
"MediaEmbed",
"BlockQuote",
],
}}
onChange={(event, editor) => {
const data = editor.getData();
setCommentsEditText(data);
}}
/>
) : (
<p className="comments__list__item__text">{commentsEditText}</p>
<p dangerouslySetInnerHTML={{ __html: commentsEditText}} className="comments__list__item__text" />
)}
{!comment.parent_id && (
{!comment.parent_id && !commentsEditOpen && (
<>
{subCommentsCreateOpen ? (
<div className="comments__list__item__answer__new">

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

@ -322,9 +322,11 @@ export const ProjectTracker = () => {
<p>добавить колонку</p>
</div>
<div className="tasks__head__persons">
{projectBoard.projectUsers?.length > 3 &&
<span className="countPersons">
{projectBoard.projectUsers?.length}
+1...
</span>
}
<div className="projectPersons">
{projectBoard.projectUsers?.length &&
projectBoard.projectUsers
@ -379,7 +381,11 @@ export const ProjectTracker = () => {
>
<img
className="avatar"
src={urlForLocal(person.user.avatar)}
src={
person.user?.avatar
? urlForLocal(person.user.avatar)
: avatarMok
}
alt="avatar"
/>
<span>{person.user.fio}</span>
@ -462,7 +468,7 @@ export const ProjectTracker = () => {
<span
className="add"
onClick={() =>
selectedTabTask(column.id, column.tasks.length)
selectedTabTask(column.id, projectBoard?.columns ? projectBoard?.columns[0].tasks.at(-1).priority + 1 : 1)
}
>
+

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

@ -295,7 +295,7 @@
color: #252c32;
border: 1px solid #dde2e4;
background: white;
left: -5px;
left: -6px;
}
.addPerson {
@ -329,9 +329,11 @@
&__close {
cursor: pointer;
position: absolute;
right: 20px;
top: 15px;
right: 25px;
top: 25px;
margin-left: auto;
width: 35px;
height: 35px;
}
&__count {
@ -356,7 +358,7 @@
line-height: 22px;
color: #263238;
font-weight: 500;
margin: 13px 0 32px;
margin: 13px 0 10px;
span {
width: auto;