Merge pull request #104 from apuc/tracker-connect-back

correctProjectUsers

.husky/pre-commit

@@ -2,4 +2,4 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm run format
-npm run lint
+#npm run lint

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

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
-import { modalToggle, setProjectBoardFetch } from "@redux/projectsTrackerSlice";
+import { getProfileInfo } from "@redux/outstaffingSlice";
+import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
 
 import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
-import BaseButton from "@components/Common/BaseButton/BaseButton";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
@@ -21,7 +21,6 @@ import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import file from "assets/icons/fileModal.svg";
 import link from "assets/icons/link.svg";
-import plus from "assets/icons/plus.svg";
 import send from "assets/icons/send.svg";
 import watch from "assets/icons/watch.svg";
 
@@ -57,6 +56,9 @@ export const ModalTiсket = ({
     seconds: 0,
   });
   const [timerId, setTimerId] = useState(null);
+  const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
+  const [executorId, setExecutorId] = useState(task.executor_id);
+  const profileInfo = useSelector(getProfileInfo);
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -65,7 +67,7 @@ export const ModalTiсket = ({
         task_id: task.id,
         status: 0,
       },
-    }).then(() => {
+    }).then((res) => {
       setActive(false);
       dispatch(setProjectBoardFetch(projectId));
     });
@@ -79,7 +81,7 @@ export const ModalTiсket = ({
         title: inputsValue.title,
         description: inputsValue.description,
       },
-    }).then(() => {
+    }).then((res) => {
       dispatch(setProjectBoardFetch(projectId));
     });
   }
@@ -177,8 +179,10 @@ export const ModalTiсket = ({
         executor_id: person.user_id,
       },
     }).then((res) => {
+      setExecutorId(person.user_id);
       setDropListOpen(false);
       setExecutor(res.executor);
+      dispatch(setProjectBoardFetch(projectId));
     });
   }
 
@@ -190,7 +194,9 @@ export const ModalTiсket = ({
         executor_id: 0,
       },
     }).then(() => {
+      setExecutorId(null);
       setExecutor(null);
+      dispatch(setProjectBoardFetch(projectId));
     });
   }
 
@@ -204,6 +210,7 @@ export const ModalTiсket = ({
     }).then((res) => {
       setDropListMembersOpen(false);
       setMembers((prevValue) => [...prevValue, res]);
+      dispatch(setProjectBoardFetch(projectId));
     });
   }
 
@@ -216,6 +223,7 @@ export const ModalTiсket = ({
       },
     }).then(() => {
       setMembers(members.filter((item) => item.user_id !== person.user_id));
+      dispatch(setProjectBoardFetch(projectId));
     });
   }
 
@@ -257,6 +265,26 @@ export const ModalTiсket = ({
           });
       }
     );
