timer with comments

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -24,7 +24,8 @@ import fullScreen from "../../../images/inFullScreen.svg";
 import close from "../../../images/closeProjectPersons.svg";
 
 import "./ModalTicket.scss";
-import {urlForLocal} from "../../../helper";
+import {urlForLocal, getCorrectRequestDate} from "../../../helper";
+import accept from "../../../images/accept.png";
 
 export const ModalTiсket = ({
   active,
@@ -41,11 +42,20 @@ export const ModalTiсket = ({
   const [comments, setComments] = useState([]);
   const [commentsEditOpen, setCommentsEditOpen] = useState({})
   const [commentsEditText, setCommentsEditText] = useState({})
+  const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState({})
   const [dropListOpen, setDropListOpen] = useState(false)
   const [dropListMembersOpen, setDropListMembersOpen] = useState(false)
   const [executor, setExecutor] = useState(task.executor)
   const [members, setMembers] = useState(task.taskUsers)
   const [users, setUsers] = useState([])
+  const [timerStart, setTimerStart] = useState(false)
+  const [timerInfo, setTimerInfo] = useState({})
+  const [currentTimerCount, setCurrentTimerCount] = useState({
+    hours: 0,
+    minute: 0,
+    seconds: 0
+  })
+  const [timerId, setTimerId] = useState(null)
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -111,6 +121,47 @@ export const ModalTiсket = ({
         text: commentsEditText[commentId]
       }
     }).then((res) => {
+      // createSubComment()
+    })
+  }
+
+  // function createSubComment() {
+  //   apiRequest("/comment/create", {
+  //     method: "POST",
+  //     data: {
+  //       text: '12312312',
+  //       entity_type: 2,
+  //       entity_id: task.id,
+  //       parent_id: 36
+  //     }
+  //   }).then((res) => console.log(res))
+  // }
+
+  function startTaskTimer() {
+    apiRequest("/timer/create", {
+      method: "POST",
+      data: {
+        entity_type: 2,
+        entity_id: task.id,
+        created_at: getCorrectRequestDate(new Date())
+      }
+    }).then((res) => {
+      setTimerStart(true)
+      setTimerInfo(res)
+      startTimer()
+    })
+  }
+
+  function stopTaskTimer() {
+    apiRequest("/timer/update", {
+      method: "PUT",
+      data: {
+        timer_id: timerInfo.id,
+        stopped_at: getCorrectRequestDate(new Date())
+      }
+    }).then((res) => {
+      setTimerStart(false)
+      clearInterval(timerId)
     })
   }
 
@@ -170,10 +221,62 @@ export const ModalTiсket = ({
       res.forEach((item) => {
         setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false}))
         setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text}))
+        setSubCommentsCreateOpen((prevValue) => ({...prevValue, [item.id]: false}))
+      })
+    })
+    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
+      let timerSeconds = 0
+      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)
+        }
       })
     })
   }, [])
 
