tracker-tasks

src/assets/icons/calendar.svg

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

src/components/Calendar/calendarComponent.scss

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

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

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

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

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

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -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) => {
+      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">
+                    {projectBoard.projectUsers?.length > 3 &&
                       <span className="countPersons">
-                      {projectBoard.projectUsers?.length}
+                      +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
+                      <CKEditor
-                        value={inputsValue.description}
+                        editor={ClassicEditor}
-                        onChange={(e) => {
+                        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 ===
+                        taskInfo.executor_id === Number(localStorage.getItem("id"))
-                        Number(localStorage.getItem("id"))
                           ? "start"
                           : "start disable"
                       }
                       onClick={() => startTaskTimer()}
                     >
-                      Начать делать <img src={arrow2} alt="arrow"></img>
+                      Начать делать
+                      <img src={arrowStart}></img>
                     </button>
                   )}
                 </div>

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -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">
+            <CKEditor
-              <input
+              editor={ClassicEditor}
-                className="name-project"
+              data={descriptionTicket}
-                value={descriptionTicket}
+              config={{
-                onChange={(e) => setDescriptionTicket(e.target.value)}
+                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
-                placeholder="Описание задачи"
+                removePlugins: [
+                  "BlockQuote",
+                ],
+              }}
+              onChange={(event, editor) => {
+                const data = editor.getData();
+                setDescriptionTicket(data);
+              }}
             />
-            </div>
             <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>

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

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

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -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
+        <CKEditor
-          className="comments__list__item__text"
+          editor={ClassicEditor}
-          value={commentsEditText}
+          data={commentsEditText}
-          onChange={(e) => {
+          config={{
-            setCommentsEditText(e.target.value);
+            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">

src/pages/ProjectTracker/ProjectTracker.js

@@ -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)
                               }
                             >
                               +

src/pages/Tracker/tracker.scss

@@ -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;
+                right: 25px;
-                top: 15px;
+                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;