+
+    if (
+      localStorage.getItem("role_status") !== "18" &&
+      Boolean(
+        !correctProjectUsers.find(
+          (item) => item.user_id === profileInfo.id_user
+        )
+      )
+    ) {
+      setCorrectProjectUsers((prevState) => [
+        ...prevState,
+        {
+          user: {
+            avatar: profileInfo.photo,
+            fio: profileInfo.fio,
+          },
+          user_id: profileInfo.id_user,
+        },
+      ]);
+    }
   }, []);
 
   function startTimer() {
@@ -314,17 +342,16 @@ export const ModalTiсket = ({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="content">
-          <Link to={`/tracker/task/${task.id}`} className="title-project__full">
+          <h3 className="title-project">
+            <img src={category} className="title-project__category"></img>
+            Проект: {projectName}
+            <Link
+              to={`/tracker/task/${task.id}`}
+              className="title-project__full"
+            >
               <img src={fullScreen}></img>
             </Link>
-
+          </h3>
-          <div className="title-project">
-            <img src={category} className="title-project__category"></img>
-            <h2>
-              Проект:
-              <h3>{projectName}</h3>
-            </h2>
-          </div>
 
           <div className="content__task">
             <span>Задача</span>
@@ -358,23 +385,22 @@ export const ModalTiсket = ({
               {/*<img src={taskImg} className="image-task"></img>*/}
             </div>
             <div className="content__communication">
-              <p className="tasks">
+              {/*<p className="tasks">*/}
-                <BaseButton
+              {/*  <button*/}
-                  onClick={() => {
+              {/*    onClick={() => {*/}
-                    dispatch(modalToggle("addSubtask"));
+              {/*      dispatch(modalToggle("addSubtask"));*/}
-                    setAddSubtask(true);
+              {/*      setAddSubtask(true);*/}
-                  }}
+              {/*    }}*/}
-                  styles={"button-green-add"}
+              {/*  >*/}
-                >
+              {/*    <img src={plus}></img>*/}
-                  <img src={plus}></img>
+              {/*    Добавить под задачу*/}
-                  Добавить под задачу
+              {/*  </button>*/}
-                </BaseButton>
+              {/*</p>*/}
-              </p>
               <p className="file">
-                <BaseButton styles={"button-add-file"}>
+                <button className="button-add-file">
                   <img src={file}></img>
                   Загрузить файл
-                </BaseButton>
+                </button>
                 <span>{0}</span>
                 Файлов
               </p>
@@ -426,12 +452,12 @@ export const ModalTiсket = ({
               </div>
             ) : (
               <div className="add-worker moreItems ">
-                <BaseButton
+                <button
+                  className="button-add-worker"
                   onClick={() => setDropListOpen(true)}
-                  styles={"button-add-worker"}
                 >
                   +
-                </BaseButton>
+                </button>
                 <span>Добавить исполнителя</span>
                 {dropListOpen && (
                   <div className="dropdownList">
@@ -440,7 +466,7 @@ export const ModalTiсket = ({
                       className="dropdownList__close"
                       onClick={() => setDropListOpen(false)}
                     />
-                    {projectUsers.map((person) => {
+                    {correctProjectUsers.map((person) => {
                       return (
                         <div
                           className="dropdownList__person"
@@ -479,12 +505,12 @@ export const ModalTiсket = ({
             )}
 
             <div className="add-worker moreItems">
-              <BaseButton
+              <button
+                className="button-add-worker"
                 onClick={() => setDropListMembersOpen(true)}
-                styles={"button-add-worker"}
               >
                 +
-              </BaseButton>
+              </button>
               <span>Добавить участников</span>
               {dropListMembersOpen && (
                 <div className="dropdownList">
@@ -526,19 +552,27 @@ export const ModalTiсket = ({
             </div>
 
             {timerStart ? (
-              <button className="stop" onClick={() => stopTaskTimer()}>
+              <button
+                className={
+                  executorId === Number(localStorage.getItem("id"))
+                    ? "stop"
+                    : "stop disable"
+                }
+                onClick={() => stopTaskTimer()}
+              >
                 Остановить
               </button>
             ) : (
               <button
                 className={
-                  task.executor_id === Number(localStorage.getItem("id"))
+                  executorId === Number(localStorage.getItem("id"))
                     ? "start"
                     : "start disable"
                 }
                 onClick={() => startTaskTimer()}
               >
-                Начать делать <img src={arrow}></img>
+                Начать делать
+                <img src={arrow}></img>
               </button>
             )}
           </div>

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

@@ -277,6 +277,16 @@
         margin: 10px 0 20px 0;
         max-width: 330px;
       }
+
+      textarea {
+        height: 100px;
+        outline: none;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 140%;
+        color: #252c32;
+        resize: none;
+      }
     }
 
     &__communication {
@@ -304,7 +314,7 @@
 
       .file {
         justify-content: space-between;
-        margin-left: 20px;
+        margin-left: 7px;
 
         .button-add-file {
           display: flex;
@@ -437,11 +447,16 @@
       }
 
       .button-add-worker {
+        cursor: pointer;
+        background: #8bcc60;
+        border-radius: 44px;
         width: 33px;
         height: 33px;
         display: flex;
         justify-content: center;
         align-items: center;
+        border: none;
+        color: white;
         font-size: 17px;
       }
     }

src/components/Modal/TrackerModal/trackerModal.scss

@@ -0,0 +1,172 @@
+.modal-add {
+  z-index: 9;
+  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;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 24px;
+
+    padding: 60px 60px 30px 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .title-project {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .input-container {
+      width: 287px;
+      height: 35px;
+      background: #ffffff;
+      border-radius: 8px;
+      margin: 12px 0;
+
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
+    }
+
+    h4 {
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 26px;
+      color: #263238 !important;
+    }
+
+    &__decs {
+      font-weight: 300;
+      font-size: 12px;
+      line-height: 14px;
+      margin: 12px 0 16px 0;
+    }
+
+    &__textarea {
+      resize: none;
+      width: 302px;
+      height: 83px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: none;
+      font-size: 15px;
+      line-height: 18px;
+    }
+
+    .select__worker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px;
+      background: white;
+      border-radius: 5px;
+      cursor: pointer;
+      width: 100%;
+      position: relative;
+      margin-bottom: 10px;
+
+      p {
+        max-width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+      }
+
+      img {
+        transition: all 0.3s ease;
+        width: 16px;
+        height: 16px;
+      }
+
+      &__dropDown {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        width: 100%;
+        padding: 5px;
+        top: 35px;
+        left: 0;
+        background: white;
+        border-radius: 5px;
+        row-gap: 5px;
+
+        .worker {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+
+    .open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .name-project {
+    margin-left: 10px;
+    border: none;
+    outline: none;
+    height: 100%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  .button-add {
+    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;
+    margin: 0 auto;
+  }
+}
+
+.modal-add.active {
+  transform: scale(1);
+}
+
+.exit {
+  cursor: pointer;
+  position: absolute;
+  top: 35px;
+  right: 40px;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 2px;
+    background: #263238;
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+}

src/pages/Tracker/tracker.scss

@@ -359,7 +359,7 @@
               &__items {
                 display: flex;
                 flex-wrap: wrap;
-                row-gap: 60px;
+                row-gap: 10px;
                 column-gap: 35px;
                 margin-bottom: 38px;
               }