+  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
+  }
+
+
   useEffect(() => {
     let ids = members.map((user) => user.user_id)
     setUsers(projectUsers.reduce((acc, cur) => {
@@ -246,6 +349,11 @@ export const ModalTiсket = ({
               {comments.map((comment) => {
                 return <div className='comments__list__item' key={comment.id}>
                   <div className='comments__list__item__info'>
+                    <div className='comments__list__item__fio'>
+                      <img src={urlForLocal(comment.user.avatar)} alt='avatar' />
+                      <p>{comment.user.fio}</p>
+                    </div>
+                    <div className='comments__list__item__date'>
                       <span>{getCorrectDate(comment.created_at)}</span>
                       <div className={commentsEditOpen[comment.id] ? 'edit edit__open' : 'edit'} >
                         <img src={edit} alt='edit' onClick={() => {
@@ -257,9 +365,24 @@ export const ModalTiсket = ({
                       </div>
                       <img src={del} alt='delete' onClick={() => deleteComment(comment.id)} />
                     </div>
-                  {commentsEditOpen[comment.id] ? <input value={commentsEditText[comment.id]} onChange={(e) =>  {
+                  </div>
+                  {commentsEditOpen[comment.id] ? <input className='comments__list__item__text' value={commentsEditText[comment.id]} onChange={(e) =>  {
                     setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value}))
-                  }} /> : <p>{commentsEditText[comment.id]}</p>}
+                  }} /> : <p className='comments__list__item__text'>{commentsEditText[comment.id]}</p>}
+                  {subCommentsCreateOpen[comment.id] ?
+                      <div className='comments__list__item__answer__new'>
+                        <input />
+                        <img src={accept} alt='accept'
+                             onClick={() => {
+                               setSubCommentsCreateOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
+                             }}
+                        />
+                      </div>
+                      :
+                      <span onClick={() => {
+                        setSubCommentsCreateOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
+                      }} className='comments__list__item__answer'>Ответить</span>
+                  }
                 </div>
               })
 
@@ -335,12 +458,20 @@ export const ModalTiсket = ({
             <div className="time">
               <img src={watch}></img>
               <span>Длительность : </span>
-              <p>{"0:00:00"}</p>
+              <p>
+                {correctTimerTime(currentTimerCount.hours)}:{correctTimerTime(currentTimerCount.minute)}:{correctTimerTime(currentTimerCount.seconds)}
+              </p>
             </div>
 
-            <button className="start">
+            {timerStart ?
+              <button className="stop" onClick={() => stopTaskTimer()}>
+                Остановить
+              </button>
+                :
+              <button className="start" onClick={() => startTaskTimer()}>
                 Начать делать <img src={arrow}></img>
               </button>
+            }
           </div>
 
           <div className="workers_box-bottom">

src/components/UI/ModalTicket/ModalTicket.scss

@@ -79,22 +79,60 @@
       .comments__list {
         display: flex;
         flex-direction: column;
-        row-gap: 10px;
+        max-height: 420px;
+        overflow: auto;
         &__item {
           padding: 10px 20px;
           display: flex;
           flex-direction: column;
           max-width: 438px;
-          background: #f1f1f1;
           border-radius: 44px;
           font-size: 14px;
           width: 100%;
-          row-gap: 10px;
+
+          &__fio {
+            display: flex;
+            align-items: center;
+
+            p {
+              font-size: 12px;
+              color: #000000;
+              line-height: 32px;
+              max-width: 150px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              margin-left: 10px;
+            }
+
+            img {
+              width: 24px;
+              height: 24px;
+            }
+          }
+
+          &__date {
+            display: flex;
+            align-items: center;
+            column-gap: 5px;
+
+            img {
+              cursor: pointer;
+              width: 15px;
+            }
+
+            span {
+              font-size: 12px;
+            }
+          }
+
+          &__text {
+            margin-left: 34px;
+          }
 
           &__info {
             display: flex;
-            justify-content: center;
+            justify-content: space-between;
-            column-gap: 15px;
 
             .edit {
               width: 25px;
@@ -107,10 +145,35 @@
             .edit__open {
               background: green;
             }
+          }
+
+          &__answer {
+            margin-left: 34px;
+            text-decoration-line: underline;
+            font-weight: 400;
+            font-size: 10px;
+            line-height: 32px;
+            cursor: pointer;
+
+            &__new {
+              margin-left: 34px;
+              font-size: 14px;
+              border-radius: 5px;
+              border: 1px solid gainsboro;
+              padding: 3px 5px;
+              display: flex;
+              align-items: center;
 
               img {
+                width: 20px;
+                height: 20px;
                 cursor: pointer;
-              width: 15px;
+              }
+
+              input {
+                width: 90%;
+                border: none;
+              }
             }
           }
         }
@@ -315,14 +378,23 @@
       color: white;
       background: #1458dd;
       border-radius: 44px;
-      opacity: 0.5;
-      pointer-events: none;
 
       img {
         margin-left: 10px;
       }
     }
 
+    .stop {
+      font-size: 12px;
+      margin-top: 25px;
+      width: 151px;
+      height: 40px;
+      border: none;
+      color: white;
+      background: red;
+      border-radius: 44px;
+    }
+
     .time {
       display: flex;
       align-items: center;

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -22,7 +22,6 @@ import { apiRequest } from "../../../api/request";
 import project from "../../../images/trackerProject.svg";
 import watch from "../../../images/watch.png";
 import file from "../../../images/fileModal.svg";
-import task from "../../../images/tasksMock.png";
 import send from "../../../images/send.svg";
 import arrow2 from "../../../images/arrowStart.png";
 import plus from "../../../images/plus.svg";
@@ -34,10 +33,11 @@ import link from "../../../images/link.svg";
 import archive2 from "../../../images/archive.svg";
 import del from "../../../images/delete.svg";
 import edit from "../../../images/edit.svg";
+import accept from "../../../images/accept.png"
 
 import "./ticketFullScreen.scss";
 import close from "../../../images/closeProjectPersons.svg";
-import {urlForLocal} from "../../../helper";
+import {getCorrectRequestDate, urlForLocal} from "../../../helper";
 import {getCorrectDate} from "../../Calendar/calendarHelper";
 
 export const TicketFullScreen = ({}) => {
@@ -53,8 +53,11 @@ export const TicketFullScreen = ({}) => {
   const [loader, setLoader] = useState(true);
   const [comments, setComments] = useState([]);
   const [commentsEditOpen, setCommentsEditOpen] = useState({})
+  const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState({})
   const [commentsEditText, setCommentsEditText] = useState({})
   const [personListOpen, setPersonListOpen] = useState(false)
+  const [timerStart, setTimerStart] = useState(false)
+  const [timerInfo, setTimerInfo] = useState({})
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@@ -64,9 +67,16 @@ export const TicketFullScreen = ({}) => {
         setComments(res)
         res.forEach((item) => {
           setCommentsEditOpen((prevValue) => ({...prevValue, [item.id]: false}))
+          setSubCommentsCreateOpen((prevValue) => ({...prevValue, [item.id]: false}))
           setCommentsEditText((prevValue) => ({...prevValue, [item.id]: item.text}))
         })
       })
+      taskInfo.timers.forEach((time) => {
+        if (!time.stopped_at) {
+          setTimerStart(true)
+          setTimerInfo(time)
+        }
+      })
       dispatch(setProjectBoardFetch(taskInfo.project_id));
       setLoader(boardLoader)
     });
@@ -137,6 +147,30 @@ export const TicketFullScreen = ({}) => {
     })
   }
 
+  function startTaskTimer() {
+    apiRequest("/timer/create", {
+      method: "POST",
+      data: {
+        entity_type: 2,
+        entity_id: taskInfo.id,
+        created_at: getCorrectRequestDate(new Date())
+      }
+    }).then((res) => {
+      setTimerStart(true)
+      setTimerInfo(res)
+    })
+  }
+
+  function stopTaskTimer() {
+    apiRequest("/timer/update", {
+      method: "PUT",
+      data: {
+        timer_id: timerInfo.id,
+        stopped_at: getCorrectRequestDate(new Date())
+      }
+    }).then((res) => setTimerStart(false))
+  }
+
   function deletePerson(userId) {
     apiRequest("/project/del-user", {
       method: "DELETE",
@@ -309,6 +343,11 @@ export const TicketFullScreen = ({}) => {
                 {comments.map((comment) => {
                   return <div className='comments__list__item' key={comment.id}>
                     <div className='comments__list__item__info'>
+                      <div className='comments__list__item__fio'>
+                        <img src={urlForLocal(comment.user.avatar)} alt='avatar' />
+                        <p>{comment.user.fio}</p>
+                      </div>
+                      <div className='comments__list__item__date'>
                         <span>{getCorrectDate(comment.created_at)}</span>
                         <div className={commentsEditOpen[comment.id] ? 'edit edit__open' : 'edit'} >
                           <img src={edit} alt='edit' onClick={() => {
@@ -320,9 +359,24 @@ export const TicketFullScreen = ({}) => {
                         </div>
                         <img src={del} alt='delete' onClick={() => deleteComment(comment.id)} />
                       </div>
-                    {commentsEditOpen[comment.id] ? <input value={commentsEditText[comment.id]} onChange={(e) =>  {
+                    </div>
+                    {commentsEditOpen[comment.id] ? <input className='comments__list__item__text' value={commentsEditText[comment.id]} onChange={(e) =>  {
                       setCommentsEditText((prevValue) => ({...prevValue, [comment.id]: e.target.value}))
-                    }} /> : <p>{commentsEditText[comment.id]}</p>}
+                    }} /> : <p className='comments__list__item__text'>{commentsEditText[comment.id]}</p>}
+                    {subCommentsCreateOpen[comment.id] ?
+                        <div className='comments__list__item__answer__new'>
+                          <input />
+                          <img src={accept} alt='accept'
+                             onClick={() => {
+                               setSubCommentsCreateOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
+                             }}
+                          />
+                        </div>
+                        :
+                      <span onClick={() => {
+                        setSubCommentsCreateOpen((prevValue) => ({...prevValue, [comment.id]: !prevValue[comment.id]}))
+                      }} className='comments__list__item__answer'>Ответить</span>
+                    }
                   </div>
                 })
 
@@ -378,9 +432,15 @@ export const TicketFullScreen = ({}) => {
                 <p>{"0:00:00"}</p>
               </div>
 
-              <button className="start">
+              {timerStart ?
+                  <button className="stop" onClick={() => stopTaskTimer()}>
+                    Остановить
+                  </button>
+                  :
+                  <button className="start" onClick={() => startTaskTimer()}>
                     Начать делать <img src={arrow2}></img>
                   </button>
+              }
             </div>
 
             <div className="workers_box-bottom">

src/helper.js

@@ -51,3 +51,14 @@ export function scrollToForm() {
     behavior: "smooth",
   });
 }
+
+export function getCorrectRequestDate(date) {
+  const yyyy = String(date.getUTCFullYear())
+  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const dd = String(date.getUTCDate()).padStart(2, "0");
+  const hh = String(date.getUTCHours())
+  const min = String(date.getUTCMinutes())
+  const sec = String(date.getUTCSeconds())
+  return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`
+}
+